/* =========================================================
   LES SUITES DU SENTIER — feuille de style
   Palette inspirée des intérieurs : chêne, noyer, terrazzo,
   laiton, velours olive.
   ========================================================= */

:root{
  --encre:      #1C1712;   /* brun-noir, texte et fonds sombres */
  --noyer:      #4B3A2A;   /* brun bois */
  --laiton:     #A8813F;   /* accent métal */
  --lin:        #E9E2D6;   /* fond principal chaud */
  --craie:      #FBF8F3;   /* fond clair */
  --olive:      #6E6E42;   /* rappel velours */
  --gris-doux:  #8A7F70;   /* texte secondaire */

  --ff-display: "Fraunces", Georgia, serif;
  --ff-corps:   "Karla", -apple-system, BlinkMacSystemFont, sans-serif;

  --marge: clamp(1.25rem, 5vw, 5rem);
  --max: 1280px;
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--craie);
  color:var(--encre);
  font-family:var(--ff-corps);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0;
}

p{ margin:0 0 1.1em; }

::selection{ background:var(--laiton); color:var(--craie); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--encre); color:var(--craie); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--laiton);
  outline-offset:3px;
}

/* ---------- Éléments récurrents ---------- */

.eyebrow{
  font-family:var(--ff-corps);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--laiton);
  margin:0 0 1.1rem;
}
.eyebrow--clair{ color:#D9BE8A; }

.titre-section{
  font-size:clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  margin:0 0 1.4rem;
}
.titre-section em{
  font-style:italic;
  font-variation-settings:"SOFT" 40, "WONK" 1;
}

.lien-fleche{
  display:inline-block;
  margin-top:.4rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--encre);
  border-bottom:1px solid var(--laiton);
  padding-bottom:.35rem;
  transition:color .25s, border-color .25s;
}
.lien-fleche::after{
  content:"→";
  display:inline-block;
  margin-left:.55em;
  transition:transform .25s;
}
.lien-fleche:hover{ color:var(--laiton); }
.lien-fleche:hover::after{ transform:translateX(4px); }

