/* ============================================================
   LÉON HÔTEL — structure Kube, tokens remappés
   BEM loose + utilitaires u-*. Vanilla CSS.
   Typo : Saphion → Cormorant Garamond 300 (display serif light)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Saphion";
  src:url("../assets/fonts/saphion-light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --color-sand:     #F6F3EC;
  --color-sand-2:   #EFEBE0;
  --color-ink:      #1A1D21;
  --color-ink-soft: #4B5158;
  --color-line:     rgba(26,29,33,.14);
  --color-white:    #fff;
  --color-brand:       #24549C;   /* bleu Léon */
  --color-brand-night: #0E2A47;   /* bleu nuit Léon */
  --color-brand-green: #189030;   /* vert Léon */
  --color-line-light:  #DDD5C7;   /* filet clair */
  --color-line-dark:   #24405E;   /* filet sombre */

  /* layout */
  --site--max-width: 90rem;                          /* 1440px */
  --site--margin:    clamp(1.25rem, 3vw, 3rem);
  --max-width--main: var(--site--max-width);
  --nav--height:     5rem;                           /* 80px barre nav hors hero */
  --radius--small:   .25rem;
  --radius--round:   100vw;
  --border-width--main: .0625rem;

  /* section spacing — Kube scale */
  --_spacing---section-space--none: 0;
  --_spacing---section-space--small: clamp(3rem, calc(3rem + ((1vw - .2rem) * .8333)), 4rem);
  --_spacing---section-space--main:  clamp(4.5rem, calc(4.5rem + ((1vw - .2rem) * 1.25)), 6rem);
  --_spacing---section-space--large: clamp(6rem, calc(6rem + ((1vw - .2rem) * 1.6667)), 8rem);

  /* spacing scale 1 → 8 */
  --_spacing---space--1: .5rem;
  --_spacing---space--2: .75rem;
  --_spacing---space--3: 1rem;
  --_spacing---space--4: clamp(1.375rem, calc(1.375rem + ((1vw - .2rem) * .1042)), 1.5rem);
  --_spacing---space--5: clamp(1.75rem, calc(1.75rem + ((1vw - .2rem) * .2083)), 2rem);
  --_spacing---space--6: clamp(2.125rem, calc(2.125rem + ((1vw - .2rem) * .7292)), 3rem);
  --_spacing---space--7: clamp(2.5rem, calc(2.5rem + ((1vw - .2rem) * 1.25)), 4rem);
  --_spacing---space--8: clamp(3rem, calc(3rem + ((1vw - .2rem) * 1.6667)), 5rem);

  /* typo */
  --font-display: "Saphion","Cormorant Garamond","Times New Roman",Georgia,serif;
  --font-body:    "Satoshi",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-size-h1: clamp(2.5rem, 4.2vw + .5rem, 4.5rem);
  --font-size-h2: clamp(1.875rem, 2.2vw + .5rem, 2.75rem);
  --line-height-h1: 1.04;
  --font-size-eyebrow: .75rem;
  --font-size-small:   .875rem;

  /* bouton */
  --btn-height: 3rem;

  /* easing */
  --ease-roll:  cubic-bezier(.65,0,.35,1);
  --ease-inout: cubic-bezier(.77,0,.18,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-sand);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;border:0;background:none;cursor:pointer;padding:0;color:inherit}
h1,h2,h3{margin:0;font-weight:inherit}
p,ul,ol,figure,address{margin:0;font-style:normal}
a{color:inherit}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

.skip{
  position:fixed;top:-100%;left:1rem;z-index:100;
  padding:.75rem 1rem;background:var(--color-ink);color:var(--color-sand);
  font-size:var(--font-size-small);text-decoration:none;border-radius:var(--radius--small);
  transition:top .2s ease;
}
.skip:focus{top:1rem}

/* ============================================================
   UTILS
   ============================================================ */
.u-section{position:relative;display:flex;flex-flow:column;justify-content:center;align-items:stretch}
.u-min-height-screen{min-height:100svh}
.u-theme-dark{background:#000;color:var(--color-white)}

.u-container{
  width:calc(100% - var(--site--margin) * 2);
  max-width:var(--max-width--main);
  margin-inline:auto;
  position:relative;
  container-type:inline-size;
}

.u-content-wrapper{
  display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;
}

.u-eyebrow-wrapper{margin-bottom:var(--_spacing---space--3)}
.u-eyebrow-text{
  font-family:var(--font-body);
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.u-eyebrow-text--ink{color:var(--color-ink-soft)}

/* Barre verticale décorative (référence Kube) — 1 px, centrée */
.line-vertical{
  width:1px;
  height:115px;
  background-color:var(--color-line-light);
  margin-left:auto;
  margin-right:auto;
  margin-bottom:42px;
  transform-origin:top;
}
.u-theme-dark .line-vertical{background-color:var(--color-line-dark)}
@media (max-width:40rem){
  .line-vertical{height:97px;margin-bottom:34px}
}

/* ============================================================
   NAV — sticky hors du hero, fond sable opaque, logo centré
   ============================================================ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--nav--height);
  background:var(--color-sand);
  color:var(--color-ink);
  border-bottom:var(--border-width--main) solid var(--color-line);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background-color .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease;
}
/* Flou progressif dès que la nav quitte le hero (classe is-light) */
.nav.is-light{
  background:rgba(246,243,236,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.nav__contain{
  position:relative;
  height:100%;
  width:calc(100% - var(--site--margin) * 2);
  max-width:var(--site--max-width);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--_spacing---space--4);
}

/* Logo centré exactement au milieu du viewport (colonnes 1fr/auto/1fr égales) */
.nav__logo{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.nav__logo img{
  height:calc(var(--nav--height) * .75);
  width:auto;
  display:block;
}

.nav__left{
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.nav__lang{
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav__right{
  grid-column:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1rem;
}
.nav__link{
  color:currentColor;text-decoration:none;font-size:var(--font-size-small);
  transition:opacity .25s ease;
}
.nav__link:hover{opacity:.7}
.nav__link--cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.5rem 1rem;
  border:var(--border-width--main) solid var(--color-brand);
  border-radius:var(--radius--small);
  letter-spacing:.02em;
  color:var(--color-brand);
  transition:background-color .25s ease,color .25s ease;
}
.nav__link--cta:hover{background:var(--color-brand);color:var(--color-white);opacity:1}

.nav__burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;color:currentColor;
}
.nav__burger-lines{position:relative;display:block;width:1.5rem;height:.75rem}
.nav__burger-lines span{
  position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .3s var(--ease-roll);
}
.nav__burger-lines span:nth-child(1){top:0}
.nav__burger-lines span:nth-child(2){bottom:0}
.nav__burger.is-open .nav__burger-lines span:nth-child(1){transform:translateY(.3125rem) rotate(-45deg)}
.nav__burger.is-open .nav__burger-lines span:nth-child(2){transform:translateY(-.3125rem) rotate(45deg)}

/* Panneau mobile */
.nav-panel{
  position:fixed;
  top:var(--nav--height);
  left:0;right:0;
  z-index:49;
  background:var(--color-sand);
  color:var(--color-ink);
  border-bottom:var(--border-width--main) solid var(--color-line);
  opacity:0;
  visibility:hidden;
  transform:translateY(-.5rem);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
  box-shadow:0 1rem 2rem rgba(26,29,33,.08);
}
.nav-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-panel__list{
  display:flex;flex-direction:column;
  padding:var(--_spacing---space--3) var(--site--margin) var(--_spacing---space--4);
}
.nav-panel__list a{
  display:flex;align-items:center;
  min-height:2.75rem;
  padding:.5rem 0;
  font-size:1rem;
  text-decoration:none;
  border-bottom:var(--border-width--main) solid var(--color-line);
}
.nav-panel__list a:last-child{border-bottom:0}
.nav-panel__cta{
  margin-top:var(--_spacing---space--3);
  justify-content:center;
  min-height:2.75rem;
  border:var(--border-width--main) solid var(--color-brand);
  border-radius:var(--radius--small);
  color:var(--color-brand);
}

/* ============================================================
   btn-roll — un seul libellé visible, padding latéral non nul
   ============================================================ */
.btn-roll{
  display:inline-block;
  height:var(--btn-height);
  overflow:hidden;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:var(--font-size-small);
  font-weight:500;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--color-brand);
  color:var(--color-white);
  border:var(--border-width--main) solid var(--color-brand);
  border-radius:var(--radius--small);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.btn-roll:hover,.btn-roll:focus-visible{
  background:var(--color-white);
  color:var(--color-brand);
  border-color:var(--color-white);
}
.btn-roll__track{
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .35s var(--ease-roll);
}
.btn-roll:hover .btn-roll__track,
.btn-roll:focus-visible .btn-roll__track{transform:translateY(-50%)}
.btn-roll__label{
  display:flex;align-items:center;justify-content:center;
  height:var(--btn-height);
  padding:0 1.5rem;
  white-space:nowrap;
}

/* bouton primaire (hero) — hérite du bleu Léon de .btn-roll */

/* ============================================================
   HERO — min-height 100svh, contenu poussé en bas, CTA en flux
   ============================================================ */
.hero_main_wrap{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  z-index:1;
  background:#000;
  color:var(--color-white);
}

.hero_main_media{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.hero_slider{position:absolute;inset:0}
.hero_slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 60%;
  opacity:0;
  animation:
    heroKenBurns 8s ease-in-out alternate infinite,
    heroFade 7s ease-in-out infinite;
  will-change:transform,opacity;
}
.hero_slide--active{opacity:1}
.hero_slide:nth-child(1){animation-delay:0s,0s}
.hero_slide:nth-child(2){animation-delay:0s,7s}
.hero_slide:nth-child(3){animation-delay:0s,14s}

/* Ken Burns lent : scale 1 → 1.08, 8 s, alterné, origine décentrée */
@keyframes heroKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
.hero_slide:nth-child(1){transform-origin:62% 55%}
.hero_slide:nth-child(2){transform-origin:38% 60%}
.hero_slide:nth-child(3){transform-origin:55% 42%}

/* Fondu enchaîné : fade-in 1,2 s, tenue, fade-out 1,2 s — une image / 7 s */
@keyframes heroFade{
  0%{opacity:0}
  17.1429%{opacity:1}
  82.8571%{opacity:1}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .hero_slide{animation:none;transform:none;opacity:0}
  .hero_slide--active{opacity:1}
}

.hero_main_overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:color-mix(in srgb, black calc(20 / 100 * 80%), transparent);
}

.hero_main_contain{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  padding-top:var(--nav--height);
}

.hero_main_layout{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  gap:clamp(1.5rem,3vh,2.5rem);
  padding-top:clamp(2rem,5vh,3rem);
}

.hero_main_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h1);
  font-weight:300;
  line-height:var(--line-height-h1);
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:18em;
  margin:0;
  overflow-wrap:break-word;
  hyphens:auto;
}

/* CTA poussé en bas, dans le flux, >= 40px du bas */
.booking_wrap{
  display:flex;
  justify-content:center;
  padding-bottom:2.75rem;
}

/* Espace H1 -> CTA >= 16px : le hero colle le titre au bas de sa zone */
.hero_main_contain > .booking_wrap{
  padding-top:1.0625rem;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}

.intro_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--7);
  align-items:center;
}

