/* ------------------------------------------------------------------
   L'Or de nos mains — direction « chandelle »
   Nuit chaude, braise, lin. Newsreader + Instrument Sans.
------------------------------------------------------------------ */

:root{
  --nuit:#14100d;
  --nuit-2:#1c1714;
  --nuit-3:#241d18;
  --braise:#d98a4e;
  --braise-clair:#e9a671;
  --braise-fonce:#9a5423;
  --lin:#efe6d8;
  --lin-2:#e3d6c2;
  --pierre:#a2968a;
  --encre:#201b16;
  --encre-doux:#6a5e54;
  --trait-sombre:rgba(239,230,216,.14);
  --trait-clair:#dccdb7;

  --display:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1240px;
  --gouttiere:clamp(20px, 5vw, 56px);
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-doux:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--nuit);
  color:var(--lin);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p,figure,blockquote,ul,ol,dl{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--braise); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gouttiere); }
section[id], main[id]{ scroll-margin-top:100px; }

/* --- grain & fil de progression --- */
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.thread{ position:fixed; top:0; left:0; width:1px; height:100vh; background:var(--trait-sombre); z-index:4; pointer-events:none; }
.thread-fill{ display:block; width:100%; height:100%; background:var(--braise); transform-origin:top; scale:1 0; }
@supports (animation-timeline: scroll()){
  .thread-fill{ animation:filGrandit linear both; animation-timeline:scroll(root block); }
}
@keyframes filGrandit{ from{ scale:1 0; } to{ scale:1 1; } }

.skip{
  position:absolute; top:-999px; left:12px; z-index:60;
  background:var(--braise); color:var(--nuit); padding:10px 18px; border-radius:999px;
  font-size:.82rem; font-weight:600; text-decoration:none;
}
.skip:focus{ top:12px; }

/* --- typographie --- */
.label{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pierre); margin-bottom:22px;
}
.label::before{ content:''; width:30px; height:1px; background:currentColor; opacity:.6; }
.label--ember{ color:var(--braise); }
.clair .label{ color:var(--braise-fonce); }

.h2{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.2rem, 5.2vw, 4.1rem); line-height:1.04; letter-spacing:-.015em;
  text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--braise); }
.clair .h2 em{ color:var(--braise-fonce); }
.h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15; letter-spacing:-.01em; }
.chapo{ max-width:60ch; color:var(--pierre); font-size:1.05rem; margin-top:26px; }
.clair .chapo{ color:var(--encre-doux); }

.section{ padding-block:clamp(72px, 11vw, 150px); }
.section-head{ max-width:760px; }
.section-head--large{ max-width:880px; }
.section-head--centre{ max-width:720px; margin-inline:auto; text-align:center; }
.section-head--centre .label{ justify-content:center; }
.section-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }

