/* =========================================================
   THE FACE INSTITUT — Feuille de style
   Design system : ivoire / sable / beige / taupe / or brossé
   ========================================================= */

:root{
  /* Couleurs */
  --ivory:      #FAF7F2;
  --cream:      #F4EEE5;
  --sand:       #EBE1D4;
  --beige:      #DDCEB9;
  --taupe:      #B29B7E;
  --gold:       #B5945A;
  --gold-soft:  #D8C39A;
  --espresso:   #2B241C;
  --ink:        #17130F;
  --muted:      #7A6E60;
  --line:       rgba(178,155,126,.26);
  --line-soft:  rgba(178,155,126,.16);

  /* Typographie */
  --font-serif: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --font-sans:  "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;

  /* Rythme & grille */
  --max:        1280px;
  --gutter:     clamp(20px, 5vw, 60px);
  --sect:       clamp(72px, 9.5vw, 140px);   /* espacement vertical des sections */
  --gap:        clamp(18px, 2.4vw, 32px);    /* gouttière des grilles */
  --gap-lg:     clamp(38px, 6vw, 88px);      /* gouttière des blocs 2 colonnes */
  --stack:      clamp(38px, 5vw, 68px);      /* titre de section → contenu */
  --head-h:     82px;

  /* Effets */
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --shadow:     0 30px 70px -35px rgba(43,36,28,.35);
  --shadow-lg:  0 44px 90px -40px rgba(43,36,28,.45);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ivory); color:var(--espresso);
  font-family:var(--font-sans); font-weight:300; font-size:16px;
  line-height:1.75; letter-spacing:.01em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,blockquote{ font-family:var(--font-serif); font-weight:400; margin:0; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
sup{ font-size:.6em; }
::selection{ background:var(--beige); color:var(--ink); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect); }

/* Lien d'évitement — visible uniquement au clavier */
.skip{
  position:absolute; left:16px; top:-60px; z-index:300;
  background:var(--ink); color:var(--ivory);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:14px 24px; transition:top .3s var(--ease);
}
.skip:focus{ top:16px; }

/* ---------- Typographie utilitaire ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px; font-weight:400;
}
h2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 22px; }
h3{ font-size:1.45rem; line-height:1.28; }
.lede{ font-size:clamp(1rem, 1.4vw, 1.12rem); color:var(--muted); max-width:56ch; }
.section__head{ max-width:660px; margin-bottom:var(--stack); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__lede{ color:var(--muted); font-size:1.02rem; max-width:58ch; margin-inline:auto; }
.section__lede em{ color:var(--gold); font-style:italic; }
.stars{ color:var(--gold); letter-spacing:.24em; font-size:12px; }

/* ---------- Boutons ---------- */
.btn-solid,.btn-line,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:11.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  padding:17px 36px; border:1px solid transparent;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn-solid{ background:var(--ink); color:var(--ivory); }
.btn-solid:hover{ background:var(--gold); color:var(--ink); }
.btn-line{ border-color:currentColor; color:inherit; background:transparent; }
.btn-line:hover{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.btn-line--sm{ padding:12px 22px; font-size:10.5px; width:100%; margin-top:18px; }
.btn-ghost{ border:1px solid var(--gold); color:var(--gold); padding:12px 24px; background:transparent; }
.btn-ghost:hover{ background:var(--gold); color:var(--ivory); }

/* ---------- Bandeau annonce ---------- */
.announce{
  background:var(--ink); color:var(--sand);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  padding:11px var(--gutter); overflow:hidden;
}
.announce__track{ display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap; text-align:center; }
.announce .dot{ color:var(--gold); font-size:7px; }
.announce__date,.announce__rating{ color:var(--gold-soft); }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,242,.9);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .4s var(--ease);
}
.header.is-scrolled{ box-shadow:0 1px 26px rgba(43,36,28,.08); }
.header__inner{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);
  height:var(--head-h); display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:34px; height:34px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-sans); font-size:14.5px; letter-spacing:.34em; color:var(--ink); }
.brand__sub{ font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--gold); letter-spacing:.16em; margin-top:3px; }

.nav{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); }
.nav a{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--espresso); position:relative; padding-block:6px; transition:color .35s var(--ease); }
.nav a:not(.nav__cta)::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .45s var(--ease); }
.nav a:not(.nav__cta):hover{ color:var(--gold); }
.nav a:not(.nav__cta):hover::after{ width:100%; }

.burger{ display:none; background:none; border:0; width:40px; height:40px; padding:9px; position:relative; z-index:101; }
.burger span{ display:block; height:1px; background:var(--ink); margin:5px 0; transition:transform .4s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ══════════ HERO — composition scindée ══════════ */
.hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  min-height:calc(100vh - var(--head-h)); min-height:calc(100svh - var(--head-h)); isolation:isolate;
}
@keyframes float{ from{ transform:scale(1.04) translateY(0); } to{ transform:scale(1.1) translateY(-14px); } }

/* Le blanc du logo disparaît grâce au fondu « multiply » */
.hero__logo{ margin:0 auto clamp(14px,2vw,24px); width:min(460px,100%); }
.hero__logo img{ width:100%; height:auto; mix-blend-mode:multiply; filter:contrast(1.06); }

.hero__subtitle{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.55rem); color:var(--gold);
  margin:0 auto 14px; letter-spacing:.02em;
}
.hero__baseline{
  font-size:clamp(.7rem,1.15vw,.85rem); letter-spacing:.26em; text-transform:uppercase;
  color:var(--espresso); opacity:.72; line-height:2.1; margin:0 auto 22px;
  padding-top:14px; border-top:1px solid var(--line); display:inline-block;
}
.hero__lede{ font-size:clamp(.96rem,1.2vw,1.06rem); color:var(--espresso); opacity:.84; max-width:46ch; margin:0 auto 32px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.hero__note{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin:30px 0 0; font-size:.84rem; color:var(--muted);
}
.hero__note strong{ font-weight:400; color:var(--espresso); }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero__media-tag{
  position:absolute; left:clamp(18px,2.4vw,32px); bottom:clamp(18px,2.4vw,32px); z-index:2;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory);
  border-left:2px solid var(--gold); padding-left:12px; line-height:1.6; max-width:80%;
}

/* ---------- Bandeau confiance ---------- */
.trust{ background:var(--ivory); border-bottom:1px solid var(--line-soft); padding-block:clamp(34px,4.4vw,54px); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.trust__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; position:relative; }
.trust__item + .trust__item::before{
  content:""; position:absolute; left:calc(var(--gap) / -2); top:12%; height:76%; width:1px; background:var(--line);
}
.trust__item strong{ font-family:var(--font-serif); font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:400; color:var(--ink); line-height:1; }
.trust__item strong span{ font-size:.46em; color:var(--taupe); }
.trust__lbl{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ---------- Marquee ---------- */
.marquee{ background:var(--ink); color:var(--sand); padding:15px 0; overflow:hidden; }
.marquee__track{
  display:flex; gap:32px; align-items:center; white-space:nowrap; width:max-content;
  animation:slide 48s linear infinite; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
}
.marquee .d{ color:var(--gold); font-size:7px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ══════════ NOS UNIVERS ══════════ */
.univers{ background:var(--cream); }
.univers__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.uni{
  position:relative; display:block; overflow:hidden; background:var(--ink);
  aspect-ratio:3/4; isolation:isolate;
}
.uni img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  filter:grayscale(.15) brightness(.92);
}
.uni::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(23,19,15,.88) 0%, rgba(23,19,15,.35) 48%, rgba(23,19,15,.05) 100%);
  transition:opacity .6s var(--ease);
}
.uni:hover img{ transform:scale(1.07); filter:grayscale(0) brightness(1); }
.uni__body{
  position:relative; z-index:2; display:flex; flex-direction:column; height:100%;
  justify-content:flex-end; padding:clamp(20px,2.2vw,30px); color:var(--ivory);
}
.uni__num{
  font-family:var(--font-serif); font-size:.9rem; color:var(--gold-soft);
  letter-spacing:.18em; margin-bottom:auto;
}
.uni__title{ font-family:var(--font-serif); font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.2; margin-bottom:8px; }
.uni__desc{ font-size:.82rem; color:rgba(235,225,212,.78); line-height:1.6; }
.uni__more{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft);
  margin-top:16px; opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.uni:hover .uni__more,.uni:focus-visible .uni__more{ opacity:1; transform:none; }

/* ══════════ LA MAISON ══════════ */
.maison{ background:var(--ivory); }
.maison__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:center; }
.maison__visual{ position:relative; padding-bottom:clamp(50px,7vw,86px); padding-right:clamp(30px,4vw,54px); }
.maison__img-main{
  width:100%; aspect-ratio:3/2; object-fit:cover; box-shadow:var(--shadow);
}
.maison__img-inset{
  position:absolute; right:0; bottom:0; width:clamp(150px,26%,230px);
  aspect-ratio:3/4; object-fit:cover;
  border:6px solid var(--ivory); box-shadow:var(--shadow-lg);
}
.maison__visual::before{
  content:""; position:absolute; left:-18px; top:-18px; width:44%; height:52%;
  border:1px solid var(--beige); z-index:-1;
}

.pillars{ list-style:none; margin:34px 0 0; padding:0; }
.pillars li{ display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.pillars li:last-child{ border-bottom:1px solid var(--line); }
.pillars__num{ font-family:var(--font-serif); font-size:.95rem; color:var(--gold); letter-spacing:.1em; padding-top:5px; min-width:26px; }
.pillars h3{ font-size:1.14rem; margin:0 0 4px; }
.pillars p{ margin:0; font-size:.92rem; color:var(--muted); }

.team-inline{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.tm{
  margin:0; display:flex; align-items:baseline; gap:10px;
  border:1px solid var(--line); padding:12px 20px; background:var(--cream);
}
.tm strong{ font-family:var(--font-serif); font-size:1.2rem; font-weight:400; }
.tm span{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ══════════ OFFRES ══════════ */
.offres{ background:var(--cream); }
.offres__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--gap); }
.offre{
  background:var(--ivory); border:1px solid var(--gold-soft); padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; position:relative;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.offre:hover{ transform:translateY(-7px); box-shadow:var(--shadow); }
.offre__flag{
  position:absolute; top:0; left:clamp(24px,2.6vw,34px); transform:translateY(-50%);
  background:var(--gold); color:var(--ink); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; padding:6px 13px;
}
.offre h3{ font-size:1.26rem; margin:8px 0 12px; line-height:1.24; }
.offre p{ font-size:.88rem; color:var(--muted); flex:1; margin-bottom:16px; }
.offre__foot{ display:flex; justify-content:space-between; align-items:baseline; padding-top:15px; border-top:1px solid var(--line); }
.offre__meta{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.price{ font-family:var(--font-serif); font-size:1.42rem; color:var(--ink); }

/* ══════════ PRESTATIONS ══════════ */
.prestations{ background:var(--ivory); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:var(--stack); }
.filter{
  background:transparent; border:1px solid var(--line); color:var(--espresso);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:10px 17px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); line-height:1.4;
}
.filter:hover{ border-color:var(--gold); color:var(--gold); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

.cat{ margin-bottom:clamp(42px,5vw,68px); }
.cat:last-child{ margin-bottom:0; }
.cat[hidden]{ display:none; }
.cat__head{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.cat__head h3{ font-size:clamp(1.5rem,2.6vw,2rem); display:flex; align-items:center; gap:12px; letter-spacing:-.01em; }
.cat__icon{ font-size:.82em; }
.cat__intro{ margin:12px 0 0; font-size:.91rem; color:var(--muted); max-width:80ch; }
.cat--feature .cat__head h3{ color:var(--gold); }

.presta{ list-style:none; margin:0; padding:0; }
.presta__item{
  display:flex; gap:clamp(16px,3vw,42px); align-items:flex-start; justify-content:space-between;
  padding:20px clamp(10px,1.4vw,18px); border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease);
}
.presta__item:hover{ background:var(--cream); }
.presta__item.is-star{ background:rgba(216,195,154,.16); }
.presta__main{ flex:1; min-width:0; }
.presta__main h4{ font-size:1.12rem; margin:0 0 5px; line-height:1.4; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.presta__main p{ margin:0; font-size:.87rem; color:var(--muted); max-width:70ch; line-height:1.65; }
.presta__warn{ color:var(--gold) !important; font-style:italic; margin-top:5px !important; }

.tag{ font-family:var(--font-sans); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; padding:4px 9px; line-height:1; }
.tag--star{ background:var(--gold); color:var(--ink); }
.tag--cure{ background:var(--sand); color:var(--espresso); border:1px solid var(--beige); }
.tag--free{ background:var(--ink); color:var(--gold-soft); }

.presta__side{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); flex-shrink:0; }
.presta__duree{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); min-width:50px; text-align:right; }
.presta__side .price{ min-width:76px; font-size:1.26rem; text-align:right; }
.btn-book{
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 19px; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-book:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* ══════════ TECHNOLOGIES ══════════ */
.technologies{ background:var(--cream); }
.techs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.tech{
  border:1px solid var(--line); padding:clamp(24px,2.6vw,34px); background:var(--ivory);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tech:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tech__icon{ font-size:1.6rem; display:block; margin-bottom:14px; }
.tech h3{ font-size:1.26rem; margin:0 0 12px; line-height:1.28; }
.tech p{ margin:0; font-size:.89rem; color:var(--muted); }

/* variante avec photo : occupe 3 colonnes en 2 sous-colonnes */
.tech--photo{
  grid-column:span 3; flex-direction:row; align-items:stretch; padding:0; overflow:hidden;
}
.tech--photo .tech__media{ width:44%; flex-shrink:0; overflow:hidden; background:var(--sand); }
.tech--photo .tech__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tech--photo:hover .tech__media img{ transform:scale(1.05); }
.tech--photo .tech__body{ padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; justify-content:center; }
.tech__cta{
  align-self:flex-start; margin-top:20px; background:transparent; border:0;
  border-bottom:1px solid var(--gold); color:var(--gold); padding:0 0 5px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.tech__cta:hover{ color:var(--ink); border-color:var(--ink); }

/* ══════════ GALERIE ══════════ */
.galerie{ background:var(--ivory); }
.mosaic{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,215px); gap:var(--gap);
}
.mosaic__item{ margin:0; position:relative; overflow:hidden; background:var(--sand); }
.mosaic__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.mosaic__item:hover img{ transform:scale(1.06); }
.mosaic__item--tall{ grid-row:span 2; }
.mosaic__item--wide{ grid-column:span 2; }
.mosaic__item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 18px 15px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory);
  background:linear-gradient(to top, rgba(23,19,15,.82) 0%, rgba(23,19,15,0) 100%);
}

/* ══════════ CITATION ══════════ */
.quote{ background:var(--ink); color:var(--sand); padding-block:clamp(78px,9.5vw,128px); text-align:center; overflow:hidden; }
.quote__mark{ font-family:var(--font-serif); font-size:12rem; line-height:.5; color:rgba(181,148,90,.22); margin:0 0 8px; }
.quote blockquote{ font-size:clamp(1.45rem,3.4vw,2.6rem); line-height:1.34; max-width:28ch; margin:0 auto; letter-spacing:-.015em; }
.quote blockquote em{ color:var(--gold-soft); font-style:italic; }
.quote__author{ margin:32px 0 0; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--taupe); }

/* ══════════ AVIS ══════════ */
.avis{ background:var(--cream); }
.notes{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.note-item{ background:var(--ivory); border:1px solid var(--line); padding:34px 20px; text-align:center; }
.note-item__val{ display:block; font-family:var(--font-serif); font-size:2.5rem; color:var(--gold); line-height:1; }
.note-item__lbl{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.avis__cta{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; margin-top:clamp(34px,4vw,50px);
}

/* ── Témoignages : carrousel horizontal à défilement natif ── */
.temoins{ margin-top:clamp(46px,5.5vw,74px); }
.temoins__titre{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem); text-align:center;
  margin:0 0 clamp(26px,3vw,38px); color:var(--espresso);
}
.temoins__titre::after{
  content:""; display:block; width:52px; height:1px;
  background:var(--gold-soft); margin:16px auto 0;
}

.temoins__piste{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3);
  gap:24px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 4px 20px; margin:0 -4px;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.temoins__piste::-webkit-scrollbar{ display:none; }
.temoins__piste:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:6px; }

.temoin{
  scroll-snap-align:start; position:relative;
  background:var(--ivory); border:1px solid var(--line);
  padding:clamp(28px,2.6vw,38px) clamp(22px,2.2vw,32px) clamp(24px,2.2vw,30px);
  display:flex; flex-direction:column; min-height:100%;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out),
             border-color .6s var(--ease-out);
}
.temoin:hover{
  transform:translateY(-6px); border-color:var(--gold-soft);
  box-shadow:var(--shadow);
}
.temoin__quote{
  position:absolute; top:6px; right:18px; line-height:1;
  font-family:var(--font-serif); font-size:5.2rem;
  color:var(--gold); opacity:.14; pointer-events:none;
}
.temoin__stars{
  color:var(--gold); letter-spacing:.22em; font-size:13px;
  margin-bottom:16px; display:block;
}
.temoin__stars-off{ color:var(--beige); }
.temoin__txt{
  margin:0 0 22px; font-size:.95rem; line-height:1.8; color:var(--muted);
  flex:1 1 auto;
  /* Les avis très longs sont écrêtés à l'affichage — le texte reste entier
     dans les données et lisible en entier sur la fiche Google. */
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical;
  overflow:hidden;
}
.temoin__pied{
  display:flex; align-items:center; gap:14px;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.temoin__ini{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--sand); border:1px solid var(--line);
  font-family:var(--font-serif); font-size:.95rem; color:var(--espresso);
  letter-spacing:.04em;
}
.temoin__qui{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.temoin__nom{ font-size:.9rem; color:var(--espresso); letter-spacing:.02em; }
.temoin__meta{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe);
}