.intro_text-col{display:flex;flex-direction:column;gap:var(--_spacing---space--4)}

.intro_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.intro_content{display:flex;flex-direction:column;gap:var(--_spacing---space--3)}
.intro_text{
  font-size:clamp(1rem,.8vw + .5rem,1.125rem);
  line-height:1.65;
  color:var(--color-ink-soft);
}

.intro_chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:.625rem;
}
.intro_chip{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  padding:.5rem 1rem;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:999px;
  color:var(--color-ink);
  background:rgba(255,255,255,.6);
}

/* image 3/2 à droite */
.intro_media{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.intro_media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-inout);
}
.intro_media:hover img{transform:scale(1.04)}

/* ============================================================
   CHAMBRES
   ============================================================ */
.rooms_wrap{
  background:var(--color-sand-2);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}

.rooms_header{
  max-width:44rem;
  margin-bottom:var(--_spacing---space--7);
}
.rooms_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin-top:var(--_spacing---space--2);
}
.rooms_sub{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
}

.rooms_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}

.room-card{
  position:relative;
  aspect-ratio:10.8 / 13.5;
  overflow:hidden;
  border-radius:var(--radius--small);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
  color:var(--color-white);
  text-decoration:none;
}

.room-card__media{
  position:absolute;inset:0;z-index:0;
}
.room-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .9s var(--ease-inout);
}
.room-card:hover .room-card__media img,
.room-card:focus-within .room-card__media img{transform:scale(1.06)}

.room-card__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,0) 70%
  );
  transition:background .5s ease;
}
.room-card:hover .room-card__overlay{
  background:linear-gradient(
    to top,
    rgba(0,0,0,.7) 0%,
    rgba(0,0,0,.25) 50%,
    rgba(0,0,0,.05) 80%
  );
}

.room-card__content{
  position:relative;z-index:2;
  padding:var(--_spacing---space--4);
  display:flex;
  flex-direction:column;
  gap:.375rem;
}
.room-card__label{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,1.5vw + .5rem,1.75rem);
  font-weight:300;
  line-height:1.1;
}
.room-card__price{
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.9;
}
.room-card__price small{
  font-size:.7em;
  text-transform:none;
  letter-spacing:.02em;
  opacity:.75;
}

.room-card__cta{
  position:relative;z-index:2;
  margin:0 var(--_spacing---space--4) var(--_spacing---space--4);
  align-self:flex-start;
}

/* ============================================================
   EXPÉRIENCES
   ============================================================ */
.exp_wrap{
  background:var(--color-ink);
  color:var(--color-sand);
  padding-block:var(--_spacing---section-space--large);
  overflow:hidden;
}
.exp_wrap .u-eyebrow-text--ink{color:rgba(246,243,236,.6)}

.exp_header{margin-bottom:var(--_spacing---space--7)}
.exp_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}

.exp_slider{position:relative}

.exp_track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(72%,32rem);
  gap:var(--_spacing---space--4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:var(--_spacing---space--4);
  -webkit-overflow-scrolling:touch;
}
.exp_track::-webkit-scrollbar{display:none}

.exp_slide{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---space--4);
  position:relative;
}

.exp_slide__media{
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.exp_slide__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.exp_slide:hover .exp_slide__media img{transform:scale(1.04)}

.exp_slide__content{
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---space--2);
  padding-right:var(--_spacing---space--4);
}
.exp_slide__index{
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.12em;
  color:var(--color-brand-green);
}
.exp_slide__title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2vw,2rem);
  font-weight:300;
  line-height:1.1;
  margin:0;
}
.exp_slide__text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:rgba(246,243,236,.7);
  max-width:36rem;
}

.exp_nav{
  display:flex;
  align-items:center;
  gap:var(--_spacing---space--4);
  margin-top:var(--_spacing---space--4);
}
.exp_nav-btn{
  width:3rem;height:3rem;
  border:var(--border-width--main) solid var(--color-line-dark);
  border-radius:var(--radius--round);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-sand);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
  flex:none;
}
.exp_nav-btn svg{width:1.25rem;height:1.25rem}
.exp_nav-btn:hover:not(:disabled){
  background:var(--color-brand);
  color:var(--color-white);
  border-color:var(--color-brand);
}
.exp_nav-btn:disabled{opacity:.3;cursor:default}