.btn{
  display:inline-block;
  font-family:var(--ff-corps);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  padding:.95rem 1.7rem;
  border:1px solid var(--encre);
  border-radius:var(--r);
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.btn--plein{
  background:var(--encre);
  color:var(--craie);
  border-color:var(--encre);
}
.btn--plein:hover{ background:var(--noyer); border-color:var(--noyer); }
.btn--fin{
  background:transparent;
  color:var(--craie);
  border-color:rgba(251,248,243,.55);
  padding:.7rem 1.4rem;
}
.btn--fin:hover{ background:var(--craie); color:var(--encre); border-color:var(--craie); }
.btn--grand{ padding:1.15rem 2.4rem; font-size:.85rem; }

/* Signature : « la trame » — fils de chaîne du Sentier */
.trame{
  height:14px;
  margin-bottom:clamp(3rem, 6vw, 5rem);
  background-image:repeating-linear-gradient(
    to right,
    var(--laiton) 0 1px,
    transparent 1px 9px
  );
  opacity:.5;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- En-tête ---------- */

.entete{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.entete__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1.1rem var(--marge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.marque{
  text-decoration:none;
  color:var(--craie);
  line-height:1;
  display:block;
  transition:color .35s;
}
.marque__ligne1,.marque__ligne2{
  display:block;
  font-family:var(--ff-display);
  margin:0;
}
.marque__ligne1{ font-size:.95rem; letter-spacing:.02em; }
.marque__ligne2{
  font-size:1.35rem;
  font-style:italic;
  font-variation-settings:"SOFT" 40, "WONK" 1;
  margin-top:.1rem;
}

.nav{ display:flex; gap:2rem; }
.nav a{
  color:var(--craie);
  text-decoration:none;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:.25rem;
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.nav a:hover{ border-color:currentColor; }

.entete__actions{ display:flex; align-items:center; gap:1rem; }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.burger span{
  display:block; width:22px; height:1.5px;
  background:var(--craie);
  transition:transform .3s, opacity .3s, background .35s;
}

/* En-tête après scroll */
.entete.est-fixe{
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(28,23,18,.12);
}
.entete.est-fixe .marque,
.entete.est-fixe .nav a{ color:var(--encre); }
.entete.est-fixe .btn--fin{ color:var(--encre); border-color:rgba(28,23,18,.4); }
.entete.est-fixe .btn--fin:hover{ background:var(--encre); color:var(--craie); }
.entete.est-fixe .burger span{ background:var(--encre); }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:9rem var(--marge) 0;
}
/* Le média est clippé dans son propre conteneur pour que le panneau
   « voyageurs » puisse déborder du hero sans être coupé. */
.hero__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.hero__img{
  width:100%; height:100%;
  object-fit:cover;
  animation:zoomLent 18s ease-out forwards;
}
@keyframes zoomLent{
  from{ transform:scale(1.06); }
  to{ transform:scale(1); }
}
.hero__voile{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(28,23,18,.52) 0%,
    rgba(28,23,18,.18) 38%,
    rgba(28,23,18,.62) 100%
  );
}
.hero__contenu{
  position:relative; z-index:2;
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  color:var(--craie);
  padding-bottom:clamp(2rem, 5vw, 3.5rem);
  animation:monte .9s .15s ease-out both;
}
.hero__titre{
  font-size:clamp(2.6rem, 1.4rem + 5.4vw, 6rem);
  color:var(--craie);
  margin:0 0 1.4rem;
  max-width:16ch;
}
.hero__titre em{
  font-style:italic;
  font-variation-settings:"SOFT" 50, "WONK" 1;
  color:#EBDCC2;
}
.hero__sous{
  max-width:46ch;
  font-size:1.05rem;
  color:rgba(251,248,243,.9);
  margin:0;
}
@keyframes monte{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Barre de recherche ---------- */

.recherche{
  position:relative; z-index:3;
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding-bottom:clamp(2rem, 5vw, 3.5rem);
  animation:monte .9s .35s ease-out both;
}
.recherche__form{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr auto;
  gap:0;
  background:var(--craie);
  border:1px solid rgba(28,23,18,.14);
  border-radius:var(--r);
  box-shadow:0 24px 60px -28px rgba(28,23,18,.6);
  overflow:visible;
}
.champ{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:1rem 1.4rem;
  border-right:1px solid rgba(28,23,18,.12);
  min-width:0;
}
.champ label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--laiton);
}
.champ input[type="date"]{
  font-family:var(--ff-corps);
  font-size:.95rem;
  color:var(--encre);
  background:none;
  border:0;
  padding:0;
  width:100%;
  cursor:pointer;
}
.champ input[type="date"]:focus{ outline:none; }
.champ:focus-within{ background:rgba(168,129,63,.06); }

.voyageurs__toggle{
  font-family:var(--ff-corps);
  font-size:.95rem;
  color:var(--encre);
  background:none; border:0; padding:0;
  text-align:left;
  cursor:pointer;
  width:100%;
}
.voyageurs__toggle:focus{ outline:none; }

.voyageurs__panneau{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:290px;
  background:var(--craie);
  border:1px solid rgba(28,23,18,.14);
  border-radius:var(--r);
  box-shadow:0 24px 50px -22px rgba(28,23,18,.5);
  padding:1.1rem 1.3rem 1.3rem;
  z-index:20;
}
.voyageurs__panneau[hidden]{ display:none; }

.compteur{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(28,23,18,.1);
}
.compteur__titre{ margin:0; font-size:.95rem; font-weight:500; }
.compteur__note{ margin:0; font-size:.78rem; color:var(--gris-doux); }
.compteur__ctrl{ display:flex; align-items:center; gap:.45rem; }
.compteur__ctrl button{
  width:30px; height:30px;
  border:1px solid rgba(28,23,18,.3);
  border-radius:50%;
  background:none;
  color:var(--encre);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, opacity .2s;
}
.compteur__ctrl button:hover:not(:disabled){
  background:var(--encre); color:var(--craie); border-color:var(--encre);
}
.compteur__ctrl button:disabled{ opacity:.3; cursor:not-allowed; }
.compteur__ctrl output{
  min-width:1.6rem; text-align:center;
  font-size:.95rem; font-variant-numeric:tabular-nums;
}

.voyageurs__ok{
  margin-top:1rem;
  width:100%;
  font-family:var(--ff-corps);
  font-size:.75rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem;
  background:var(--encre); color:var(--craie);
  border:0; border-radius:var(--r);
  cursor:pointer;
}

.recherche__submit{
  border:0;
  border-radius:0;
  padding-inline:2rem;
  font-size:.78rem;
}
.recherche__erreur[hidden]{ display:none; }
.recherche__erreur{
  margin:.75rem 0 0;
  font-size:.85rem;
  color:#FBF8F3;
  background:rgba(140,45,35,.9);
  display:inline-block;
  padding:.4rem .8rem;
  border-radius:var(--r);
}
.recherche__note{
  margin:.9rem 0 0;
  font-size:.8rem;
  letter-spacing:.06em;
  color:rgba(251,248,243,.75);
}

/* ---------- Sections génériques ---------- */

.section{
  padding:clamp(4rem, 9vw, 7.5rem) var(--marge);
}
.section--lin{ background:var(--lin); }
.section--sombre{ background:var(--encre); color:var(--craie); }
.section > .trame{ max-width:var(--max); margin-inline:auto; }

.section__tete{
  max-width:var(--max);
  margin:0 auto clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Intro ---------- */

.intro__grille{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
}
.intro__texte p{ max-width:52ch; color:#3A3129; }
.intro__image{ margin:0; }
.intro__image img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:var(--r);
}

/* ---------- Suites ---------- */

.suites{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.suite{ display:flex; flex-direction:column; }
.suite__img{
  overflow:hidden;
  border-radius:var(--r);
  margin-bottom:1.4rem;
}
.suite__img img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.suite:hover .suite__img img{ transform:scale(1.045); }
.suite__corps h3{
  font-size:1.5rem;
  margin-bottom:.5rem;
}
.suite__meta{
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--laiton);
  margin-bottom:.9rem;
}
.suite__corps p:not(.suite__meta){
  color:#3A3129;
  font-size:.98rem;
  margin-bottom:1rem;
}

/* ---------- Galerie ---------- */

.galerie{
  background:var(--encre);
  padding:clamp(2.5rem, 5vw, 4rem) 0;
  overflow:hidden;
}
.galerie__piste{
  display:flex;
  gap:1rem;
  padding-inline:var(--marge);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--noyer) transparent;
  -webkit-overflow-scrolling:touch;
}
.galerie__piste::-webkit-scrollbar{ height:4px; }
.galerie__piste::-webkit-scrollbar-thumb{ background:var(--noyer); }
.galerie figure{
  margin:0;
  flex:0 0 auto;
  scroll-snap-align:start;
}
.galerie figure img{
  height:clamp(220px, 34vw, 420px);
  width:auto;
  object-fit:cover;
  border-radius:var(--r);
}

/* ---------- Services ---------- */

.services{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
}
.services__titre{
  font-size:1.35rem;
  padding-bottom:.9rem;
  margin-bottom:1.4rem;
  border-bottom:1px solid rgba(168,129,63,.4);
}
.liste-trame{ list-style:none; margin:0; padding:0; }
.liste-trame li{
  padding:.85rem 0 .85rem 1.6rem;
  border-bottom:1px solid rgba(28,23,18,.09);
  position:relative;
  font-size:.98rem;
}
.liste-trame li::before{
  content:"";
  position:absolute;
  left:0; top:1.45rem;
  width:8px; height:1px;
  background:var(--laiton);
}
.liste-trame span{
  display:block;
  font-size:.85rem;
  color:var(--gris-doux);
  margin-top:.15rem;
}

/* ---------- Quartier ---------- */

.quartier__grille{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
}
.quartier__image{ margin:0; }
.quartier__image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r);
}
.quartier__texte p{ color:rgba(251,248,243,.82); max-width:50ch; }