.temoins__nav{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:clamp(18px,2vw,26px);
}
.temoins__fleche{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:transparent; border:1px solid var(--line); color:var(--espresso);
  font-size:15px; line-height:1; cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), opacity .4s var(--ease);
}
.temoins__fleche:hover:not(:disabled){
  background:var(--espresso); border-color:var(--espresso); color:var(--ivory);
}
.temoins__fleche:disabled{ opacity:.3; cursor:default; }
.temoins__points{
  display:flex; align-items:center; justify-content:center;
  gap:9px; flex-wrap:wrap; max-width:100%; min-width:0;
}
.temoins__point{
  width:26px; height:2px; padding:0; border:0; cursor:pointer;
  background:var(--beige); transition:background .45s var(--ease), width .45s var(--ease);
}
.temoins__point.is-on{ background:var(--gold); width:40px; }

/* Tablette : deux cartes de front */
@media (max-width:1000px){
  .temoins__piste{ grid-auto-columns:calc((100% - 24px) / 2); }
}
/* Téléphone : une carte, avec un aperçu de la suivante pour inviter au geste */
@media (max-width:640px){
  .temoins__piste{ grid-auto-columns:88%; gap:16px; scroll-snap-type:x proximity; }
  .temoin__txt{ -webkit-line-clamp:11; }
  .temoins__fleche{ display:none; }
  .temoins__nav{ gap:10px; }
  /* Une carte par vue = autant de points que d'avis : on les resserre
     pour qu'ils tiennent sur une seule ligne, sans élargir la page. */
  .temoins__points{ gap:6px; }
  .temoins__point{ width:14px; }
  .temoins__point.is-on{ width:22px; }
}
@media (prefers-reduced-motion:reduce){
  .temoins__piste{ scroll-behavior:auto; }
  .temoin:hover{ transform:none; box-shadow:none; }
}

/* ══════════ INFOS PRATIQUES ══════════ */
.infos{ background:var(--ivory); }
.infos__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap-lg); align-items:start; }
.info-list{ list-style:none; margin:34px 0 0; padding:0; }
.info-list li{ display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); }
.info-list span{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); flex-shrink:0; }
.info-list strong{ font-weight:400; font-size:.94rem; text-align:right; line-height:1.6; }
.info-list a{ border-bottom:1px solid var(--beige); transition:border-color .4s var(--ease), color .4s var(--ease); }
.info-list a:hover{ border-color:var(--gold); color:var(--gold); }
.infos__sub{
  font-size:1.32rem; margin:36px 0 0; padding-top:26px;
  border-top:1px solid var(--line);
}
.infos__sub + .info-list{ margin-top:8px; }
.infos__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.horaires{ background:var(--cream); border:1px solid var(--line); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); }
.horaires__title{ font-size:1.42rem; margin:0 0 20px; }
.horaires ul{ list-style:none; margin:0; padding:0; }
.horaires li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.93rem;
}
.horaires li:last-child{ border-bottom:0; }
.horaires li strong{ font-weight:400; color:var(--espresso); }
.horaires li strong.is-closed{ color:var(--taupe); font-style:italic; }
.horaires li.is-today,.horaires li.is-today strong{ color:var(--gold); }
.today-tag{
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); padding:3px 8px; font-style:normal;
}
.horaires__note{ margin:18px 0 0; font-size:.81rem; color:var(--muted); font-style:italic; }

/* Formulaire de demande de rendez-vous */
.rdvform{
  margin-top:var(--gap); background:var(--ivory); border:1px solid var(--line);
  padding:clamp(24px,3vw,36px);
}
.rdvform__title{ font-size:1.32rem; margin:0 0 8px; }
.rdvform__lede{ font-size:.88rem; color:var(--muted); margin:0 0 22px; }
.rdvform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rdvform .field{ margin-bottom:16px; display:flex; flex-direction:column; }
.rdvform label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.rdvform input,.rdvform textarea{
  font-family:var(--font-sans); font-size:.94rem; font-weight:300; color:var(--espresso);
  background:transparent; border:0; border-bottom:1px solid var(--beige);
  padding:10px 2px; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease);
}
.rdvform textarea{ resize:vertical; }
.rdvform input:focus,.rdvform textarea:focus{ outline:none; border-bottom-color:var(--gold); }
.rdvform input::placeholder,.rdvform textarea::placeholder{ color:#BFB3A4; }
.rdvform .piege{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rdvform__msg{
  margin:14px 0 0; text-align:center; font-size:.89rem; min-height:1.2em;
  color:var(--gold); line-height:1.6;
}
.rdvform__msg.is-error{ color:#B4593F; }

@media (max-width:560px){ .rdvform__row{ grid-template-columns:1fr; gap:0; } }

/* ══════════ FOOTER ══════════ */
.footer{ background:var(--ink); color:var(--sand); padding-top:clamp(58px,7vw,92px); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:var(--gap); padding-bottom:clamp(44px,5vw,68px); }
.footer__brand img{ margin-bottom:18px; filter:brightness(0) invert(1) sepia(.5) saturate(2) hue-rotate(-10deg); }
.footer__name{ font-size:13.5px; letter-spacing:.32em; margin:0 0 6px; color:var(--ivory); }
.footer__sub{
  font-family:var(--font-serif); font-style:italic; font-size:1.02rem;
  color:var(--gold-soft); margin:0 0 12px;
}
.footer__tag{ font-size:.83rem; color:var(--taupe); margin:0; max-width:34ch; line-height:1.7; }
.footer__col h4{ font-family:var(--font-sans); font-size:10px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.footer__col a,.footer__col p{ display:block; font-size:.88rem; color:rgba(235,225,212,.72); margin:0 0 10px; transition:color .35s var(--ease); }
.footer__col a:hover{ color:var(--gold-soft); }
/* Bloc « À propos » */
.footer__about-txt{ margin:0 0 16px; line-height:1.8; }
.footer__about-txt strong{
  color:var(--ivory); font-weight:400; font-size:12px; letter-spacing:.24em;
}
.footer__visit{
  display:inline-block !important; margin:0 !important;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold) !important; border:1px solid var(--gold); padding:11px 20px;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.footer__visit:hover{ background:var(--gold); color:var(--ink) !important; }

/* Navigation de pied de page */
.footer__nav{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(216,195,154,.16); padding-block:20px;
}
.footer__nav a{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(235,225,212,.78); border-bottom:1px solid transparent;
  padding-bottom:3px; transition:color .35s var(--ease), border-color .35s var(--ease);
}
.footer__nav a:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
.footer__nav-sep{ color:var(--gold); font-size:9px; }

/* Accès à l'espace d'administration — discret mais repérable */
.footer__admin{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(216,195,154,.32) !important;
  padding:9px 18px; color:var(--taupe) !important;
  transition:background .45s var(--ease-out), color .45s var(--ease-out),
             border-color .45s var(--ease-out);
}
.footer__admin:hover{
  background:var(--gold); border-color:var(--gold) !important; color:var(--ink) !important;
}
.footer__admin-ico{ font-size:12px; line-height:1; }

.footer__bar{ display:flex; justify-content:space-between; align-items:center; gap:14px 26px; flex-wrap:wrap; border-top:1px solid rgba(216,195,154,.16); padding-block:22px; }
.footer__bar p{ margin:0; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); }
.footer__bar a{ color:var(--taupe); border-bottom:1px solid transparent; transition:color .35s var(--ease), border-color .35s var(--ease); }
.footer__bar a:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

/* ══════════ PAGE 404 ══════════ */
.erreur{
  min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,5vw,60px); position:relative; overflow:hidden; isolation:isolate;
}
.erreur__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(110% 80% at 72% 15%, rgba(216,195,154,.45) 0%, rgba(216,195,154,0) 60%),
    linear-gradient(165deg, var(--cream) 0%, var(--sand) 55%, var(--beige) 100%);
}
.erreur__box{
  width:min(560px,100%); text-align:center;
  background:rgba(250,247,242,.86); border:1px solid var(--gold-soft);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:clamp(38px,5vw,60px) clamp(26px,4vw,52px);
  box-shadow:var(--shadow-lg);
}
.erreur__mark{ margin:0 auto 22px; }
.erreur__code{
  font-family:var(--font-serif); font-size:clamp(3.4rem,9vw,5.4rem); line-height:.9;
  color:var(--gold-soft); margin:0 0 10px; letter-spacing:.04em;
}
.erreur__titre{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin:0 0 16px; line-height:1.16; }
.erreur__txt{ color:var(--muted); font-size:.96rem; margin:0 auto 30px; max-width:42ch; }
.erreur__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.erreur__contact{
  margin:28px 0 0; padding-top:22px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--muted);
}
.erreur__contact a{ color:var(--gold); border-bottom:1px solid var(--line); }
.erreur__contact a:hover{ border-color:var(--gold); }

@media (max-width:560px){
  .erreur__actions{ flex-direction:column; }
  .erreur__actions .btn-solid,.erreur__actions .btn-line{ width:100%; }
}

/* ══════════ POPUP AVIS GOOGLE ══════════ */
.review{
  position:fixed; inset:0; z-index:210; display:none;
  align-items:center; justify-content:center;
  padding:clamp(14px,4vw,26px);
  /* Encoches et barres système des téléphones */
  padding-top:max(clamp(14px,4vw,26px), env(safe-area-inset-top));
  padding-bottom:max(clamp(14px,4vw,26px), env(safe-area-inset-bottom));
}
.review.is-open{ display:flex; }
.review__overlay{
  position:absolute; inset:0; background:rgba(23,19,15,.7);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadeIn .4s var(--ease);
}
.review__box{
  position:relative; z-index:1; width:min(470px,100%);
  /* Un avis trop long ou un petit écran ne doivent jamais couper le bouton :
     la boîte défile à l'intérieur au lieu de déborder. */
  max-height:calc(100vh - 28px);
  max-height:calc(100svh - 28px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--ivory); border:1px solid var(--gold-soft);
  padding:clamp(34px,4.4vw,52px) clamp(24px,3.4vw,44px) clamp(26px,3vw,36px);
  text-align:center; box-shadow:0 50px 100px -30px rgba(0,0,0,.55);
  animation:reviewIn .55s var(--ease);
}
/* Filet doré discret en tête de boîte */
.review__box::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
@keyframes reviewIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.review__x{
  position:absolute; top:8px; right:8px; background:transparent; border:0;
  font-size:26px; line-height:1; color:var(--taupe);
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  transition:color .35s var(--ease);
}
.review__x:hover{ color:var(--ink); }
.review__mark{ margin:0 auto 18px; }
.review__stars{
  color:var(--gold); letter-spacing:.3em; font-size:16px; margin:0 0 14px;
}
.review__title{ font-size:clamp(1.7rem,3.2vw,2.2rem); margin:0 0 14px; line-height:1.14; }
.review__txt{ font-size:.94rem; color:var(--muted); line-height:1.75; margin:0 0 26px; }
.review__txt strong{ color:var(--espresso); font-weight:400; }
.review__go{ width:100%; }
.review__later{
  display:block; width:100%; margin:14px 0 0; background:transparent; border:0;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  padding:10px; transition:color .35s var(--ease);
}
.review__later:hover{ color:var(--ink); }
.review__note{
  margin:16px 0 0; font-size:.76rem; color:var(--taupe); font-style:italic;
}
/* Téléphone : titre resserré, boutons confortables au pouce */
@media (max-width:520px){
  .review__box{ padding-top:38px; }
  .review__title{ font-size:1.55rem; }
  .review__txt{ font-size:.9rem; line-height:1.7; margin-bottom:22px; }
  .review__mark{ width:44px; height:44px; margin-bottom:14px; }
  .review__go{ padding-top:16px; padding-bottom:16px; }
  .review__later{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  .review__box,.review__overlay{ animation:none; }
}

/* ══════════ PAGE MENTIONS LÉGALES ══════════ */
.legal{ background:var(--ivory); }
.legal__wrap{ max-width:840px; }
.legal__head{ margin-bottom:var(--stack); padding-bottom:var(--stack); border-bottom:1px solid var(--line); }
.legal__head h1{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.1; letter-spacing:-.015em; margin:0 0 20px;
}
.legal__block{ margin-bottom:clamp(34px,4vw,52px); }
.legal__block h2{
  font-size:clamp(1.3rem,2.2vw,1.65rem); margin:0 0 16px;
  padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.legal__block p{ font-size:.95rem; color:var(--muted); line-height:1.85; }
.legal__block strong{ font-weight:400; color:var(--espresso); }
.legal__block a{ color:var(--gold); border-bottom:1px solid var(--line); transition:border-color .4s var(--ease); }
.legal__block a:hover{ border-color:var(--gold); }

.legal__list{ list-style:none; margin:0 0 18px; padding:0; }
.legal__list li{
  display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.legal__list span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); flex-shrink:0; }
.legal__list strong{ font-weight:400; font-size:.93rem; text-align:right; }
.legal__todo{
  color:var(--gold) !important; font-style:italic;
  border:1px dashed var(--gold-soft); padding:3px 10px; font-size:.82rem !important;
}
.legal__note{
  background:var(--cream); border-left:2px solid var(--gold);
  padding:14px 18px; font-size:.86rem !important; font-style:italic; margin:0;
}
.legal__updated{
  margin:0 0 30px; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.legal__back{ margin:0; }

@media (max-width:560px){
  .legal__list li{ flex-direction:column; gap:4px; }
  .legal__list strong{ text-align:left; }
}

/* ══════════ BOUTON FLOTTANT ══════════ */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--ivory); border:1px solid var(--gold);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  padding:16px 25px; box-shadow:0 18px 40px -18px rgba(23,19,15,.6);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--gold); color:var(--ink); }
.fab__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }
.fab:hover .fab__dot{ background:var(--ink); }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ══════════ MODAL PLANITY ══════════ */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:clamp(0px,2.5vw,30px); }
.modal.is-open{ display:flex; }
.modal__overlay{
  position:absolute; inset:0; background:rgba(23,19,15,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .35s var(--ease);
}
.modal__box{
  position:relative; z-index:1; background:var(--ivory);
  width:min(1180px,100%); height:min(94vh,100%); height:min(94svh,100%);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.6); animation:popIn .45s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:none; } }