.exp_nav-progress{
  flex:1;
  height:1px;
  background:rgba(246,243,236,.2);
  position:relative;
  overflow:hidden;
}
.exp_nav-progress-bar{
  position:absolute;
  inset:0;
  background:var(--color-sand);
  transform-origin:left;
  transform:scaleX(.25);
  transition:transform .4s var(--ease-roll);
}

/* ============================================================
   CTA — banner booking
   ============================================================ */
.cta_wrap{
  position:relative;
  min-height:65svh;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  padding-block:var(--_spacing---section-space--large);
}

.cta_media{
  position:absolute;inset:0;z-index:0;
}
.cta_media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 40%;
}

.cta_overlay{
  position:absolute;inset:0;z-index:1;
  background:color-mix(in srgb, black 55%, transparent);
}

.cta_contain{
  z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--_spacing---space--4);
}

.cta_title{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw + .5rem,3.5rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.01em;
  text-wrap:balance;
  max-width:16em;
  color:var(--color-white);
}
.cta_text{
  color:rgba(255,255,255,.8);
  max-width:32rem;
  line-height:1.65;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}

.faq_header{
  max-width:40rem;
  margin-bottom:var(--_spacing---space--7);
}
.faq_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}

.faq_list{
  max-width:52rem;
  border-top:var(--border-width--main) solid var(--color-line);
}

.faq_item{
  border-bottom:var(--border-width--main) solid var(--color-line);
}

.faq_question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--_spacing---space--4);
  padding:var(--_spacing---space--4) 0;
  font-family:var(--font-display);
  font-size:clamp(1.125rem,1vw + .5rem,1.375rem);
  font-weight:400;
  line-height:1.3;
  transition:color .25s ease;
}
.faq_question:hover{color:var(--color-ink-soft)}

.faq_icon{
  width:1rem;height:1rem;flex:none;
  transition:transform .35s var(--ease-roll);
}
.faq_item[open] .faq_icon{transform:rotate(45deg)}

.faq_answer{
  padding:0 0 var(--_spacing---space--4);
  max-width:44rem;
}
.faq_answer p{
  color:var(--color-ink-soft);
  line-height:1.65;
}
.faq_answer strong{color:var(--color-ink);font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.footer_wrap{
  background:var(--color-ink);
  color:var(--color-sand);
  overflow:hidden;
}

.footer_wordmark{
  display:flex;
  justify-content:center;
  padding-top:var(--_spacing---section-space--main);
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.footer_wordmark span{
  font-family:var(--font-display);
  font-size:clamp(6rem, 18vw, 16rem);
  font-weight:300;
  line-height:.85;
  letter-spacing:.06em;
  color:var(--color-sand);
  opacity:.12;
  white-space:nowrap;
  display:block;
}

.footer_contain{
  padding-bottom:var(--_spacing---space--6);
}

.footer_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--6);
  padding-block:var(--_spacing---space--7);
  border-top:var(--border-width--main) solid rgba(246,243,236,.15);
  margin-top:calc(var(--_spacing---section-space--main) * -1 * .4);
}

.footer_col-title{
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(246,243,236,.55);
  margin-bottom:var(--_spacing---space--3);
}

.footer_list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer_list a{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  color:var(--color-sand);
  text-decoration:none;
  font-size:var(--font-size-small);
  transition:opacity .25s ease;
}
.footer_list a:hover{opacity:.65}

.footer_address{
  font-size:var(--font-size-small);
  line-height:1.7;
  color:rgba(246,243,236,.8);
}

.footer_bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--_spacing---space--3);
  padding-top:var(--_spacing---space--4);
  border-top:var(--border-width--main) solid rgba(246,243,236,.15);
  font-size:var(--font-size-eyebrow);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(246,243,236,.45);
}

/* ============================================================
   CONTAINER QUERIES
   ============================================================ */
@container (width >= 55em){
  .hero_main_title{font-size:clamp(3rem,5vw + .5rem,5.5rem)}

  .intro_grid{
    grid-template-columns:1fr 1fr;
    gap:var(--_spacing---space--8);
  }

  .rooms_grid{
    grid-template-columns:repeat(3,1fr);
  }

  .footer_grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@container (width >= 75em){
  .hero_main_title{font-size:clamp(3.5rem,4vw + 1rem,5rem)}
  .intro_grid{grid-template-columns:5fr 6fr}
}

/* ============================================================
   RESPONSIVE — fallback media queries
   ============================================================ */
@media (max-width:64rem){
  :root{
    --nav--height:4.5rem;
  }
  .exp_track{grid-auto-columns:min(80%,28rem)}
}

@media (max-width:40rem){
  :root{
    --nav--height:4rem;
    --font-size-h1:clamp(1.75rem,6vw,2rem);
    --font-size-h2:2.125rem;
  }
  .nav__right{gap:.75rem}
  .nav__right .nav__link:not(.nav__link--cta){display:none}
  .nav__link--cta{display:none}
  .hero_main_title{max-width:100%;font-size:2.125rem}
  .hero_main_layout{padding-top:clamp(1.5rem,4vh,2rem)}
  .exp_track{grid-auto-columns:85%}
  .intro_title{font-size:2.125rem}
  .intro_text{font-size:1rem;line-height:1.5}
  .footer_wordmark span{font-size:clamp(4rem,20vw,7rem)}
  #cta-primary{width:100%}
  #cta-primary .btn-roll__track{align-items:stretch}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}


/* ============================================================
   PAGE — CHAMBRES (pages/chambres.html)
   Ajouts en fin de fichier. Réutilise les tokens existants.
   ============================================================ */

/* Enveloppe de page (body.page-chambres) */
.page-chambres{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow-x:clip;
}

/* ---------- HERO DE PAGE ---------- */
.hero_page_media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero_page_media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.hero_page_overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%);
}
.hero_page_contain{
  position:relative;z-index:2;
  flex:1;
  display:flex;flex-direction:column;
  padding-top:var(--nav--height);
}
.hero_page_top{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding-top:var(--_spacing---space--4);
}
.hero_page_brand{
  display:flex;line-height:0;
}
.hero_page_brand img{height:60px;width:auto;display:block}
.hero_page_back{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--font-size-small);
  color:rgba(255,255,255,.85);
  text-decoration:none;
  letter-spacing:.02em;
  transition:opacity .25s ease;
}
.hero_page_back svg{width:1.125rem;height:1.125rem}
.hero_page_back:hover{opacity:.7}
.hero_page_layout{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  padding-bottom:var(--_spacing---section-space--main);
}
.hero_page_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--color-white);
}
.hero_page_sub{
  margin-top:var(--_spacing---space--3);
  max-width:36rem;
  color:rgba(255,255,255,.85);
  line-height:1.65;
}

/* ---------- INDEX — grille filtrable (mécanique Kube) ---------- */
.index_wrap.u-section{container-type:inline-size}
.index_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.index_header{
  display:flex;flex-direction:column;
}
.index_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin-top:var(--_spacing---space--2);
}
.index_lead{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
  max-width:36rem;
}

.index_filter_wrap{
  margin-top:var(--_spacing---space--6);
  margin-bottom:var(--_spacing---space--6);
}
.index_filter_number{
  width:100%;
  text-align:left;
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  letter-spacing:.02em;
  margin-bottom:var(--_spacing---space--3);
}
.index_filter_tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  row-gap:var(--_spacing---space--1);
  column-gap:var(--_spacing---space--3);
}