.distances{ list-style:none; margin:2rem 0 0; padding:0; }
.distances li{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(251,248,243,.14);
  font-size:.98rem;
}
.distances li span{
  flex:0 0 4.5rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--laiton);
  font-variant-numeric:tabular-nums;
}
.distances li em{
  font-style:normal;
  color:rgba(251,248,243,.55);
  font-size:.85rem;
}

/* ---------- Rappel réservation ---------- */

.rappel{
  background:var(--lin);
  padding:clamp(4rem, 8vw, 6.5rem) var(--marge);
  text-align:center;
}
.rappel__inner{ max-width:44rem; margin:0 auto; }
.rappel p{ color:#3A3129; margin-bottom:2rem; }

/* ---------- Contact ---------- */

.contact__grille{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
}
.contact__grille p{ color:#3A3129; max-width:48ch; }
.contact__infos{ align-self:start; }
.contact__ligne{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid rgba(28,23,18,.1);
  margin:0;
  color:var(--encre);
}
.contact__ligne span{
  flex:0 0 7rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laiton);
}
.contact__ligne a{
  text-decoration:none;
  border-bottom:1px solid rgba(28,23,18,.25);
  padding-bottom:1px;
  transition:border-color .25s;
}
.contact__ligne a:hover{ border-color:var(--laiton); }

/* ---------- Pied de page ---------- */

.pied{
  background:var(--encre);
  color:var(--craie);
  padding:clamp(3rem, 6vw, 5rem) var(--marge) 2rem;
}
.pied__inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(251,248,243,.15);
}
.pied__marque .marque__ligne1{ font-size:1.15rem; }
.pied__marque .marque__ligne2{ font-size:1.7rem; }
.pied__baseline{
  margin-top:.9rem;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--laiton);
}
.pied__nav{ display:flex; flex-direction:column; gap:.7rem; }
.pied__nav a{
  color:rgba(251,248,243,.78);
  text-decoration:none;
  font-size:.9rem;
  transition:color .25s;
}
.pied__nav a:hover{ color:var(--craie); }
.pied__bas{
  max-width:var(--max);
  margin:1.75rem auto 0;
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(251,248,243,.5);
}

