/* =========================================================
   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); }
@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 » */
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
/* ---------- 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%; }
  .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) ---------- */
@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
   ========================================================= */
@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); } }
/* 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){
  .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; }
  .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; }
/* ---------- HERO ---------- */
/* Le fond : la photographie occupe tout le cadre */
/* Voile dégradé : lisibilité du texte sans écraser la photo */
/* Le panneau disparaît : tout le contenu passe au-dessus de la photo */
/* Le logo aux deux mains, en blanc sur la photo */
/* Cœur : titre monumental */
@keyframes ligneMonte{ to{ transform:none; } }
@keyframes monter{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
/* 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 */
/* ---------- 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:640px){
  .btn-lien{ text-align:center; }
}
/* Voile ivoire depuis la gauche : la fresque devient une texture,
   le sujet à droite reste intact. */
/* Typographie sombre */
/* La photographie porte déjà la fresque du logo : pas de doublon */
/* Boutons adaptés au fond clair */
/* Bandeau des chiffres : verre clair */
/* ---------- Écrans étroits : le sujet passe devant, texte en bas ---------- */
/* Zoom lent sur la vue affichée, alterné pour éviter la répétition */
@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 */
@keyframes heroJauge{ from{ width:0; } to{ width:100%; } }
/* =========================================================
   ═══════  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; }
}
/* 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 */
/* Léger renfort de lisibilité, sans ombre visible */
/* Bandeau des chiffres : un peu plus opaque pour tenir sur photo nette */
@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; }
}
/* 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. */
/* 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 */
/* 4. Écrans larges mais courts : on resserre encore */
@media (max-height:680px) and (min-width:1001px){
  /* on privilégie titre et actions */
}
/* 5. Le crédit vertical ne doit pas chevaucher le bandeau des chiffres */
/* =========================================================
   ═══════  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é ---------- */
/* =========================================================
   ═══════  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.
   ========================================================= */
/* Filet doré au-dessus de chaque chiffre : hiérarchie visuelle */
/* Le chiffre : plus grand, franchement sombre */
/* Le suffixe reste doré mais bien lisible */
/* Le libellé : brun foncé, sans transparence */
/* Séparateurs francs entre les colonnes */
/* =========================================================
   ═══════  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 panneau de gauche ne peint plus de fond : la photo est le fond */
/* Aucune couleur de repli visible sous la photographie */
/* Le voile diagonal reste la seule surface claire, et uniquement à gauche */
/* Écran étroit : dégradé vertical sous le texte, sans excès */
/* 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 ---------- */
/* 1. Neutralisation de tous les anciens calques */
/* 2. Le voile unique, solidaire de la section */
/* 3. Les plans : photo au fond, voile au-dessus, texte devant */
/* 4. Écran étroit : voile vertical, également solidaire du hero */
/* 1. Le voile clair disparaît complètement */
/* 2. Fond de repli sombre : plus jamais de rectangle blanc */
/* 3. Le bloc de texte devient un panneau sombre, aux bords francs */
/* 4. Typographie claire sur le panneau */
/* 5. Boutons adaptés au panneau sombre */
/* 6. Repères du diaporama, lisibles sur photo claire comme sombre */
/* 7. Écrans étroits : le panneau occupe la largeur, sous le sujet */
/* Rideau d'ouverture retiré : plus d'écran crème au chargement */
/* 1. Tous les calques disparaissent, clairs comme sombres */
/* 2. Le panneau sombre du texte est retiré */
/* 3. La photographie couvre le hero sans interstice ni fond apparent */
/* 4. Lisibilité assurée par le seul contour des lettres,
      sans surface ajoutée sur l'image */
/* 5. Boutons pleins, lisibles sur n'importe quelle photo */
/* 6. Repères du diaporama */
/* 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; }
/* Les couleurs pleines nécessaires sont rétablies explicitement */
/* La photographie reste intacte */
/* Halos clairs autour du texte du hero : supprimés.
   C'était le dernier élément produisant du blanc sur l'image. */
/* Le bouton reprend une couleur pleine, sans transparence */
/* 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 */
/* La photographie reste au fond, le texte passe devant */
/* Le voile ne doit pas être neutralisé par les règles générales */
/* Texte foncé, lisible sur voile uni, sans halo */
/* Le voile : mêmes coordonnées que les photos, teinte unie */
/* Le texte et les repères passent devant */
/* 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; }
/* Dimensionné par ses décalages, jamais par un pourcentage */
/* Le voile : même parent et mêmes décalages que les images.
   Sa surface est donc rigoureusement identique à la leur. */