.form_radio_wrap{
  position:relative;
  cursor:pointer;
  display:inline-flex;
}
.form_radio_wrap input{
  position:absolute;inset:0;
  opacity:0;cursor:pointer;
  margin:0;width:100%;height:100%;
}
.form_radio_label{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;
  padding:.375rem 1rem;
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:100vw;
  color:var(--color-ink);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.form_radio_wrap:hover .form_radio_label{border-color:var(--color-brand);color:var(--color-brand)}
.form_radio_wrap input:checked + .form_radio_label{
  background:var(--color-brand);
  border-color:var(--color-brand);
  color:var(--color-white);
}
.form_radio_wrap input:focus-visible + .form_radio_label{
  outline:2px solid var(--color-brand);outline-offset:2px;
}

.index_gallery_collection{position:relative}
.index_gallery_list{
  display:grid;
  grid-template-columns:1fr;
  row-gap:var(--_spacing---space--6);
  column-gap:var(--_spacing---space--4);
}

/* Filtres sans JS : :has() natif, repli @supports */
@supports selector(:has(*)){
  .index_wrap:has(input[name="tags"][value="standard"]:checked) .index_gallery_item:not([data-tags~="standard"]){display:none}
  .index_wrap:has(input[name="tags"][value="superieure"]:checked) .index_gallery_item:not([data-tags~="superieure"]){display:none}
  .index_wrap:has(input[name="tags"][value="suite"]:checked) .index_gallery_item:not([data-tags~="suite"]){display:none}
  .index_wrap:has(input[name="tags"][value="petit-dejeuner"]:checked) .index_gallery_item:not([data-tags~="petit-dejeuner"]){display:none}
}
@supports not selector(:has(*)){
  .index_gallery_item{display:block !important}
}

/* ---------- CARTE secondaire (Kube) ---------- */
.card_secondary_wrap{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
}
.card_secondary_visual{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.card_secondary_img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .9s var(--ease-inout);
}
.card_secondary_img.is-first{z-index:1}
.card_secondary_img.is-second{z-index:2;opacity:0;transition:opacity .6s ease}
.card_secondary_wrap:hover .card_secondary_img.is-second{opacity:1}
.card_secondary_wrap:hover .card_secondary_img.is-first{transform:scale(1.04)}

.card_secondary_content{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--_spacing---space--4) var(--_spacing---space--3) 0;
  flex:1;
}
.card_secondary_price{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:300;
  line-height:1;
  color:var(--color-ink);
}
.card_secondary_per{
  font-size:.5em;
  color:var(--color-ink-soft);
}
.card_secondary_name{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,1.5vw + .5rem,1.75rem);
  font-weight:300;
  line-height:1.1;
  margin-top:var(--_spacing---space--2);
}
.card_secondary_fits{
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--color-brand);
  margin-top:var(--_spacing---space--1);
}
.card_secondary_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
  margin-top:var(--_spacing---space--3);
  max-width:26rem;
}
.card_secondary_equip{
  list-style:none;margin:var(--_spacing---space--3) 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;
  width:100%;max-width:20rem;
}
.card_secondary_equip li{
  display:flex;align-items:flex-start;gap:.625rem;
  font-size:var(--font-size-small);
  text-align:left;
  line-height:1.4;
}
.card_secondary_check{
  width:1.125rem;height:1.125rem;flex:none;
  color:var(--color-brand-green);
  margin-top:.125rem;
}
.card_secondary_cta{
  margin-top:var(--_spacing---space--4);
}

/* ---------- COMPARATIF ---------- */
.cmp_wrap{
  background:var(--color-white);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.cmp_header{max-width:40rem;margin-bottom:var(--_spacing---space--7)}
.cmp_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.cmp_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}
.cmp_col{
  position:relative;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  padding:var(--_spacing---space--4);
  display:flex;flex-direction:column;
  background:var(--color-sand);
}
.cmp_col--star{
  border-color:var(--color-brand);
  background:var(--color-white);
}
.cmp_col__badge{
  position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;
  padding:.25rem .875rem;
  background:var(--color-brand);
  color:var(--color-white);
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:100vw;
  white-space:nowrap;
}
.cmp_col__head{
  text-align:center;
  padding-bottom:var(--_spacing---space--3);
  border-bottom:var(--border-width--main) solid var(--color-line);
  margin-bottom:var(--_spacing---space--3);
}
.cmp_col__name{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:300;
  line-height:1.1;
}
.cmp_col__price{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:300;
  color:var(--color-brand);
  margin-top:var(--_spacing---space--1);
}
.cmp_col__list{
  list-style:none;margin:0;padding:0;
  flex:1;
}
.cmp_col__list li{
  display:flex;justify-content:space-between;align-items:center;gap:var(--_spacing---space--3);
  padding:.625rem 0;
  border-bottom:var(--border-width--main) solid var(--color-line);
  font-size:var(--font-size-small);
}
.cmp_col__list li:last-child{border-bottom:0}
.cmp_col__list span{color:var(--color-ink-soft)}
.cmp_col__list em{font-style:normal;text-align:right}
.cmp_no{color:var(--color-ink-soft);opacity:.5}
.cmp_yes{color:var(--color-brand-green);font-weight:500}
.cmp_col__cta{
  margin-top:var(--_spacing---space--4);
  align-self:center;
}
.cmp_note{
  margin-top:var(--_spacing---space--4);
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  text-align:center;
}