.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:20px clamp(20px,3vw,32px); border-bottom:1px solid var(--line);
  background:var(--cream); flex-shrink:0;
}
.modal__eyebrow{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.modal__title{ font-size:clamp(1.35rem,2.4vw,1.8rem); margin:0; line-height:1.15; }
.modal__selected{
  margin:10px 0 0; font-size:.85rem; color:var(--espresso);
  background:rgba(216,195,154,.28); border-left:2px solid var(--gold); padding:9px 14px; line-height:1.6;
}
.modal__selected strong{ font-weight:400; color:var(--gold); }
.modal__close{
  background:transparent; border:1px solid var(--beige); color:var(--espresso);
  width:44px; height:44px; font-size:24px; line-height:1; flex-shrink:0;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.modal__close:hover{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

.modal__body{ position:relative; flex:1; min-height:0; background:#fff; }
.modal__body iframe{ width:100%; height:100%; border:0; display:block; opacity:0; transition:opacity .6s var(--ease); }
.modal__body iframe.is-ready{ opacity:1; }

.modal__loader,.modal__fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center;
  padding:30px; background:var(--ivory); z-index:2;
}
.modal__loader[hidden],.modal__fallback[hidden]{ display:none; }
.modal__loader p,.modal__fallback p{ margin:0; font-size:.91rem; color:var(--muted); max-width:44ch; }
.modal__fallback-title{ font-family:var(--font-serif); font-size:1.45rem; color:var(--espresso) !important; }
.modal__spinner{ width:38px; height:38px; border:1px solid var(--beige); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.modal__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px clamp(20px,3vw,32px); border-top:1px solid var(--line); background:var(--cream); flex-shrink:0;
}
.modal__foot p{ margin:0; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.modal__foot strong{ color:var(--gold); font-weight:400; }
.modal__newtab{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .4s var(--ease);
}
.modal__newtab:hover{ border-color:var(--gold); }

/* ---------- Révélation au scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.4s; }

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

/* ══════════════════ RESPONSIVE ══════════════════ */

/* ≤ 1180px : univers et technologies en 2 colonnes */
@media (max-width:1180px){
  .univers__grid{ grid-template-columns:repeat(2,1fr); }
  .techs{ grid-template-columns:repeat(2,1fr); }
  .tech--photo{ grid-column:span 2; }
}

/* ≤ 1000px : passage en une colonne pour les blocs 2 colonnes */
@media (max-width:1000px){

  .maison__grid,.infos__grid{ grid-template-columns:1fr; }
  .maison__visual{ order:-1; padding-right:clamp(24px,6vw,54px); }
  .infos .infos__text{ order:-1; }

  .trust__grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .trust__item:nth-child(odd)::before{ display:none; }
  .trust__item:nth-child(3)::before,.trust__item:nth-child(4)::before{ top:-16px; height:0; }

  .notes{ grid-template-columns:repeat(2,1fr); }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; row-gap:38px; }
}

/* ≤ 860px : menu mobile */
@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0 0 auto; top:0; height:100vh; height:100svh; background:var(--ivory);
    flex-direction:column; justify-content:center; gap:22px;
    transform:translateY(-100%); transition:transform .6s var(--ease); z-index:99;
  }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:15px; letter-spacing:.22em; }

  .tech--photo{ flex-direction:column; }
  .tech--photo .tech__media{ width:100%; aspect-ratio:16/10; }

  .presta__item{ flex-direction:column; align-items:stretch; gap:14px; }
  .presta__side{ justify-content:space-between; }
  .presta__duree,.presta__side .price{ text-align:left; min-width:0; }

  .modal{ padding:0; }
  .modal__box{ height:100vh; height:100svh; width:100%; }
}

/* ≤ 640px */
@media (max-width:640px){
  .univers__grid{ grid-template-columns:1fr; }
  .uni{ aspect-ratio:4/3; }
  .techs{ grid-template-columns:1fr; }
  .tech--photo{ grid-column:span 1; }
  .mosaic{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .mosaic__item--tall,.mosaic__item--wide{ grid-row:span 1; grid-column:span 1; }
  .maison__img-inset{ width:38%; border-width:5px; }
}

/* ≤ 560px */
@media (max-width:560px){
  .footer__grid{ grid-template-columns:1fr; }
  /* Deux colonnes plutôt qu'une : empilées, les quatre notes repoussaient
     les témoignages à plus de 1000 px sous l'ancre « Avis ». */
  .notes{ grid-template-columns:repeat(2,1fr); }
  .note-item{ padding:22px 12px; }
  .note-item__val{ font-size:2rem; }
  .btn-solid,.btn-line{ width:100%; }
  .hero__actions,.infos__actions{ flex-direction:column; }
  .info-list li{ flex-direction:column; gap:4px; }
  .info-list strong{ text-align:left; }
  .quote__mark{ font-size:7.5rem; }
  .fab{ right:14px; bottom:14px; padding:14px 20px; font-size:10px; }
  .filters{ justify-content:flex-start; }
  .modal__head{ padding:16px 18px; }
  .team-inline{ flex-direction:column; }
}

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

/* =========================================================
   ══════════  COUCHE MOUVEMENT & MODERNISATION  ══════════
   Animations lentes et retenues, dans l'esprit des maisons
   de luxe : rien ne rebondit, tout glisse.
   ========================================================= */

:root{
  --ease-out:  cubic-bezier(.16,1,.3,1);        /* décélération franche */
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --dur:       .9s;
}

/* ---------- Rideau d'ouverture (pur CSS, aucun risque de blocage) ---------- */
.curtain{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:linear-gradient(165deg,var(--cream) 0%,var(--sand) 55%,var(--beige) 100%);
  display:flex; align-items:center; justify-content:center;
  animation:curtainOut 1s var(--ease-out) .45s forwards;
}
.curtain img{ width:66px; animation:curtainMark 1.4s var(--ease-out) forwards; }
@keyframes curtainMark{
  0%{ opacity:0; transform:scale(.86); }
  40%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.04); }
}
@keyframes curtainOut{
  to{ opacity:0; visibility:hidden; transform:translateY(-2%); }
}

/* ---------- Grain fin sur toute la page ---------- */
/* Le grain s'arrête au-dessus du hero : la photographie doit être servie
   exactement telle qu'elle est dans le fichier, sans la moindre couche.
   `top` démarre donc sous la bannière. La variable est fixée au chargement
   puis à chaque redimensionnement. */
.grain{
  position:fixed; top:var(--grain-top, 0px); right:0; bottom:0; left:0;
  z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ---------- Barre de progression de lecture ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:110;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transition:transform .12s linear; pointer-events:none;
}

/* ---------- En-tête qui s'efface au défilement ---------- */
.header{ transition:transform .55s var(--ease-out), box-shadow .4s var(--ease); }
.header.is-hidden{ transform:translateY(-100%); }

/* =========================================================
   Révélations au défilement
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Variantes déclarées via data-anim */
[data-anim="left"]      { transform:translateX(-42px); }
[data-anim="right"]     { transform:translateX(42px); }
[data-anim="zoom"]      { transform:scale(.94); }
[data-anim="blur"]      { filter:blur(9px); transform:none; }
[data-anim="blur"].is-visible{ filter:blur(0); }
[data-anim="line"]      { transform:none; clip-path:inset(0 100% 0 0); opacity:1;
                          transition:clip-path 1.1s var(--ease-out); }
[data-anim="line"].is-visible{ clip-path:inset(0 0 0 0); }

/* Voile qui se lève sur les images */
.mask{ position:relative; overflow:hidden; }
.mask::after{
  content:""; position:absolute; inset:0; z-index:3; background:var(--cream);
  transform-origin:100% 50%; transition:transform 1.2s var(--ease-out);
}
.mask.is-visible::after{ transform:scaleX(0); }
.mask img{
  transform:scale(1.12);
  transition:transform 1.6s var(--ease-out);
}
.mask.is-visible img{ transform:scale(1); }

/* Titres révélés ligne par ligne */
.split{ display:block; overflow:hidden; }
.split > span{
  display:block; transform:translateY(100%);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 110ms);
}
.is-visible .split > span,.split.is-visible > span{ transform:none; }

/* =========================================================
   Micro-interactions
   ========================================================= */

/* Boutons : remplissage qui glisse */
.btn-solid,.btn-line,.btn-ghost,.btn-book{
  position:relative; overflow:hidden; z-index:0;
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.btn-solid::before,.btn-line::before,.btn-ghost::before,.btn-book::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .55s var(--ease-out);
}
.btn-solid::before{ background:var(--gold); }
.btn-line::before,.btn-book::before{ background:var(--ink); }
.btn-ghost::before{ background:var(--gold); }
.btn-solid:hover::before,.btn-line:hover::before,
.btn-ghost:hover::before,.btn-book:hover::before{ transform:scaleY(1); }
.btn-solid:hover{ background:var(--ink); color:var(--ink); }
.btn-line:hover{ color:var(--ivory); border-color:var(--ink); background:transparent; }
.btn-book:hover{ color:var(--ivory); border-color:var(--ink); background:transparent; }
.btn-ghost:hover{ color:var(--ivory); background:transparent; }

/* Effet magnétique (piloté en JS, bureau uniquement) */
.magnet{ transition:transform .45s var(--ease-out); will-change:transform; }

/* Liens de navigation : trait qui balaie */
.nav a:not(.nav__cta)::after{ transition:width .5s var(--ease-out); }

/* Cartes univers : profondeur au survol */
.uni{ transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.uni:hover{ transform:translateY(-10px); box-shadow:0 40px 70px -40px rgba(23,19,15,.6); }
.uni img{ transition:transform 1.3s var(--ease-out), filter .7s var(--ease-out); }
.uni:hover img{ transform:scale(1.09); }
.uni__title{ transition:transform .6s var(--ease-out); }
.uni:hover .uni__title{ transform:translateX(6px); }

/* Prestations : liseré doré qui se déploie */
.presta__item{ position:relative; }
.presta__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .5s var(--ease-out);
}
.presta__item:hover::before{ transform:scaleY(1); }
.presta__item{ transition:background .45s var(--ease-out), padding-left .45s var(--ease-out); }
.presta__item:hover{ padding-left:calc(clamp(10px,1.4vw,18px) + 14px); }

/* Cartes technologies & offres */
.tech,.offre,.note-item{ transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease-out); }
.note-item:hover{ transform:translateY(-6px); border-color:var(--gold-soft); }

/* Filtres */
.filter{ transition:background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out), transform .3s var(--ease-out); }
.filter:hover{ transform:translateY(-2px); }

/* Apparition des catégories après filtrage */
.cat{ animation:catIn .65s var(--ease-out) both; }
@keyframes catIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* Chiffres clés */
.trust__item strong{ font-variant-numeric:tabular-nums; }

/* =========================================================
   Parallaxe (transform uniquement, piloté par requestAnimationFrame)
   ========================================================= */
[data-parallax]{ will-change:transform; }

/* =========================================================
   Visionneuse de galerie
   ========================================================= */
.mosaic__item{ cursor:zoom-in; }
.mosaic__item::after{
  content:"⤢"; position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(250,247,242,.9); color:var(--ink); font-size:14px;
  opacity:0; transform:scale(.8); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.mosaic__item:hover::after{ opacity:1; transform:scale(1); }

.lightbox{
  position:fixed; inset:0; z-index:250; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
}
.lightbox.is-open{ display:flex; }
.lightbox__bg{
  position:absolute; inset:0; background:rgba(23,19,15,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .4s var(--ease-out);
}
.lightbox__fig{
  position:relative; z-index:1; margin:0; max-width:min(1100px,100%);
  animation:lbIn .6s var(--ease-out);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.96) translateY(14px); } to{ opacity:1; transform:none; } }
.lightbox__fig img{
  max-width:100%; max-height:78svh; max-height:78vh; object-fit:contain;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.8);
}
.lightbox__fig figcaption{
  margin-top:16px; text-align:center; color:var(--sand);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.lightbox__x,.lightbox__prev,.lightbox__next{
  position:absolute; z-index:2; background:transparent; border:1px solid rgba(216,195,154,.4);
  color:var(--sand); width:48px; height:48px; font-size:18px; line-height:1;
  transition:background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.lightbox__x:hover,.lightbox__prev:hover,.lightbox__next:hover{
  background:var(--gold); color:var(--ink); border-color:var(--gold);
}
.lightbox__x{ top:20px; right:20px; }
.lightbox__prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:20px; top:50%; transform:translateY(-50%); }
.lightbox__compteur{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--taupe); font-size:11px; letter-spacing:.24em;
}

/* =========================================================
   Hero — mise en mouvement
   ========================================================= */
.hero__panel::before{ animation:float 26s ease-in-out infinite alternate; }
.hero__logo img{ animation:logoIn 1.6s var(--ease-out) both; animation-delay:.5s; }
@keyframes logoIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes heroWipe{ to{ transform:scaleY(0); } }

.scroll-hint{ transition:opacity .5s var(--ease-out); }
.scroll-hint.is-gone{ opacity:0; }

/* Halo doré qui suit discrètement le curseur (bureau) */
.glow{
  position:fixed; top:0; left:0; width:420px; height:420px; z-index:0;
  margin:-210px 0 0 -210px; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(181,148,90,.16) 0%, rgba(181,148,90,0) 68%);
  transition:opacity .6s var(--ease-out);
  will-change:transform;
}
.glow.is-on{ opacity:1; }

/* =========================================================
   Accessibilité — tout se fige si l'utilisateur le demande
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .curtain,.grain,.glow,.progress{ display:none !important; }
  .reveal,[data-anim],.mask,.split > span{
    opacity:1 !important; transform:none !important; filter:none !important;
    clip-path:none !important; transition:none !important;
  }
  .mask::after{ display:none; }
  .hero__media::before,.hero__logo img{ animation:none !important; }
  .cat{ animation:none !important; }
}

/* =========================================================
   ══════════  CARTE DE FIDÉLITÉ & ESPACE CLIENTE  ══════════
   ========================================================= */

.fidelite{ background:var(--cream); }
.fid__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--gap-lg); align-items:center;
}
.fid__args{ list-style:none; margin:32px 0 0; padding:0; }
.fid__args li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
  font-size:.94rem; color:var(--espresso);
}
.fid__args li span{ color:var(--gold); font-size:8px; padding-top:7px; }
.fid__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* ---------- La carte ---------- */
.fid__visuel{ display:flex; justify-content:center; }
.carte{
  width:min(420px,100%); aspect-ratio:1.6/1;
  background:linear-gradient(148deg,#241d16 0%,var(--ink) 42%,#0e0b09 100%);
  color:var(--sand); padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(23,19,15,.75);
  transition:transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
}
.carte::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 84% 8%, rgba(216,195,154,.22) 0%, rgba(216,195,154,0) 58%),
    radial-gradient(80% 70% at 6% 100%, rgba(181,148,90,.16) 0%, rgba(181,148,90,0) 60%);
}
.carte::after{
  content:""; position:absolute; top:-60%; left:-30%; width:60%; height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(18deg); animation:lustre 7s ease-in-out infinite;
}
@keyframes lustre{
  0%,72%{ transform:translateX(-40%) rotate(18deg); }
  100%{ transform:translateX(320%) rotate(18deg); }
}
.carte:hover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:0 54px 96px -34px rgba(23,19,15,.85); }
.carte > *{ position:relative; z-index:1; }