/* ---------- Révélation au scroll ---------- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease-out, transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.est-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1000px){
  .suites{ grid-template-columns:repeat(2, 1fr); }
  .pied__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .recherche__form{ grid-template-columns:1fr 1fr; }
  .champ--voyageurs{ grid-column:1 / -1; border-right:0; border-top:1px solid rgba(28,23,18,.12); }
  .champ:nth-of-type(2){ border-right:0; }
  .recherche__submit{ grid-column:1 / -1; padding-block:1.1rem; }
  .voyageurs__panneau{ left:0; right:0; min-width:0; }
}

@media (max-width:768px){
  .nav{
    position:fixed;
    inset:0;
    background:var(--encre);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.2rem;
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.6,0,.2,1);
    z-index:99;
  }
  .nav.est-ouvert{ transform:none; }
  .nav a{ color:var(--craie) !important; font-size:1.15rem; }
  .burger{ display:flex; z-index:101; position:relative; }
  .entete.menu-ouvert .burger span{ background:var(--craie); }
  .entete.menu-ouvert .burger span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .entete.menu-ouvert .burger span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
  .entete__actions .btn--fin{ display:none; }

  .intro__grille,
  .services,
  .quartier__grille,
  .contact__grille{ grid-template-columns:1fr; }
  .quartier__image{ order:-1; }
  .suites{ grid-template-columns:1fr; }
  .pied__inner{ grid-template-columns:1fr; gap:2rem; }
  .hero{ padding-top:7rem; }
  .contact__ligne span{ flex-basis:100%; }
}

@media (max-width:520px){
  .recherche__form{ grid-template-columns:1fr; }
  .champ{ border-right:0; border-bottom:1px solid rgba(28,23,18,.12); }
  .champ--voyageurs{ border-top:0; }
  .distances li span{ flex-basis:3.8rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Retouches finales ---------- */

/* L'exposant « 2e » ne doit pas passer en capitale dans les eyebrows */
.eyebrow sup,
.pied__baseline sup{ text-transform:none; }

/* Cadrage du hero sur écran étroit : on garde la partie vivante de la photo */
@media (max-width:768px){
  .hero__img{ object-position:68% center; }
}

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

/* ---------- Bandeau de tête ---------- */