/* ---------- Colonne de texte ---------- */
/* ---------- Écrans étroits ---------- */
.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. */
/* ══════════ 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. */
}
/* ══════════ 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. */
/* Mention verticale : halo clair discret, porté par le texte seul */
/* Jauges du diaporama : assez contrastées pour se voir sur tout fond */

/* =========================================================
   BANNIÈRE D'ACCUEIL — bloc unique

   Structure, volontairement plate :

     .hero                 repère de positionnement, overflow:hidden
       .hero__media        photographie, en inset:0 — plan de fond
       .hero__panel        textes et boutons, en inset:0 — plan de dessus

   La photographie et la bannière ont exactement la même boîte :
   .hero__media est en position absolue sur les quatre côtés, et
   l'image le remplit en object-fit:cover. Aucune bande claire ne
   peut donc apparaître entre le bas de l'image et le bas de la
   section — il n'y a pas d'espace où elle pourrait se glisser.

   La hauteur vient d'une seule source : .hero lui-même. Le panneau
   de texte ne la fixe plus (il est absolu), ce qui supprime la
   possibilité qu'un rembourrage de texte dépasse la photographie.

   Aucun ::before, aucun ::after, aucun dégradé, aucun masque.
   La lisibilité du texte est assurée par une ombre portée sur les
   caractères, pas par un voile posé sur la photographie.
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  height:calc(100vh - var(--head-h));
  height:calc(100svh - var(--head-h));
  min-height:520px;
  max-height:1100px;
  background:var(--ink);          /* visible seulement le temps du chargement */
  isolation:isolate;
}

/* ---------- Plan de fond : la photographie ---------- */

.hero__media{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

.hero__stage,
.hero__slider{ position:absolute; inset:0; }

.hero__slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
.hero__slide.is-active{
  opacity:1;
  visibility:visible;
  transition:opacity 1.1s ease, visibility 0s;
}

.hero__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Repères de progression du diaporama */
.hero__jauges{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(96px, 13vh, 150px);
  z-index:3;
  display:flex;
  gap:10px;
}
.hero__jauge{
  width:54px; height:3px; padding:0;
  border:0; border-radius:2px;
  background:rgba(23,19,15,.35);
  cursor:pointer;
  overflow:hidden;
}
.hero__jauge i{ display:block; height:100%; width:0; background:var(--gold); }
.hero__jauge.is-active i{ width:100%; transition:width .5s ease; }
.hero.is-auto .hero__jauge.is-active i{ animation:heroJauge var(--hero-delai, 5s) linear forwards; }

/* ---------- Plan de dessus : textes et boutons ---------- */

.hero__panel{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;            /* la photo reste cliquable là où il n'y a pas de texte */
}

.hero__panel-inner{
  height:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(24px,3.4vw,44px) var(--gutter) clamp(28px,4vw,56px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
}
.hero__panel-inner > *{ pointer-events:auto; }

.hero__haut{ flex-shrink:0; }

.hero__lieu{
  display:flex; align-items:center; gap:12px;
  margin:0;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 1px 6px rgba(250,247,242,.85);
}
.hero__lieu .trait{ width:38px; height:1px; background:var(--gold); flex:none; }

.hero__marque{ display:none; }    /* la photographie porte déjà l'enseigne */

/* Bloc bas : titre, accroche et actions */
.hero__coeur{
  max-width:min(640px, 72%);
  padding-bottom:clamp(4px,1.4vh,18px);
}

.hero__titre{
  margin:0 0 .4em;
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.04;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  color:var(--ink);
  text-shadow:0 1px 4px rgba(250,247,242,.9), 0 2px 22px rgba(250,247,242,.7);
}
.hero__ligne{ display:block; overflow:hidden; }
.hero__ligne > span{ display:block; }

.hero__soustitre{
  margin:0 0 .6em;
  font-size:clamp(.95rem, 1.5vw, 1.2rem);
  color:#7C602C;
  text-shadow:0 1px 4px rgba(250,247,242,.92);
}

.hero__accroche{
  margin:0 0 clamp(18px,2.6vh,30px);
  max-width:46ch;
  font-size:clamp(.9rem, 1.2vw, 1.02rem);
  line-height:1.65;
  color:var(--espresso);
  text-shadow:0 1px 4px rgba(250,247,242,.9);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,1.6vw,22px);
}

.hero__credit{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(18px,2.4vh,28px);
  z-index:3;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); opacity:.55;
  writing-mode:vertical-rl;
  text-shadow:0 1px 4px rgba(250,247,242,.8);
}

