/* =========================================================
   HONFLEUR INSIDER
   INSPIRATIONS
   Charte visuelle alignée sur Promenades
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.rdh-inspirations-page {
  width:100%;
  max-width:1000px;

  margin:0 auto;
  padding:20px 16px 130px;

  box-sizing:border-box;
}


/* =========================================================
   EN-TETE
   ========================================================= */

.rdh-inspirations-hero {
  display:flex;
  align-items:flex-start;

  gap:14px;

  width:100%;

  margin:0;
  padding:8px 2px 20px;

  box-sizing:border-box;
}


/*
 * Même flèche que Promenades.
 */

.rdh-inspirations-close {
  flex:0 0 46px !important;

  width:46px !important;
  height:46px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:15px !important;

  background:#ffffff !important;
  color:#10235a !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;

  box-shadow:
    0 8px 24px rgba(16,35,90,.07) !important;
}


.rdh-inspirations-close svg {
  width:22px !important;
  height:22px !important;

  fill:none !important;
  stroke:currentColor !important;

  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}


.rdh-inspirations-hero-content {
  min-width:0;
}


.rdh-inspirations-hero-content h1 {
  margin:0;

  color:#10235a;

  font-size:32px;
  line-height:1.08;
  font-weight:800;
}


.rdh-inspirations-hero-content p {
  margin:7px 0 0;

  color:#7783a4;

  font-size:16px;
  line-height:1.35;
}


/* =========================================================
   CATALOGUE
   ========================================================= */

.rdh-inspirations-choices {
  display:flex;
  flex-direction:column;

  gap:16px;

  width:100%;

  margin:0;
  padding:0;
}


.rdh-inspiration-choice {
  display:grid;

  grid-template-columns:
    190px
    minmax(0,1fr);

  gap:24px;

  width:100%;

  margin:0;
  padding:18px;

  border:0;
  border-radius:26px;

  background:#ffffff;

  box-sizing:border-box;

  box-shadow:
    0 10px 30px rgba(16,35,90,.07);

  cursor:pointer;
}


/* =========================================================
   PHOTO
   ========================================================= */

.rdh-inspiration-choice-media {
  width:190px;
  height:190px;

  min-width:190px;

  margin:0;

  overflow:hidden;

  border-radius:20px;

  background:#eef2f6;

  box-shadow:
    0 5px 16px rgba(16,35,90,.10);
}


.rdh-inspiration-choice-media img {
  display:block;

  width:100%;
  height:100%;

  margin:0;
  padding:0;

  object-fit:cover;
  object-position:center;
}


/* =========================================================
   CONTENU DE LA CARTE
   ========================================================= */

.rdh-inspiration-choice-body {
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  padding:4px 0 0;
}


.rdh-inspiration-choice-body h2 {
  margin:0;

  color:#10235a;

  font-size:26px;
  line-height:1.15;
  font-weight:800;
}


.rdh-inspiration-choice-meta {
  margin-top:7px;

  color:#7b87a8;

  font-size:14px;
  line-height:1.3;
}


.rdh-inspiration-choice-text {
  margin:24px 0 0;

  color:#657394;

  font-size:16px;
  line-height:1.5;
}


.rdh-inspiration-open {
  display:inline-flex;

  align-items:center;
  justify-content:center;

  margin-top:24px;

  min-height:44px;

  padding:0 18px;

  border:0;
  border-radius:15px;

  background:#edf2ff;
  color:#10235a;

  font:inherit;
  font-size:14px;
  font-weight:750;

  cursor:pointer;
}


/* =========================================================
   DETAIL
   ========================================================= */

.rdh-inspiration-detail[hidden],
.rdh-inspirations-choices[hidden] {
  display:none !important;
}


.rdh-inspiration-detail {
  width:100%;
}


.rdh-inspiration-detail-head {
  margin:0 2px 16px;
}


.rdh-inspiration-detail-head h2 {
  margin:0;

  color:#10235a;

  font-size:26px;
  line-height:1.1;
  font-weight:800;
}


.rdh-inspiration-detail-head p {
  margin:5px 0 0;

  color:#7783a4;

  font-size:13px;
  line-height:1.35;
}


/* =========================================================
   CARTE LEAFLET
   ========================================================= */

.rdh-inspiration-map-wrap {
  position:relative;

  width:100%;

  overflow:hidden;

  border-radius:26px;

  background:#ffffff;

  box-shadow:
    0 10px 30px rgba(16,35,90,.07);
}


.rdh-inspiration-map {
  width:100%;
  height:430px;

  z-index:1;
}


.rdh-inspiration-locate {
  position:absolute;

  z-index:800;

  left:14px;
  bottom:14px;

  min-height:46px;

  padding:0 18px;

  border:0;
  border-radius:15px;

  background:#ffffff;
  color:#10235a;

  font:inherit;
  font-size:14px;
  font-weight:750;

  cursor:pointer;

  box-shadow:
    0 8px 24px rgba(16,35,90,.10);
}