/* --- boutons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border:1px solid transparent; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--ember{ background:var(--braise); color:var(--nuit); box-shadow:0 14px 34px -18px rgba(217,138,78,.9); }
.btn--ember:hover{ background:var(--braise-clair); translate:0 -2px; box-shadow:0 18px 40px -16px rgba(217,138,78,1); }
.btn--ligne{ border-color:var(--trait-clair); color:var(--encre); }
.btn--ligne:hover{ border-color:var(--encre); translate:0 -2px; }
.btn--fantome{ border-color:rgba(239,230,216,.28); color:var(--lin); background:transparent; }
.btn--fantome:hover{ border-color:var(--lin); translate:0 -2px; }
.btn--sm{ padding:11px 22px; font-size:.72rem; }
.btn:active{ translate:0 0; }

.icone-cadeau{ width:17px; height:17px; flex:none; }
.btn--sm .icone-cadeau{ width:15px; height:15px; }
.btn:hover .icone-cadeau{ animation:cadeauSecoue .5s var(--ease); }
@keyframes cadeauSecoue{ 0%,100%{ rotate:0deg; } 30%{ rotate:-14deg; } 70%{ rotate:14deg; } }

.lien-fleche{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--braise); text-decoration:none; padding-bottom:6px;
  transition:color .3s var(--ease);
}
.lien-fleche::before{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; opacity:.5; transition:opacity .3s var(--ease); }
.lien-fleche::after{ content:'→'; font-size:1rem; transition:translate .45s var(--ease); }
.lien-fleche:hover{ color:var(--braise-clair); }
.lien-fleche:hover::before{ opacity:1; }
.lien-fleche:hover::after{ translate:5px 0; }

/* --- en-tête --- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:40;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(20,16,13,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--trait-sombre);
}
.site-header__inner{
  max-width:var(--wrap); margin-inline:auto; padding:18px var(--gouttiere);
  display:flex; align-items:center; gap:28px;
}
.brand{ flex:none; }
.brand img{ width:auto; height:46px; transition:scale .4s var(--ease); }
.brand:hover img{ scale:1.04; }
.nav{ margin-left:auto; display:flex; gap:30px; }
.nav a{
  position:relative; font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--lin); opacity:.82; transition:opacity .3s var(--ease), color .3s var(--ease);
}
.nav a::after{ content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--braise); transition:width .35s var(--ease); }
.nav a:hover{ opacity:1; color:var(--braise); }
.nav a:hover::after{ width:100%; }

.entete-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.btn-cadeau .etiquette-courte{ display:none; }
.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; position:relative; flex:none; }
.burger span{ position:absolute; left:11px; width:22px; height:1.5px; background:var(--lin); transition:translate .3s var(--ease), rotate .3s var(--ease); }
.burger span:first-child{ top:18px; }
.burger span:last-child{ top:25px; }
.burger[aria-expanded="true"] span:first-child{ translate:0 3.5px; rotate:45deg; }
.burger[aria-expanded="true"] span:last-child{ translate:0 -3.5px; rotate:-45deg; }

.menu-mobile{
  position:fixed; inset:0; z-index:39; background:var(--nuit-2);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:0 var(--gouttiere); opacity:0; transition:opacity .4s var(--ease);
}
.menu-mobile[hidden]{ display:none; }
.menu-mobile.is-open{ opacity:1; }
.menu-mobile nav{ display:flex; flex-direction:column; gap:6px; }
.menu-mobile nav a{
  font-family:var(--display); font-size:2rem; font-weight:300; text-decoration:none; color:var(--lin);
  padding-block:8px; border-bottom:1px solid var(--trait-sombre);
  opacity:0; translate:0 18px; transition:opacity .5s var(--ease), translate .5s var(--ease);
}
.menu-mobile.is-open nav a{ opacity:1; translate:0 0; }
.menu-mobile nav a:nth-child(1){ transition-delay:.06s } .menu-mobile nav a:nth-child(2){ transition-delay:.11s }
.menu-mobile nav a:nth-child(3){ transition-delay:.16s } .menu-mobile nav a:nth-child(4){ transition-delay:.21s }
.menu-mobile nav a:nth-child(5){ transition-delay:.26s } .menu-mobile nav a:nth-child(6){ transition-delay:.31s }
.menu-mobile__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.menu-mobile__tel{ color:var(--braise); font-size:1.1rem; letter-spacing:.04em; text-decoration:none; }

/* --- hero --- */
.hero{ position:relative; min-height:min(96vh, 900px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; animation:kenburns 22s var(--ease-doux) infinite alternate; }
@keyframes kenburns{ from{ scale:1; translate:0 0; } to{ scale:1.14; translate:-2% -1.5%; } }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,13,.72) 0%, rgba(20,16,13,.35) 35%, rgba(20,16,13,.88) 88%, var(--nuit) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(120px,17vh,180px) var(--gouttiere) clamp(90px,13vh,140px); }
.hero__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.7rem, 8.2vw, 6.4rem); line-height:.98; letter-spacing:-.025em;
  margin-bottom:30px;
}
.hero__title em{ font-style:italic; color:var(--braise-clair); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero__title .line > span{ display:block; translate:0 110%; }
.js .hero__title .line > span{ animation:ligneMonte 1.15s var(--ease) forwards; }
.js .hero__title .line:nth-child(2) > span{ animation-delay:.1s; }
.js .hero__title .line:nth-child(3) > span{ animation-delay:.2s; }
@keyframes ligneMonte{ to{ translate:0 0; } }
.hero__text{ max-width:34ch; color:var(--lin-2); font-size:1.15rem; margin-bottom:38px; }
.hero__actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
/* note Google du hero : valeurs de repli dans le HTML, rafraîchies par main.js */
.note-avis{
  display:inline-flex; align-items:center; gap:11px;
  font-size:.85rem; letter-spacing:.05em; color:var(--pierre);
  text-decoration:none; transition:color .3s var(--ease);
}
.note-avis strong{ color:var(--lin); font-weight:600; }
.note-avis:hover{ color:var(--lin-2); }
.note-avis__etoiles{ flex:none; width:78px; height:15px; }
.note-avis__plein{ stop-color:var(--braise); }
.note-avis__vide{ stop-color:var(--trait-sombre); }
.hero__scroll{
  position:absolute; right:var(--gouttiere); bottom:44px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pierre);
}
.hero__scroll span{ width:46px; height:1px; background:var(--trait-sombre); position:relative; overflow:hidden; }
.hero__scroll span::after{ content:''; position:absolute; inset:0; background:var(--braise); animation:filDefile 2.6s var(--ease-doux) infinite; }
@keyframes filDefile{ 0%{ translate:-100% 0 } 55%,100%{ translate:100% 0 } }

.js .reveal-up{ opacity:0; translate:0 22px; animation:revele 1s var(--ease) forwards; }
.js .label.reveal-up{ animation-delay:.05s; }
.js .hero__text.reveal-up{ animation-delay:.36s; }
.js .hero__actions.reveal-up{ animation-delay:.46s; }
@keyframes revele{ to{ opacity:1; translate:0 0; } }

/* --- bandeau --- */
.strip{ border-block:1px solid var(--trait-sombre); background:var(--nuit-2); }
.strip ul{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(34px,4.6vw,54px) var(--gouttiere);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
}
.strip li{ display:flex; flex-direction:column; gap:9px; padding-right:clamp(20px,3vw,44px); }
.strip li:not(:last-child){ border-right:1px solid var(--trait-sombre); }
.strip__valeur{
  font-family:var(--display); font-weight:300; line-height:1.05;
  font-size:clamp(1.9rem,3.2vw,2.6rem); letter-spacing:-.01em;
  color:var(--lin); font-variant-numeric:tabular-nums;
}
.strip__valeur em{ font-size:.5em; color:var(--braise); margin-left:.1em; }
.strip__libelle{ font-size:.86rem; line-height:1.5; color:var(--pierre); }