.scroll-hint{
  position:absolute;
  left:50%; bottom:0;
  z-index:3;
  width:1px; height:clamp(34px,5vh,56px);
  transform:translateX(-50%);
  pointer-events:auto;
}
.scroll-hint__line{
  display:block; width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, var(--gold));
}

/* ---------- Écrans étroits ---------- */

@media (max-width:900px){
  .hero{
    height:auto;
    min-height:calc(100svh - var(--head-h));
  }
  .hero__panel-inner{
    min-height:calc(100svh - var(--head-h));
    padding-bottom:clamp(34px,6vh,64px);
  }
  .hero__coeur{ max-width:none; }
  .hero__jauges{ bottom:clamp(128px,17vh,180px); }
  .hero__credit{ display:none; }
  .hero__actions{ width:100%; }
  .hero__actions > *{ flex:1 1 auto; justify-content:center; text-align:center; }
}

@media (max-width:520px){
  .hero__titre{ font-size:clamp(2rem, 9vw, 2.9rem); }
  .hero__accroche{ display:none; }
  .hero__jauges{ left:50%; transform:translateX(-50%); }
}

/* Hauteur d'écran réduite : le texte se resserre, la photo ne bouge pas */
@media (max-height:700px) and (min-width:901px){
  .hero__accroche{ display:none; }
  .hero__titre{ font-size:clamp(2rem, 4.6vh, 3.2rem); }
}

@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition:none; }
  .hero.is-auto .hero__jauge.is-active i{ animation:none; width:100%; }
}

/* ==========================================================================
   PASSE « MODERNE & CHALEUREUX »
   --------------------------------------------------------------------------
   La palette du site était déjà chaude ; ce qui le rendait froid, c'est la
   géométrie : tout carré, tout aligné, tout à plat. On introduit donc trois
   choses, et rien d'autre :
     · des arrondis généreux, qui adoucissent sans changer la mise en page ;
     · un décalage vertical alterné, pour rompre la ligne trop régulière ;
     · de la profondeur, par des ombres teintées de brun plutôt que de gris.
   ========================================================================== */
:root{
  --radius:      20px;
  --radius-lg:   30px;
  --radius-xl:   40px;
  /* Les ombres portent la couleur du sol, pas un gris neutre : c'est ce qui
     fait qu'un bloc paraît posé sur la page plutôt que découpé dedans. */
  --shadow-warm:    0 24px 60px -34px rgba(120, 92, 60, .38);
  --shadow-warm-lg: 0 46px 96px -44px rgba(120, 92, 60, .48);
}

/* ---------------------------- arrondis ---------------------------------- */
.uni,
.maison__img-main,
.maison__img-inset,
.tech__media img,
.quote,
.avis-card,
.info-card,
.form-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.uni img{ border-radius:inherit; }
/* Le carrousel défile horizontalement : on arrondit les vignettes, jamais le
   conteneur — un overflow:hidden dessus couperait le défilement. */
.carou__item{ border-radius:var(--radius-lg); overflow:hidden; }
.carou__item img{ border-radius:inherit; }

/* Les boutons prennent la forme de gélule de la référence. */
.btn,.btn--gold,.btn--ghost,.btn--dark,.cta,.fab{
  border-radius:999px;
}

/* -------------------- décalage alterné des univers ----------------------
   Quatre cartes parfaitement alignées font une frise ; décalées deux à deux,
   elles font une composition. Le décalage reste modeste — assez pour rompre
   la ligne, pas assez pour désorganiser la lecture.
------------------------------------------------------------------------- */
@media (min-width:900px){
  .univers__grid{ align-items:start; padding-block:clamp(18px,2vw,30px); }
  .univers__grid > .uni:nth-child(1){ transform:translateY(0); }
  .univers__grid > .uni:nth-child(2){ transform:translateY(clamp(26px,3vw,44px)); }
  .univers__grid > .uni:nth-child(3){ transform:translateY(clamp(-14px,-1.4vw,-8px)); }
  .univers__grid > .uni:nth-child(4){ transform:translateY(clamp(34px,3.8vw,56px)); }

  /* Le survol conserve le décalage : sans cela, la carte sauterait à sa
     place « normale » au premier passage de souris. */
  .univers__grid > .uni:nth-child(2):hover{ transform:translateY(calc(clamp(26px,3vw,44px) - 10px)); }
  .univers__grid > .uni:nth-child(3):hover{ transform:translateY(calc(clamp(-14px,-1.4vw,-8px) - 10px)); }
  .univers__grid > .uni:nth-child(4):hover{ transform:translateY(calc(clamp(34px,3.8vw,56px) - 10px)); }
  .univers__grid > .uni:nth-child(1):hover{ transform:translateY(-10px); }

  /* Deux cartes légèrement plus hautes : l'irrégularité vient aussi de là. */
  .univers__grid > .uni:nth-child(2),
  .univers__grid > .uni:nth-child(4){ aspect-ratio:3/4.35; }
}