/* =========================================================
   LISTE DES LIEUX
   ========================================================= */

.rdh-inspiration-list {
  display:flex;
  flex-direction:column;

  gap:12px;

  margin-top:16px;
}


.rdh-inspiration-item {
  display:grid;

  grid-template-columns:
    58px
    minmax(0,1fr)
    auto;

  gap:14px;

  align-items:center;

  width:100%;

  padding:16px;

  border-radius:24px;

  background:#ffffff;

  box-sizing:border-box;

  box-shadow:
    0 8px 24px rgba(16,35,90,.06);
}


.rdh-inspiration-num {
  display:flex;

  align-items:center;
  justify-content:center;

  width:58px;
  height:58px;

  border-radius:17px;

  background:#eef2f8;
  color:#10235a;

  font-size:20px;
  font-weight:800;
}


.rdh-inspiration-main {
  min-width:0;
}


.rdh-inspiration-main h3 {
  margin:0;

  color:#10235a;

  font-size:18px;
  line-height:1.25;
  font-weight:800;
}


.rdh-inspiration-address {
  margin-top:5px;

  color:#7783a4;

  font-size:13px;
  line-height:1.35;
}


.rdh-inspiration-phone {
  margin-top:7px;

  color:#10235a;

  font-size:14px;
  line-height:1.2;
  font-weight:800;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.rdh-inspiration-actions {
  display:flex;
  flex-direction:column;

  gap:7px;
}


.rdh-inspiration-call,
.rdh-inspiration-guide {
  display:flex;

  align-items:center;
  justify-content:center;

  min-width:92px;
  min-height:38px;

  padding:0 12px;

  border:0;
  border-radius:13px;

  box-sizing:border-box;

  font:inherit;
  font-size:11px;
  line-height:1;
  font-weight:850;

  text-decoration:none;
  white-space:nowrap;

  cursor:pointer;
}


.rdh-inspiration-call {
  background:#eef3f8;
  color:#10235a;
}


.rdh-inspiration-guide {
  background:#10235a;
  color:#ffffff;
}


/* =========================================================
   MARQUEURS
   ========================================================= */

.rdh-inspiration-marker {
  display:flex;

  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  border:3px solid #ffffff;
  border-radius:50%;

  background:#10235a;
  color:#ffffff;

  box-sizing:border-box;

  box-shadow:
    0 3px 10px rgba(0,0,0,.20);

  font-size:15px;
  font-weight:800;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

  .rdh-inspirations-page {
    padding:
      20px
      14px
      120px;
  }


  .rdh-inspirations-hero {
    gap:10px;

    padding-bottom:16px;
  }


  .rdh-inspirations-close {
    flex-basis:42px !important;

    width:42px !important;
    height:42px !important;

    border-radius:14px !important;
  }


  .rdh-inspirations-hero-content h1 {
    font-size:28px;
  }


  .rdh-inspirations-hero-content p {
    font-size:14px;
  }


  /*
   * Comme Promenades :
   * la photo reste à gauche sur mobile.
   */

  .rdh-inspiration-choice {
    grid-template-columns:
      110px
      minmax(0,1fr);

    gap:14px;

    padding:15px;

    border-radius:24px;
  }


  .rdh-inspiration-choice-media {
    width:110px;
    min-width:110px;
    height:110px;

    border-radius:16px;
  }


  .rdh-inspiration-choice-body {
    padding-top:1px;
  }


  .rdh-inspiration-choice-body h2 {
    font-size:20px;
  }


  .rdh-inspiration-choice-meta {
    margin-top:5px;

    font-size:13px;
  }


  .rdh-inspiration-choice-text {
    margin-top:12px;

    font-size:13px;
    line-height:1.4;
  }


  .rdh-inspiration-open {
    margin-top:14px;

    min-height:38px;

    padding:0 13px;

    border-radius:13px;

    font-size:12px;
  }


  .rdh-inspiration-map {
    height:360px;
  }


  .rdh-inspiration-item {
    grid-template-columns:
      52px
      minmax(0,1fr);

    gap:12px;

    padding:14px;
  }


  .rdh-inspiration-num {
    width:52px;
    height:52px;

    border-radius:15px;

    font-size:18px;
  }


  .rdh-inspiration-actions {
    grid-column:1 / -1;

    flex-direction:row;

    justify-content:flex-end;
  }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width:390px) {

  .rdh-inspiration-choice {
    grid-template-columns:
      92px
      minmax(0,1fr);

    gap:11px;
  }


  .rdh-inspiration-choice-media {
    width:92px;
    min-width:92px;
    height:92px;
  }


  .rdh-inspiration-choice-body h2 {
    font-size:18px;
  }


  .rdh-inspiration-choice-text {
    font-size:12px;
  }

}