/* --- triptyque des durées --- */
.durees .section-head{ margin-bottom:clamp(44px,6vw,72px); }
.triptyque{ display:flex; gap:0; }
.panneau{
  position:relative; flex:1 1 0; min-width:0; height:clamp(460px, 62vh, 640px);
  overflow:hidden; isolation:isolate;
  transition:flex-grow .7s cubic-bezier(.4,0,.2,1);
}
.panneau__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
/* image dimensionnée par la hauteur : élargir le panneau dévoile la photo au lieu de la redimensionner */
.panneau__media img{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:46vw; min-width:100%; max-width:none; height:100%; object-fit:cover;
  scale:1.04; transition:scale .9s cubic-bezier(.4,0,.2,1); will-change:scale;
}
.panneau__media::before{ content:''; position:absolute; inset:0; z-index:1; background:rgba(20,16,13,.32); transition:opacity .6s ease; }
.panneau__media::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(20,16,13,.15) 0%, rgba(20,16,13,.55) 45%, rgba(20,16,13,.94) 100%); }
.panneau__body{ position:absolute; inset:auto 0 0 0; z-index:3; padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.panneau__duree{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--braise); }
.panneau__nom{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1; }
.panneau__prix{ font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--lin); font-variant-numeric:tabular-nums; }
.panneau__prix span{ font-size:3.2rem; }
/* largeur fixe : le texte ne se recompose pas pendant l'élargissement */
.panneau__texte{ color:var(--lin-2); font-size:.94rem; width:34ch; max-width:100%; }
.panneau__body .lien-fleche{ margin-top:6px; }
@media (hover:hover) and (min-width:961px){
  .panneau + .panneau{ box-shadow:inset 1px 0 0 rgba(20,16,13,.55); }
  /* bloc de contenu à largeur fixe (= largeur d'un panneau rétréci) : rien ne se recompose */
  .panneau__body{ width:27.5vw; }
  .panneau__texte{ width:100%; max-width:none; }
  /* :has() garde l'état « un panneau est survolé » sans repasser par un état intermédiaire
     quand le curseur franchit la limite entre deux panneaux */
  /* les deux règles visent des ensembles disjoints (:not(:hover) / :hover) :
     aucune ne peut l'emporter sur l'autre par spécificité */
  .triptyque:has(.panneau:hover) .panneau:not(:hover){ flex-grow:.86; }
  .triptyque:has(.panneau:hover) .panneau:hover{ flex-grow:1.4; }
  .panneau:hover .panneau__media img{ scale:1.08; }
  .panneau:hover .panneau__media::before{ opacity:0; }
}
/* --- Laure --- */
.laure__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,6vw,88px); align-items:center; }
.laure__media{ position:relative; overflow:hidden; border-radius:3px; aspect-ratio:4/5; }
.laure__media img{ width:100%; height:100%; object-fit:cover; object-position:20% center; scale:1.08; }
@supports (animation-timeline: view()){
  .laure__media img{ animation:parallaxe linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
}
.laure__body p{ color:var(--lin-2); margin-top:18px; max-width:56ch; }
.laure__body p:first-of-type{ margin-top:26px; }

/* --- étapes (comment ça se passe) --- */
.etapes-section{ border-top:1px solid var(--trait-sombre); border-bottom:1px solid var(--trait-sombre); }
.etapes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); }
.etapes li{ display:flex; flex-direction:column; gap:12px; padding-right:clamp(20px,3vw,44px); }
.etapes li:not(:last-child){ border-right:1px solid var(--trait-sombre); }
.etapes__num{ font-family:var(--display); font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; color:var(--braise); font-variant-numeric:tabular-nums; }
.etapes h3{ font-size:1.05rem; font-weight:600; }
.etapes p{ color:var(--pierre); font-size:.93rem; }

/* --- chapitres techniques --- */
.techniques .section-head{ margin-bottom:clamp(50px,7vw,100px); }
.chapitre{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(28px,5vw,80px); max-width:var(--wrap); margin-inline:auto;
  padding:clamp(28px,4vw,56px) var(--gouttiere);
}
.chapitre--inverse .chapitre__media{ order:2; }
.chapitre__media{ overflow:hidden; border-radius:3px; aspect-ratio:5/4; }
.chapitre__media img{ width:100%; height:100%; object-fit:cover; scale:1.1; }
@supports (animation-timeline: view()){
  .chapitre__media img{ animation:parallaxe linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
}
@keyframes parallaxe{ from{ translate:0 -3.5%; } to{ translate:0 3.5%; } }
.chapitre__body p{ color:var(--lin-2); margin-top:20px; max-width:52ch; }

/* --- la salle : les vraies vues de la pièce, en grand --- */
.salle .section-head{ margin-bottom:clamp(40px,5vw,72px); }
.salle-vues{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2.2vw,30px); }
.salle-vue--decalee{ margin-top:clamp(28px,6vw,90px); }
.salle-vue .cadre{ overflow:hidden; border-radius:3px; aspect-ratio:3/4; }
.salle-vue img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:scale 1.1s var(--ease-doux);
}
.salle-vue:hover img{ scale:1.04; }
.salle-vue figcaption{
  margin-top:14px; font-size:.78rem; letter-spacing:.04em; color:var(--pierre);
}
.infos-photo{ margin-top:30px; max-width:440px; }
.infos-photo img{ width:100%; height:auto; border-radius:3px; display:block; }
.infos-photo figcaption{ margin-top:12px; font-size:.8rem; color:var(--encre-doux); }