/* ------------------------------ profondeur ------------------------------ */
.uni{ box-shadow:var(--shadow-warm); }
.uni:hover{ box-shadow:var(--shadow-warm-lg); }
.maison__img-main{ box-shadow:var(--shadow-warm); }
.maison__img-inset{
  box-shadow:var(--shadow-warm-lg);
  border-width:8px;
  border-radius:var(--radius-xl);
}

/* Le liseré carré derrière le visuel de « La Maison » contredisait les
   arrondis : il les suit désormais. */
.maison__visual::before{ border-radius:var(--radius-xl); }

@media (prefers-reduced-motion:reduce){
  .univers__grid > .uni{ transition:none }
}

/* ==========================================================================
   PASSE « IDENTITÉ MODERNE » — 2/2
   --------------------------------------------------------------------------
   La passe précédente a adouci les formes. Celle-ci s'attaque à ce qui reste
   de rigide : un fond uniforme sur toute la hauteur, et six titres de section
   centrés à l'identique. On travaille en CSS seulement — le contenu vient du
   CMS, on ne touche pas au rendu JS.
   ========================================================================== */
:root{
  --clay: #EFE6D8;   /* un cran plus chaud que --cream, pour scander la page */
}

/* ------------------------ 1. rythme des fonds ---------------------------
   L'ivoire et la crème ne se distinguaient presque pas : la page se lisait
   comme un seul aplat de 19 000 px. On alterne franchement, et deux sections
   reçoivent un dégradé chaud qui donne une direction à la lumière.
------------------------------------------------------------------------- */
.offres{ background:linear-gradient(168deg, var(--cream) 0%, var(--clay) 100%); }
.technologies{ background:linear-gradient(196deg, var(--clay) 0%, var(--cream) 62%); }
.fidelite{ background:linear-gradient(160deg, var(--cream) 0%, var(--sand) 140%); }
.prestations{ background:var(--ivory); }

/* Halo chaud derrière « Nos univers » : c'est ce qui empêche le fond de
   paraître mort derrière les cartes décalées. */
.univers{ position:relative; isolation:isolate; }
.univers::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:0;
  background:
    radial-gradient(60% 52% at 18% 22%, rgba(181,148,90,.13), transparent 70%),
    radial-gradient(52% 46% at 88% 78%, rgba(221,206,185,.42), transparent 72%);
}

/* --------------------- 2. la citation devient une île -------------------
   Un bandeau sombre pleine largeur coupe la page en deux. Détaché de ses
   bords et arrondi, le même bloc devient un objet posé sur la page.
   Ses voisines passent à l'ivoire pour que les angles ne laissent
   apparaître aucune couture.
------------------------------------------------------------------------- */
.galerie,
.avis{ background:var(--ivory); }
.quote{
  margin-inline:clamp(0px, 3.4vw, 56px);
  border-radius:clamp(0px, 3.4vw, 46px);
}

/* ------------------ 3. titres de section asymétriques -------------------
   Trois sections sur six abandonnent l'axe central : filet et titre à
   gauche, chapô décalé en colonne de droite et calé sur la ligne de base du
   titre. C'est une disposition de magazine — elle crée le déséquilibre
   demandé sans nuire à la lecture, puisque chaque bloc reste aligné à
   gauche. Les trois autres restent centrées : c'est l'alternance qui fait
   le rythme, pas le désordre.
------------------------------------------------------------------------- */
@media (min-width:900px){
  #offres      > .container > .section__head--center,
  #prestations > .container > .section__head--center,
  #technologies> .container > .section__head--center{
    max-width:none; margin-inline:0; text-align:left;
    display:grid; align-items:end;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    grid-template-areas:
      "eyebrow ."
      "titre   lede";
    column-gap:var(--gap-lg); row-gap:0;
  }
  #offres      > .container > .section__head--center > .eyebrow,
  #prestations > .container > .section__head--center > .eyebrow,
  #technologies> .container > .section__head--center > .eyebrow{
    grid-area:eyebrow; justify-content:flex-start;
  }
  /* Le filet de droite n'a plus de sens hors du centrage. */
  #offres      > .container > .section__head--center > .eyebrow::after,
  #prestations > .container > .section__head--center > .eyebrow::after,
  #technologies> .container > .section__head--center > .eyebrow::after{
    content:none;
  }
  #offres      > .container > .section__head--center > h2,
  #prestations > .container > .section__head--center > h2,
  #technologies> .container > .section__head--center > h2{
    grid-area:titre; margin-bottom:0;
  }
  #offres      > .container > .section__head--center > .section__lede,
  #prestations > .container > .section__head--center > .section__lede,
  #technologies> .container > .section__head--center > .section__lede{
    grid-area:lede; margin-inline:0; max-width:46ch; padding-bottom:.5em;
  }
}