.bandeau{
  position:relative;
  min-height:clamp(20rem, 42vh, 30rem);
  display:flex;
  align-items:flex-end;
  padding:clamp(3rem, 8vw, 6rem) var(--marge);
  overflow:hidden;
}
.bandeau__media{ position:absolute; inset:0; }
.bandeau__img{ width:100%; height:100%; object-fit:cover; }
.bandeau__voile{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,23,18,.15) 0%, rgba(28,23,18,.72) 100%);
}
.bandeau__contenu{
  position:relative;
  max-width:var(--max);
  margin-inline:auto;
  width:100%;
  color:var(--craie);
}

/* ---------- Accroche ---------- */

.accroche{ max-width:var(--max); margin:0 auto; }
.accroche p{ max-width:56ch; color:#3A3129; font-size:1.05rem; }
.accroche .titre-section{ margin-bottom:1.6rem; }

/* Accroche en deux colonnes : texte à gauche, carte à droite */
.accroche--carte{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.accroche--carte p{ max-width:44ch; }
.accroche__carte{ margin:0; }
.accroche__carte img{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}
.accroche__carte figcaption{
  margin-top:.9rem;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris-doux);
  text-align:center;
}

/* ---------- Trois rayons ---------- */

.rayons{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem, 4vw, 3.5rem);
}
.rayon{ border-top:1px solid rgba(28,23,18,.18); padding-top:1.5rem; }
.rayon__photo{ margin:0 0 1.5rem; overflow:hidden; }
.rayon__photo img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.rayon:hover .rayon__photo img{ transform:scale(1.03); }
.rayon__temps{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--laiton);
  margin-bottom:.7rem;
}
.rayon h3{ font-size:1.45rem; margin-bottom:.8rem; }
.rayon p{ color:#3A3129; font-size:.98rem; margin:0; }

/* ---------- Bloc distances pleine largeur ---------- */

.distances__bloc{ max-width:var(--max); margin:0 auto; }
.distances--large{
  columns:2;
  column-gap:clamp(2rem, 6vw, 5rem);
  max-width:62rem;
}
.distances--large li{ break-inside:avoid; }

/* ---------- Photo pleine largeur ---------- */

.pleine-largeur{ margin:0; }
.pleine-largeur img{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
}

@media (max-width: 980px){
  .accroche--carte{ grid-template-columns:1fr; gap:2.6rem; }
  .accroche--carte p{ max-width:56ch; }
  .accroche__carte{ margin-inline:calc(var(--marge) * -0.5); }
}

@media (max-width: 880px){
  .rayons{ grid-template-columns:1fr; }
  .rayon__photo img{ aspect-ratio:4/3; }
  .distances--large{ columns:1; }
  .pleine-largeur img{ aspect-ratio:4/3; }
}

/* =========================================================
   PAGE « LES SUITES » — rangées défilantes et fiche modale
   ========================================================= */

.categorie{
  padding:clamp(3.5rem, 7vw, 6rem) 0;
}
.categorie + .categorie{ border-top:1px solid rgba(28,23,18,.10); }

.categorie__tete{
  max-width:var(--max);
  margin:0 auto clamp(2rem, 4vw, 3rem);
  padding-inline:var(--marge);
}
.categorie__tete .titre-section{ margin-bottom:.9rem; }
.categorie__resume{
  margin:0;
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--gris-doux);
}
.categorie__resume sup{ font-size:.7em; }

/* ---------- Rangée défilante ---------- */

.rail{
  list-style:none;
  margin:0;
  padding:0 var(--marge) 1.25rem;
  display:flex;
  gap:clamp(1rem, 2vw, 1.75rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--noyer) transparent;
}
.rail::-webkit-scrollbar{ height:4px; }
.rail::-webkit-scrollbar-thumb{ background:var(--noyer); }

.rail--deux,
.rail--une{
  max-width:var(--max);
  margin-inline:auto;
  overflow-x:visible;
}
.rail--deux .fiche{ flex:1 1 0; max-width:none; }
.rail--une  .fiche{ flex:0 1 min(560px, 100%); }

.fiche{
  flex:0 0 clamp(240px, 30vw, 320px);
  scroll-snap-align:start;
}