/* --- bloc clair --- */
.clair{ background:var(--lin); color:var(--encre); }
.clair a{ color:var(--braise-fonce); }
.clair .h2, .clair .h3{ color:var(--encre); }
.infos__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,5vw,72px); margin-top:clamp(36px,4vw,56px); }
.infos__grid p{ color:var(--encre-doux); margin-top:16px; max-width:52ch; }
.infos__grid .h3 + p{ margin-top:20px; }
.liste-tirets{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.liste-tirets li{ position:relative; padding-left:30px; color:var(--encre-doux); font-size:.96rem; }
.liste-tirets li::before{ content:''; position:absolute; left:0; top:.85em; width:16px; height:1px; background:var(--braise-fonce); }

/* --- avis --- */
.avis{ border-top:1px solid var(--trait-clair); }
.avis__widget{ max-width:1040px; margin:clamp(40px,5vw,72px) auto 0; }

/* --- FAQ --- */
.faq{ border-top:1px solid var(--trait-clair); }
.faq__liste{ max-width:800px; margin:clamp(34px,4vw,54px) auto 0; }
.faq details{ border-bottom:1px solid var(--trait-clair); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-size:1.02rem; font-weight:500; color:var(--encre);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--braise-fonce); }
.plus{ flex:none; position:relative; width:20px; height:20px; }
.plus::before,.plus::after{ content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; background:var(--braise-fonce); transition:rotate .35s var(--ease), opacity .35s var(--ease); }
.plus::before{ width:14px; height:1.5px; }
.plus::after{ width:1.5px; height:14px; }
.faq details[open] .plus::after{ rotate:90deg; opacity:0; }
.faq__reponse{ overflow:hidden; }
.faq__reponse p{ color:var(--encre-doux); font-size:.96rem; max-width:62ch; padding-bottom:24px; }

/* --- carte cadeau --- */
.cadeau{ position:relative; overflow:hidden; }
.cadeau::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 15% 90%, rgba(217,138,78,.16), transparent 60%);
  pointer-events:none;
}
/* 1.02fr .98fr et pas plus pour la colonne image : le titre « Offrir un massage
   bien-etre personnalise » exige 536px pour tenir sur deux lignes, et la colonne
   de texte tombe sous ce seuil des qu'on elargit la photo. */
.cadeau__grid{ position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(40px,6vw,88px); align-items:center; }
.cadeau__body p{ color:var(--lin-2); margin-top:22px; max-width:46ch; }
.cadeau__prix{ display:flex; flex-direction:column; gap:12px; margin:34px 0 34px; max-width:340px; }
.cadeau__prix li{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:10px; border-bottom:1px dashed var(--trait-sombre); font-size:.94rem; }
.montant{ font-family:var(--display); font-size:1.25rem; color:var(--braise); font-variant-numeric:tabular-nums; }
.cadeau__format{ margin-top:38px; padding-top:26px; border-top:1px solid var(--trait-sombre); }
.cadeau__format h3{ font-size:.98rem; font-weight:600; }
/* Le pave de texte d'origine est devenu quatre reperes a icone. Les valeurs
   d'icone, de <strong> et de <span> sont reprises MOT POUR MOT de .reassurance
   (design.md §157, « a ne pas reinventer ») : icone 19px en braise, intitule en
   lin, phrase en pierre. Seule la mise en grille differe — deux colonnes et pas
   de filets verticaux, la place etant celle d'une colonne et non d'une page. */
/* quatre colonnes sur une seule ligne, separees par des filets verticaux : le
   meme vocabulaire que .strip, .etapes et .reassurance (design.md §157). C'est
   ce qui impose de sortir le bloc de la colonne de texte pour le poser sur toute
   la largeur de la section — a 530px, quatre colonnes feraient 120px et les
   phrases tomberaient a trois mots par ligne. */
.cadeau__atouts{ margin-top:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,44px); }
.cadeau__atouts li{ display:flex; gap:12px; padding-right:clamp(20px,3vw,44px); }
.cadeau__atouts li:not(:last-child){ border-right:1px solid var(--trait-sombre); }
.cadeau__atouts svg{ flex:none; width:19px; height:19px; margin-top:3px; color:var(--braise); }
.cadeau__atouts strong{ display:block; font-size:.92rem; font-weight:600; color:var(--lin); }
.cadeau__atouts span{ display:block; margin-top:5px; font-size:.84rem; line-height:1.5; color:var(--pierre); }
/* Une seule photo, montrée grand — même parti pris que la vitrine « La salle »
   (design.md §La salle) : pas de mosaïque, une image qui porte seule.
   aspect-ratio 1/1 pour que la photo occupe la colonne : cadeau.jpg est natif en
   3/2 (1200x800), le carre coupe donc 200px de chaque cote, soit un tiers de la
   largeur. object-position:38% decale la fenetre vers la gauche pour garder la
   CARTE entiere avec son message manuscrit — c'est le sujet. Au centrage par
   defaut (50%) le « 1H30 » est ampute; au-dela de 42% aussi. La main droite est
   sacrifiee, c'est le prix du format carre. */
/* min-width:0 est obligatoire depuis l'ajout de la bande : la piste est en
   width:max-content, et le minimum « auto » d'un element de grille l'emportait
   sur l'overflow:hidden de .cadeau__bande — la colonne gonflait a 2109px dans
   une fenetre de 375 et etirait la photo principale avec elle. Meme parade que
   le minmax(0,1fr) de .salle-vues. */
.cadeau__media{ position:relative; min-width:0; }
/* halo braise en écho à celui de la section, posé en bas à gauche derrière le texte */
.cadeau__media::before{
  content:''; position:absolute; inset:-9%; z-index:0;
  background:radial-gradient(58% 58% at 50% 50%, rgba(217,138,78,.20), transparent 68%);
  pointer-events:none;
}
.cadeau__principale{ position:relative; z-index:1; overflow:hidden; border-radius:3px; aspect-ratio:3/2; }
.cadeau__principale img{ width:100%; height:100%; object-fit:cover; transition:scale .9s var(--ease); }
.cadeau__principale:hover img{ scale:1.04; }

/* Bande d'exemples reprise de l'app de commande : les vraies cartes concues par
   Laure, dupliquees une fois pour que la piste boucle sans couture. */