/* ---------- SALLE DE BAIN ---------- */
.bain_wrap{
  background:var(--color-sand-2);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.bain_header{max-width:40rem;margin-bottom:var(--_spacing---space--7)}
.bain_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.bain_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}
.bain_media{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.bain_media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.bain_media:hover img{transform:scale(1.04)}

/* ---------- FORMULAIRE DEMANDE ---------- */
.demande_wrap{
  background:var(--color-white);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.demande_header{max-width:40rem;margin-bottom:var(--_spacing---space--6)}
.demande_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.demande_lead{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
  max-width:36rem;
}
.demande_form{
  display:flex;flex-direction:column;gap:var(--_spacing---space--5);
}
.demande_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}
.field{display:flex;flex-direction:column;gap:.375rem}
.field label,.field__label{font-size:var(--font-size-small);font-weight:500;color:var(--color-ink)}
.field input,.field select{
  font:inherit;
  font-size:1rem;
  min-height:3rem;
  padding:.625rem .875rem;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  background:var(--color-white);
  color:var(--color-ink);
  width:100%;
}
.field input:focus,.field select:focus{
  outline:2px solid var(--color-brand);
  outline-offset:1px;
  border-color:var(--color-brand);
}
.field__options{
  display:flex;flex-wrap:wrap;
  gap:.5rem;
}
.opt{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}
.opt input{
  position:absolute;inset:0;
  opacity:0;margin:0;width:100%;height:100%;cursor:pointer;
}
.opt__label{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;
  padding:.5rem 1rem;
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:100vw;
  color:var(--color-ink);
  background:var(--color-white);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.opt:hover .opt__label{border-color:var(--color-brand);color:var(--color-brand)}
.opt input:checked + .opt__label{
  background:var(--color-brand);
  border-color:var(--color-brand);
  color:var(--color-white);
}
.opt input:focus-visible + .opt__label{
  outline:2px solid var(--color-brand);outline-offset:2px;
}
.demande_cta{
  align-self:flex-start;
}
@media (max-width:40rem){
  .demande_cta{width:100%}
  .demande_cta .btn-roll__track{align-items:stretch}
}

/* ---------- FAQ sur fond sable-2 (Kube) ---------- */
.faq_wrap--sable{background:var(--color-sand-2)}

/* ---------- Grilles responsive (container queries) ---------- */
@container (width >= 55em){
  .index_gallery_list{grid-template-columns:repeat(3,1fr)}
  .cmp_grid{grid-template-columns:repeat(3,1fr)}
}
@container (width >= 40em){
  .bain_grid{grid-template-columns:1fr 1fr}
  .demande_grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   PAGE — CHAMBRES · REPRISE VISUELLE (DEV-0921-05)
   Full-bleed + toggle Galerie/Liste + carte allégée + filtres
   Ajouts en fin de fichier. Ne touche pas au reste de main.css.
   ============================================================ */

/* ---------- Barre de filtres : compteur à gauche, toggle à droite ---------- */
.index_filter_bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--_spacing---space--4) var(--_spacing---space--3);
}
.index_filter_bar .index_filter_number{
  flex:0 0 auto;
  width:auto;
  text-align:left;
  margin-bottom:0;
}
.index_filter_bar .index_filter_tags{
  order:3;
  flex-basis:100%;
  justify-content:center;
}
.index_display_switch{
  flex:0 0 auto;
  margin-left:auto;
  display:inline-flex;
  gap:.125rem;
  padding:.1875rem;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:100vw;
}
.display_opt{
  position:relative;
  display:inline-flex;
  cursor:pointer;
}
.display_opt input{
  position:absolute;inset:0;
  opacity:0;margin:0;width:100%;height:100%;cursor:pointer;
}
.display_label{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2rem;
  padding:.3125rem .875rem;
  font-size:var(--font-size-small);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  border-radius:100vw;
  color:var(--color-ink);
  transition:background-color .25s ease,color .25s ease;
}
.display_opt:hover .display_label{color:var(--color-brand)}
.display_opt input:checked + .display_label{
  background:var(--color-ink);
  color:var(--color-sand);
}
.display_opt input:focus-visible + .display_label{
  outline:2px solid var(--color-brand);outline-offset:2px;
}

/* ---------- Filtres supplémentaires (lit double / salon / bureau / espace) ---------- */
@supports selector(:has(*)){
  .index_wrap:has(input[name="tags"][value="lit-double"]:checked) .index_gallery_item:not([data-tags~="lit-double"]){display:none}
  .index_wrap:has(input[name="tags"][value="salon-separe"]:checked) .index_gallery_item:not([data-tags~="salon-separe"]){display:none}
  .index_wrap:has(input[name="tags"][value="bureau"]:checked) .index_gallery_item:not([data-tags~="bureau"]){display:none}
  .index_wrap:has(input[name="tags"][value="espace-maximal"]:checked) .index_gallery_item:not([data-tags~="espace-maximal"]){display:none}
}

/* ---------- Grille FULL-BLEED : conteneur plein cadre, marge et gouttière 2 px ---------- */
.index_gallery_collection{
  max-width:none;
  padding:0 2px;
}
.index_gallery_list{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
.index_gallery_item.card_secondary_wrap .card_secondary_visual{
  border-radius:0;
}

/* ---------- Toggle Galerie / Liste (mécanique Kube :has(), repli @supports) ---------- */
.index_list_wrap{
  position:absolute;
  left:0;right:0;
  width:100%;
  opacity:0;
  pointer-events:none;
}
@supports selector(:has(*)){
  .index_wrap:has(input[name="display"][value="list"]:checked) .index_gallery_collection{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .index_wrap:has(input[name="display"][value="list"]:checked) .index_list_wrap{
    position:relative;
    opacity:1;
    pointer-events:auto;
  }
}
@supports not selector(:has(*)){
  .index_display_switch{display:none}
  .index_list_wrap{display:none}
}

/* ---------- Carte allégée : image domine, nom + méta, prix discret ---------- */
.card_secondary_content{
  align-items:flex-start;
  text-align:left;
  padding:var(--_spacing---space--3) 0 0;
}
.card_secondary_name{
  margin-top:0;
  font-size:clamp(1.5rem,1.6vw + .5rem,1.875rem);
}
.card_secondary_meta{
  margin-top:var(--_spacing---space--1);
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  line-height:1.4;
}
.card_secondary_foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--_spacing---space--3);
  width:100%;
  margin-top:auto;
  padding-top:var(--_spacing---space--3);
}
.card_secondary_foot .card_secondary_cta{
  margin-top:0;
}
.card_secondary_price{
  font-family:var(--font-body);
  font-size:var(--font-size-small);
  font-weight:500;
  color:var(--color-ink);
  white-space:nowrap;
}
.card_secondary_price .card_secondary_per{
  color:var(--color-ink-soft);
  font-weight:400;
}

/* ---------- Mode LISTE : lignes + colonne d'images collante ---------- */
.index_list_wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--_spacing---space--7);
  padding:0 2px;
}
.index_list_left{
  display:flex;
  flex-direction:column;
  padding-top:var(--_spacing---space--2);
}
.index_list_link_wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.25rem var(--_spacing---space--4);
  padding:var(--_spacing---space--4) 0;
  border-bottom:var(--border-width--main) solid var(--color-line);
  text-decoration:none;
  transition:color .25s ease;
}
.index_list_name{
  flex:1 1 100%;
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2vw,2.25rem);
  font-weight:300;
  line-height:1.1;
}
.index_list_meta{
  flex:1 1 auto;
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
}
.index_list_text{
  flex:1 1 100%;
  font-size:var(--font-size-small);
  line-height:1.6;
  color:var(--color-ink-soft);
  max-width:38rem;
}
.index_list_chevron{
  flex:0 0 auto;
  width:1.5rem;height:1.5rem;
  display:flex;
  color:var(--color-ink-soft);
  transition:transform .3s var(--ease-roll),color .25s ease;
}
.index_list_chevron svg{width:100%;height:100%}
.index_list_link_wrap:hover .index_list_name{color:var(--color-brand)}
.index_list_link_wrap:hover .index_list_chevron{transform:translateX(.25rem);color:var(--color-brand)}

.index_visuals_collection{
  position:sticky;
  top:var(--nav--height);
  min-height:100svh;
  height:100svh;
  overflow:hidden;
}
.index_visuals_list{
  position:relative;
  width:100%;
  height:100%;
}
.index_visuals_img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity .5s ease;
}
/* Image de la 1re ligne visible par défaut */
.index_visuals_img[data-index="0"]{opacity:1}
/* Survol d'une ligne : seule l'image de cette ligne est visible */
@supports selector(:has(*)){
  .index_list_wrap:has(.index_list_link_wrap:nth-child(2):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(2):hover) .index_visuals_img[data-index="1"]{opacity:1}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(3):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(3):hover) .index_visuals_img[data-index="2"]{opacity:1}
}

/* ---------- Grilles responsive (viewport, prioritaire sur les anciennes règles) ---------- */
@media (min-width:55em){
  .index_gallery_list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:40rem){
  .index_list_wrap{
    grid-template-columns:1fr;
    gap:var(--_spacing---space--4);
  }
  .index_visuals_collection{
    position:relative;
    height:60svh;
    min-height:0;
  }
}

/* ---------- DENSITÉ PREMIER ÉCRAN (DEV-0921-05, §3e) ----------
   Le header de la page chambres doit être compact pour que les 3 cartes
   (image + nom + méta) soient visibles dans le premier écran de la section.
   Scopé à .index_wrap : la landing n'utilise aucun sélecteur index_*, donc
   aucune non-régression possible sur index.html. */
.page-chambres .index_wrap{
  padding-top:0;
}
/* Fidelite reference : la barre verticale Kube fait 115 px (97 px mobile).
   Dev l'avait reduite a 24 px pour faire tenir le texte des cartes dans le premier
   ecran — objectif MESURE comme non atteint (le nom de la carte reste sous le pli,
   comme chez Kube lui-meme). La reduction ne coutait donc que la fidelite. */