.carte__haut{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.carte__mark{ filter:brightness(0) invert(1) sepia(.5) saturate(2) hue-rotate(-10deg); }
.carte__type{
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-soft); text-align:right; max-width:56%; line-height:1.6;
}
.carte__nom{
  font-family:var(--font-serif); font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:auto 0 14px; color:var(--ivory); letter-spacing:.02em;
}
.carte__bas{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.carte__lbl{ display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-bottom:5px; }
.carte__pts{ font-family:var(--font-serif); font-size:2.4rem; line-height:1; color:var(--gold-soft); font-weight:400; }
.carte__niv{ text-align:right; }
.carte__niv strong{ font-weight:400; font-size:.95rem; color:var(--ivory); }
.carte__jauge{ height:2px; background:rgba(216,195,154,.2); overflow:hidden; }
.carte__jauge i{
  display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width 1.2s var(--ease-out);
}
.carte__pied{ margin:12px 0 0; font-size:10.5px; letter-spacing:.06em; color:var(--taupe); line-height:1.6; }
.carte.is-active .carte__nom{ color:var(--gold-soft); }

/* ---------- Récompenses et paliers ---------- */
.fid__recompenses{ margin-top:clamp(48px,6vw,80px); }
.fid__recompenses h3{ font-size:1.5rem; margin:0 0 22px; }
.recos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--gap); margin-bottom:var(--gap); }
.reco{
  background:var(--ivory); border:1px solid var(--line); padding:22px;
  display:flex; gap:14px; align-items:flex-start;
  transition:transform .5s var(--ease-out), border-color .5s var(--ease-out);
}
.reco:hover{ transform:translateY(-5px); border-color:var(--gold-soft); }
.reco strong{
  font-family:var(--font-serif); font-size:1.9rem; line-height:1; color:var(--gold); font-weight:400;
}
.reco strong span{ display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.reco p{ margin:0; font-size:.88rem; color:var(--espresso); }

.paliers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap); }
.palier{
  background:var(--ivory); border:1px solid var(--line-soft); padding:22px;
  border-top:2px solid var(--gold-soft);
}
.palier__pts{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.palier strong{ display:block; font-family:var(--font-serif); font-size:1.35rem; font-weight:400; margin:6px 0 8px; }
.palier p{ margin:0; font-size:.86rem; color:var(--muted); }
.fid__conditions{
  margin:26px 0 0; font-size:.8rem; color:var(--muted); font-style:italic;
  padding-top:18px; border-top:1px solid var(--line-soft);
}

/* ---------- Lien « Mon compte » dans la navigation ---------- */
.nav__compte{ color:var(--gold) !important; }

/* ---------- Modal de l'espace cliente ---------- */
.compte{
  position:fixed; inset:0; z-index:230; display:none;
  align-items:center; justify-content:center; padding:clamp(14px,3vw,32px);
}
.compte.is-open{ display:flex; }
.compte__overlay{
  position:absolute; inset:0; background:rgba(23,19,15,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fadeIn .35s var(--ease-out);
}
.compte__box{
  position:relative; z-index:1; width:min(480px,100%); max-height:92vh; max-height:92svh;
  overflow-y:auto; background:var(--ivory); border:1px solid var(--gold-soft);
  padding:clamp(30px,4vw,46px) clamp(24px,3.4vw,40px);
  text-align:center; box-shadow:0 50px 100px -34px rgba(0,0,0,.6);
  animation:reviewIn .5s var(--ease-out);
}
.compte__x{
  position:absolute; top:12px; right:14px; background:transparent; border:0;
  font-size:26px; line-height:1; color:var(--taupe); padding:6px 10px;
  transition:color .35s var(--ease-out);
}
.compte__x:hover{ color:var(--ink); }
.compte__mark{ margin:0 auto 16px; }
.compte__titre{ font-size:clamp(1.5rem,3vw,2rem); margin:0 0 8px; line-height:1.15; }
.compte__sous{ font-size:.88rem; color:var(--muted); margin:0 0 26px; }
.compte__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compte .field{ text-align:left; margin-bottom:16px; display:flex; flex-direction:column; }
.compte label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.compte input{
  font-family:var(--font-sans); font-size:.95rem; font-weight:300; color:var(--espresso);
  background:transparent; border:0; border-bottom:1px solid var(--beige);
  padding:10px 2px; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease-out);
}
.compte input:focus{ outline:none; border-bottom-color:var(--gold); }
.compte .piege{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.compte__msg{ margin:0 0 14px; font-size:.88rem; min-height:1.1em; color:var(--gold); }
.compte__msg.is-error{ color:#B4593F; }
.compte__legal{ margin:16px 0 0; font-size:.76rem; color:var(--muted); line-height:1.6; }
.compte__legal a{ color:var(--gold); border-bottom:1px solid var(--line); }
.compte__bascule{
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.86rem; color:var(--muted);
}
.compte__bascule button{
  background:none; border:0; color:var(--gold); font-size:.86rem;
  border-bottom:1px solid var(--line); padding:0 0 2px;
  transition:border-color .35s var(--ease-out);
}
.compte__bascule button:hover{ border-color:var(--gold); }

/* ---------- Espace connecté ---------- */
.espace__solde{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  padding:24px 0; margin-bottom:18px;
  border-block:1px solid var(--line);
}
.espace__solde strong{
  font-family:var(--font-serif); font-size:3.4rem; line-height:1; color:var(--gold); font-weight:400;
}
.espace__solde span{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }

.espace__niveau{ text-align:left; margin-bottom:26px; }
.espace__niveau-haut{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
.espace__niveau-haut b{ font-family:var(--font-serif); font-size:1.2rem; font-weight:400; }
.espace__niveau-haut span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.espace__avantage{ margin:12px 0 0; font-size:.86rem; color:var(--gold); font-style:italic; }

.espace__h3{ font-size:1.2rem; text-align:left; margin:0 0 12px; }
.espace__hist{ list-style:none; margin:0; padding:0; text-align:left; max-height:230px; overflow-y:auto; }
.espace__hist li{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.espace__hist b{ display:block; font-weight:400; font-size:.9rem; }
.espace__hist span{ font-size:11px; color:var(--muted); }
.espace__hist strong{ font-family:var(--font-serif); font-size:1.2rem; font-weight:400; }
.espace__hist .plus{ color:var(--ok,#4A7C59); }
.espace__hist .moins{ color:#B4593F; }
.espace__vide{ font-size:.88rem; color:var(--muted); text-align:left; font-style:italic; }
.espace__actions{ margin-top:24px; }
.espace__actions .btn-line{ width:100%; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .fid__grid{ grid-template-columns:1fr; }
  .fid__visuel{ order:-1; }
}
@media (max-width:560px){
  .compte__row{ grid-template-columns:1fr; gap:0; }
  .fid__actions{ flex-direction:column; }
  .fid__actions .btn-solid,.fid__actions .btn-line{ width:100%; }
  .carte{ aspect-ratio:auto; }
}
@media (prefers-reduced-motion:reduce){
  .carte::after{ animation:none !important; }
}

/* =========================================================
   ══════════  CARROUSEL DE LA GALERIE  ══════════
   Défilement natif avec accrochage : glissement tactile
   fluide sur mobile, flèches et pastilles sur ordinateur.
   ========================================================= */

.carou{ position:relative; --carou-w:clamp(230px, 74vw, 290px); }

.carou__viewport{
  position:relative;              /* repère de mesure pour offsetLeft des vignettes */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:6px;
  margin-inline:calc(var(--gutter) * -1);
}
.carou__viewport::-webkit-scrollbar{ display:none; }
.carou__viewport:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }

.carou__track{
  display:flex; gap:var(--gap); width:max-content; padding-block:4px;
  box-sizing:content-box;         /* le rembourrage s'ajoute, il ne rogne pas */
}

.carou__item{
  margin:0; flex:0 0 auto; opacity:1;
  width:var(--carou-w);
  scroll-snap-align:center;
  transition:opacity .6s var(--ease-out);
}
.carou__media{
  position:relative; overflow:hidden; background:var(--sand);
  aspect-ratio:4/5; cursor:zoom-in;
}
.carou__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out), filter .6s var(--ease-out);
  filter:grayscale(.12);
}
.carou__item:hover .carou__media img,
.carou__item.is-active .carou__media img{ filter:grayscale(0); }
.carou__item:hover .carou__media img{ transform:scale(1.06); }

.carou__zoom{
  position:absolute; top:14px; right:14px; z-index:3;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:rgba(250,247,242,.92); color:var(--ink); font-size:15px;
  opacity:0; transform:scale(.82);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.carou__item:hover .carou__zoom{ opacity:1; transform:scale(1); }

.carou__item figcaption{
  margin-top:14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); line-height:1.7;
  transition:color .5s var(--ease-out);
}
.carou__item.is-active figcaption{ color:var(--gold); }

/* Navigation */
.carou__nav{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:clamp(28px,4vw,44px);
  /* Sans repli, une rangée de pastilles plus large que l'écran déborde
     des deux côtés et élargit la page entière sur téléphone. */
  flex-wrap:wrap; max-width:100%;
}
.carou__fleche{
  width:48px; height:48px; flex-shrink:0;
  border:1px solid var(--line); background:transparent; color:var(--espresso);
  font-size:16px; line-height:1;
  transition:background .45s var(--ease-out), color .45s var(--ease-out),
             border-color .45s var(--ease-out), opacity .3s var(--ease-out);
}
.carou__fleche:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.carou__fleche:disabled{ opacity:.28; cursor:default; }

.carou__dots{
  display:flex; gap:9px; align-items:center;
  flex-wrap:wrap; justify-content:center; max-width:100%; min-width:0;
}
.carou__dots button{
  width:26px; height:2px; padding:0; border:0; background:var(--beige);
  transition:background .45s var(--ease-out), width .45s var(--ease-out);
}
.carou__dots button.is-active{ background:var(--gold); width:40px; }
.carou__dots button:hover{ background:var(--taupe); }
/* Sur les petits écrans, des pastilles resserrées tiennent sur une ligne */
@media (max-width:640px){
  .carou__nav{ gap:14px; }
  .carou__dots{ gap:6px; }
  .carou__dots button{ width:16px; }
  .carou__dots button.is-active{ width:24px; }
}

/* Deux vignettes dès la tablette, trois sur grand écran */
@media (min-width:700px){
  .carou{ --carou-w:clamp(300px, 46vw, 380px); }
}
@media (min-width:1100px){
  .carou{ --carou-w:420px; }
}

@media (prefers-reduced-motion:reduce){
  .carou__viewport{ scroll-behavior:auto; }
  .carou__media img{ filter:none !important; transform:none !important; }
}

/* =========================================================
   Carrousel — superposition et défilement automatique
   ========================================================= */

.carou__item{
  transform-origin:50% 60%;
  will-change:transform, opacity;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
/* Pendant un défilement tactile, le suivi doit être immédiat */
.carou__viewport:active .carou__item{ transition:none; }

.carou__media{ box-shadow:0 24px 50px -30px rgba(23,19,15,.55); transition:box-shadow .6s var(--ease-out); }
.carou__item.is-active .carou__media{ box-shadow:0 44px 80px -34px rgba(23,19,15,.75); }

/* Voile qui s'estompe sur la vignette active */
.carou__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(23,19,15,.5) 0%, rgba(23,19,15,0) 55%);
  opacity:.85; transition:opacity .6s var(--ease-out);
}
.carou__item.is-active .carou__media::after{ opacity:.35; }

/* Jauge de progression sur la pastille active */
.carou__dots button{ position:relative; overflow:hidden; }
.carou__dots button i{
  position:absolute; inset:0; display:block; width:0;
  background:var(--gold);
}
.carou__dots.is-auto button.is-active i{
  animation:jaugeAuto var(--auto, 5s) linear forwards;
}
@keyframes jaugeAuto{ from{ width:0; } to{ width:100%; } }

@media (prefers-reduced-motion:reduce){
  .carou__item{ transform:none !important; opacity:1 !important; transition:none !important; }
  .carou__dots button i{ animation:none !important; }
  .carou__media::after{ opacity:.5 !important; }
}

/* Mention du prestataire technique */
.footer__eshops{
  color:var(--taupe); letter-spacing:.16em;
}
.footer__eshops .js-year{ color:inherit; }

/* =========================================================
   ═══════════  REFONTE 2026 — HERO & TITRES  ═══════════
   Photographie plein cadre, typographie monumentale,
   surfaces vitrées et détails ciselés.
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
  display:block; position:relative;
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
  overflow:hidden; isolation:isolate;
  background:var(--ink);
}

/* Le fond : la photographie occupe tout le cadre */
.hero__media{
  position:absolute; inset:0; z-index:0;
  min-height:0; order:0; overflow:hidden;
}

/* Voile dégradé : lisibilité du texte sans écraser la photo */

/* Le panneau disparaît : tout le contenu passe au-dessus de la photo */
.hero__panel{ position:static; background:none; padding:0; display:block; }

/* En-tête du hero : lieu et marque */
.hero__haut{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.hero__lieu{
  display:flex; align-items:center; gap:14px; margin:0;
  font-size:10.5px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold-soft);
  animation:monter 1.1s var(--ease-out) .5s both;
}
.hero__lieu .trait{ width:46px; height:1px; background:var(--gold); display:block; }

/* Le logo aux deux mains, en blanc sur la photo */
.hero__marque{ margin:0; width:clamp(120px,17vw,220px); flex-shrink:0; }
.hero__marque img{
  width:100%; height:auto;
  filter:invert(1) contrast(1.15);
  mix-blend-mode:screen; opacity:.92;
  animation:monter 1.4s var(--ease-out) .7s both;
}

/* Cœur : titre monumental */
.hero__coeur{ margin-top:auto; padding-block:clamp(24px,4vw,44px); }

.hero__titre{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(3.6rem, 13vw, 11rem);
  line-height:.84; letter-spacing:-.045em;
  margin:0 0 clamp(18px,2.4vw,30px); color:var(--ivory);
  text-wrap:balance;
}
.hero__ligne{ display:block; overflow:hidden; }
.hero__ligne > span{
  display:block; transform:translateY(105%);
  animation:ligneMonte 1.25s var(--ease-out) both;
  animation-delay:calc(.75s + var(--i, 0) * .13s);
}
.hero__titre em{
  font-style:italic; color:var(--gold-soft);
  background:linear-gradient(100deg, var(--gold-soft) 0%, #F2E4C6 42%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes ligneMonte{ to{ transform:none; } }
@keyframes monter{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.hero__soustitre{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.15rem,2.1vw,1.7rem); color:var(--gold-soft);
  margin:0 0 16px; letter-spacing:.01em;
  animation:monter 1.1s var(--ease-out) 1.15s both;
}
.hero__accroche{
  font-size:clamp(.95rem,1.2vw,1.06rem); line-height:1.85;
  color:rgba(250,247,242,.82); max-width:46ch; margin:0 0 clamp(26px,3vw,38px);
  animation:monter 1.1s var(--ease-out) 1.3s both;
}
.hero .hero__actions{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:flex-start;
  animation:monter 1.1s var(--ease-out) 1.45s both;
}

/* Bouton clair sur photo + flèche qui glisse */
.btn-solid--clair{ background:var(--ivory); color:var(--ink); gap:12px; }
.btn-solid--clair::before{ background:var(--gold); }
.btn-solid--clair:hover{ background:var(--ivory); color:var(--ink); }
.btn-solid .fleche{ display:inline-block; transition:transform .5s var(--ease-out); }
.btn-solid:hover .fleche{ transform:translateX(6px); }

/* Lien secondaire souligné */
.btn-lien{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory); padding-bottom:6px; position:relative;
}
.btn-lien::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold-soft); transform-origin:0 50%;
  transition:transform .55s var(--ease-out);
}
.btn-lien:hover::after{ transform:scaleX(0); transform-origin:100% 50%; }

/* Bandeau vitré des chiffres clés */
.hero__bar{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(250,247,242,.14);
  border:1px solid rgba(250,247,242,.14);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  animation:monter 1.2s var(--ease-out) 1.6s both;
}
.hero__chiffre{
  background:rgba(12,10,8,.34); padding:clamp(16px,2vw,24px) clamp(12px,1.8vw,22px);
  display:flex; flex-direction:column; gap:7px;
  transition:background .5s var(--ease-out);
}
.hero__chiffre:hover{ background:rgba(181,148,90,.22); }
.hero__chiffre strong{
  font-family:var(--font-serif); font-weight:400; line-height:1;
  font-size:clamp(1.5rem,2.6vw,2.15rem); color:var(--ivory);
  font-variant-numeric:tabular-nums;
}
.hero__chiffre strong span{ font-size:.46em; color:var(--gold-soft); }
.hero__chiffre-lbl{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(235,225,212,.66); line-height:1.6;
}

.hero__credit{
  position:absolute; right:var(--gutter); bottom:calc(clamp(26px,3.4vw,44px) + 118px); z-index:2;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(235,225,212,.55); writing-mode:vertical-rl; text-orientation:mixed;
}
.hero .scroll-hint{ bottom:auto; top:52%; left:auto; right:calc(var(--gutter) + 2px); }
.hero .scroll-hint__line{ background:var(--gold-soft); }

/* ---------- TITRES DE SECTION ---------- */
.section__head{ max-width:720px; }
.section__head--center .eyebrow{ justify-content:center; }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:10.5px; letter-spacing:.4em;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--gold); flex-shrink:0;
}
.section__head--center .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--gold); flex-shrink:0;
}