.cadeau__exemples{ margin-top:14px; }
.cadeau__bande{ overflow:hidden; }
/* 42s et non 34 : les vignettes ayant grandi, le motif est passe de 1344 a
   1664px. Sans reallonger la duree, la bande accelererait a 49px/s au lieu
   des ~40px/s de l'app. Toute retouche de la hauteur des vignettes doit
   s'accompagner du meme recalcul. */
.cadeau__piste{ display:flex; width:max-content; animation:bandeDefile 42s linear infinite; }
/* l'ecart est porte par les <li>, jamais par un gap flex : translate:-50% ne vaut
   exactement un motif que si l'espacement fait partie de l'element repete, sinon
   le raccord se decale d'un demi-intervalle a chaque tour */
.cadeau__piste li{ flex:none; margin-right:12px; }
.cadeau__piste img{
  display:block; height:clamp(104px,14.5vw,140px); width:auto;
  border-radius:4px; border:1px solid var(--trait-sombre);
}
.cadeau__bande:hover .cadeau__piste{ animation-play-state:paused; }
/* meme legende que la vitrine « La salle » (design.md), a ne pas reinventer */
.cadeau__exemples figcaption{ margin-top:12px; font-size:.78rem; letter-spacing:.04em; color:var(--pierre); }
@keyframes bandeDefile{ to{ translate:-50% 0; } }

/* --- pages légales (CGV, confidentialité) --- */
.page-intro{
  background:var(--nuit); color:var(--lin); text-align:center;
  padding:clamp(140px,20vh,190px) var(--gouttiere) clamp(56px,7vw,88px);
}
.page-intro h1{
  font-family:var(--display); font-weight:300; font-size:clamp(2.2rem,5.2vw,3.6rem);
  line-height:1.04; letter-spacing:-.015em; text-wrap:balance;
}
.page-intro h1 em{ font-style:italic; color:var(--braise-clair); }
/* margin-inline:auto est indispensable : .page-intro centre le TEXTE
   (text-align:center), mais .chapo porte un max-width:60ch — sans marges
   automatiques le bloc reste collé à gauche et son texte se centre dans une
   boîte décentrée. Le h1, lui, n'a pas de max-width, d'où l'écart visible. */
.page-intro .chapo{ margin-top:16px; margin-inline:auto; color:var(--pierre); font-size:.9rem; letter-spacing:.03em; }

/* Même recette de page longue sur fond clair pour les pages légales et les
   pages de technique : une seule colonne de 820px, sections séparées par un
   filet. `.article` est l'alias sémantique, `.legal` reste pour les CGV. */
.legal, .article{ background:var(--lin); color:var(--encre); }
.legal .wrap, .article .wrap{ max-width:820px; }
.legal .wrap > section, .article .wrap > section{ display:flex; flex-direction:column; gap:14px; }
.legal .wrap > section + section,
.article .wrap > section + section{ margin-top:clamp(40px,5vw,64px); padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--trait-clair); }
.legal h2, .article h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--encre); text-wrap:balance;
}
.legal p, .article p{ color:var(--encre-doux); max-width:60ch; }
.legal a, .article a{ color:var(--braise-fonce); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover, .article a:hover{ color:var(--braise); }
.legal .liste-tirets, .article .liste-tirets{ max-width:60ch; margin-top:0; }
.legal table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:.92rem; }
.legal th, .legal td{ text-align:left; padding:12px 14px 12px 0; border-bottom:1px solid var(--trait-clair); vertical-align:top; }
.legal th{ font-weight:600; color:var(--encre); }
.legal td{ color:var(--encre-doux); }
.legal-maj{ margin-top:clamp(40px,5vw,64px)!important; padding-top:24px; border-top:1px solid var(--trait-clair); font-size:.82rem!important; }

/* --- pages de technique : photo, renvois entre elles, appel à l'action --- */
.article__photo{ margin:6px 0; border-radius:3px; overflow:hidden; aspect-ratio:5/4; }
.article__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.article__liens{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:4px; }
/* le bouton plein garde son contraste sur le lin ; le second passe en filaire,
   `btn--fantome` est taillé pour le fond nuit et disparaîtrait ici */
.article__cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.article__cta .btn{ text-decoration:none; }

/* --- pied de page --- */
.site-footer{ border-top:1px solid var(--trait-sombre); padding-block:52px 130px; }
.site-footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.site-footer__logo{ height:38px; width:auto; opacity:.8; }
.site-footer p{ font-size:.8rem; color:var(--pierre); }
.site-footer nav{ display:flex; gap:26px; flex-wrap:wrap; }
.site-footer nav a{ font-size:.8rem; color:var(--pierre); text-decoration:none; transition:color .3s var(--ease); }
.site-footer nav a:hover{ color:var(--braise); }

/* --- contact : carte à la demande, infos pratiques --- */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:start; margin-top:clamp(36px,4vw,56px);
}

/* La carte n'appelle Google qu'au clic : la façade est retirée du DOM,
   jamais masquée — un calque restant avalerait les clics de l'iframe. */