.fiche__ouvre{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

.fiche__img{
  display:block;
  overflow:hidden;
  background:var(--lin);
  aspect-ratio:4/5;
  margin-bottom:1.1rem;
}
.rail--deux .fiche__img,
.rail--une  .fiche__img{ aspect-ratio:3/2; }

.fiche__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.fiche__ouvre:hover .fiche__img img,
.fiche__ouvre:focus-visible .fiche__img img{ transform:scale(1.045); }

.fiche__nom{
  display:block;
  font-family:var(--ff-display);
  font-size:1.35rem;
  line-height:1.15;
  letter-spacing:-.015em;
}
.fiche__meta{
  display:block;
  margin-top:.35rem;
  font-size:.82rem;
  color:var(--gris-doux);
}
.fiche__meta sup{ font-size:.7em; }

.fiche__cta{
  display:inline-block;
  margin-top:.9rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre);
  border-bottom:1px solid var(--laiton);
  padding-bottom:.3rem;
  transition:color .25s;
}
.fiche__ouvre:hover .fiche__cta{ color:var(--laiton); }

.fiche__detail{ display:none; }

/* ---------- Fenêtre de détail ---------- */

.modale[hidden]{ display:none; }
.modale{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem, 3vw, 2.5rem);
}
.modale__fond{
  position:absolute; inset:0;
  background:rgba(28,23,18,.62);
  animation:voileEntre .3s ease both;
}
@keyframes voileEntre{ from{ opacity:0; } to{ opacity:1; } }