h2{
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:300;
  text-wrap:balance;
}
h2 em{ font-style:italic; color:var(--gold); }
.section__lede{
  font-size:clamp(1.02rem,1.3vw,1.12rem); line-height:1.85; color:var(--muted);
}
.lede{ font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.85; }

h3{ letter-spacing:-.015em; }
.cat__head h3,.tech h3,.palier strong,.reco strong{ letter-spacing:-.02em; }

/* Nuance chaude derrière les sections claires */
.univers,.technologies,.avis{ position:relative; isolation:isolate; }
.univers::before,.technologies::before,.avis::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 60% at 78% 0%, rgba(216,195,154,.22) 0%, rgba(216,195,154,0) 62%);
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero__bar{ grid-template-columns:repeat(2,1fr); }
  .hero__credit{ display:none; }
  .hero .scroll-hint{ display:none; }
}
@media (max-width:640px){
  .hero__haut{ flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .hero__marque{ width:130px; }
  .hero__titre{ font-size:clamp(3rem,16vw,4.6rem); }
  .hero .hero__actions{ flex-direction:column; align-items:stretch; gap:14px; }
  .hero .hero__actions .btn-solid{ width:100%; }
  .btn-lien{ text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .hero__ligne > span,.hero__lieu,.hero__marque img,.hero__soustitre,
  .hero__accroche,.hero .hero__actions,.hero__bar{ animation:none !important; transform:none !important; opacity:1 !important; }
}

/* =========================================================
   ═══════  HERO CLAIR — photographie sur fond lumineux  ═══════
   La fresque et le sujet sont clairs : on éclaircit au lieu
   d'assombrir, et le texte passe en typographie sombre.
   ========================================================= */

.hero{ background:var(--cream); }

/* Voile ivoire depuis la gauche : la fresque devient une texture,
   le sujet à droite reste intact. */

/* Typographie sombre */
.hero__panel-inner{ color:var(--espresso); }
.hero__lieu{ color:var(--gold); }
.hero__titre{ color:var(--ink); }
.hero__soustitre{ color:var(--gold); }
.hero__accroche{ color:var(--espresso); opacity:.82; }

/* La photographie porte déjà la fresque du logo : pas de doublon */
.hero__marque{ display:none; }

/* Boutons adaptés au fond clair */
.hero .btn-solid--clair{ background:var(--ink); color:var(--ivory); }
.hero .btn-solid--clair::before{ background:var(--gold); }
.hero .btn-solid--clair:hover{ background:var(--ink); color:var(--ink); }
.hero .btn-lien{ color:var(--espresso); }
.hero .btn-lien::after{ background:var(--gold); }

/* Bandeau des chiffres : verre clair */
.hero__bar{
  background:rgba(178,155,126,.28);
  border-color:rgba(178,155,126,.34);
}
.hero__chiffre{ background:rgba(250,247,242,.82); }
.hero__chiffre:hover{ background:rgba(250,247,242,.96); }
.hero__chiffre strong{ color:var(--ink); }
.hero__chiffre strong span{ color:var(--gold); }
.hero__chiffre-lbl{ color:var(--muted); }

.hero__credit{ color:var(--taupe); }
.hero .scroll-hint__line{ background:var(--taupe); }

/* ---------- Écrans étroits : le sujet passe devant, texte en bas ---------- */
@media (max-width:1000px){
  .hero__haut{ margin-bottom:auto; }
}




/* =========================================================
   ═══════  DIAPORAMA DU HERO  ═══════
   Fondu enchaîné et zoom lent alterné, jauges de progression.
   ========================================================= */

.hero__slider{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__credit{ transition:opacity .35s var(--ease-out); }
.hero__credit.is-change{ opacity:0; }
/* Zoom lent sur la vue affichée, alterné pour éviter la répétition */
.hero__slide.is-active img{ animation:heroZoomA 9s ease-out forwards; }
@keyframes heroZoomA{ from{ transform:scale(1.04); } to{ transform:scale(1.13) translate3d(-1.2%,0,0); } }
@keyframes heroZoomB{ from{ transform:scale(1.13) translate3d(1%,0,0); } to{ transform:scale(1.04); } }

/* Jauges de progression */
.hero__jauges{
  position:absolute; left:var(--gutter); bottom:calc(clamp(26px,3.4vw,44px) + 108px);
  z-index:3; display:flex; gap:10px; align-items:center;
}
.hero__jauge{
  width:52px; height:3px; padding:0; border:0; position:relative; overflow:hidden;
  background:rgba(43,36,28,.22); transition:width .5s var(--ease-out), background .4s var(--ease-out);
}
.hero__jauge i{ position:absolute; inset:0; display:block; width:0; background:var(--gold); }
.hero.is-auto .hero__jauge.is-active{ width:78px; }
.hero.is-auto .hero__jauge.is-active i{ animation:heroJauge var(--hero-delai, 5s) linear forwards; }
@keyframes heroJauge{ from{ width:0; } to{ width:100%; } }
.hero__jauge:hover{ background:rgba(178,155,126,.55); }

@media (max-width:1000px){
  .hero__jauges{ bottom:calc(clamp(26px,3.4vw,44px) + 168px); }
}
@media (max-width:640px){
  .hero__jauge{ width:38px; }
  .hero.is-auto .hero__jauge.is-active{ width:58px; }
}

@media (prefers-reduced-motion:reduce){
  .hero__jauge i{ animation:none !important; }
}

/* =========================================================
   ═══════  MICRO-INTERACTIONS & TRANSITIONS  ═══════
   ========================================================= */

/* Icônes et numéros : entrée en scène, puis réaction au survol */
.icone-anim{
  display:inline-block;
  animation:iconePose .9s var(--ease-out) both;
  transition:transform .6s var(--ease-out), color .5s var(--ease-out);
}
@keyframes iconePose{
  from{ opacity:0; transform:translateY(10px) scale(.86) rotate(-6deg); }
  to{ opacity:1; transform:none; }
}
.tech:hover .tech__icon{ transform:translateY(-5px) scale(1.14) rotate(4deg); }
.pillars li:hover .pillars__num{ transform:translateX(5px); color:var(--ink); }
.reco:hover strong{ transform:scale(1.07); }
.uni:hover .uni__num{ transform:translateY(-4px); }
.cat__head h3:hover .cat__icon{ transform:scale(1.15) rotate(-5deg); }

/* Cartes : liseré doré qui se déploie + élévation */
.tech,.offre,.note-item,.palier,.reco{ position:relative; overflow:hidden; }
.tech::after,.offre::after,.palier::after,.reco::after,.note-item::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease-out);
}
.tech:hover::after,.offre:hover::after,.palier:hover::after,
.reco:hover::after,.note-item:hover::after{ transform:scaleX(1); }
.tech:hover,.offre:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.palier:hover{ transform:translateY(-5px); }

/* Raccord dégradé entre les sections claires */
.univers::after,.offres::after,.prestations::after,
.technologies::after,.galerie::after,.avis::after,.fidelite::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  pointer-events:none; z-index:0;
  background:linear-gradient(to bottom, rgba(250,247,242,0), rgba(250,247,242,.5));
}
.univers > *,.offres > *,.prestations > *,
.technologies > *,.galerie > *,.avis > *,.fidelite > *{ position:relative; z-index:1; }

/* Navigation : léger relèvement */
.nav a:not(.nav__cta){ transition:color .35s var(--ease-out), transform .35s var(--ease-out); }
.nav a:not(.nav__cta):hover{ transform:translateY(-2px); }

/* Champs : trait doré qui se déploie à la saisie */
.rdvform .field,.compte .field{ position:relative; }
.rdvform .field::after,.compte .field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.rdvform .field:focus-within::after,.compte .field:focus-within::after{ transform:scaleX(1); }

/* Prestations : le prix se met en valeur au survol de la ligne */
.presta__item .price{ transition:color .45s var(--ease-out), transform .45s var(--ease-out); }
.presta__item:hover .price{ color:var(--gold); transform:scale(1.06); }

@media (prefers-reduced-motion:reduce){
  .icone-anim{ animation:none !important; }
  .tech::after,.offre::after,.palier::after,.reco::after,.note-item::after{ display:none; }
}

/* =========================================================
   ═══════  BARRE SUPÉRIEURE  ═══════
   ========================================================= */

.announce{
  background:linear-gradient(100deg, #100D0A 0%, var(--ink) 46%, #241C13 100%);
  padding:0 var(--gutter); position:relative;
  border-bottom:1px solid rgba(216,195,154,.16);
}
.announce::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.55;
}
.announce__track{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:20px; max-width:var(--max); margin-inline:auto; min-height:42px;
  flex-wrap:nowrap; text-align:left;
}

.topbar__gauche,.topbar__droite{ display:flex; align-items:center; gap:16px; }
.topbar__droite{ justify-content:flex-end; }

.topbar__lien{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(235,225,212,.82); transition:color .4s var(--ease-out);
}
.topbar__lien span{ color:var(--gold); font-size:12px; }
.topbar__lien:hover{ color:var(--gold-soft); }

/* Bandeau défilant central */
.topbar__centre{ overflow:hidden; min-width:0; }
.topbar__defile{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.topbar__piste{
  display:flex; align-items:center; gap:18px; width:max-content;
  animation:topDefile 42s linear infinite;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(235,225,212,.7); white-space:nowrap;
}
.topbar__piste .dot{ color:var(--gold); font-size:6px; }
@keyframes topDefile{ to{ transform:translateX(-50%); } }
.announce:hover .topbar__piste{ animation-play-state:paused; }

.topbar__note{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft);
}