.carte{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--trait-sombre); border-radius:3px; background:var(--nuit-2);
}
.carte iframe{ display:block; width:100%; height:100%; border:0; }
.carte__facade{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:clamp(24px,4vw,40px); text-align:center;
}
.carte__plan{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--lin); opacity:.1; pointer-events:none;
}
.carte__facade::before{
  content:''; position:absolute; left:50%; top:40%; width:min(72%,340px); aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(217,138,78,.2), transparent 70%);
}
.carte__epingle{ position:relative; width:34px; height:34px; color:var(--braise); }
.carte__epingle svg{ width:100%; height:100%; }
.carte__epingle::after{
  content:''; position:absolute; left:50%; bottom:-7px; width:26px; height:8px; translate:-50% 0;
  border-radius:50%; background:rgba(217,138,78,.28);
  animation:epingleRespire 3.2s var(--ease-doux) infinite;
}
@keyframes epingleRespire{ 0%,100%{ scale:1; opacity:.55; } 50%{ scale:1.55; opacity:.12; } }
.carte__adresse{
  position:relative; font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.35; text-wrap:balance;
}
.carte__facade .btn{ position:relative; }
.carte__note{ position:relative; max-width:36ch; font-size:.78rem; line-height:1.6; color:var(--pierre); }
.contact__itineraire{ margin-top:22px; }

.contact__infos{ display:grid; gap:clamp(24px,2.8vw,34px); }
.contact__infos > li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; }
.contact__icone{ grid-row:span 2; width:22px; height:22px; margin-top:5px; color:var(--braise); }
.contact__cle{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pierre);
}
.contact__valeur{
  font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
a.contact__valeur{ color:var(--braise); text-decoration:none; transition:color .3s var(--ease); }
a.contact__valeur:hover{ color:var(--braise-clair); }
.contact__second{ margin-top:8px; font-size:.85rem; line-height:1.6; color:var(--pierre); }
.contact__second--tete{ margin-top:0; }
.contact__moyens{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.contact__moyens li{
  padding:6px 14px; border:1px solid var(--trait-sombre); border-radius:999px;
  font-size:.76rem; letter-spacing:.04em; color:var(--lin-2);
}

/* --- pop-up « appeler ou écrire » --- */
.modale{
  margin:auto; padding:0; border:0; background:transparent; color:var(--encre);
  width:min(440px, calc(100vw - 32px));
}
.modale::backdrop{ background:rgba(20,16,13,.74); }
.modale__corps{ position:relative; background:var(--lin); border-radius:4px; padding:clamp(28px,5vw,40px); }
.modale[open]{ animation:modaleEntre .45s var(--ease) both; }
.modale[open]::backdrop{ animation:modaleFond .45s var(--ease) both; }
@keyframes modaleEntre{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
@keyframes modaleFond{ from{ opacity:0; } to{ opacity:1; } }
.modale .label{ color:var(--braise-fonce); margin-bottom:14px; }
.modale__titre{
  font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,4.6vw,2.4rem);
  line-height:1.1; letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--encre);
}
.modale__texte{ margin-top:14px; font-size:.95rem; line-height:1.65; color:var(--encre-doux); }
.modale__actions{ display:grid; gap:12px; margin-top:28px; }
.modale__actions .btn{ width:100%; }
.modale__fermer{
  position:absolute; top:10px; right:10px; width:44px; height:44px;
  display:grid; place-items:center; border:0; background:none; cursor:pointer;
  color:var(--encre-doux); border-radius:999px; transition:color .3s var(--ease);
}
.modale__fermer:hover{ color:var(--encre); }
.modale__fermer svg{ width:18px; height:18px; }

/* --- révélations au défilement --- */
.js [data-reveal]{ opacity:0; translate:0 26px; transition:opacity .9s var(--ease), translate .9s var(--ease); }
.js [data-reveal].is-in{ opacity:1; translate:0 0; }

/* --- réassurance sous les durées : les trois freins au clic, levés sur place --- */
/* même vocabulaire que .strip et .etapes : colonnes séparées par des filets verticaux */
.reassurance{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(32px,4.4vw,52px) var(--gouttiere) 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
}
.reassurance li{ display:flex; gap:13px; padding-right:clamp(20px,3vw,44px); }
.reassurance li:not(:last-child){ border-right:1px solid var(--trait-sombre); }
.reassurance svg{ flex:none; width:19px; height:19px; margin-top:3px; color:var(--braise); }
.reassurance strong{ display:block; font-size:.95rem; font-weight:600; color:var(--lin); }
.reassurance span{ display:block; margin-top:6px; font-size:.86rem; line-height:1.5; color:var(--pierre); }

/* --- pont vers la carte cadeau, posé là où le visiteur découvre les tarifs --- */
.pont-cadeau{ max-width:var(--wrap); margin:clamp(42px,5vw,68px) auto 0; padding-inline:var(--gouttiere); }
.pont-cadeau__inner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,40px); flex-wrap:wrap;
  padding:clamp(26px,3.4vw,38px) clamp(24px,3.4vw,42px);
  background:var(--nuit-2); border:1px solid var(--trait-sombre); border-radius:3px;
}
.pont-cadeau__inner::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 120% at 100% 50%, rgba(217,138,78,.15), transparent 62%);
}
.pont-cadeau__texte{ position:relative; flex:1 1 320px; }
.pont-cadeau h3{
  font-family:var(--display); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2vw,1.6rem);
}
.pont-cadeau h3 em{ font-style:italic; color:var(--braise); }
.pont-cadeau p{ margin-top:11px; font-size:.92rem; line-height:1.6; color:var(--pierre); max-width:52ch; }
.pont-cadeau__actions{ position:relative; display:flex; align-items:center; gap:clamp(16px,2.4vw,26px); flex-wrap:wrap; }

/* --- rappel de fin de page --- */
/* Fond photographique du rappel final : meme montage que le hero (media en
   absolu + voile en ::after + contenu remonte en z-index), la page s'ouvre et
   se ferme donc sur une photo. bougie.jpg est l'image-these de la direction
   « chandelle » et n'etait utilisee nulle part ailleurs.
   Le degrade revient au nuit plein en haut ET en bas : sans ca la bande se
   decoupe comme un rectangle colle au milieu du fond uni. Pas de ken burns
   ici — c'est la signature du hero, la dupliquer l'userait. */