.index_wrap .line-vertical{
  height:115px;
  margin-bottom:42px;
}
.index_header .u-eyebrow-wrapper{
  margin-bottom:var(--_spacing---space--1);
}
.index_header .index_title{
  margin-top:var(--_spacing---space--1);
}
.index_header .index_lead{
  margin-top:var(--_spacing---space--1);
}
.index_filter_wrap{
  margin-top:var(--_spacing---space--3);
  margin-bottom:var(--_spacing---space--3);
}
.index_filter_number{
  margin-bottom:var(--_spacing---space--1);
}




/* ============================================================
   PAGE — EXPÉRIENCE (DEV-0921-06)
   Ajouts en fin de fichier. Réutilise les tokens et la mécanique
   index_wrap de chambres.html (cartes + filtres + toggle Galerie/Liste).
   ============================================================ */

/* ---------- Enveloppe de page ---------- */
.page-experience{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow-x:clip;
}

/* ---------- HERO SERVICE — 100 % image, aucun texte posé dessus ---------- */
.hero_service_wrap{
  position:relative;
  height:1150px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  background:#000;
  color:var(--color-white);
}
.hero_service_media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero_service_media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.hero_service_brand{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;
  padding-top:calc(var(--nav--height) + var(--_spacing---space--4));
}
.hero_service_brand img{height:60px;width:auto;display:block}
@media (max-width:64rem){
  .hero_service_wrap{height:clamp(560px,90vw,900px)}
}
@media (max-width:40rem){
  .hero_service_wrap{height:100svh;min-height:560px}
}

/* ---------- INTRO — texte centré, colonne étroite ---------- */
.intro_contain{
  display:flex;flex-direction:column;align-items:center;
}
.intro_contain .line-vertical{margin-bottom:42px}
.intro_text--center{
  max-width:46ch;
  margin-inline:auto;
  text-align:center;
  color:var(--color-ink-soft);
  font-size:clamp(1rem,.8vw + .5rem,1.125rem);
  line-height:1.65;
  margin-top:var(--_spacing---space--3);
}

/* ---------- IMAGES WRAP — piscine 2 colonnes décalées ---------- */
.images_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.images_header{max-width:44rem;margin-bottom:var(--_spacing---space--7)}
.images_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin-top:var(--_spacing---space--2);
}
.images_lead{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
  max-width:40rem;
}
.images_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--6);
  align-items:start;
}
.images_col{
  margin:0;
  display:flex;flex-direction:column;
}
.images_media{
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.images_media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.images_col:hover .images_media img{transform:scale(1.04)}
.images_caption{
  margin-top:var(--_spacing---space--4);
  display:flex;flex-direction:column;gap:var(--_spacing---space--1);
}
.images_label{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1.3vw + .5rem,1.625rem);
  font-weight:300;
  line-height:1.1;
}
.images_caption p{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
  max-width:32rem;
}
@container (width >= 55em){
  .images_grid{grid-template-columns:1fr 1fr}
  .images_col:nth-child(2){transform:translateY(var(--_spacing---space--6))}
}

/* ---------- Filtres des univers (mécanique :has(), repli @supports) ---------- */
@supports selector(:has(*)){
  .index_wrap:has(input[name="tags"][value="piscine"]:checked) .index_gallery_item:not([data-tags~="piscine"]){display:none}
  .index_wrap:has(input[name="tags"][value="restaurant"]:checked) .index_gallery_item:not([data-tags~="restaurant"]){display:none}
  .index_wrap:has(input[name="tags"][value="fitness"]:checked) .index_gallery_item:not([data-tags~="fitness"]){display:none}
  .index_wrap:has(input[name="tags"][value="conference"]:checked) .index_gallery_item:not([data-tags~="conference"]){display:none}
  .index_wrap:has(input[name="tags"][value="reception"]:checked) .index_gallery_item:not([data-tags~="reception"]){display:none}
  .index_wrap:has(input[name="tags"][value="ouvert-24h"]:checked) .index_gallery_item:not([data-tags~="ouvert-24h"]){display:none}
  .index_wrap:has(input[name="tags"][value="sur-place"]:checked) .index_gallery_item:not([data-tags~="sur-place"]){display:none}
  .index_wrap:has(input[name="tags"][value="sur-demande"]:checked) .index_gallery_item:not([data-tags~="sur-demande"]){display:none}
}

/* ---------- Survol liste : 5 lignes -> 5 images collantes ---------- */
@supports selector(:has(*)){
  .index_list_wrap:has(.index_list_link_wrap:nth-child(2):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(2):hover) .index_visuals_img[data-index="1"]{opacity:1}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(3):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(3):hover) .index_visuals_img[data-index="2"]{opacity:1}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(4):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(4):hover) .index_visuals_img[data-index="3"]{opacity:1}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(5):hover) .index_visuals_img[data-index="0"]{opacity:0}
  .index_list_wrap:has(.index_list_link_wrap:nth-child(5):hover) .index_visuals_img[data-index="4"]{opacity:1}
}

/* ---------- DENSITÉ PREMIER ÉCRAN (aligné sur chambres) ---------- */
.page-experience .index_wrap{padding-top:0}
.index_wrap .line-vertical{height:115px;margin-bottom:42px}


/* ============================================================
   PAGE — BUSINESS & ÉVÉNEMENTS (DEV-0921-07)
   Ajouts en fin de fichier. Page de type privatisation :
   hero + CTA final avec titre superposé, catalogue d'espaces.
   ============================================================ */

.page-business{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow-x:clip;
}

/* ---------- HERO — plein écran, titre superposé (même base que landing) ---------- */
.biz_hero_media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.biz_hero_media img{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
}

/* ---------- TWO COL — intro texte + image, puis liste à filets ---------- */
.two_col_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.two_col_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--6);
  align-items:center;
  margin-bottom:var(--_spacing---space--7);
}
.two_col_text{display:flex;flex-direction:column;gap:var(--_spacing---space--3)}
.two_col_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.two_col_lead{
  font-size:clamp(1rem,.8vw + .5rem,1.125rem);
  line-height:1.65;
  color:var(--color-ink-soft);
}
.two_col_media{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.two_col_media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.two_col_media:hover img{transform:scale(1.04)}

/* liste à filets : 2 typologies */
.filet_list{
  list-style:none;margin:0;padding:0;
  border-top:var(--border-width--main) solid var(--color-line);
  max-width:56rem;
}
.filet_item{
  border-bottom:var(--border-width--main) solid var(--color-line);
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
  padding:var(--_spacing---space--4) 0;
}
.filet_title{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1.4vw + .5rem,1.625rem);
  font-weight:300;
  line-height:1.1;
}
.filet_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
}

/* ---------- OFFGRID LIST — catalogue d'espaces, blocs décalés ---------- */
.offgrid_list_wrap{
  background:var(--color-sand-2);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.offgrid_header{
  max-width:44rem;
  margin-bottom:var(--_spacing---space--7);
}
.offgrid_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin-top:var(--_spacing---space--2);
}
.offgrid_lead{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
  max-width:40rem;
}

.offgrid_list{
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---section-space--small);
}
.offgrid_item{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
  align-items:start;
}
.offgrid_media{
  position:relative;
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.offgrid_media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.offgrid_item:hover .offgrid_media img{transform:scale(1.04)}
/* accent : petite image secondaire posée en bas à droite */
.offgrid_media_accent{
  position:absolute;
  right:var(--_spacing---space--4);
  bottom:var(--_spacing---space--4);
  width:34%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius--small);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25);
}
.offgrid_content{display:flex;flex-direction:column;gap:var(--_spacing---space--2)}
.offgrid_name{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,1.8vw + .5rem,2rem);
  font-weight:300;
  line-height:1.1;
}
.offgrid_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
  max-width:34rem;
}