/* ---------------------- 4. formes et profondeur -------------------------
   Ce qui restait carré : les cartes technologies, les offres, les encarts
   d'informations et les visuels de la galerie.
------------------------------------------------------------------------- */
.tech,
.offre,
.stats,
.info-card,
.fidelite__carte,
.avis-card{
  border-radius:var(--radius-lg);
}
.tech{ box-shadow:0 18px 44px -32px rgba(120,92,60,.34); }
.tech:hover{ box-shadow:var(--shadow-warm); }
.offre{ box-shadow:var(--shadow-warm); }

/* Une carte technologie sur trois est légèrement remontée : même principe
   que les univers, à plus petite échelle. */
@media (min-width:900px){
  .techs > .tech:nth-child(2){ transform:translateY(clamp(16px,2vw,30px)); }
  .techs > .tech:nth-child(2):hover{ transform:translateY(calc(clamp(16px,2vw,30px) - 6px)); }
}

/* ---------------- 5. décalages sur les mises en page à 2 colonnes --------
   Entre 620 et 900 px, les univers et les technologies passent sur deux
   colonnes. Sans reprise, le décalage disparaissait exactement là où la
   grille redevient la plus régulière : on le rejoue en quinconce.
------------------------------------------------------------------------- */
@media (min-width:620px) and (max-width:899.98px){
  .univers__grid{ align-items:start; }
  .univers__grid > .uni:nth-child(even){ transform:translateY(26px); }
  .univers__grid > .uni:nth-child(even):hover{ transform:translateY(18px); }
  .techs > .tech:nth-child(even){ transform:translateY(22px); }
}

@media (prefers-reduced-motion:reduce){
  .techs > .tech{ transition:none }
}

/* ==========================================================================
   PASSE « HERO » — 3/3
   --------------------------------------------------------------------------
   Le premier écran décidait à lui seul de l'impression de froideur : une
   photographie de marbre gris, plein cadre, à angles vifs, sur laquelle un
   titre brun foncé cerné d'une ombre blanche se lisait mal. Aucune retouche
   faite plus bas dans la page ne pouvait compenser cela.
   ========================================================================== */

/* ------------------- 1. la photographie reste claire --------------------
   La cliente préfère la luminosité d'origine : le voile sombre posé le
   3 septembre est retiré. Reste le problème qu'il réglait — un titre brun
   foncé sur un marbre gris se lit mal. On le résout dans l'autre sens :
   un halo ivoire, très doux, uniquement sous le bloc de texte en bas à
   gauche. Il éclaircit au lieu d'assombrir, et laisse la photographie
   intacte sur les trois quarts du cadre.
------------------------------------------------------------------------- */
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(78% 62% at 8% 92%,
                    rgba(246,246,244,.82) 0%,
                    rgba(246,246,244,.54) 34%,
                    rgba(246,246,244,.20) 62%,
                    rgba(246,246,244,0)   82%);
}