.final{ position:relative; overflow:hidden; border-top:1px solid var(--trait-sombre); }
.final__media{ position:absolute; inset:0; z-index:0; }
.final__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.final__media::after{
  content:''; position:absolute; inset:0;
  /* le radial est SOMBRE au centre et clair sur les bords : le texte est centre,
     c'est donc lui qui a besoin du noyau opaque, tandis que la bougie et le bol
     d'huile — aux deux extremites du cadrage — peuvent respirer. L'inverse, plus
     intuitif, posait le texte sur la zone la plus claire du voile.
     Contrastes mesures de 375 a 1600px, avec le texte en lin-2 : titre 5.8 a 7.9
     (seuil 3), paragraphe 7.4 a 10.7 et mention 6.7 a 11.4 (seuil 4.5). Le pire
     cas est toujours le telephone, ou cover zoome le plus. Ne pas eclaircir le
     centre ni rebasculer le texte en pierre sans refaire ce calcul. */
  background:
    radial-gradient(62% 125% at 50% 50%, rgba(20,16,13,.92) 0%, rgba(20,16,13,.78) 52%, rgba(20,16,13,.40) 100%),
    linear-gradient(180deg, var(--nuit) 0%, rgba(20,16,13,.30) 24%, rgba(20,16,13,.30) 76%, var(--nuit) 100%);
}
.final .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* lin-2 et non pierre : depuis que la section a un fond photographique, le
   pierre (#a2968a) tombait a 3.3 de contraste sur telephone, sous le seuil AA
   de 4.5 — le cadrage en cover zoome d'autant plus que la fenetre est etroite,
   et le texte se retrouvait sur les zones claires du cliche. Le hero fait deja
   ce choix pour son paragraphe sur photo. Mesure avec lin-2 : 6.6 au pire.
   Si le fond photo disparait un jour, pierre redevient legitime. */
.final p{ margin-top:20px; color:var(--lin-2); max-width:52ch; }
.final__actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:36px; }
.final__note{ margin-top:28px; max-width:none; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lin-2); }

/* --- barre fixe de bas d'écran (design.md §5) --- */
/* z-index 37 : sous le bandeau de consentement (38), le menu mobile (39) et l'en-tête (40).
   Le pavé de droite reste vide : le widget WhatsApp d'Elfsight s'y pose avec un z-index
   que nous ne contrôlons pas — on lui réserve la place au lieu de lutter contre lui. */
.barre-resa{
  position:fixed; inset:auto 0 0 0; z-index:37;
  background:var(--nuit-2); border-top:1px solid var(--trait-sombre);
  translate:0 110%; transition:translate .6s var(--ease);
}
/* état fermé explicite : une règle de classe l'emporterait sur l'attribut hidden */
.barre-resa[hidden]{ display:none; }
.barre-resa.is-in{ translate:0 0; }
/* le bandeau de consentement occupe le même bas d'écran : il passe devant, la barre attend */
body.consent-ouvert .barre-resa{ translate:0 110%; }
/* --reserve-droite et --reserve-bas sont posées par main.js après avoir mesuré
   le widget Elfsight : à côté de lui s'il reste la place, au-dessus sinon.
   Elles valent 0 tant que rien n'est mesuré — la barre reste alors utilisable. */