/* ---------- ÉQUIPEMENTS — grille 4 éléments ---------- */
.equipements_wrap{
  background:var(--color-white);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.equipements_header{
  max-width:44rem;
  margin-bottom:var(--_spacing---space--7);
}
.equipements_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.equipements_grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}
.equipements_item{
  display:flex;flex-direction:column;gap:var(--_spacing---space--2);
  padding:var(--_spacing---space--4);
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  background:var(--color-sand);
}
.equipements_ic{
  width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-brand-green);
}
.equipements_ic svg{width:1.5rem;height:1.5rem}
.equipements_item h3{
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:300;
  line-height:1.1;
}
.equipements_item p{
  font-size:var(--font-size-small);
  line-height:1.6;
  color:var(--color-ink-soft);
}

/* ---------- CTA FINAL — plein écran, titre superposé + formulaire devis ---------- */
.cta_wrap.biz_cta_wrap{
  min-height:100svh;
  padding-block:0;
}
.biz_devis_form{
  display:flex;flex-direction:column;
  gap:var(--_spacing---space--5);
  width:min(100%,34rem);
}
.biz_devis_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
  text-align:left;
}
.biz_cta_wrap .field label{
  color:var(--color-white);
}
.biz_devis_cta{
  align-self:center;
}
.biz_cta_wrap .cta_title{
  color:var(--color-white);
}

/* ---------- Grilles responsive (viewport, aligné chambres/expérience) ---------- */
@media (min-width:55em){
  .two_col_grid{
    grid-template-columns:5fr 6fr;
    gap:var(--_spacing---space--8);
  }
  .filet_item{
    grid-template-columns:minmax(0,14rem) 1fr;
    gap:var(--_spacing---space--6);
    align-items:baseline;
  }
  /* blocs décalés : image massive d'un côté, texte de l'autre, alternance */
  .offgrid_item{
    grid-template-columns:7fr 5fr;
    gap:var(--_spacing---space--8);
  }
  .offgrid_item:nth-child(even) .offgrid_media{order:2}
  .offgrid_item:nth-child(even) .offgrid_content{order:1}
  /* décalage vertical entre les blocs (asymétrie de la référence) */
  .offgrid_item:nth-child(even){margin-top:var(--_spacing---section-space--small)}
  .offgrid_item:nth-child(even) .offgrid_content{margin-top:var(--_spacing---space--6)}
  .equipements_grid{grid-template-columns:repeat(4,1fr)}
  .biz_devis_grid{grid-template-columns:1fr 1fr}
}

@media (max-width:40rem){
  .offgrid_media_accent{width:40%}
}


/* ============================================================
   PAGE — À PROPOS (DEV-0921-08)
   Recette Kube : hero plein cadre superposé → intro centrée étroite
   → bandeau chiffres → duo asymétrique → duo inversé → voix clients
   → engagements → FAQ. Casse de phrase (jamais uppercase sur titres).
   ============================================================ */

.page-apropos{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow-x:clip;
}

/* ---------- HERO — plein cadre, titre centré superposé, AUCUN CTA ---------- */
.ap_hero_media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.ap_hero_media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.ap_hero_layout{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  padding-bottom:var(--_spacing---section-space--main);
}
.ap_hero_sub{
  margin-top:var(--_spacing---space--3);
  max-width:36rem;
  color:rgba(255,255,255,.85);
  line-height:1.65;
}

/* ---------- INTRO — h2 centré, image réduite, colonne étroite ---------- */
.ap_intro_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.ap_intro_head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.ap_intro_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.ap_intro_media{
  margin:var(--_spacing---space--7) auto 0;
  width:46.5%;
  max-width:46.5%;
  aspect-ratio:670/511;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.ap_intro_media img{
  width:100%;height:100%;object-fit:cover;
}
.ap_intro_col{
  margin:var(--_spacing---space--6) auto 0;
  width:37.5%;
  max-width:37.5%;
  display:flex;flex-direction:column;gap:var(--_spacing---space--4);
  text-align:center;
}
.ap_intro_col p{
  font-size:clamp(1rem,.8vw + .5rem,1.125rem);
  line-height:1.65;
  color:var(--color-ink-soft);
}

/* ---------- STATS — bandeau sobre, filets fins, AUCUN compteur animé ---------- */
.ap_stats_wrap{
  background:var(--color-white);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--main);
  border-top:var(--border-width--main) solid var(--color-line);
  border-bottom:var(--border-width--main) solid var(--color-line);
}
.ap_stats_list{
  margin:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--_spacing---space--4);
}
.ap_stat{
  display:flex;flex-direction:column;align-items:center;gap:var(--_spacing---space--2);
  text-align:center;
  padding:0 var(--_spacing---space--3);
}
.ap_stat:not(:first-child){border-left:var(--border-width--main) solid var(--color-line)}
.ap_stat_value{
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw + .5rem,3rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--color-ink);
}
.ap_stat_unit{
  font-size:.5em;
  color:var(--color-ink-soft);
}
.ap_stat_label{
  margin:0;
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  letter-spacing:.02em;
}

/* ---------- DUO — asymétrique puis inversé ---------- */
.ap_duo_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.ap_duo_wrap--inv{background:var(--color-sand-2)}
.ap_duo{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--6);
  align-items:start;
}
.ap_duo_col{
  display:flex;flex-direction:column;gap:var(--_spacing---space--5);
}
.ap_duo_media{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.ap_duo_media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-inout);
}
.ap_duo_media--tall{aspect-ratio:3/4}
.ap_duo_media--small{aspect-ratio:3/2}
.ap_duo_col:hover .ap_duo_media img{transform:scale(1.04)}
.ap_duo_copy{display:flex;flex-direction:column;gap:var(--_spacing---space--2)}
.ap_duo_name{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,1.6vw + .5rem,1.875rem);
  font-weight:300;
  line-height:1.1;
}
.ap_duo_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
  max-width:34rem;
}

/* ---------- VOIX DES CLIENTS — avis sourcés ---------- */
.ap_voix_wrap{
  background:var(--color-white);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.ap_voix_head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  margin-bottom:var(--_spacing---space--7);
}
.ap_voix_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
}
.ap_voix_lead{
  margin-top:var(--_spacing---space--3);
  max-width:36rem;
  color:var(--color-ink-soft);
  line-height:1.65;
}
.ap_voix_list{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--5);
}
.ap_quote{
  margin:0;
  padding:var(--_spacing---space--5);
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  background:var(--color-sand);
}
.ap_quote_text{
  font-family:var(--font-display);
  font-size:clamp(1.125rem,1.2vw + .5rem,1.375rem);
  font-weight:300;
  line-height:1.4;
  color:var(--color-ink);
}
.ap_quote_src{
  margin-top:var(--_spacing---space--3);
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  letter-spacing:.02em;
}

/* ---------- ENGAGEMENTS DE SERVICE ---------- */
.ap_eng_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.ap_eng_head{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  margin-bottom:var(--_spacing---space--7);
}
.ap_eng_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
}
.ap_eng_grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
  margin-bottom:var(--_spacing---space--7);
}
.ap_eng_item{
  display:flex;flex-direction:column;gap:var(--_spacing---space--2);
  padding:var(--_spacing---space--4);
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  background:var(--color-white);
}
.ap_eng_name{
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:300;
  line-height:1.1;
}
.ap_eng_text{
  font-size:var(--font-size-small);
  line-height:1.6;
  color:var(--color-ink-soft);
}
.ap_eng_media{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--4);
}
.ap_eng_fig{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius--small);
}
.ap_eng_fig img{
  width:100%;height:100%;object-fit:cover;
}
.ap_eng_note{
  margin-top:var(--_spacing---space--5);
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
  text-align:center;
  max-width:44rem;
  margin-inline:auto;
}