/* Panier */
.topbar__panier{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; background:transparent; border:1px solid rgba(216,195,154,.28);
  color:var(--sand); transition:background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.topbar__panier:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.topbar__compteur{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; border-radius:9px;
  background:var(--taupe); color:var(--ink);
  font-size:10px; font-weight:400; letter-spacing:0;
  transition:background .4s var(--ease-out), transform .4s var(--ease-out);
}
.topbar__panier.is-plein .topbar__compteur{ background:var(--gold); }
.topbar__compteur.pulse{ animation:pastillePulse .55s var(--ease-out); }
@keyframes pastillePulse{ 0%{ transform:scale(1); } 45%{ transform:scale(1.45); } 100%{ transform:scale(1); } }

@media (max-width:860px){
  .announce__track{ grid-template-columns:1fr auto; gap:12px; }
  .topbar__centre{ display:none; }
  .topbar__insta{ display:none; }
}

/* Bouton « + » sur les prestations */
.btn-ajout{
  width:38px; height:38px; flex-shrink:0;
  border:1px solid var(--line); background:transparent; color:var(--espresso);
  font-size:17px; line-height:1;
  transition:background .4s var(--ease-out), color .4s var(--ease-out),
             border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.btn-ajout:hover{ border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.btn-ajout.is-ajoute{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn-ajout.is-ajoute span{ display:block; transform:rotate(45deg); }

/* =========================================================
   ═══════  TIROIR « MA SÉLECTION »  ═══════
   ========================================================= */

.panier{ position:fixed; inset:0; z-index:240; display:none; }
.panier.is-open{ display:block; }
.panier__overlay{
  position:absolute; inset:0; background:rgba(23,19,15,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadeIn .4s var(--ease-out);
}
.panier__tiroir{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,100%);
  background:var(--ivory); border-left:1px solid var(--gold-soft);
  display:flex; flex-direction:column;
  box-shadow:-40px 0 80px -40px rgba(0,0,0,.5);
  animation:tiroirEntre .55s var(--ease-out);
}
@keyframes tiroirEntre{ from{ transform:translateX(100%); } to{ transform:none; } }

.panier__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px clamp(20px,3vw,30px); border-bottom:1px solid var(--line); background:var(--cream);
}
.panier__eyebrow{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.panier__titre{ font-size:1.5rem; margin:0; }
.panier__x{ background:transparent; border:0; font-size:26px; line-height:1; color:var(--taupe); padding:2px 8px; }
.panier__x:hover{ color:var(--ink); }

.panier__corps{ flex:1; overflow-y:auto; padding:clamp(16px,2.4vw,24px) clamp(20px,3vw,30px); }
.panier__liste{ list-style:none; margin:0; padding:0; }
.panier__liste li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
  animation:monter .5s var(--ease-out) both;
}
.panier__liste b{ display:block; font-weight:400; font-size:.95rem; line-height:1.4; }
.panier__liste span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.panier__retirer{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  width:30px; height:30px; flex-shrink:0; font-size:16px; line-height:1;
  transition:background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.panier__retirer:hover{ background:#B4593F; border-color:#B4593F; color:#fff; }

.panier__vide{ text-align:center; padding:40px 10px; }
.panier__vide img{ margin:0 auto 18px; opacity:.7; }
.panier__vide b{ display:block; font-family:var(--font-serif); font-size:1.3rem; font-weight:400; margin-bottom:8px; }
.panier__vide p{ font-size:.9rem; color:var(--muted); margin-bottom:22px; }

.panier__pied{ padding:clamp(18px,2.4vw,24px) clamp(20px,3vw,30px); border-top:1px solid var(--line); background:var(--cream); }
.panier__pied:empty{ display:none; }
.panier__total{ display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
.panier__total span{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.panier__total strong{ font-family:var(--font-serif); font-size:1.5rem; font-weight:400; color:var(--ink); }
.btn-line--full{ width:100%; margin-top:10px; }
.panier__note{ margin:14px 0 0; font-size:.74rem; color:var(--muted); font-style:italic; line-height:1.6; }

/* =========================================================
   ═══════  MENU MOBILE MODERNISÉ  ═══════
   ========================================================= */

@media (max-width:860px){
  .nav{
    position:fixed; inset:0; height:100dvh; height:100svh;
    background:linear-gradient(165deg, var(--cream) 0%, var(--sand) 58%, var(--beige) 100%);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0; padding:0 clamp(28px,8vw,54px);
    transform:none; opacity:0; visibility:hidden;
    clip-path:circle(0% at calc(100% - 42px) 42px);
    transition:clip-path .7s var(--ease-out), opacity .35s var(--ease-out), visibility 0s linear .7s;
    z-index:99; overflow-y:auto;
  }
  .nav.is-open{
    opacity:1; visibility:visible;
    clip-path:circle(150% at calc(100% - 42px) 42px);
    transition:clip-path .8s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
  }
  .nav::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
    background:url("../assets/silk.svg") center/cover no-repeat;
  }
  .nav a{
    position:relative; width:100%; padding:clamp(13px,2.6vw,18px) 0;
    font-family:var(--font-serif); font-size:clamp(1.7rem,7vw,2.4rem);
    font-weight:300; letter-spacing:-.02em; text-transform:none;
    color:var(--ink); border-bottom:1px solid rgba(178,155,126,.24);
    display:flex; align-items:center; gap:16px;
    opacity:0; transform:translateY(22px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease-out);
  }
  .nav.is-open a{ opacity:1; transform:none; }
  .nav.is-open a:nth-child(1){ transition-delay:.18s; }
  .nav.is-open a:nth-child(2){ transition-delay:.24s; }
  .nav.is-open a:nth-child(3){ transition-delay:.30s; }
  .nav.is-open a:nth-child(4){ transition-delay:.36s; }
  .nav.is-open a:nth-child(5){ transition-delay:.42s; }
  .nav.is-open a:nth-child(6){ transition-delay:.48s; }
  .nav.is-open a:nth-child(7){ transition-delay:.54s; }
  .nav.is-open a:nth-child(8){ transition-delay:.60s; }
  .nav a::before{
    content:counter(lien, decimal-leading-zero);
    counter-increment:lien;
    font-family:var(--font-sans); font-size:10px; letter-spacing:.2em;
    color:var(--gold); align-self:flex-start; padding-top:.75em; min-width:26px;
  }
  .nav{ counter-reset:lien; }
  .nav a:not(.nav__cta)::after{ display:none; }
  .nav a:active{ color:var(--gold); }

  .nav .nav__cta{
    margin-top:26px; border:1px solid var(--ink); background:var(--ink); color:var(--ivory);
    font-family:var(--font-sans); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
    justify-content:center; padding:18px 24px;
  }
  .nav .nav__cta::before{ content:none; }
  .nav__compte{ color:var(--gold) !important; }

  .burger{ z-index:101; }
  .burger span{ transition:transform .45s var(--ease-out), opacity .3s var(--ease-out), background .3s; }
}

@media (prefers-reduced-motion:reduce){
  .nav{ clip-path:none !important; transition:opacity .2s !important; }
  .nav a{ opacity:1 !important; transform:none !important; transition:none !important; }
  .panier__tiroir{ animation:none !important; }
}

/* =========================================================
   ═══════  HERO — RENDU NATUREL  ═══════
   Le voile précédent couvrait le tiers gauche à 97 % : les
   photos claires paraissaient surexposées. On l'allège
   fortement et on adosse le texte à un panneau translucide.
   ========================================================= */

/* Voile discret, concentré sous le texte et resserré à gauche */
/* Vignettage à peine perceptible, sans halo blanc */

/* Zoom lent réduit : moins d'agrandissement, donc plus de netteté */
@keyframes heroZoomA{ from{ transform:scale(1.005); } to{ transform:scale(1.055) translate3d(-.7%,0,0); } }
@keyframes heroZoomB{ from{ transform:scale(1.055) translate3d(.6%,0,0); } to{ transform:scale(1.005); } }

/* Le texte s'adosse à un panneau translucide plutôt que de délaver la photo */
.hero__coeur{
  position:relative;
  padding-left:clamp(18px,2.2vw,30px);
}

/* Léger renfort de lisibilité, sans ombre visible */
.hero__titre{ text-shadow:0 1px 24px rgba(250,247,242,.55); }
.hero__accroche,.hero__soustitre{ text-shadow:0 1px 14px rgba(250,247,242,.7); }

/* Bandeau des chiffres : un peu plus opaque pour tenir sur photo nette */
.hero__chiffre{ background:rgba(250,247,242,.9); }

@media (max-width:1000px){
  /* Sur mobile le texte passe sous le sujet : voile vertical mesuré */
}



/* =========================================================
   ═══════  NAVIGATION EN SURCOUCHE À TOUTES LES TAILLES  ═══════
   L'en-tête ne garde que la marque et le bouton d'ouverture.
   ========================================================= */

.header__inner{ justify-content:space-between; }

.burger{ display:block; position:relative; z-index:101; }

.nav{
  counter-reset:lien;
  position:fixed; inset:0; width:100%; height:100dvh; height:100svh;
  background:linear-gradient(165deg, var(--cream) 0%, var(--sand) 58%, var(--beige) 100%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:0; padding:0 clamp(28px,8vw,54px);
  transform:none; opacity:0; visibility:hidden;
  clip-path:circle(0% at calc(100% - 42px) 42px);
  transition:clip-path .7s var(--ease-out), opacity .35s var(--ease-out), visibility 0s linear .7s;
  z-index:99; overflow-y:auto;
}
.nav.is-open{
  opacity:1; visibility:visible;
  clip-path:circle(150% at calc(100% - 42px) 42px);
  transition:clip-path .85s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
}
.nav::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:url("../assets/silk.svg") center/cover no-repeat;
}

.nav a{
  position:relative; width:100%; padding:clamp(12px,2.4vw,18px) 0;
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(1.7rem,6vw,2.4rem);
  letter-spacing:-.02em; text-transform:none;
  color:var(--ink); border-bottom:1px solid rgba(178,155,126,.24);
  display:flex; align-items:center; gap:16px;
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
             color .3s var(--ease-out), padding-left .4s var(--ease-out);
}
.nav.is-open a{ opacity:1; transform:none; }
.nav.is-open a:nth-child(1){ transition-delay:.18s; }
.nav.is-open a:nth-child(2){ transition-delay:.24s; }
.nav.is-open a:nth-child(3){ transition-delay:.30s; }
.nav.is-open a:nth-child(4){ transition-delay:.36s; }
.nav.is-open a:nth-child(5){ transition-delay:.42s; }
.nav.is-open a:nth-child(6){ transition-delay:.48s; }
.nav.is-open a:nth-child(7){ transition-delay:.54s; }
.nav.is-open a:nth-child(8){ transition-delay:.60s; }
.nav.is-open a:nth-child(9){ transition-delay:.66s; }

.nav a::before{
  content:counter(lien, decimal-leading-zero); counter-increment:lien;
  font-family:var(--font-sans); font-size:10px; letter-spacing:.2em;
  color:var(--gold); align-self:flex-start; padding-top:.85em; min-width:28px;
}
.nav a:not(.nav__cta)::after{ display:none; }
.nav a:hover:not(.nav__cta){ color:var(--gold); padding-left:10px; transform:none; }

.nav .nav__cta{
  margin-top:26px; border:1px solid var(--ink); background:var(--ink); color:var(--ivory);
  font-family:var(--font-sans); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  justify-content:center; padding:18px 24px; width:100%;
}
.nav .nav__cta::before{ content:none; }
.nav .nav__cta:hover{ background:var(--gold); color:var(--ink); padding-left:24px; }
.nav__compte{ color:var(--gold) !important; }

/* ---------- Tablette et ordinateur : mise en page éditoriale ---------- */
@media (min-width:861px){
  .nav{
    padding:0;
    display:grid; grid-template-columns:1.15fr .85fr;
    align-content:center;            /* le bloc entier est centré verticalement */
    align-items:center; justify-items:start; gap:0;
  }
  .nav::after{
    content:""; position:absolute; right:38%; top:18%; bottom:18%; width:1px;
    background:linear-gradient(to bottom, transparent, rgba(178,155,126,.45), transparent);
  }
  .nav > a{
    grid-column:1; width:min(560px,100%);
    margin-left:clamp(60px,12vw,160px);
    font-size:clamp(2rem,3.2vw,2.9rem);
  }
  .nav .nav__cta{
    width:min(560px,100%); margin-left:clamp(60px,12vw,160px);
  }
  /* Coordonnées à droite, dans la moitié libre */
  .nav__aside{
    grid-column:2; grid-row:1 / -1; align-self:center;
    padding-right:clamp(40px,7vw,110px); padding-left:clamp(30px,4vw,60px);
    opacity:0; transform:translateY(18px);
    transition:opacity .6s var(--ease-out) .5s, transform .6s var(--ease-out) .5s;
  }
  .nav.is-open .nav__aside{ opacity:1; transform:none; }
  .nav__aside h3{
    font-size:10.5px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--gold); font-family:var(--font-sans); font-weight:400; margin:0 0 18px;
  }
  .nav__aside p,.nav__aside a{
    display:block; font-family:var(--font-sans); font-size:.92rem; letter-spacing:.02em;
    color:var(--espresso); text-transform:none; margin:0 0 10px;
    border:0; padding:0; width:auto; opacity:1; transform:none;
  }
  .nav__aside a::before{ content:none; }
  .nav__aside a:hover{ color:var(--gold); padding-left:0; }
  .nav__aside .sep{ display:block; width:38px; height:1px; background:var(--beige); margin:22px 0; }
}
@media (max-width:860px){
  .nav__aside{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .nav{ clip-path:none !important; transition:opacity .2s !important; }
  .nav a,.nav__aside{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================
   ═══════  HERO — CORRECTIFS DE DÉBORDEMENT ET DE PANNEAU  ═══════
   ========================================================= */

/* 1. Le titre tient compte de la HAUTEUR disponible, pas seulement
      de la largeur : sur un écran large mais court il ne déborde plus. */
.hero__titre{
  font-size:clamp(2.6rem, min(11vw, 14vh), 8.2rem);
  line-height:.88;
  margin-bottom:clamp(12px,1.6vw,22px);
}
.hero__soustitre{ font-size:clamp(1rem, min(1.9vw, 2.6vh), 1.5rem); margin-bottom:12px; }
.hero__accroche{
  font-size:clamp(.9rem, min(1.15vw, 1.7vh), 1.02rem);
  line-height:1.75; margin-bottom:clamp(18px,2.2vw,30px);
}

/* 2. Panneau sans bord visible : dégradé radial depuis le bord gauche,
      il s'efface progressivement au lieu de dessiner un rectangle. */

/* 3. Le contenu ne peut plus dépasser du cadre */
.hero__panel-inner{ overflow:hidden; }
.hero__haut{ flex-shrink:0; }

/* 4. Écrans larges mais courts : on resserre encore */
@media (max-height:820px) and (min-width:1001px){
  .hero__accroche{ max-width:42ch; }
  .hero__bar{ margin-top:4px; }
  .hero__chiffre{ padding-block:clamp(11px,1.4vw,16px); }
}
@media (max-height:680px) and (min-width:1001px){
  .hero__accroche{ display:none; }          /* on privilégie titre et actions */
  .hero__titre{ font-size:clamp(2.4rem, 9vh, 4.6rem); }
}

/* 5. Le crédit vertical ne doit pas chevaucher le bandeau des chiffres */
.hero__credit{ bottom:auto; top:clamp(120px,22vh,240px); }

/* =========================================================
   ═══════  CORRECTIFS — MENU ET BANDEAU DES CHIFFRES  ═══════
   ========================================================= */

/* ---------- 1. Le menu doit tenir dans la hauteur de l'écran ----------
   8 liens + le bouton dépassaient : les tailles sont désormais
   bornées par la hauteur disponible (vh), plus seulement la largeur. */
@media (min-width:861px){
  .nav > a{
    font-size:clamp(1.25rem, min(2.6vw, 3.5vh), 2.3rem);
    padding-block:clamp(7px, 1.15vh, 16px);
    margin-left:clamp(48px,9vw,130px);
    width:min(520px,100%);
  }
  .nav .nav__cta{
    margin-top:clamp(14px,2.2vh,26px);
    padding-block:clamp(12px,1.7vh,18px);
    margin-left:clamp(48px,9vw,130px);
    width:min(520px,100%);
  }
  .nav a::before{ padding-top:.7em; min-width:26px; font-size:9.5px; }

  /* Colonne de droite : compacte et alignée sur les liens */
  .nav__aside{
    align-self:center; padding-block:0;
    padding-right:clamp(32px,6vw,90px); padding-left:clamp(24px,3.4vw,54px);
  }
  .nav__aside h3{ font-size:9.5px; margin:0 0 12px; }
  .nav__aside p,.nav__aside a{ font-size:clamp(.8rem,1.5vh,.9rem); margin:0 0 7px; line-height:1.65; }
  .nav__aside .sep{ margin:clamp(12px,2vh,20px) 0; }
  .nav::after{ top:14%; bottom:14%; }
}

/* Écrans courts : on resserre encore et on masque le superflu */
@media (min-width:861px) and (max-height:760px){
  .nav > a{ font-size:clamp(1.15rem, 3vh, 1.7rem); padding-block:clamp(5px,.9vh,10px); }
  .nav__aside .sep + h3 + p{ font-size:.78rem; }
}
@media (min-width:861px) and (max-height:620px){
  .nav__aside{ display:none; }
  .nav{ grid-template-columns:1fr; }
  .nav::after{ display:none; }
}

/* ---------- 2. Bandeau des chiffres : contraste renforcé ---------- */
.hero__bar{
  background:rgba(43,36,28,.16);
  border-color:rgba(43,36,28,.14);
  box-shadow:0 22px 50px -34px rgba(43,36,28,.5);
}
.hero__chiffre{ background:rgba(250,247,242,.97); }
.hero__chiffre:hover{ background:#fff; }
.hero__chiffre strong{ color:var(--ink); font-weight:400; }
.hero__chiffre strong span{ color:var(--gold); }
.hero__chiffre-lbl{ color:var(--espresso); opacity:.72; font-size:10px; letter-spacing:.18em; }

/* =========================================================
   ═══════  MENU — PLANS ET MISE EN PAGE DÉFINITIFS  ═══════
   Tout l'ornement passe derrière le contenu, l'alignement
   suit la grille du site.
   ========================================================= */

/* ---------- Plans : l'ornement derrière, le contenu devant ---------- */
.nav{ isolation:isolate; }
.nav::before{                     /* motif de soie */
  z-index:0; opacity:.16;
  filter:saturate(.7);
}
.nav::after{                      /* filet vertical de séparation */
  z-index:0; opacity:.5;
}
.nav > a,
.nav__aside{ position:relative; z-index:2; }

/* ---------- Alignement sur la grille du site ---------- */
.nav{
  padding-inline:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-block:calc(var(--head-h) + 24px) 32px;
  align-content:center;
}

/* ---------- Téléphone ---------- */
.nav > a{
  padding-block:clamp(11px, 1.7vh, 17px);
  gap:clamp(14px,3.5vw,22px);
  border-bottom-color:rgba(178,155,126,.2);
}
.nav > a::before{
  color:var(--taupe); font-size:9.5px; letter-spacing:.18em;
  min-width:24px; padding-top:.9em; transition:color .35s var(--ease-out);
}
.nav > a:hover::before{ color:var(--gold); }
.nav > a:last-of-type{ border-bottom:0; }

/* Repère doré qui glisse au survol */
.nav > a:not(.nav__cta){ overflow:hidden; }
.nav > a:not(.nav__cta) .fleche-menu{
  margin-left:auto; color:var(--gold); font-size:.5em;
  opacity:0; transform:translateX(-12px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.nav > a:not(.nav__cta):hover .fleche-menu{ opacity:1; transform:none; }

/* ---------- Tablette et ordinateur ---------- */
@media (min-width:861px){
  .nav{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
    column-gap:clamp(40px,6vw,96px);
  }
  .nav > a,
  .nav .nav__cta{ margin-left:0; width:100%; max-width:560px; }
  .nav::after{ right:auto; left:calc(58.3% - .5px); top:16%; bottom:16%; }
  .nav__aside{ padding-left:0; padding-right:0; }
}

/* ---------- Tablette : une seule colonne, coordonnées en pied ---------- */
@media (min-width:861px) and (max-width:1100px){
  .nav{ grid-template-columns:1fr; }
  .nav::after{ display:none; }
  .nav__aside{
    grid-column:1; grid-row:auto; display:grid;
    grid-template-columns:repeat(3,1fr); gap:22px;
    margin-top:clamp(20px,3vh,34px); padding-top:clamp(18px,2.6vh,28px);
    border-top:1px solid rgba(178,155,126,.24); max-width:560px;
  }
  .nav__aside .sep{ display:none; }
  .nav__aside h3{ margin-bottom:8px; }
}

/* ---------- Grand écran : hiérarchie de la colonne droite ---------- */
@media (min-width:1101px){
  .nav__aside{ max-width:340px; }
  .nav__aside h3{ letter-spacing:.34em; }
  .nav__aside p{ color:var(--muted); }
  .nav__aside a{ position:relative; display:inline-block; }
  .nav__aside a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
    transition:transform .45s var(--ease-out);
  }
  .nav__aside a:hover::after{ transform:scaleX(1); }
}

/* ---------- Le bouton de fermeture reste au-dessus de tout ---------- */
.burger{ z-index:120; }
.nav.is-open ~ .burger span,
.header .burger[aria-expanded="true"] span{ background:var(--ink); }

/* =========================================================
   ═══════  MENU DÉROULANT  ═══════
   Panneau compact ancré sous l'en-tête. La page reste
   visible et défilable derrière.
   ========================================================= */

.header{ position:sticky; }          /* repère d'ancrage du panneau */

.nav{
  /* on annule intégralement la surcouche plein écran */
  position:absolute; inset:auto;
  top:calc(100% + 12px); right:var(--gutter); left:auto;
  width:min(340px, calc(100vw - var(--gutter) * 2));
  height:auto; max-height:min(74vh, 600px); overflow-y:auto; overscroll-behavior:contain;

  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:0; padding:12px 0 14px;

  background:rgba(250,247,242,.98);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:0 28px 60px -32px rgba(43,36,28,.5), 0 2px 8px -4px rgba(43,36,28,.2);

  clip-path:none;
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.985); transform-origin:100% 0;
  transition:opacity .28s var(--ease-out), transform .34s var(--ease-out), visibility 0s linear .34s;
  z-index:105;
}
.nav.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .28s var(--ease-out), transform .34s var(--ease-out), visibility 0s;
}

/* Plus aucun ornement dans le panneau */
.nav::before,.nav::after{ display:none; content:none; }

/* Petit bec qui relie le panneau au bouton */
.nav__bec{
  position:absolute; top:-6px; right:20px; width:11px; height:11px;
  background:var(--ivory); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}

/* ---------- Liens ---------- */
.nav > a{
  display:flex; align-items:center; gap:10px; width:auto; max-width:none;
  margin:0; padding:12px 22px;
  font-family:var(--font-sans); font-weight:300;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--espresso); border:0; border-radius:0;
  opacity:1; transform:none;
  transition:background .3s var(--ease-out), color .3s var(--ease-out), padding-left .3s var(--ease-out);
}
.nav.is-open > a{ transition-delay:0s; }
.nav > a::before{ content:none; }              /* plus de numérotation */
.nav > a:hover,.nav > a:focus-visible{
  background:var(--cream); color:var(--gold); padding-left:28px;
}
.nav > a .fleche-menu{
  margin-left:auto; color:var(--gold); font-size:11px;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav > a:hover .fleche-menu{ opacity:1; transform:none; }
.nav__compte{ color:var(--gold) !important; }

/* ---------- Bouton de réservation ---------- */
.nav .nav__cta{
  margin:12px 18px 0; width:auto; max-width:none;
  padding:14px 18px; justify-content:center;
  background:var(--ink); color:var(--ivory); border:1px solid var(--ink);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
}
.nav .nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); padding-left:18px; }

/* ---------- Coordonnées, en pied de panneau ---------- */
.nav__aside{
  display:block; grid-column:auto; grid-row:auto;
  margin:14px 18px 0; padding:14px 4px 0;
  border-top:1px solid var(--line-soft); max-width:none;
  opacity:1; transform:none; padding-inline:4px;
}
.nav__aside h3{
  font-family:var(--font-sans); font-weight:400;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 6px;
}
.nav__aside p,.nav__aside a{
  display:block; font-family:var(--font-sans); font-size:12px; line-height:1.7;
  color:var(--muted); margin:0 0 4px; text-transform:none; letter-spacing:.02em;
  padding:0; border:0; width:auto; background:none;
}
.nav__aside a{ color:var(--espresso); }
.nav__aside a:hover{ color:var(--gold); padding-left:0; background:none; }
.nav__aside .sep{ display:block; width:26px; height:1px; background:var(--beige); margin:12px 0; }
/* Adresse et horaires alourdissent le panneau : on ne garde que le contact */
.nav__aside > h3:first-child,
.nav__aside > h3:first-child + p,
.nav__aside > h3:first-child + p + .sep,
.nav__aside .sep:last-of-type,
.nav__aside .sep:last-of-type ~ h3,
.nav__aside .sep:last-of-type ~ p{ display:none; }

/* ---------- Téléphone : panneau presque pleine largeur ---------- */
@media (max-width:600px){
  .nav{
    right:var(--gutter); left:var(--gutter);
    width:auto; max-height:min(70vh, 520px);
  }
  .nav > a{ font-size:12.5px; padding-block:13px; }
}

/* Le bouton d'ouverture reste au-dessus du panneau */
.burger{ z-index:110; }

@media (prefers-reduced-motion:reduce){
  .nav{ transition:opacity .15s !important; transform:none !important; }
}

/* =========================================================
   ═══════  BANDEAU DES CHIFFRES — VERSION DÉFINITIVE  ═══════
   Couleurs littérales et spécificité élevée : plus aucune
   règle antérieure ne peut les éclaircir.
   ========================================================= */

.hero .hero__bar{
  background:rgba(43,36,28,.22) !important;
  border:1px solid rgba(43,36,28,.16) !important;
  box-shadow:0 26px 56px -34px rgba(43,36,28,.55);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

.hero .hero__bar .hero__chiffre{
  background:#FAF7F2 !important;
  padding:clamp(18px,2.2vw,26px) clamp(14px,2vw,26px) !important;
  gap:4px !important;
  position:relative;
}
.hero .hero__bar .hero__chiffre:hover{ background:#FFFDFA !important; }

/* Filet doré au-dessus de chaque chiffre : hiérarchie visuelle */
.hero .hero__bar .hero__chiffre::before{
  content:""; position:absolute; left:clamp(14px,2vw,26px); top:0;
  width:26px; height:2px; background:#B5945A;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease-out);
}
.hero .hero__bar .hero__chiffre:hover::before{ transform:scaleX(1); }

/* Le chiffre : plus grand, franchement sombre */
.hero .hero__bar .hero__chiffre strong{
  color:#14100C !important;
  font-family:var(--font-serif) !important;
  font-weight:500 !important;
  font-size:clamp(2.1rem, 3.6vw, 3.1rem) !important;
  line-height:1 !important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* Le suffixe reste doré mais bien lisible */
.hero .hero__bar .hero__chiffre strong span{
  color:#7C602C !important;   /* doré soutenu, conforme WCAG */
  font-size:.42em !important;
  font-weight:400;
  margin-left:2px;
}

/* Le libellé : brun foncé, sans transparence */
.hero .hero__bar .hero__chiffre-lbl{
  color:#443A31 !important;
  opacity:1 !important;
  font-size:10.5px !important;
  font-weight:400;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  line-height:1.55;
}

/* Séparateurs francs entre les colonnes */
.hero .hero__bar{ gap:1px !important; }

@media (max-width:1000px){
  .hero .hero__bar .hero__chiffre strong{ font-size:clamp(1.9rem, 6vw, 2.5rem) !important; }
}
@media (max-width:600px){
  .hero .hero__bar .hero__chiffre{ padding:16px 14px !important; }
  .hero .hero__bar .hero__chiffre-lbl{ font-size:9.5px !important; letter-spacing:.16em !important; }
}

/* =========================================================
   ═══════  CHIFFRES CLÉS — SECTION AUTONOME  ═══════
   Noms de classes neufs : aucune règle antérieure ne peut
   les atteindre. Fond plein, contraste garanti.
   ========================================================= */

.stats{
  background:linear-gradient(180deg, #FAF7F2 0%, #F4EEE5 100%);
  border-block:1px solid rgba(178,155,126,.22);
  padding-block:clamp(38px, 5vw, 68px);
  position:relative;
}
/* Discret filet doré en tête de section */
.stats::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, #B5945A, transparent);
  opacity:.6;
}

.stats__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 3vw, 46px);
}

.chiffre{
  position:relative;
  padding-left:clamp(16px, 2vw, 28px);
  display:flex; flex-direction:column; gap:10px;
}
/* Séparateur vertical entre les colonnes */
.chiffre + .chiffre::after{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, transparent, rgba(178,155,126,.5), transparent);
}
.chiffre__trait{
  display:block; width:30px; height:2px; background:#B5945A;
  transform-origin:0 50%; transform:scaleX(0);
  transition:transform .8s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 110ms + 200ms);
}
.chiffre.is-visible .chiffre__trait{ transform:scaleX(1); }

.chiffre__val{
  margin:0;
  font-family:"Cormorant Garamond", Didot, serif;
  font-weight:500;
  font-size:clamp(2.6rem, 4.6vw, 4.2rem);
  line-height:.95;
  letter-spacing:-.03em;
  color:#14100C;                       /* noir profond, contraste 17,7 : 1 */
  font-variant-numeric:tabular-nums;
}
.chiffre__suf{
  font-size:.36em; font-weight:400; margin-left:3px;
  color:#7C602C;                       /* doré soutenu, contraste 5,5 : 1 */
  letter-spacing:0;
}
.chiffre__lbl{
  margin:0;
  font-family:"Jost", Futura, sans-serif;
  font-size:11px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:#443A31;                       /* brun foncé, contraste 10,4 : 1 */
  line-height:1.6; max-width:22ch;
}

/* Réaction au survol, dans le registre du reste du site */
.chiffre{ transition:transform .5s var(--ease-out); }
.chiffre:hover{ transform:translateY(-4px); }
.chiffre:hover .chiffre__val{ color:#000; }
.chiffre__val{ transition:color .4s var(--ease-out); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .stats__grid{ grid-template-columns:repeat(2, 1fr); row-gap:clamp(26px,5vw,40px); }
  .chiffre:nth-child(odd)::after{ display:none; }
  .chiffre:nth-child(3)::after,.chiffre:nth-child(4)::after{ top:-14px; }
}
@media (max-width:520px){
  .stats__grid{ grid-template-columns:1fr; gap:22px; }
  .chiffre{ padding-left:18px; }
  .chiffre::after{ display:none; }
  .chiffre + .chiffre{ padding-top:20px; border-top:1px solid rgba(178,155,126,.24); }
  .chiffre__val{ font-size:clamp(2.4rem, 12vw, 3.2rem); }
}

@media (prefers-reduced-motion:reduce){
  .chiffre__trait{ transform:scaleX(1) !important; transition:none !important; }
  .chiffre:hover{ transform:none; }
}

/* Le hero n'héberge plus de bandeau : règles devenues sans objet */
.hero__bar,.hero__chiffre{ display:none !important; }

/* =========================================================
   ═══════  HERO — SUPPRESSION DU CADRE BLANC  ═══════
   Le texte repose désormais sur son propre panneau : le voile
   général n'a plus à éclaircir le bas ni les bords de la photo.
   ========================================================= */


/* Le panneau du texte s'estompe sans bord visible en bas */

/* Vignettage neutre, sans halo clair */

/* La photo va franchement jusqu'au bord bas du hero */
.hero{ border-bottom:0; }

/* Sur écran étroit, un dégradé vertical reste nécessaire sous le texte,
   mais il part de plus bas et reste plus discret. */


/* =========================================================
   ═══════  HERO — SUPPRESSION DE TOUTE SURFACE CLAIRE  ═══════
   Bloc autoritaire : plus aucun calque crème ne peut
   recouvrir la photographie.
   ========================================================= */

/* Le rideau de chargement se rétractait vers le bas et laissait
   une bande crème pleine largeur. Le diaporama a son propre fondu. */
.hero__media::before,
.hero__media::after{ display:none !important; content:none !important; }

/* Le panneau de gauche ne peint plus de fond : la photo est le fond */
.hero__panel{ background:none !important; }

/* Aucune couleur de repli visible sous la photographie */
.hero{ background:#17130F; }

/* Le voile diagonal reste la seule surface claire, et uniquement à gauche */

/* Écran étroit : dégradé vertical sous le texte, sans excès */


/* =========================================================
   ═══════  HERO — VOILE SUR TOUTE LA HAUTEUR  ═══════
   Le dégradé était diagonal : il se dissipait vers le bas et
   laissait le bas de la photo à nu, d'où la bande visible.
   Il devient strictement horizontal — couverture identique
   du haut jusqu'au bas de l'image.
   ========================================================= */


/* Le panneau du texte devient inutile : le voile couvre déjà
   toute la colonne de gauche, sans bord horizontal. */

/* On conserve le filet doré vertical qui marque le début du texte */

/* Vignettage neutre */

/* Jonction avec la section suivante : ni trait ni interstice */
.stats{
  border-top:0 !important; border-bottom:0 !important;
  margin-top:-1px;
}
.stats::before{ display:none !important; content:none !important; }

/* ---------- Écran étroit : le texte passe sous le sujet ---------- */


/* =========================================================
   ═══════  HERO — VOILE UNIQUE, PORTÉ PAR LA SECTION  ═══════
   Tous les calques clairs empilés au fil des retouches sont
   neutralisés. Un seul voile subsiste, posé sur .hero avec
   inset:0 : sa hauteur est celle du hero, donc celle de la
   photographie. Aucun décalage n'est plus possible.
   ========================================================= */

/* 1. Neutralisation de tous les anciens calques */
.hero__scrim,
.hero__vignette,
.hero__panel::before,
.hero__coeur::before,
.hero__media::before,
.hero__media::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* 2. Le voile unique, solidaire de la section */
.hero{ position:relative; overflow:hidden; }

/* 3. Les plans : photo au fond, voile au-dessus, texte devant */
.hero__media{ z-index:0 !important; }
.hero__jauges{ z-index:3; }
.hero__credit{ z-index:3; }

/* 4. Écran étroit : voile vertical, également solidaire du hero */


/* =========================================================
   ═══════  HERO — PLUS AUCUN VOILE BLANC  ═══════
   La photographie n'est plus recouverte. Le texte repose sur
   un panneau sombre, contenu et net.
   ========================================================= */

/* 1. Le voile clair disparaît complètement */
.hero::after{ display:none !important; content:none !important; }

/* 2. Fond de repli sombre : plus jamais de rectangle blanc */
.hero{ background:#0F0C09 !important; }

/* 3. Le bloc de texte devient un panneau sombre, aux bords francs */
.hero__coeur{
  position:relative;
  max-width:min(620px, 62%);
  padding:clamp(26px,3vw,42px) clamp(24px,3vw,40px) clamp(26px,3vw,40px) clamp(26px,3vw,44px);
  background:rgba(15,12,9,.68);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-left:2px solid var(--gold);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.7);
}

/* 4. Typographie claire sur le panneau */
.hero__titre{ color:#FAF7F2 !important; text-shadow:none !important; }
.hero__titre em{
  background:linear-gradient(100deg, #E7D4A8 0%, #F5E9CC 45%, #C9A968 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero__soustitre{ color:#DCC69B !important; text-shadow:none !important; }
.hero__accroche{ color:rgba(250,247,242,.86) !important; opacity:1 !important; text-shadow:none !important; }
.hero__lieu{ color:#DCC69B !important; }
.hero__lieu .trait{ background:#C9A968; }

/* 5. Boutons adaptés au panneau sombre */
.hero .btn-solid--clair{ background:#FAF7F2 !important; color:#14100C !important; border-color:#FAF7F2; }
.hero .btn-solid--clair::before{ background:var(--gold); }
.hero .btn-solid--clair:hover{ color:#14100C !important; }
.hero .btn-lien{ color:#FAF7F2 !important; }
.hero .btn-lien::after{ background:#DCC69B; }

/* 6. Repères du diaporama, lisibles sur photo claire comme sombre */
.hero__jauge{ background:rgba(250,247,242,.42); }
.hero__jauge i{ background:#E7D4A8; }
.hero__credit{ color:rgba(250,247,242,.75) !important; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.hero .scroll-hint__line{ background:rgba(250,247,242,.8); }

/* 7. Écrans étroits : le panneau occupe la largeur, sous le sujet */



/* Rideau d'ouverture retiré : plus d'écran crème au chargement */
.curtain{ display:none !important; }

/* =========================================================
   ═══════  HERO — IMAGE NUE  ═══════
   Aucun assombrissement, aucun dégradé, aucun panneau.
   La photographie s'affiche telle quelle.
   ========================================================= */

/* 1. Tous les calques disparaissent, clairs comme sombres */
.hero::after,
.hero::before,
.hero__scrim,
.hero__vignette,
.hero__panel::before,
.hero__coeur::before,
.hero__coeur::after,
.hero__media::before,
.hero__media::after,
.curtain{
  display:none !important; content:none !important; background:none !important;
}

/* 2. Le panneau sombre du texte est retiré */
.hero__coeur{
  background:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-left:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:min(620px, 60%);
}

/* 3. La photographie couvre le hero sans interstice ni fond apparent */
.hero{ background:transparent !important; }

/* 4. Lisibilité assurée par le seul contour des lettres,
      sans surface ajoutée sur l'image */
.hero__panel-inner{ color:var(--ink); }
.hero__titre{
  color:#14100C !important;
  text-shadow:0 1px 3px rgba(250,247,242,.9), 0 2px 18px rgba(250,247,242,.75) !important;
}
.hero__titre em{
  -webkit-text-fill-color:#9C7C42; background:none;
  text-shadow:0 1px 3px rgba(250,247,242,.9), 0 2px 18px rgba(250,247,242,.75);
}
.hero__soustitre{
  color:#7C602C !important;
  text-shadow:0 1px 3px rgba(250,247,242,.92), 0 2px 12px rgba(250,247,242,.7) !important;
}
.hero__accroche{
  color:#241E18 !important; opacity:1 !important;
  text-shadow:0 1px 3px rgba(250,247,242,.92), 0 2px 10px rgba(250,247,242,.7) !important;
}
.hero__lieu{
  color:#7C602C !important;
  text-shadow:0 1px 3px rgba(250,247,242,.9) !important;
}
.hero__lieu .trait{ background:#9C7C42; }

/* 5. Boutons pleins, lisibles sur n'importe quelle photo */
.hero .btn-solid--clair{
  background:#14100C !important; color:#FAF7F2 !important; border-color:#14100C !important;
}
.hero .btn-solid--clair:hover{ color:#14100C !important; }
.hero .btn-lien{
  color:#14100C !important;
  text-shadow:0 1px 3px rgba(250,247,242,.9);
}
.hero .btn-lien::after{ background:#9C7C42; }

/* 6. Repères du diaporama */
.hero__jauge{ background:rgba(20,16,12,.28); }
.hero__jauge i{ background:#9C7C42; }
.hero__credit{ color:#4A4038 !important; text-shadow:0 1px 4px rgba(250,247,242,.9) !important; }
.hero .scroll-hint__line{ background:#7C602C; }

/* 7. La ligne sous la bannière disparaît */
.stats{
  border-top:0 !important; border-bottom:0 !important;
  margin-top:-1px;
}
.stats::before{ display:none !important; content:none !important; }

/* =========================================================
   ═══════  HERO — AUCUN DÉGRADÉ, QUEL QU'EN SOIT LE PORTEUR
   Après neutralisation individuelle de dix calques, un dégradé
   subsistait encore. Cette règle supprime toute image de fond
   à l'intérieur de la bannière, sans toucher aux couleurs
   pleines (boutons) ni aux photographies.
   ========================================================= */

.hero,
.hero *:not(img),
.hero::before,  .hero::after,
.hero *::before, .hero *::after{
  background-image:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Les couleurs pleines nécessaires sont rétablies explicitement */
.hero .btn-solid--clair{ background-color:#14100C !important; }
.hero .btn-solid--clair::before{ background-color:#9C7C42 !important; }
.hero .btn-lien::after{ background-color:#9C7C42 !important; }
.hero__lieu .trait{ background-color:#9C7C42 !important; }
.hero__jauge{ background-color:rgba(20,16,12,.28) !important; }
.hero__jauge i{ background-color:#9C7C42 !important; }
.hero .scroll-hint__line{ background-color:#7C602C !important; }

/* La photographie reste intacte */
.hero__slide img{ filter:none !important; }

/* Halos clairs autour du texte du hero : supprimés.
   C'était le dernier élément produisant du blanc sur l'image. */
.hero__titre,
.hero__titre em,
.hero__soustitre,
.hero__accroche,
.hero__lieu,
.hero__credit,
.hero .btn-lien{
  text-shadow:none !important;
}
/* Le bouton reprend une couleur pleine, sans transparence */
.hero .btn-solid--clair{
  background-color:#14100C !important;
  opacity:1 !important;
  color:#FAF7F2 !important;
}

/* =========================================================
   ═══════  JONCTION BANNIÈRE → SECTION : AUCUN INTERSTICE
   Une bande claire d'environ 6 px subsistait entre le bas de
   la photographie et la section suivante. La photo déborde
   désormais, et la section remonte pour la recouvrir.
   ========================================================= */

.hero{ overflow:hidden !important; }

/* La photographie dépasse largement en haut et en bas */

/* La section suivante remonte et passe au-dessus du bord */
.stats{
  margin-top:-4px !important;
  position:relative; z-index:2;
  border:0 !important;
}
.stats::before{ display:none !important; content:none !important; }

/* Aucun fond clair ne peut transparaître sous la photographie */
.hero{ background-color:transparent !important; }

/* =========================================================
   ═══════  VOILE DU HERO — COUVERTURE INTÉGRALE  ═══════
   Placé à l'intérieur de .hero__media, il occupe exactement
   la même boîte que la photographie : impossible qu'une zone
   reste découverte. Teinte UNIE, sans dégradé — c'est le
   dégradé qui laissait des bandes non couvertes.
   ========================================================= */


/* La photographie reste au fond, le texte passe devant */
.hero__slider{ z-index:0; }
.hero__jauges,.hero__credit,.hero .scroll-hint{ z-index:4; }

/* Le voile ne doit pas être neutralisé par les règles générales */
.hero .voile-hero{ background-color:transparent !important; }

/* Texte foncé, lisible sur voile uni, sans halo */
.hero__titre{ color:#14100C !important; }
.hero__titre em{ -webkit-text-fill-color:#8A6C38; color:#8A6C38 !important; }
.hero__soustitre{ color:#7C602C !important; }
.hero__accroche{ color:#231D17 !important; }
.hero__lieu{ color:#7C602C !important; }
.hero__credit{ color:#4A4038 !important; }

/* =========================================================
   ═══════  HERO — STRUCTURE DÉFINITIVE DU VOILE  ═══════

   .hero            position:relative   (référence)
     .hero__media   position:absolute · inset:0
       .hero__stage position:relative · 100 % × 100 %   ← parent du voile
         .hero__slider  position:absolute · inset:0     ← les photos
         .hero__overlay position:absolute · inset:0     ← le voile

   L'overlay et les photos partagent le même parent et les
   mêmes coordonnées : la couverture est identique par
   construction, sur toute la hauteur et toute la largeur.
   ========================================================= */

.hero{ position:relative !important; overflow:hidden !important; }

/* Le voile : mêmes coordonnées que les photos, teinte unie */

/* Le texte et les repères passent devant */
.hero__panel,.hero__panel-inner{ position:relative !important; z-index:3 !important; }
.hero__jauges,.hero__credit,.hero .scroll-hint{ z-index:4 !important; }

/* Les anciens voiles n'existent plus dans le balisage */

/* Jonction avec la section suivante, sans interstice */
.stats{ margin-top:-1px !important; position:relative; z-index:2; }

/* =========================================================
   ═════════════  HERO — BLOC UNIQUE ET DÉFINITIF  ═════════════

   CAUSE RACINE IDENTIFIÉE
   Le conteneur intermédiaire était dimensionné en `height:100%`.
   Un pourcentage de hauteur se résout sur la hauteur du parent ;
   or ce parent est en position absolue avec `top/bottom` et sans
   hauteur explicite, donc de hauteur indéfinie selon le contexte.
   Le conteneur pouvait alors être plus court que l'image, et le
   voile — calé sur lui — ne couvrait plus toute la photographie.

   CORRECTION
   Plus aucune hauteur en pourcentage dans la chaîne : chaque
   niveau est dimensionné par ses décalages (top/right/bottom/left),
   qui produisent toujours une hauteur définie et identique.

   .hero              position:relative              référence
     .hero__media     position:absolute · inset:0
       .hero__stage   position:absolute · inset:0    parent commun
         .hero__slider   position:absolute · inset:0
           .hero__slide  position:absolute · inset:0
             img         position:absolute · inset:0 · object-fit:cover
         .hero__overlay  position:absolute · inset:0
     .hero__panel     position:relative · z-index:3  (texte)
   ========================================================= */

.hero{
  position:relative;
  display:block;
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
  overflow:hidden;
  isolation:isolate;
  background-color:transparent;
}

.hero__media{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  overflow:hidden;
  z-index:0;
  margin:0; padding:0;
}

/* Dimensionné par ses décalages, jamais par un pourcentage */
.hero__stage{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  overflow:hidden;
  margin:0; padding:0;
}

.hero__slider{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:0;
  margin:0; padding:0;
}

.hero__slide{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  margin:0; padding:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.5s var(--ease-out), visibility 0s linear 1.5s;
}
.hero__slide.is-active{
  opacity:1; visibility:visible; z-index:1;
  transition:opacity 1.5s var(--ease-out), visibility 0s;
}
.hero__slide.is-sortante{ opacity:0; visibility:visible; z-index:0; transition:opacity 1.5s var(--ease-out); }

.hero__slide img{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  margin:0; padding:0; border:0;
}

/* Le voile : même parent et mêmes décalages que les images.
   Sa surface est donc rigoureusement identique à la leur. */

/* ---------- Colonne de texte ---------- */
.hero__panel{
  position:relative; z-index:3;
  display:block; background:none; padding:0;
}
.hero__panel-inner{
  position:relative; z-index:3;
  max-width:var(--max); margin-inline:auto;
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
  padding:clamp(28px,4vw,52px) var(--gutter) clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column; text-align:left;
}
.hero__coeur{
  margin-top:auto;
  max-width:min(620px, 62%);
  padding-block:clamp(14px,2.2vw,32px);
  background:none;
}

/* ---------- Écrans étroits ---------- */
@media (max-width:1000px){
  .hero{ min-height:auto; }
  .hero__panel-inner{
    min-height:calc(100vh - var(--head-h));
    min-height:calc(100svh - var(--head-h));
    justify-content:flex-end;
  }
  .hero__coeur{ max-width:none; }
}

/* =========================================================
   ═══════  BANDE BLANCHE SOUS LA PHOTOGRAPHIE  ═══════

   CAUSE EXACTE
   Le hero et la photographie ont rigoureusement la même
   hauteur (l'image est en inset:0 du hero, vérifié). La bande
   claire n'est donc pas un espace vide du hero : c'est le
   rembourrage supérieur de la section qui le suit —
   68 px de vide sur fond #FAF7F2, immédiatement sous la photo.

   Mesures relevées sur la capture :
     y=96   écart 31 entre colonnes  → photographie
     y=102  écart  0                 → surface unie #FAF7F2
   Le passage se fait 4 px après la fin de l'image, ce qui
   correspond au recouvrement d'1 px de la section.

   CORRECTION
   Le rembourrage supérieur passe de 68 px à 24 px : le contenu
   démarre juste sous la photographie, sans zone vide. Le
   rembourrage inférieur est augmenté pour conserver
   l'équilibre vertical de la section.
   ========================================================= */

.stats{
  padding-top:clamp(18px, 1.8vw, 26px) !important;
  padding-bottom:clamp(44px, 5.5vw, 76px) !important;
}

/* Le premier élément ne colle pas au bord de la photographie */
.stats .chiffre__trait{ margin-top:2px; }

/* Aucune transformation ne doit décaler les images du hero par rapport
   au voile : les deux doivent rester rigoureusement superposés. */
.hero__slide img{ transform:none !important; }

/* ══════════ LISIBILITÉ ET CONFORT TACTILE SUR PETITS ÉCRANS ══════════
   Audit mené au navigateur sur 360 → 1920 px. Les libellés porteurs de
   sens repassent au-dessus de 10 px, et les liens de texte reçoivent une
   zone de touche confortable — sans changer le dessin de la page. */
@media (max-width:640px){
  .tag,
  .today-tag,
  .carte__type,
  .carte__lbl,
  .palier__pts{ font-size:10px; }

  .tm span,
  .fidelite .carte__pts span{ font-size:10px; }

  /* Pastilles de position : 2 px de haut se voient bien mais ne se visent
     pas — on élargit la surface sensible sans toucher au trait. */
  .carou__dots button,
  .temoins__point{ position:relative; }
  .carou__dots button::after,
  .temoins__point::after{
    content:""; position:absolute; left:0; right:0; top:-15px; bottom:-15px;
  }

  .infos h3{ font-size:10.5px; }

  /* Zones de touche : le trait visuel ne bouge pas, seule la surface
     sensible s'élargit autour du texte. */
  .btn-lien,
  .tech__cta,
  .topbar__lien,
  .footer__nav a{ padding-top:9px; padding-bottom:9px; }

  /* Les jauges du diaporama sont cliquables : 3 px de haut ne se visent
     pas au doigt, on leur ajoute une surface transparente. */
  .hero__jauge{ position:relative; }
  .hero__jauge::after{
    content:""; position:absolute; left:0; right:0; top:-14px; bottom:-14px;
  }
}

/* ══════════ LISIBILITÉ SUR PHOTO NON VOILÉE ══════════
   La photographie n'est plus atténuée : elle va désormais du noir au blanc.
   Un texte de couleur fixe pouvait donc disparaître selon la diapositive.
   On donne leur lisibilité aux éléments eux-mêmes — jamais en reposant un
   filtre sur l'image. */

/* Le second bouton devient une vraie surface, comme le premier */
/* Aucune surface claire sous le hero : le lien reste un lien, sa lisibilité
   vient d'un liseré porté par le texte seul. Le fond ivoire posé ici
   s'étirait sur toute la largeur en mobile et formait une bande blanche
   sous le bouton de réservation. */
.hero .hero__actions .btn-lien{
  background:transparent;
  border:0;
  padding:18px 8px;
  color:var(--ink);
  text-shadow:0 1px 2px rgba(250,247,242,.95), 0 0 10px rgba(250,247,242,.75);
  transition:color .45s var(--ease-out);
}
.hero .hero__actions .btn-lien:hover{ color:var(--gold); }

/* Mention verticale : halo clair discret, porté par le texte seul */
.hero__credit{
  color:var(--ink) !important;
  text-shadow:0 0 6px rgba(250,247,242,.85), 0 0 14px rgba(250,247,242,.6);
}

/* Jauges du diaporama : assez contrastées pour se voir sur tout fond */
.hero__jauge{
  background:rgba(20,16,12,.45) !important;
  box-shadow:0 0 0 1px rgba(250,247,242,.35);
}
.hero__jauge i, .hero__jauge span{ background:var(--gold) !important; }