.barre-resa__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:13px var(--gouttiere);
  padding-right:calc(var(--gouttiere) + var(--reserve-droite, 0px));
  /* choix assume : la barre ne s'agrandit JAMAIS en hauteur. Sous ~340px les
     deux boutons ne tiennent pas a cote de la bulle WhatsApp, et le repli
     « au-dessus » doublait sa hauteur (67 -> 158px). On prefere le
     chevauchement. --reserve-bas reste actif sur le bandeau de consentement,
     lui : son bouton « Refuser » doit rester cliquable. */
  padding-bottom:13px;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px);
  transition:padding .3s var(--ease);
}
.barre-resa__texte{ font-size:.86rem; line-height:1.45; color:var(--pierre); }
.barre-resa__texte strong{
  display:block; color:var(--lin); font-weight:400; font-family:var(--display);
  font-size:1.15rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.barre-resa__actions{ display:flex; align-items:center; gap:12px; }
/* la barre recouvre le bas du document : on rend sa hauteur au pied de page */
body.barre-resa-visible .site-footer{ padding-bottom:calc(var(--barre-hauteur, 76px) + 20px); }

/* --- responsive --- */
/* deux boutons dans l'en-tête : la navigation textuelle ne tient plus sous 1180px */
@media (max-width:1180px){
  .nav, .nav-cta{ display:none; }
  .burger{ display:block; }
  .entete-actions{ margin-left:auto; }
}
@media (max-width:960px){
  .triptyque{ flex-direction:column; gap:10px; padding-inline:var(--gouttiere); }
  .salle-vues{ grid-template-columns:1fr; gap:26px; }
  .salle-vue--decalee{ margin-top:0; }
  /* flex-basis:0 vaut pour la hauteur en colonne : sans flex:none les panneaux s'écrasent à 0 */
  .panneau{ flex:none; height:clamp(360px,52vh,460px); border-radius:3px; }
  .panneau__texte{ width:auto; }
  .laure__grid, .chapitre, .cadeau__grid, .infos__grid, .contact__grid{ grid-template-columns:1fr; }
  /* en deux colonnes les filets verticaux dessineraient un quadrillage : on les
     retire. Le selecteur doit repeter :not(:last-child) — la regle de base est
     plus specifique, et un simple `li` ne l'emporterait pas, meme ici. */
  .cadeau__atouts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 30px; }
  .cadeau__atouts li{ padding-right:0; }
  .cadeau__atouts li:not(:last-child){ border-right:none; }
  .chapitre--inverse .chapitre__media{ order:0; }
  .laure__media{ max-width:460px; }
  .etapes{ grid-template-columns:1fr; gap:26px; }
  .etapes li{ padding-right:0; }
  .etapes li:not(:last-child){ border-right:none; padding-bottom:26px; border-bottom:1px solid var(--trait-sombre); }
  .reassurance{ grid-template-columns:1fr; gap:24px; }
  .reassurance li{ padding-right:0; }
  .reassurance li:not(:last-child){ border-right:none; padding-bottom:24px; border-bottom:1px solid var(--trait-sombre); }
  /* piège n° 3 : en colonne, le flex-basis de 320px tient lieu de hauteur et creuse un trou */
  .pont-cadeau__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .pont-cadeau__texte{ flex:none; }
  .pont-cadeau__actions{ width:100%; justify-content:space-between; }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .hero{ min-height:88vh; }
  .hero__scroll{ display:none; }
  .hero__actions{ flex-direction:column; align-items:flex-start; gap:16px; }
  .strip ul{ grid-template-columns:1fr; gap:26px; }
  .strip li{ padding-right:0; }
  .strip li:not(:last-child){ border-right:none; padding-bottom:26px; border-bottom:1px solid var(--trait-sombre); }
  .thread{ display:none; }
  .site-footer__inner{ flex-direction:column; text-align:center; }
  .carte{ aspect-ratio:1; }
  .bandeau-consent__actions{ width:100%; }
  .bandeau-consent__actions .btn{ flex:1 1 0; justify-content:center; }
  /* deux colonnes de ~160px hacheraient les phrases en trois mots par ligne */
  .cadeau__atouts{ grid-template-columns:1fr; gap:16px; }
  .btn-cadeau .etiquette-longue{ display:none; }
  .btn-cadeau .etiquette-courte{ display:inline; }
  /* le burger sortait de l'écran (il commençait à 366px pour un en-tête de 375) :
     gouttières de 28px et logo de 46px sont taillés pour la navigation de bureau,
     absente sous 1180px. Le bouton cadeau reste entier, cf. design.md §5. */
  .site-header__inner{ gap:clamp(10px, 3vw, 12px); }
  .brand img{ height:clamp(36px, 11vw, 40px); }
  /* même arbitrage que dans la barre du bas : l'icône coûte 25px, le libellé suffit.
     Portée limitée à l'en-tête — le menu mobile garde la sienne. */
  .site-header .btn-cadeau{ padding-inline:16px; }
  .site-header .btn-cadeau .icone-cadeau{ display:none; }
  /* place trop comptée pour la ligne de prix : seuls les deux boutons restent */
  .barre-resa__texte{ display:none; }
  .barre-resa__inner{ padding-top:11px; padding-bottom:11px; }
  /* les boutons se dimensionnent sur leur texte au lieu de s'étirer : étirés,
     ils déclaraient à main.js un besoin de 335px là où il leur en faut 215, et
     la barre basculait au-dessus du widget WhatsApp — donc plus haute — alors
     qu'elle tient à côté de lui. Ne pas remettre flex:1 1 0 ici. */
  .barre-resa__actions{ flex:0 1 auto; gap:8px; }
  /* l'icône cadeau coûte 25px de large : sur téléphone le libellé seul suffit */
  .barre-resa .icone-cadeau{ display:none; }
  .barre-resa .btn{ flex:0 0 auto; justify-content:center; padding-inline:12px; white-space:nowrap; }
  .final__actions{ flex-direction:column; align-items:stretch; width:100%; }
  .final__actions .btn{ justify-content:center; }
}

/* --- bandeau de consentement à la mesure d'audience --- */
/* z-index 38 : sous l'en-tête (40) et sous le menu mobile (39), qui doivent le recouvrir */
.bandeau-consent{
  position:fixed; inset:auto 0 0 0; z-index:38;
  background:var(--nuit-2); border-top:1px solid var(--trait-sombre);
  translate:0 110%; transition:translate .6s var(--ease);
}
/* état fermé explicite : une règle de classe l'emporterait sur l'attribut hidden */
.bandeau-consent[hidden]{ display:none; }
.bandeau-consent.is-in{ translate:0 0; }
/* mêmes réserves que la barre fixe : le widget Elfsight recouvrait « Refuser » */
.bandeau-consent__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:22px var(--gouttiere);
  padding-right:calc(var(--gouttiere) + var(--reserve-droite, 0px));
  padding-bottom:calc(22px + var(--reserve-bas, 0px));
  display:flex; align-items:center; gap:clamp(18px,3vw,44px); flex-wrap:wrap;
  transition:padding .3s var(--ease);
}
.bandeau-consent__texte{ flex:1 1 400px; font-size:.88rem; line-height:1.6; color:var(--pierre); }
.bandeau-consent__texte a{ color:var(--braise); }
.bandeau-consent__texte a:hover{ color:var(--braise-clair); }
/* les deux boutons ont le même poids visuel : refuser doit être aussi simple qu'accepter */
.bandeau-consent__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* --- mouvement réduit --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal], .js .reveal-up, .js .hero__title .line > span{ opacity:1 !important; translate:0 0 !important; }
  .hero__media img{ scale:1; }
  /* la regle generique ci-dessus enverrait la piste droit a translate:-50% ;
     on l'arrete franchement et la bande devient un defilement manuel, pour que
     les huit cartes restent atteignables */
  .cadeau__piste{ animation:none; }
  .cadeau__bande{ overflow-x:auto; }
}