.modale__boite{
  position:relative;
  width:min(920px, 100%);
  max-height:100%;
  overflow-y:auto;
  background:var(--craie);
  animation:boiteEntre .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes boiteEntre{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

.modale__fermer{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  width:2.6rem; height:2.6rem;
  display:grid; place-items:center;
  border:0; cursor:pointer;
  background:var(--craie);
  color:var(--encre);
  font-size:1.7rem; line-height:1;
  transition:background .25s, color .25s;
}
.modale__fermer:hover{ background:var(--encre); color:var(--craie); }

.modale__galerie{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--noyer) transparent;
  background:var(--lin);
}
.modale__galerie::-webkit-scrollbar{ height:4px; }
.modale__galerie::-webkit-scrollbar-thumb{ background:var(--noyer); }
.modale__galerie img{
  flex:0 0 auto;
  height:clamp(220px, 42vh, 420px);
  width:auto;
  object-fit:cover;
  scroll-snap-align:center;
}

.modale__texte{ padding:clamp(1.5rem, 4vw, 2.75rem); }
.modale__texte h3{
  font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  margin-bottom:.6rem;
}
.modale__texte p{ color:#3A3129; max-width:60ch; }
.fiche__specs{
  font-size:.88rem;
  letter-spacing:.04em;
  color:var(--gris-doux);
  margin-bottom:1.6rem;
}
.fiche__specs sup{ font-size:.7em; }
.modale__texte .liste-trame{ margin-top:1.8rem; }

.modale__pied{
  padding:0 clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
}

body.modale-ouverte{ overflow:hidden; }

@media (max-width:760px){
  .rail--deux{ flex-direction:column; }
  .modale__boite{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .modale__fond,
  .modale__boite{ animation:none; }
  .fiche__img img{ transition:none; }
}

/* ---------- Carrousel à points (couvertures) ---------- */

.carrousel{ position:relative; }

.carrousel__piste{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r);
  background:var(--lin);
}
.carrousel__piste::-webkit-scrollbar{ display:none; }

.carrousel__vue{
  flex:0 0 100%;
  scroll-snap-align:start;
  margin:0;
}
.carrousel__vue img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.carrousel__points{
  position:absolute;
  left:0; right:0;
  bottom:.85rem;
  display:flex;
  justify-content:center;
  gap:.45rem;
  z-index:2;
}
.carrousel__point{
  width:7px; height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(251,248,243,.55);
  box-shadow:0 1px 3px rgba(28,23,18,.35);
  cursor:pointer;
  transition:background .25s, transform .25s;
}
.carrousel__point:hover{ background:rgba(251,248,243,.85); }
.carrousel__point.est-actif{
  background:var(--craie);
  transform:scale(1.35);
}
.carrousel__point:focus-visible{
  outline:2px solid var(--craie);
  outline-offset:2px;
}

/* Sur l'accueil : mêmes proportions que l'ancienne image */
.suite .carrousel{ margin-bottom:1.4rem; }

/* Sur la page des suites : la couverture au-dessus du bouton */
.fiche__media{ margin-bottom:1.1rem; }
.fiche__media .carrousel__vue img{ aspect-ratio:4/5; }
.rail--deux .fiche__media .carrousel__vue img,
.rail--une  .fiche__media .carrousel__vue img{ aspect-ratio:3/2; }

@media (prefers-reduced-motion: reduce){
  .carrousel__piste{ scroll-behavior:auto; }
  .carrousel__point{ transition:none; }
}

.carrousel__vue img[data-cadre="gauche"]{ object-position:18% center; }

/* =========================================================
   PAGE DE RÉSERVATION
   ========================================================= */

/* En-tête opaque dès le chargement (pas de photo derrière) */
.entete--opaque{
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(28,23,18,.12);
}
.entete--opaque .marque,
.entete--opaque .nav a{ color:var(--encre); }
.entete--opaque .btn--fin{ color:var(--encre); border-color:rgba(28,23,18,.4); }
.entete--opaque .btn--fin:hover{ background:var(--encre); color:var(--craie); }
.entete--opaque .burger span{ background:var(--encre); }

.resa__entete{
  background:var(--craie);
  padding:9rem var(--marge) 2.5rem;
  text-align:center;
}
.resa__inner{ max-width:44rem; margin:0 auto; }
.resa__titre{
  font-family:var(--ff-display);
  font-size:clamp(2.1rem, 5.5vw, 3.4rem);
  font-weight:300;
  line-height:1.08;
  margin:.6rem 0 0;
  color:var(--encre);
}
.resa__titre em{
  font-style:italic;
  font-variation-settings:"SOFT" 40, "WONK" 1;
  color:var(--noyer);
}
.resa__chapo{
  margin:1.1rem auto 0;
  max-width:34rem;
  color:var(--gris-doux);
  font-size:.95rem;
  line-height:1.7;
}

.resa{ background:var(--craie); padding:0 0 4rem; }
.resa__cadre{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--marge);
}
.resa__cadre iframe{
  display:block;
  width:100%;
  border:0;
  background:var(--craie);
}
.resa__repli,
.resa__aide{
  max-width:40rem;
  margin:2rem auto 0;
  padding:0 var(--marge);
  text-align:center;
  color:var(--gris-doux);
  font-size:.9rem;
  line-height:1.7;
}
.resa__aide a,
.resa__repli a{ color:var(--noyer); }

@media (max-width:700px){
  .resa__entete{ padding-top:7.5rem; }
  .resa__cadre{ padding:0; }
}

/* =========================================================
   CALENDRIER MAISON — barre de recherche de l'accueil
   ---------------------------------------------------------
   Remplace les deux champs <input type="date">, dont le
   calendrier natif du navigateur s'affiche minuscule et ne
   se met pas en forme. Deux mois côte à côte sur ordinateur,
   un seul sur téléphone.
   ========================================================= */

.date__toggle{
  font-family:var(--ff-corps);
  font-size:.95rem;
  color:var(--encre);
  background:none;
  border:0;
  padding:0;
  text-align:left;
  cursor:pointer;
  min-height:1.5rem;
}
.date__toggle::first-letter{ text-transform:uppercase; }
.date__toggle:hover{ color:var(--noyer); }
.date__toggle.est-vide{ color:var(--gris-doux); }

.calendrier{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:30;
  background:var(--craie);
  border:1px solid rgba(28,23,18,.14);
  border-radius:var(--r);
  box-shadow:0 30px 70px -26px rgba(28,23,18,.55);
  padding:1.3rem 1.5rem 1.1rem;
}
.calendrier[hidden]{ display:none; }

.calendrier__tete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  top:1.05rem; left:1.5rem; right:1.5rem;
  pointer-events:none;
}
.calendrier__fleche{
  pointer-events:auto;
  width:2rem; height:2rem;
  display:grid; place-items:center;
  font-size:1.3rem; line-height:1;
  color:var(--noyer);
  background:none;
  border:1px solid rgba(28,23,18,.14);
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.calendrier__fleche:hover{ background:var(--lin); color:var(--encre); }

.calendrier__grilles{
  display:flex;
  gap:2.4rem;
}
.cal__mois{ min-width:16.5rem; }
.cal__titre{
  margin:0 0 .9rem;
  text-align:center;
  font-family:var(--ff-display);
  font-size:1.02rem;
  font-weight:400;
  color:var(--encre);
  text-transform:capitalize;
}
.cal__jours,
.cal__grille{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.cal__jours{ margin-bottom:.35rem; }
.cal__jour{
  text-align:center;
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris-doux);
}
.cal__grille{ gap:2px; }
.cal__vide{ height:2.25rem; }

.cal__case{
  height:2.25rem;
  display:grid; place-items:center;
  font-family:var(--ff-corps);
  font-size:.88rem;
  color:var(--encre);
  background:none;
  border:0;
  border-radius:2px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.cal__case:hover{ background:var(--lin); }
.cal__case.est-passe{
  color:rgba(138,127,112,.45);
  cursor:default;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.cal__case.est-passe:hover{ background:none; }
.cal__case.est-dans{ background:var(--lin); }
.cal__case.est-arrivee,
.cal__case.est-depart{
  background:var(--noyer);
  color:var(--craie);
}
.cal__case.est-arrivee{ border-radius:2px 0 0 2px; }
.cal__case.est-depart{ border-radius:0 2px 2px 0; }

.calendrier__pied{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(28,23,18,.1);
}
.calendrier__nuits{
  margin:0;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--gris-doux);
}
.calendrier__actions{
  display:flex;
  align-items:center;
  gap:1.1rem;
}
.calendrier__lien{
  font-family:var(--ff-corps);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gris-doux);
  background:none; border:0; padding:0;
  cursor:pointer;
}
.calendrier__lien:hover{ color:var(--encre); }
.btn--mini{ padding:.55rem 1.2rem; font-size:.7rem; }

@media (max-width: 880px){
  .calendrier{
    left:50%;
    transform:translateX(-50%);
    width:min(21rem, calc(100vw - 2rem));
    padding:1.1rem 1.1rem .9rem;
  }
  .calendrier__tete{ left:1.1rem; right:1.1rem; top:1.1rem; }
  .calendrier__grilles{ gap:0; }
  .cal__mois{ min-width:0; width:100%; }
  .cal__mois:nth-child(2){ display:none; }
  .calendrier__pied{ flex-wrap:wrap; gap:.8rem; }
}

/* =========================================================
   SÉLECTEUR DE LANGUE — en-tête, à côté de « Réserver »
   ========================================================= */

.langue{ position:relative; }

.langue__btn{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .5rem;
  font-family:var(--ff-corps);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--craie);
  background:none;
  border:0;
  cursor:pointer;
  transition:opacity .25s ease, color .35s;
}
.langue__btn:hover{ opacity:.75; }
.entete.est-fixe .langue__btn,
.entete--opaque .langue__btn{ color:var(--encre); }