/* ------------------- 2. le texte reste brun sur photo claire ------------
   Retour au parti d'origine, noté plus haut dans le TODO : la lisibilité
   vient d'une ombre claire portée sur les caractères, pas d'un voile posé
   sur la photographie. Les valeurs sont celles de la bannière d'origine,
   l'ombre étant seulement un peu élargie pour compenser le marbre.
------------------------------------------------------------------------- */
.hero__titre{
  color:var(--ink);
  text-shadow:0 1px 4px rgba(246,246,244,.95), 0 2px 26px rgba(246,246,244,.85);
  letter-spacing:-.03em;
}
.hero__titre em{ font-style:italic; color:#7C602C; }
.hero__soustitre{ color:#7C602C; text-shadow:0 1px 5px rgba(246,246,244,.95), 0 2px 18px rgba(246,246,244,.7); }
.hero__accroche{ color:var(--espresso); text-shadow:0 1px 5px rgba(246,246,244,.95), 0 2px 16px rgba(246,246,244,.7); }
.hero__lieu{ color:var(--ink); text-shadow:0 1px 6px rgba(246,246,244,.9); }
.hero__jauge{ background:rgba(23,19,15,.35); }
.hero__credit{ color:var(--ink); }

/* Le lien secondaire « Voir les prestations » était ivoire : invisible dès
   que la photographie a retrouvé sa clarté. */
.hero__actions .btn-lien{ color:var(--ink); }
.hero__actions .btn-lien::after{ background:#7C602C; }

/* --------------- 3. le hero devient un objet, pas un bandeau ------------
   Détaché de ses bords et arrondi en bas, il cesse d'être un rectangle
   collé au navigateur : la page commence par une forme, pas par une arête.
------------------------------------------------------------------------- */
@media (min-width:900px){
  .hero{
    margin-inline:clamp(0px, 3.4vw, 56px);
    border-bottom-left-radius:clamp(0px, 3.4vw, 46px);
    border-bottom-right-radius:clamp(0px, 3.4vw, 46px);
    height:calc(100svh - var(--head-h) - 18px);
  }
}
@media (max-width:899.98px){
  .hero{ border-bottom-left-radius:26px; border-bottom-right-radius:26px; }
}

/* Le numéro de téléphone se coupait en deux au milieu du bandeau mobile. */
.topbar a[href^="tel:"], .topbar__tel{ white-space:nowrap; }

/* ==========================================================================
   PASSE « FINITIONS » — 4/4
   ========================================================================== */

/* -------------------------- 1. les boutons ------------------------------
   La règle « gélule » de la passe 1 visait .btn / .btn--gold, qui
   n'existent nulle part dans ce projet : les vraies classes sont
   .btn-solid et .btn-line. Les boutons étaient donc restés rectangulaires,
   seuls angles vifs subsistant dans une page devenue ronde.
------------------------------------------------------------------------- */
.btn-solid,
.btn-line,
.btn-book,
.btn-ajout{ border-radius:999px; }
.btn-solid{ box-shadow:0 16px 34px -22px rgba(23,19,15,.55); }
.btn-solid:hover{ box-shadow:0 20px 40px -20px rgba(23,19,15,.65); }

/* --------------------- 2. médaillons des technologies -------------------
   Les six pictogrammes sont des emoji : selon l'appareil, certains sortent
   en couleur, d'autres en noir et blanc, et leurs tailles optiques ne
   concordent pas. Posés dans un médaillon doré de taille fixe, ils
   redeviennent une série cohérente quel que soit le rendu.
------------------------------------------------------------------------- */
.tech__icon{
  width:52px; height:52px; margin-bottom:20px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.32rem; line-height:1;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%, #FFF9EC 0%, var(--sand) 62%, var(--beige) 100%);
  box-shadow:inset 0 0 0 1px rgba(181,148,90,.34), 0 12px 26px -18px rgba(120,92,60,.6);
}

/* ------------------------ 3. le bloc « La Maison » ----------------------
   Le visuel réservait, par ses marges, la place d'une photo secondaire
   (.maison__img-inset) que le CMS ne fournit pas : d'où le grand vide à
   gauche. On récupère cet espace quand la photo est absente, et on laisse
   l'image mordre légèrement hors de la grille — l'asymétrie vient de là.
------------------------------------------------------------------------- */
@media (min-width:1000px){
  .maison__grid{ grid-template-columns:.94fr 1.06fr; align-items:start; }
  .maison__visual:not(:has(.maison__img-inset)){
    padding-bottom:0; padding-right:0;
    margin-left:calc(-1 * clamp(0px, 3vw, 48px));
  }
  .maison__visual:not(:has(.maison__img-inset)) .maison__img-main{
    aspect-ratio:4/3;
  }
  /* Le visuel descend un peu : la photo ne s'aligne plus sur le haut du
     titre, et c'est ce léger décrochage qui porte l'asymétrie du bloc. */
  .maison__visual:not(:has(.maison__img-inset)){ margin-top:clamp(24px,4vw,64px); }
}

/* Les filtres de la carte étaient les derniers rectangles à angles vifs
   d'une page devenue ronde. */
.filter{ border-radius:999px; }