/* ---------- Grilles responsive ---------- */
@container (width >= 55em){
  .ap_duo{
    grid-template-columns:55fr 45fr;
    gap:var(--_spacing---space--8);
  }
  .ap_duo_wrap--inv .ap_duo{
    grid-template-columns:45fr 55fr;
  }
  .ap_voix_list{
    grid-template-columns:repeat(3,1fr);
  }
  .ap_eng_grid{
    grid-template-columns:repeat(4,1fr);
  }
  .ap_eng_media{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:40rem){
  .ap_intro_media,
  .ap_intro_col{
    width:100%;
    max-width:100%;
  }
  .ap_stats_list{
    grid-template-columns:repeat(2,1fr);
    gap:var(--_spacing---space--4) 0;
  }
  .ap_stat:nth-child(odd){border-left:0}
  .ap_stat:nth-child(even){border-left:var(--border-width--main) solid var(--color-line)}
  .ap_stat:nth-child(n+3){border-top:var(--border-width--main) solid var(--color-line);padding-top:var(--_spacing---space--4)}
}

/* ============================================================
   PAGE — CONTACT & LOCALISATION FUSIONNÉES (DEV-0921-09)
   Ajouts en fin de fichier. Ne touche pas au reste de main.css.
   ============================================================ */

.page-contact{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow-x:clip;
}

/* ---------- HERO — plein cadre, titre superposé en bas, AUCUN CTA ---------- */
.contact_hero_media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.contact_hero_media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.contact_hero_layout{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  padding-bottom:var(--_spacing---section-space--main);
}

/* ---------- DUO CARTE / COORDONNÉES — 50/50, carte 100svh ---------- */
.duo_carte_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
}
.duo_carte{
  display:grid;
  grid-template-columns:1fr;
}
.duo_carte_map{
  position:relative;
  min-height:100svh;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.duo_carte_map iframe{
  flex:1;
  min-height:0;
  width:100%;
  border:0;
  display:block;
}
/* Repli lisible si l'iframe ne charge pas (l'iframe est vide, le contenu reste sous elle) */
.duo_carte_repli{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding:var(--_spacing---space--4) var(--_spacing---space--5);
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---space--2);
  background:var(--color-white);
  border-top:var(--border-width--main) solid var(--color-line);
}
.duo_carte_addr{
  font-size:var(--font-size-small);
  color:var(--color-ink);
  line-height:1.5;
}
.duo_carte_itineraire{
  font-size:var(--font-size-small);
  font-weight:500;
  color:var(--color-brand);
  text-decoration:none;
}
.duo_carte_itineraire:hover{text-decoration:underline}

.duo_carte_coords{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--_spacing---space--4);
  padding:var(--_spacing---section-space--large) var(--site--margin);
}
.duo_carte_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.coords_list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  border-top:var(--border-width--main) solid var(--color-line);
}
.coords_item{
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---space--1);
  padding:var(--_spacing---space--4) 0;
  border-bottom:var(--border-width--main) solid var(--color-line);
}
.coords_label{
  font-family:var(--font-body);
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-ink-soft);
}
.coords_value{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1.4vw + .5rem,1.625rem);
  font-weight:300;
  line-height:1.3;
  color:var(--color-ink);
}
.coords_link{
  text-decoration:none;
  transition:color .25s ease;
}
.coords_link:hover{color:var(--color-brand)}

.duo_carte_cta{
  align-self:flex-start;
  margin-top:var(--_spacing---space--2);
}

@media (min-width:55em){
  .duo_carte{
    grid-template-columns:49fr 51fr;
    align-items:stretch;
  }
  .duo_carte_map{
    min-height:100svh;
    height:100svh;
  }
  .duo_carte_coords{
    padding:var(--_spacing---section-space--large) var(--_spacing---space--6);
  }
}
@media (max-width:40rem){
  .duo_carte_map{
    min-height:0;
    height:72svh;
  }
  .duo_carte_repli{
    position:relative;
  }
  .duo_carte_coords{
    padding-top:var(--_spacing---section-space--main);
    padding-bottom:var(--_spacing---section-space--main);
  }
}

/* ---------- ACCÈS — accordéon à filets, un seul ouvert à la fois ---------- */
.acces_wrap{
  background:var(--color-sand-2);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.acces_header{
  max-width:40rem;
  margin-bottom:var(--_spacing---space--7);
}
.acces_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.acces_list{
  max-width:52rem;
  border-top:var(--border-width--main) solid var(--color-line);
}
.acces_item{
  border-bottom:var(--border-width--main) solid var(--color-line);
}
.acces_question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--_spacing---space--4);
  padding:var(--_spacing---space--4) 0;
  cursor:pointer;
  list-style:none;
}
.acces_question::-webkit-details-marker{display:none}
.acces_label{
  font-family:var(--font-body);
  font-size:var(--font-size-eyebrow);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-ink);
}
.acces_toggle{
  flex:none;
  width:2rem;height:2rem;
  display:flex;align-items:center;justify-content:center;
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--round);
  transition:background-color .25s ease,color .25s ease,transform .35s var(--ease-roll);
}
.acces_toggle svg{width:1rem;height:1rem}
.acces_item[open] .acces_toggle{
  background:var(--color-ink);
  color:var(--color-sand);
  transform:rotate(45deg);
}
.acces_answer{
  padding:0 0 var(--_spacing---space--4);
  max-width:44rem;
}
.acces_answer p{
  color:var(--color-ink-soft);
  line-height:1.65;
}

/* ---------- DISTANCES — liste mesurée + deux adresses + restaurants ---------- */
.distances_wrap{
  background:var(--color-sand);
  color:var(--color-ink);
  padding-block:var(--_spacing---section-space--large);
}
.distances_header{
  max-width:44rem;
  margin-bottom:var(--_spacing---space--7);
}
.distances_title{
  font-family:var(--font-display);
  font-size:var(--font-size-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.01em;
  margin-top:var(--_spacing---space--2);
}
.distances_lead{
  margin-top:var(--_spacing---space--3);
  color:var(--color-ink-soft);
  max-width:40rem;
}
.distances_grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--_spacing---space--7);
  align-items:start;
}
.distances_list{
  list-style:none;margin:0;padding:0;
  border-top:var(--border-width--main) solid var(--color-line);
}
.distance_item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--_spacing---space--4);
  padding:var(--_spacing---space--3) 0;
  border-bottom:var(--border-width--main) solid var(--color-line);
}
.distance_name{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:300;
  line-height:1.3;
  color:var(--color-ink);
}
.distance_val{
  font-size:var(--font-size-small);
  color:var(--color-ink-soft);
  white-space:nowrap;
}
.distances_side{
  display:flex;
  flex-direction:column;
  gap:var(--_spacing---space--6);
}
.adresses_title,
.restos_title{
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:300;
  line-height:1.1;
  margin-bottom:var(--_spacing---space--3);
}
.adresse{
  padding:var(--_spacing---space--4);
  border:var(--border-width--main) solid var(--color-line);
  border-radius:var(--radius--small);
  background:var(--color-white);
}
.adresse + .adresse{margin-top:var(--_spacing---space--4)}
.adresse_name{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:300;
  line-height:1.1;
  margin-bottom:var(--_spacing---space--2);
}
.adresse_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
}
.restos_text{
  font-size:var(--font-size-small);
  line-height:1.65;
  color:var(--color-ink-soft);
}
@container (width >= 55em){
  .distances_grid{
    grid-template-columns:5fr 6fr;
    gap:var(--_spacing---space--8);
  }
}

/* ============================================================
   UTILITAIRE — texte accessible mais invisible
   Sert au H1 de experience.html : present pour le referencement et les
   lecteurs d'ecran, sans etre pose sur l'image (regle de la reference).
   ============================================================ */
.u-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}