.drapeau{
  width:1.15rem;
  height:auto;
  display:block;
  border-radius:1px;
  flex:none;
}

.langue__menu{
  position:absolute;
  top:calc(100% + .7rem);
  right:0;
  z-index:40;
  min-width:11.5rem;
  list-style:none;
  margin:0;
  padding:.4rem 0;
  background:var(--craie);
  border:1px solid rgba(28,23,18,.14);
  border-radius:var(--r);
  box-shadow:0 24px 50px -22px rgba(28,23,18,.5);
}
.langue__menu[hidden]{ display:none; }
.langue__menu a{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem 1rem;
  font-size:.85rem;
  color:var(--encre);
  text-decoration:none;
  transition:background .18s ease;
}
.langue__menu a:hover{ background:var(--lin); }
.langue__menu a[aria-current="true"]{ color:var(--laiton); font-weight:600; }

@media (max-width: 880px){
  .langue__btn{ padding:.35rem .2rem; }
  .langue__code{ display:none; }
  .drapeau{ width:1.4rem; }
}

/* ---------- Mention « climatisation » avec son flocon ---------- */
.clim{
  display:inline-flex;
  align-items:center;
  gap:.28em;
  white-space:nowrap;
}
.flocon{
  width:.92em;
  height:.92em;
  flex:none;
  opacity:.85;
}