/* ==========================================================================
   APEX BEAUTY — les sections.

   Trois principes de rendu, tires des mesures faites sur les sites
   precedents de la serie :

   · Rien qui BOUGE ne porte de `filter:blur()` — un flou sur un element en
     mouvement est re-rasterise a chaque trame et c'est la premiere cause de
     saccade au-dessus d'un canevas.
   · Aucun calque plein ecran anime en `mix-blend-mode`.
   · Les animations d'ambiance sont a l'arret hors champ (`is-live` pose par
     IntersectionObserver) et n'utilisent que `transform` et `opacity`.
   ========================================================================== */

/* =========================================================== 1. SEQUENCE */
.seq{ position:relative; background:#1A1611; }
/* La hauteur est en PIXELS, figee par le script (--stage-h). Une hauteur en
   `vh`/`svh`/`dvh` reagirait a la barre d'outils du telephone et la page
   sauterait au premier defilement. */
.seq__piste{ height:calc(var(--stage-h) * var(--ecrans)); }
.seq__stage{
  position:sticky; top:0; height:var(--stage-h);
  overflow:hidden; z-index:1;
  background:#1A1611;
}
.seq__cv{ width:100%; height:100%; display:block; }

/* Un leger assombrissement des bords : le film est en lumiere basse, le
   texte s'y pose sans qu'on ait a voiler toute la scene. */
.seq__vign{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(128% 88% at 50% 44%, transparent 46%, rgba(16,13,10,.30) 78%, rgba(16,13,10,.58) 100%),
    linear-gradient(180deg, rgba(16,13,10,.42) 0%, transparent 22%, transparent 62%, rgba(16,13,10,.52) 100%);
}
/* Grain fixe. Anime et en `mix-blend-mode`, il refondait un calque plein
   ecran a chaque trame ; fixe et en opacite simple, l'effet est le meme et
   ne coute rien. */
.seq__grain{
  position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.055;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.seq__lgs{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  display:grid; align-items:center; justify-items:center;
  /* Bas serre : les legendes de la scene doivent etre COLLEES au bord bas du
     cadre. La compensation `--bar` (hauteur des barres du navigateur) a ete
     retiree — sur un telephone elle relevait le texte de 60 a 90 px, alors
     que la barre d'adresse se retracte des le premier geste de defilement. */
  padding:calc(var(--nav-h) + 22px) 24px calc(26px + env(safe-area-inset-bottom));
}
.seq__lg{
  grid-area:1/1; width:100%; max-width:620px;
  display:grid; justify-items:center; gap:16px; text-align:center;
  opacity:0; visibility:hidden; will-change:opacity,transform;
}
/* Voile LOCAL sous chaque legende, jamais global : la scene comporte des
   murs de chaux presque blancs ou le texte disparaitrait, et un voile global
   assombrirait tout le film. */
.seq__lg::before{
  content:""; position:absolute; z-index:-1; inset:-46px -34px;
  background:radial-gradient(64% 54% at 50% 50%, rgba(16,12,9,.72) 0%, rgba(16,12,9,.44) 46%, transparent 78%);
}
.seq__lg{ position:relative; isolation:isolate; }
.seq__lg--bas{ align-self:end; }
/* La derniere legende vit sur la fin de la course, la ou la section suivante
   MONTE sur la scene par son arche (margin-top negatif) et recouvre les
   derniers pixels du plateau. Elle prend donc la hauteur de cette arche en
   marge basse, sinon son dernier mot passe dessous. */
.seq__lg--fin{ margin-bottom:clamp(38px,11vw,88px); }
/* Le voile des legendes basses est un bandeau PLEINE LARGEUR qui descend
   jusque sous le bord du cadre : cale sur la seule hauteur du texte, il
   dessinait un rectangle sombre flottant au-dessus du vide. Le plateau porte
   `overflow:hidden`, ce qui decoupe proprement le debord. */
.seq__lg--bas::before{
  left:50%; right:auto; width:100vw; transform:translateX(-50%);
  top:-108px; bottom:-460px;
  background:linear-gradient(180deg,
    rgba(16,12,9,0)   0%,
    rgba(16,12,9,.30) 16%,
    rgba(16,12,9,.62) 36%,
    rgba(16,12,9,.82) 58%,
    rgba(16,12,9,.90) 100%);
}

.seq__sur{ font-family:var(--sans); font-weight:400; font-size:11px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.42em; }
.seq__h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(46px,15.5vw,104px); line-height:.92; letter-spacing:.012em;
  color:var(--lin);
  /* Une `filter:drop-shadow` sur un element DEPLACE a chaque trame est
     re-rasterisee a chaque trame : c'est la depense la plus lourde qu'on
     puisse poser au-dessus d'un canevas anime. Une `text-shadow` fait la
     meme chose pour rien — elle est peinte avec le glyphe. */
  text-shadow:0 3px 22px rgba(10,7,5,.72), 0 1px 3px rgba(10,7,5,.5);
}
.seq__h1 b{ display:block; font-weight:300;
  background:var(--or-grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none;   /* l'ombre se peindrait PAR-DESSUS le degrade */
}
.seq__ph{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(28px,7.8vw,50px); line-height:1.14; color:var(--lin);
  text-shadow:0 3px 20px rgba(10,7,5,.72), 0 1px 3px rgba(10,7,5,.5);
}
.seq__ss{ font-family:var(--texte); font-weight:300;
  font-size:clamp(14px,3.9vw,17px); line-height:1.66; color:rgba(240,232,222,.92);
  text-shadow:0 1px 10px rgba(10,7,5,.7); max-width:34ch; }

/* L'invitation a defiler : un filet qui coule, rien de plus. */
.seq__inv{
  position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px; pointer-events:none;
}
.seq__inv span{ font-family:var(--sans); font-weight:300; font-size:9.5px;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(232,208,160,.8);
  padding-left:.34em; }
.seq__inv i{ display:block; width:1px; height:40px; border-radius:2px;
  background:linear-gradient(180deg, rgba(232,208,160,0), rgba(232,208,160,.85), rgba(232,208,160,0));
  background-size:100% 200%; animation:coule 2.5s var(--ease-soft) infinite; }
@keyframes coule{ 0%{ background-position:0 -100% } 100%{ background-position:0 100% } }

/* La jauge de progression de la scene, fixee en haut de la fenetre. */
.seq__jauge{
  position:fixed; left:0; right:0; z-index:901;
  top:calc(var(--nav-h) + env(safe-area-inset-top));
  height:1.5px; background:rgba(237,228,216,.10);
  transition:opacity .5s var(--ease);
}
.seq__jauge i{ display:block; height:100%; background:var(--or-grad);
  transform:scaleX(0); transform-origin:0 50%; }
.seq__jauge.part{ opacity:0; }

@media (prefers-reduced-motion:reduce){ .seq__inv i{ animation:none } }

/* ====================================================== 2. LES SECTIONS */
.sec{ position:relative; z-index:2; padding:clamp(76px,17vw,132px) var(--pad);
      /* Les decors (.bougie, .pous) debordent volontairement de la section.
         Sans clipping ils elargissent le DOCUMENT, et Chrome mobile cale
         alors la largeur des elements `position:fixed` sur cette largeur-la :
         la barre de navigation devient plus large que l'ecran et ses boutons
         sortent du champ. `clip` clippe sans creer de conteneur de
         defilement — a la difference de `hidden`, qui ferait de la section
         l'ancre de tout `position:sticky` descendant. */
      overflow:clip; }
@supports not (overflow:clip){ .sec{ overflow:hidden; } }
.sec--sombre{ background:var(--nuit); color:var(--sur-sombre); }
.sec--clair{ background:var(--creme); color:var(--encre); }
.sec--lin{ background:var(--lin); color:var(--encre); }
.sec--sable{ background:linear-gradient(172deg,#EFE6D9 0%,#E6D9C6 100%); color:var(--encre); }
.sec--clair .sur,.sec--lin .sur,.sec--sable .sur{ color:var(--or-fonce); }
.sec--clair .trait,.sec--lin .trait,.sec--sable .trait{ background:var(--or-fonce); }

.wrap{ width:100%; max-width:1180px; margin:0 auto; }
/* Une ancre ouverte directement (un lien partage vers #rituels) doit
   s'arreter SOUS la barre. Le script le fait deja pour les clics ; ceci
   couvre l'arrivee sur la page. */
section[id],footer[id]{ scroll-margin-top:calc(var(--nav-h) + 12px); }
.tete{ display:grid; justify-items:center; gap:15px; text-align:center;
       margin-bottom:clamp(38px,9vw,64px); }
.tete .lede{ max-width:46ch; color:var(--encre-2); }
.sec--sombre .tete .lede{ color:var(--sur-sombre-2); }
.tete--g{ justify-items:start; text-align:left; }

/* ------------------------------------------- le seuil : l'arche du salon */
/* Les sections claires MONTENT sur la nuit par une arche — le motif meme du
   lieu, repris de ses passages voutes. Ce n'est pas un element decoratif :
   c'est le `border-radius` de la section elle-meme. */
.arche{
  border-radius:50% 50% 0 0 / clamp(38px,11vw,88px) clamp(38px,11vw,88px) 0 0;
  margin-top:calc(-1 * clamp(38px,11vw,88px));
  padding-top:calc(clamp(76px,17vw,132px) + clamp(38px,11vw,88px));
  box-shadow:0 -1px 0 rgba(195,155,91,.30) inset;
}
/* ... et la nuit remonte sur le clair de la meme facon. Les 88 px avales
   par la remontee sont RENDUS au padding-bottom de la section du dessus,
   sinon son contenu vient toucher la couture. */
.sec--clair + .arche--nuit,
.sec--lin + .arche--nuit,
.sec--sable + .arche--nuit{ margin-top:calc(-1 * clamp(38px,11vw,88px)); }
.avant-arche{ padding-bottom:calc(clamp(76px,17vw,132px) + clamp(38px,11vw,88px)); }

/* Le passage de soie : un lustre dore qui traverse la couture quand elle
   entre dans le champ. C'est la transition de section de la maison. */
.soie{ position:absolute; top:0; left:0; right:0; height:clamp(38px,11vw,88px);
       overflow:hidden; pointer-events:none; z-index:3;
       border-radius:inherit; }
.soie i{
  position:absolute; top:0; bottom:0; left:0; width:46%;
  background:linear-gradient(100deg,
    transparent 0%, rgba(242,227,198,.10) 24%, rgba(242,227,198,.62) 50%,
    rgba(242,227,198,.10) 76%, transparent 100%);
  transform:translateX(-115%);
}
.soie.passe i{ animation:passeSoie 1.5s var(--ease-out) forwards; }
@keyframes passeSoie{ from{ transform:translateX(-115%) } to{ transform:translateX(330%) } }
@media (prefers-reduced-motion:reduce){ .soie{ display:none } }

/* ------------------------------------------------ revelations au defilement */
.rev{ opacity:0; transform:translate3d(0,26px,0);
      transition:opacity .86s var(--ease-out), transform .96s var(--ease-out); }
.rev.vu{ opacity:1; transform:none; }
.rev--g{ transform:translate3d(-24px,0,0); }
.rev--d{ transform:translate3d(24px,0,0); }
/* Le lever de rideau : l'element monte ET pivote legerement en profondeur.
   Le parent porte la perspective, l'enfant le rotateX — c'est ce qui donne
   la sensation de page qui se pose. */
.rev--3d{ transform:translate3d(0,44px,0) rotateX(9deg); transform-origin:50% 0;
          opacity:0; }
.leve{ perspective:1100px; perspective-origin:50% 22%; }
@media (prefers-reduced-motion:reduce){
  .rev,.rev--3d{ opacity:1 !important; transform:none !important; }
}

/* ========================================================= 3. MANIFESTE */
.mani{ text-align:center; display:grid; justify-items:center; gap:26px; }
.mani__q{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(29px,7.6vw,50px); line-height:1.18; max-width:19ch;
  letter-spacing:-.008em;
}
.mani__q em{ font-style:italic;
  background:var(--or-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; }
.mani__p{ max-width:50ch; color:var(--encre-2); }

.pils{ display:grid; gap:14px; margin-top:clamp(38px,9vw,60px); }
.pil{
  position:relative; padding:30px 24px 28px; border-radius:var(--rayon);
  background:linear-gradient(168deg, rgba(255,255,255,.72), rgba(255,255,255,.30));
  border:1px solid rgba(154,115,58,.16);
  display:grid; gap:11px; justify-items:center; text-align:center;
  overflow:hidden;
}
.pil::before{                            /* le halo de bougie de la carte */
  content:""; position:absolute; top:-40%; left:50%; width:190px; height:190px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(232,208,160,.42) 0%, transparent 68%);
}
.pil__ic{ width:44px; height:44px; color:var(--or-fonce); }
.pil h3{ font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.16; }
.pil p{ font-size:14.5px; line-height:1.66; color:var(--encre-2); max-width:32ch; }

.chif{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
       margin-top:clamp(34px,8vw,54px); }
.chif div{ display:grid; gap:4px; justify-items:center; text-align:center;
           padding:16px 6px; }
.chif b{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,8.4vw,44px);
  line-height:1; background:var(--or-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; }
.chif span{ font-family:var(--sans); font-weight:400; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--encre-2);
  padding-left:.2em; line-height:1.5; }

/* ================================================= 4. LE SELECTEUR (SEG) */
/* Un selecteur segmente a pastille glissante. La pastille est un element
   unique deplace par `transform` : rien ne se re-dispose au changement. */
.seg{ position:relative; margin:0 auto clamp(30px,7vw,44px); max-width:640px; }
.seg__piste{
  position:relative; display:flex; gap:2px; padding:5px;
  border-radius:100px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  background:rgba(237,228,216,.055);
  border:1px solid rgba(195,155,91,.20);
}
.seg__piste::-webkit-scrollbar{ display:none; }
.sec--clair .seg__piste,.sec--lin .seg__piste,.sec--sable .seg__piste{
  background:rgba(255,255,255,.62); border-color:rgba(154,115,58,.20); }
.seg__pastille{
  position:absolute; top:5px; left:0; height:calc(100% - 10px);
  border-radius:100px; background:var(--or-grad); background-size:190% 100%;
  box-shadow:0 6px 18px -8px rgba(154,115,58,.8), inset 0 1px 0 rgba(255,255,255,.42);
  transform:translateX(0); width:0; pointer-events:none;
  transition:transform .62s var(--ease-out), width .62s var(--ease-out);
}
.seg__b{
  position:relative; z-index:1; flex:1 0 auto; min-height:44px; padding:0 15px;
  border-radius:100px; white-space:nowrap;
  font-family:var(--sans); font-weight:500; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--sur-sombre-2); transition:color .42s var(--ease);
}
.sec--clair .seg__b,.sec--lin .seg__b,.sec--sable .seg__b{ color:var(--encre-2); }
.seg__b[aria-selected="true"]{ color:#2A1D08; }
.sec--clair .seg__b[aria-selected="true"],
.sec--lin .seg__b[aria-selected="true"],
.sec--sable .seg__b[aria-selected="true"]{ color:#2A1D08; }
/* Les quatre univers doivent tenir dans la largeur sur un telephone : une
   piste qui deborde se defile, mais rien ne le signale et le dernier univers
   passe inapercu. */
@media (max-width:430px){
  .seg__b{ padding:0 11px; font-size:10.5px; letter-spacing:.11em; }
}
@media (max-width:359px){
  .seg__b{ padding:0 8px; font-size:9.5px; letter-spacing:.08em; }
}

/* ========================================================= 5. LES SOINS */
.univers{ display:none; }
.univers.actif{ display:block; animation:univEntre .6s var(--ease-out); }
@keyframes univEntre{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.univers__note{ text-align:center; font-family:var(--serif); font-style:italic;
  font-size:19px; color:var(--sur-sombre-2); margin-bottom:26px; }
.sec--clair .univers__note{ color:var(--encre-2); }

.svcs{ display:grid; gap:13px; }
.svc{
  position:relative; display:grid; gap:9px;
  padding:24px 22px 22px; border-radius:var(--rayon);
  background:linear-gradient(166deg, rgba(237,228,216,.075), rgba(237,228,216,.028));
  border:1px solid rgba(195,155,91,.17);
  overflow:hidden; isolation:isolate;
  transition:transform .55s var(--ease-out), border-color .5s var(--ease),
             box-shadow .55s var(--ease-out);
}
/* Le filet d'or qui se remplit sur le bord haut de la carte. */
.svc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:var(--or-grad); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .8s var(--ease-out);
}
.svc.vu::before{ transform:scaleX(1); }
.svc__hd{ display:flex; align-items:baseline; gap:12px; }
.svc__n{ font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.18;
  flex:1; color:var(--sur-sombre); }
.sec--clair .svc__n{ color:var(--encre); }
.svc__px{ font-family:var(--sans); font-weight:500; font-size:17px;
  letter-spacing:.02em; white-space:nowrap;
  background:var(--or-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; }
.svc__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tag{ font-family:var(--sans); font-weight:400; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; padding:5px 11px;
  border-radius:100px; border:1px solid rgba(195,155,91,.28);
  color:var(--or-clair); background:rgba(195,155,91,.06); }
.sec--clair .tag{ color:var(--or-fonce); border-color:rgba(154,115,58,.26);
                  background:rgba(195,155,91,.08); }
.tag--plein{ background:var(--or-grad); color:#2A1D08; border-color:transparent;
             font-weight:500; }
.svc__d{ font-size:14.5px; line-height:1.65; color:var(--sur-sombre-2); }
.sec--clair .svc__d{ color:var(--encre-2); }
.svc__go{
  /* `.svc` est une grille : c'est `justify-self` qui empeche le bouton de
     s'etirer sur toute la largeur de la carte, pas `align-self`. */
  margin-top:5px; display:inline-flex; align-items:center; gap:8px;
  justify-self:start;
  min-height:42px; padding:0 18px; border-radius:100px;
  border:1px solid rgba(195,155,91,.42); color:var(--or-clair);
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.sec--clair .svc__go{ color:var(--or-fonce); border-color:rgba(154,115,58,.4); }
.svc__go:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .svc:hover{ transform:translateY(-3px); border-color:rgba(195,155,91,.4);
              box-shadow:0 22px 46px -30px rgba(0,0,0,.9); }
  .svc__go:hover{ background:rgba(195,155,91,.16); border-color:rgba(195,155,91,.75); }
}
.svc--phare{
  background:linear-gradient(166deg, rgba(195,155,91,.16), rgba(195,155,91,.045));
  border-color:rgba(195,155,91,.38);
}

/* ================================================= 6. LE RITUEL EN 5 TEMPS */
.tps{ position:relative; display:grid; gap:0; max-width:760px; margin:0 auto; }
/* Le fil : une piste grise, remplie par un enfant dont on pilote scaleY
   depuis le script (--fill). Pas de repeindre, juste une transformation. */
.tps__fil{ position:absolute; left:19px; top:14px; bottom:14px; width:1.5px;
  background:rgba(154,115,58,.20); border-radius:2px; overflow:hidden; }
.tps__fil i{ display:block; width:100%; height:100%;
  background:linear-gradient(180deg,var(--or-fonce),var(--or),var(--or-clair));
  transform:scaleY(var(--fill,0)); transform-origin:50% 0; }
.tp{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:16px;
     padding:20px 0 26px; }
.tp__pt{
  position:relative; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex:0 0 auto;
  background:var(--lin); border:1.5px solid rgba(154,115,58,.30);
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.06em;
  color:var(--or-fonce); z-index:1;
  transition:border-color .6s var(--ease), background-color .6s var(--ease),
             color .6s var(--ease), transform .6s var(--ease-out);
}
.tp.actif .tp__pt{ background:var(--or-grad); color:#2A1D08;
  border-color:transparent; transform:scale(1.1);
  box-shadow:0 8px 22px -10px rgba(154,115,58,.9); }
/* L'onde qui s'echappe du point actif — le battement du soin. */
.tp__pt::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(195,155,91,.5); opacity:0; transform:scale(.8);
}
.tp.actif .tp__pt::after{ animation:onde 3.2s var(--ease-out) infinite; }
@keyframes onde{
  0%  { opacity:.9; transform:scale(.82) }
  70% { opacity:0;  transform:scale(1.9) }
  100%{ opacity:0;  transform:scale(1.9) }
}
.tp__c{ display:grid; gap:7px; padding-top:3px; }
.tp__d{ font-family:var(--sans); font-weight:400; font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or-fonce);
  padding-left:.22em; }
.tp__t{ font-family:var(--serif); font-weight:400; font-size:25px; line-height:1.16; }
.tp__p{ font-size:14.5px; line-height:1.66; color:var(--encre-2); max-width:44ch; }
@media (prefers-reduced-motion:reduce){ .tp__pt::after{ animation:none !important } }

/* La respiration : un halo qui enfle et se retire au rythme d'un souffle
   lent (5,5 s). Transform et opacite uniquement. */
.souffle{ position:relative; display:grid; place-items:center;
  margin:clamp(30px,8vw,52px) auto 0; width:min(280px,74vw); aspect-ratio:1;
  isolation:isolate; }
.souffle i{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(217,182,164,.50) 0%, rgba(232,208,160,.24) 44%, transparent 71%);
  box-shadow:inset 0 0 0 1px rgba(195,155,91,.26);
  transform:scale(.62); opacity:.5;
}
.souffle.is-live i{ animation:respire 5.6s var(--ease-soft) infinite; }
.souffle.is-live i:nth-child(2){ animation-delay:-1.9s; }
.souffle.is-live i:nth-child(3){ animation-delay:-3.7s; }
@keyframes respire{
  0%  { transform:scale(.60); opacity:.10 }
  42% { transform:scale(1.00); opacity:.62 }
  58% { transform:scale(1.00); opacity:.62 }
  100%{ transform:scale(.60); opacity:.10 }
}
.souffle__t{ position:relative; z-index:1; text-align:center; display:grid; gap:7px; }
.souffle__t b{ font-family:var(--serif); font-weight:400; font-size:26px; }
.souffle__t span{ font-family:var(--sans); font-weight:300; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--encre-2);
  padding-left:.28em; }
@media (prefers-reduced-motion:reduce){ .souffle i{ animation:none !important } }

/* ======================================================= 7. LE DIAGNOSTIC */
.dia{ max-width:720px; margin:0 auto; }
.dia__etape{ display:none; }
.dia__etape.actif{ display:block; animation:univEntre .55s var(--ease-out); }
.dia__q{ font-family:var(--serif); font-weight:300; font-size:clamp(25px,6.6vw,36px);
  line-height:1.16; text-align:center; margin-bottom:8px; }
.dia__n{ text-align:center; font-family:var(--sans); font-weight:300; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--or); padding-left:.26em;
  margin-bottom:14px; }
.dia__ch{ display:grid; gap:10px; margin-top:24px; }
/* Le choix : un bouton pleine largeur, confortable au pouce, qui s'allume. */
.ch{
  position:relative; display:flex; align-items:center; gap:14px;
  min-height:60px; padding:13px 18px; border-radius:14px; text-align:left;
  background:rgba(237,228,216,.05); border:1px solid rgba(195,155,91,.18);
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             transform .4s var(--ease-out);
}
.ch:active{ transform:scale(.985); }
.ch__p{ width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(195,155,91,.42); display:grid; place-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease); }
.ch__p::after{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--or-grad); transform:scale(0);
  transition:transform .42s var(--ease-out); }
.ch[aria-pressed="true"]{ background:rgba(195,155,91,.14); border-color:rgba(195,155,91,.55); }
.ch[aria-pressed="true"] .ch__p{ border-color:var(--or); }
.ch[aria-pressed="true"] .ch__p::after{ transform:scale(1); }
.ch__t{ display:grid; gap:2px; }
.ch__t b{ font-family:var(--sans); font-weight:500; font-size:14.5px; letter-spacing:.02em;
  color:var(--sur-sombre); }
.ch__t span{ font-size:12.5px; color:var(--sur-sombre-2); line-height:1.5; }
@media (hover:hover) and (pointer:fine){
  .ch:hover{ background:rgba(195,155,91,.10); border-color:rgba(195,155,91,.42); }
}
.dia__nav{ display:flex; gap:10px; margin-top:22px; align-items:center; }
.dia__nav .btn{ flex:1; }
.dia__ret{ font-family:var(--sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sur-sombre-2); padding:14px 6px; }
.dia__piste{ height:1.5px; background:rgba(237,228,216,.12); border-radius:2px;
  overflow:hidden; margin-bottom:26px; }
.dia__piste i{ display:block; height:100%; background:var(--or-grad);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease-out); }

/* Le resultat : le flacon en volume, dessine en CSS. */
.dia__res{ display:none; text-align:center; }
.dia__res.actif{ display:grid; justify-items:center; gap:16px;
                 animation:univEntre .7s var(--ease-out); }

/* Le flacon : deux plans croises par volume, et rien de plus. Un vrai
   cylindre demanderait vingt faces ; deux plans perpendiculaires qui
   tournent ensemble donnent la meme lecture de volume pour six elements.
   Le reflet et le niveau du produit sont DANS les plans : places a cote,
   ils ne tourneraient pas avec eux et le flacon paraitrait casse. */
.flacon{ position:relative; width:128px; height:206px; margin:6px auto 0;
         perspective:620px; }
.flacon__c{ position:absolute; inset:0; transform-style:preserve-3d;
            animation:tourne 18s linear infinite; }
@keyframes tourne{ from{ transform:rotateY(0) } to{ transform:rotateY(360deg) } }

.flacon__bou,.flacon__co{ position:absolute; left:0; right:0;
                          transform-style:preserve-3d; }
.flacon__bou > i,.flacon__co > i{ position:absolute; top:0; height:100%; left:50%; }

.flacon__bou{ top:10px; height:30px; }
.flacon__bou > i{
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(100deg,#E8D0A0 0%,#9A733A 44%,#F2E3C6 72%,#A67C3E 100%);
  box-shadow:0 8px 16px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5);
}
.flacon__bou > i:nth-child(1){ width:36px; margin-left:-18px; }
.flacon__bou > i:nth-child(2){ width:25px; margin-left:-12.5px; transform:rotateY(90deg); }

.flacon__col{ position:absolute; left:50%; top:38px; width:24px; height:14px;
  margin-left:-12px; background:linear-gradient(100deg, rgba(255,255,255,.26), rgba(255,255,255,.06));
  border-left:1px solid rgba(255,255,255,.24); border-right:1px solid rgba(255,255,255,.24); }

.flacon__co{ top:48px; height:146px; }
.flacon__co > i{
  border-radius:14px 14px 20px 20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.30);
  background:linear-gradient(180deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.05) 30%,
      var(--jus,rgba(195,155,91,.85)) 32%,
      var(--jus,rgba(195,155,91,.85)) 100%);
  box-shadow:inset 0 -26px 34px -18px rgba(0,0,0,.55),
             inset 0 2px 0 rgba(255,255,255,.42);
}
.flacon__co > i:nth-child(1){ width:88px; margin-left:-44px; }
.flacon__co > i:nth-child(2){ width:58px; margin-left:-29px; transform:rotateY(90deg); }
/* le reflet, enfant du plan : il tourne avec lui */
.flacon__co > i > b{
  position:absolute; left:13%; top:7%; width:8px; height:70%; border-radius:100px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.05));
}
/* l'ombre portee, a plat sous le flacon */
.flacon__om{ position:absolute; left:50%; bottom:-2px; width:96px; height:16px;
  margin-left:-48px; border-radius:50%; transform:rotateX(84deg);
  background:radial-gradient(circle, rgba(0,0,0,.55) 0%, transparent 72%); }

@media (prefers-reduced-motion:reduce){ .flacon__c{ animation:none } }
.dia__res h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,7vw,38px);
  line-height:1.14; }
.dia__res .lede{ max-width:40ch; color:var(--sur-sombre-2); }
.dia__res .btn{ margin-top:6px; }

/* ==================================================== 8. LES PRATICIENNES */
.pros{ display:grid; gap:18px; }
.pro{ perspective:1200px; }
/* Pas de `transform-style:preserve-3d` ici : Safari aplatit le contexte 3D
   des qu'on lui ajoute `overflow:hidden`, et le rayon d'angle cesse alors de
   decouper l'image de facon fiable. L'inclinaison de la carte suffit ; le
   `translateZ` du nom retombe simplement a plat, sans artefact. */
.pro__c{
  position:relative; border-radius:22px; overflow:hidden;
  background:linear-gradient(168deg, rgba(237,228,216,.07), rgba(237,228,216,.02));
  border:1px solid rgba(195,155,91,.20);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  will-change:transform;
}
.pro__ph{ position:relative; aspect-ratio:3/4; overflow:hidden;
          background:#241D18; }
.pro__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.pro__ph::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 44%, rgba(23,19,15,.86) 100%); }
.pro__id{ position:absolute; left:20px; right:20px; bottom:16px; z-index:1;
          display:grid; gap:3px; transform:translateZ(34px); }
.pro__id b{ font-family:var(--serif); font-weight:400; font-size:31px; line-height:1.06;
            color:var(--lin); }
.pro__id span{ font-family:var(--sans); font-weight:400; font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.24em; }
.pro__b{ padding:20px 20px 22px; display:grid; gap:13px; }
.pro__p{ font-size:14.5px; line-height:1.66; color:var(--sur-sombre-2); }
.pro__sp{ display:flex; flex-wrap:wrap; gap:7px; }
.pro__ligne{ display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sur-sombre-2); }
.pro__ligne svg{ color:var(--or); }

/* ============================================================ 9. L'ECRIN */
.gal{ position:relative; margin:0 calc(-1 * var(--pad)); }
.gal__rail{
  position:relative; display:flex; gap:14px;
  padding:14px calc(50% - 124px);        /* le pourcentage se resout sur .gal */
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gal__rail::-webkit-scrollbar{ display:none; }
.gal__i{
  position:relative; flex:0 0 248px; scroll-snap-align:center;
  border-radius:150px 150px 18px 18px;   /* l'arche du salon, en vignette */
  overflow:hidden; background:#241D18;
  transform:scale(var(--e,.9)) rotateY(var(--r,0deg));
  opacity:var(--o,.55);
  will-change:transform,opacity;
}
/* AUCUNE transition ici. L'echelle et l'inclinaison sont recalculees a chaque
   trame depuis la position du rail : une transition de 0,5 s par-dessus fait
   courir chaque vignette derriere une cible qui a deja bouge, et l'image
   tremble au lieu de suivre le doigt. Le mouvement est deja continu. */
.gal__i img{ width:100%; aspect-ratio:3/4.35; height:auto; object-fit:cover;
             object-position:50% 38%; }
/* Le bandeau de legende : univers, nom du soin, duree et tarif. Ces trois
   valeurs sont RECOPIEES DEPUIS LA CARTE DES RITUELS par le script — la
   galerie ne peut donc pas diverger des tarifs, et elle est traduite sans
   qu'aucune de ces chaines figure dans les dictionnaires. */
.gal__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:56px 16px 17px;
  background:linear-gradient(180deg, transparent 0%, rgba(16,13,10,.62) 38%, rgba(16,13,10,.93) 100%);
  display:grid; gap:4px; text-align:center; justify-items:center;
}
.gal__u{ font-family:var(--sans); font-weight:500; font-size:8.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--or-clair);
  padding:3px 9px; border-radius:100px; border:1px solid rgba(232,208,160,.34);
  background:rgba(16,13,10,.34); }
.gal__t{ font-family:var(--serif); font-weight:400; font-size:20px;
  line-height:1.16; color:var(--lin); margin-top:2px; }
.gal__d{ font-family:var(--sans); font-weight:400; font-size:11px;
  letter-spacing:.1em; color:rgba(240,232,222,.82); }
/* L'invitation a ouvrir la fiche : un filet dore qui apparait sur la vignette
   centrale, posee par le script (`.au-centre`). Sur telephone il n'y a pas de
   survol pour le dire. */
/* Le badge reste TOUJOURS dans le flux de la legende : il n'apparait qu'en
   opacite, jamais en hauteur, sinon les six vignettes changeraient de taille
   au passage de l'une a l'autre. */
.gal__voir{
  margin-top:7px; opacity:0; transform:translateY(5px); pointer-events:none;
  font-family:var(--sans); font-weight:500; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:#2A1D08; padding:6px 14px 5px; border-radius:100px;
  background:var(--or-grad); box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  transition:opacity .45s var(--ease), transform .45s var(--ease-out);
}
.gal__i.au-centre .gal__voir{ opacity:1; transform:none; }

.gal__lieu{ max-width:52ch; margin:clamp(30px,7vw,46px) auto 0; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,4.4vw,21px);
  line-height:1.5; color:var(--encre-2); }
.gal__pts{ display:flex; justify-content:center; gap:7px; margin-top:18px; }
.gal__pts b{ width:5px; height:5px; border-radius:50%; background:rgba(237,228,216,.22);
  transition:width .4s var(--ease-out), background-color .4s var(--ease); }
/* Sur les sections claires, une pastille creme serait invisible. */
.sec--clair .gal__pts b,.sec--lin .gal__pts b,.sec--sable .gal__pts b{
  background:rgba(42,33,26,.20); }
.sec--clair .gal__pts b.on,.sec--lin .gal__pts b.on,.sec--sable .gal__pts b.on{
  background:var(--or-fonce); }
.gal__pts b.on{ width:20px; border-radius:3px; background:var(--or); }

/* ============================================= 10. CARTES & ABONNEMENTS */
/* Le coffret : une vraie boite en CSS 3D, six faces, un ruban et un
   monogramme. Rotation lente qu'un glissement du doigt peut reprendre.

   Chaque face porte ses PROPRES dimensions. Donner la meme taille aux six
   (un `inset` unique, par exemple) laisse les flancs deborder de la
   profondeur : la boite parait ouverte et l'on voit au travers. Les flancs
   font donc la profondeur de large, et les couvercles la profondeur de haut. */
.coffret{
  --cl:200px;                       /* cote                      */
  --cp:118px;                       /* profondeur                */
  width:min(240px,64vw); aspect-ratio:1; margin:0 auto clamp(28px,7vw,44px);
  perspective:820px; touch-action:pan-y; cursor:grab;
}
.coffret:active{ cursor:grabbing; }
.coffret__c{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transform:rotateX(-15deg) rotateY(var(--ry,-28deg));
}
.coffret__f{
  position:absolute; left:50%; top:50%; transform-style:preserve-3d;
  background:linear-gradient(152deg,#332920 0%,#443628 54%,#241D16 100%);
  box-shadow:inset 0 0 46px rgba(0,0,0,.55), inset 0 0 0 1px rgba(195,155,91,.24);
  backface-visibility:hidden;
}
/* faces avant / arriere : cote x cote, avancees d'une demi-profondeur */
.coffret__f--av,.coffret__f--ar{
  width:var(--cl); height:var(--cl);
  margin:calc(var(--cl) / -2) 0 0 calc(var(--cl) / -2);
}
.coffret__f--av{ transform:translateZ(calc(var(--cp) / 2)); }
.coffret__f--ar{ transform:rotateY(180deg) translateZ(calc(var(--cp) / 2)); }
/* flancs : PROFONDEUR de large, cote de haut, ecartes d'un demi-cote */
.coffret__f--g,.coffret__f--d{
  width:var(--cp); height:var(--cl);
  margin:calc(var(--cl) / -2) 0 0 calc(var(--cp) / -2);
  background:linear-gradient(152deg,#2A2119 0%,#3A2E22 54%,#1E1812 100%);
}
.coffret__f--g{ transform:rotateY(-90deg) translateZ(calc(var(--cl) / 2)); }
.coffret__f--d{ transform:rotateY(90deg)  translateZ(calc(var(--cl) / 2)); }
/* couvercle et fond : cote de large, PROFONDEUR de haut */
.coffret__f--h,.coffret__f--b{
  width:var(--cl); height:var(--cp);
  margin:calc(var(--cp) / -2) 0 0 calc(var(--cl) / -2);
}
.coffret__f--h{ transform:rotateX(90deg) translateZ(calc(var(--cl) / 2));
  background:linear-gradient(152deg,#453729 0%,#54432F 54%,#332920 100%); }
.coffret__f--b{ transform:rotateX(-90deg) translateZ(calc(var(--cl) / 2));
  background:linear-gradient(152deg,#1E1812 0%,#2A2119 54%,#171209 100%); }

/* Le ruban : une bande qui ceint la boite dans les deux sens. Quatre brins
   par sens, un par face traversee, chacun colle a 1 px au-dessus de sa face
   pour ne pas se battre avec elle dans le tampon de profondeur. */
.coffret__rb{ position:absolute; inset:0; transform-style:preserve-3d;
              pointer-events:none; }
.coffret__rb i{
  position:absolute; left:50%; top:50%; background:var(--or-grad);
  background-size:180% 100%;
  box-shadow:0 0 16px rgba(195,155,91,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
/* brin vertical : avant, dessus, arriere, dessous */
.coffret__rb i:nth-child(1){ width:18px; height:var(--cl);
  margin:calc(var(--cl) / -2) 0 0 -9px; transform:translateZ(calc(var(--cp) / 2 + 1px)); }
.coffret__rb i:nth-child(2){ width:18px; height:var(--cl);
  margin:calc(var(--cl) / -2) 0 0 -9px;
  transform:rotateY(180deg) translateZ(calc(var(--cp) / 2 + 1px)); }
.coffret__rb i:nth-child(3){ width:18px; height:var(--cp);
  margin:calc(var(--cp) / -2) 0 0 -9px;
  transform:rotateX(90deg) translateZ(calc(var(--cl) / 2 + 1px)); }
.coffret__rb i:nth-child(4){ width:18px; height:var(--cp);
  margin:calc(var(--cp) / -2) 0 0 -9px;
  transform:rotateX(-90deg) translateZ(calc(var(--cl) / 2 + 1px)); }
/* brin horizontal : avant, arriere, flanc gauche, flanc droit */
.coffret__rb i:nth-child(5){ width:var(--cl); height:18px;
  margin:-9px 0 0 calc(var(--cl) / -2); transform:translateZ(calc(var(--cp) / 2 + 1px)); }
.coffret__rb i:nth-child(6){ width:var(--cl); height:18px;
  margin:-9px 0 0 calc(var(--cl) / -2);
  transform:rotateY(180deg) translateZ(calc(var(--cp) / 2 + 1px)); }
.coffret__rb i:nth-child(7){ width:var(--cp); height:18px;
  margin:-9px 0 0 calc(var(--cp) / -2);
  transform:rotateY(-90deg) translateZ(calc(var(--cl) / 2 + 1px)); }
.coffret__rb i:nth-child(8){ width:var(--cp); height:18px;
  margin:-9px 0 0 calc(var(--cp) / -2);
  transform:rotateY(90deg) translateZ(calc(var(--cl) / 2 + 1px)); }

.coffret__mono{
  position:absolute; left:50%; top:50%; width:96px; height:96px;
  margin:-48px 0 0 -48px; transform:translateZ(calc(var(--cp) / 2 + 3px));
  backface-visibility:hidden;
}
.coffret__mono img{ width:100%; height:100%; }
@media (prefers-reduced-motion:reduce){
  .coffret__c{ transform:rotateX(-15deg) rotateY(-28deg) !important; }
}
@media (max-width:359px){ .coffret{ --cl:170px; --cp:100px; } }

.abos{ display:grid; gap:13px; }
.abo{ position:relative; padding:24px 22px; border-radius:var(--rayon);
  background:linear-gradient(166deg, rgba(255,255,255,.66), rgba(255,255,255,.28));
  border:1px solid rgba(154,115,58,.18); display:grid; gap:11px; }
.abo--phare{ background:linear-gradient(166deg, rgba(195,155,91,.20), rgba(195,155,91,.06));
             border-color:rgba(154,115,58,.4); }
.abo__hd{ display:flex; align-items:baseline; gap:12px; }
.abo__n{ font-family:var(--serif); font-weight:400; font-size:23px; flex:1; }
.abo__px{ font-family:var(--sans); font-weight:500; font-size:17px; color:var(--or-fonce); }
.abo__px small{ font-size:11px; font-weight:400; letter-spacing:.06em; }
.abo ul{ display:grid; gap:8px; }
.abo li{ display:flex; gap:10px; font-size:14px; line-height:1.55; color:var(--encre-2); }
.abo li svg{ flex:0 0 auto; color:var(--or-fonce); margin-top:3px; }

/* ============================================================ 11. AVIS */
.avis__rail{ display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:4px var(--pad) 6px; margin:0 calc(-1 * var(--pad)); }
.avis__rail::-webkit-scrollbar{ display:none; }
.av{ flex:0 0 min(310px,80vw); scroll-snap-align:center;
  padding:24px 22px; border-radius:var(--rayon);
  background:linear-gradient(166deg, rgba(237,228,216,.075), rgba(237,228,216,.025));
  border:1px solid rgba(195,155,91,.16);
  display:grid; gap:12px; align-content:start; }
.av__et{ display:flex; gap:3px; color:var(--or); }
.av__t{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:19px; line-height:1.42; color:var(--sur-sombre); }
.av__q{ font-size:14px; line-height:1.62; color:var(--sur-sombre-2); }
.av__w{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.av__w b{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-size:16px; color:#2A1D08;
  background:var(--or-grad); flex:0 0 auto; }
.av__w span{ font-family:var(--sans); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sur-sombre-2); }
.note{ display:flex; align-items:center; justify-content:center; gap:12px;
       margin-top:22px; font-family:var(--sans); font-size:12px;
       letter-spacing:.14em; text-transform:uppercase; color:var(--sur-sombre-2); }
.note b{ font-family:var(--serif); font-size:28px; letter-spacing:0;
  background:var(--or-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; text-shadow:none; }

/* ============================================================= 12. FAQ */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:0; }
.qa{ border-bottom:1px solid rgba(154,115,58,.16); }
.qa__b{ width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  padding:20px 2px; font-family:var(--serif); font-weight:400;
  font-size:19px; line-height:1.32; }
.qa__b i{ position:relative; width:16px; height:16px; flex:0 0 auto; margin-left:auto; }
.qa__b i::before,.qa__b i::after{ content:""; position:absolute; left:0; top:7.5px;
  width:16px; height:1.5px; background:var(--or-fonce); border-radius:2px;
  transition:transform .46s var(--ease-out); }
.qa__b i::after{ transform:rotate(90deg); }
.qa__b[aria-expanded="true"] i::after{ transform:rotate(0); }
.qa__r{ overflow:hidden; height:0; transition:height .46s var(--ease-out); }
.qa__r p{ padding:0 2px 20px; font-size:14.5px; line-height:1.7; color:var(--encre-2);
          max-width:60ch; }

/* ====================================================== 13. NOUS TROUVER */
.tr{ display:grid; gap:22px; }
.tr__bloc{ display:grid; gap:13px; }
.tr__l{ display:flex; gap:14px; align-items:flex-start; padding:15px 0;
        border-bottom:1px solid rgba(237,228,216,.08); }
.tr__l svg{ flex:0 0 auto; color:var(--or); margin-top:3px; }
.tr__l div{ display:grid; gap:2px; }
.tr__l b{ font-family:var(--sans); font-weight:500; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.2em; }
.tr__l span{ font-size:15px; line-height:1.55; color:var(--sur-sombre); }
.tr__l small{ font-size:13px; color:var(--sur-sombre-2); }
.horaires{ display:grid; gap:7px; margin-top:4px; }
.horaires div{ display:flex; justify-content:space-between; gap:14px;
  font-size:14px; padding:5px 0; border-bottom:1px solid rgba(237,228,216,.06); }
.horaires span:first-child{ color:var(--sur-sombre-2); }
.horaires span:last-child{ font-family:var(--sans); letter-spacing:.04em; }
.horaires div.auj span:last-child{ color:var(--or-clair); }
.horaires div.auj span:first-child{ color:var(--or-clair); }
.tr__act{ display:grid; gap:10px; margin-top:6px; }
.plan{ border-radius:var(--rayon); overflow:hidden; border:1px solid rgba(195,155,91,.2);
       background:#241D18; }
.plan iframe{ display:block; width:100%; height:260px; border:0; }

/* ========================================================= 14. PIED DE PAGE */
.pied{ position:relative; z-index:2; background:#100D0A;
  padding:clamp(52px,12vw,80px) var(--pad) calc(30px + var(--bar));
  border-top:1px solid rgba(195,155,91,.14); }
.pied__h{ display:grid; justify-items:center; gap:13px; text-align:center;
          margin-bottom:34px; }
.pied__logo{ width:64px; height:64px; }
.pied__nom{ font-family:var(--sans); font-weight:400; font-size:13px;
  letter-spacing:.44em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.44em; }
.pied__ph{ font-family:var(--serif); font-style:italic; font-size:17px;
           color:var(--sur-sombre-2); }
.pied__g{ display:grid; gap:26px; }
.pied__col h4{ font-family:var(--sans); font-weight:500; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or);
  padding-left:.22em; margin-bottom:11px; }
.pied__col li{ padding:6px 0; }
.pied__col a,.pied__col span{ font-size:14px; color:var(--sur-sombre-2); }
.pied__bas{ margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(237,228,216,.08);
  display:grid; gap:8px; justify-items:center; text-align:center;
  font-size:11.5px; color:rgba(180,166,151,.7); }
.pied__soc{ display:flex; gap:12px; margin-top:4px; }
.pied__soc a{ width:40px; height:40px; border-radius:50%; display:grid;
  place-items:center; border:1px solid rgba(237,228,216,.16); color:var(--sur-sombre-2);
  transition:border-color .4s var(--ease), color .4s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .pied__soc a:hover{ border-color:var(--or); color:var(--or-clair); }
}

/* ==================================================== 15. BARRE D'ACTION */
/* Une barre d'appel a l'action qui apparait apres la scene d'ouverture.
   Posee AU-DESSUS des barres du navigateur avec --bar : elle ne bouge pas
   quand la barre d'adresse va et vient. */
.quai{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  /* Pas de compensation `--bar` : un element `position:fixed` se cale deja
     sur le viewport VISIBLE, au-dessus de la barre d'outils du telephone.
     L'ajouter relevait la barre d'action de 60 a 90 px au-dessus du bord. */
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
  background:linear-gradient(180deg, rgba(23,19,15,0), rgba(23,19,15,.94) 42%);
  transform:translateY(120%); transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.quai.pose{ transform:translateY(0); pointer-events:auto; }
/* Un panneau est ouvert (menu, reservation, visionneuse) : la barre d'action
   se retire. Elle vit sous eux dans l'empilement, mais un fond translucide la
   laisserait deviner, et sur un panneau plein ecran c'est du bruit. */
body.est-fige .quai{ transform:translateY(120%); pointer-events:none; }
body.est-fige .seq__jauge{ opacity:0; }
.quai .btn{ flex:1; min-height:50px; }
.quai__tel{ width:50px; height:50px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:var(--or-clair);
  border:1px solid rgba(195,155,91,.42); background:rgba(195,155,91,.08); }

/* =================================================== 16. FEUILLE DE RESA */
.feuille{
  position:fixed; inset:0; z-index:1100;
  background:radial-gradient(120% 74% at 50% 0%, #241C15 0%, #17130F 62%, #100D0A 100%);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .42s var(--ease-out), transform .5s var(--ease-out), visibility .42s;
}
.feuille.ouvert{ opacity:1; visibility:visible; transform:none; }
.feuille__hd{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:12px var(--pad); padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid rgba(195,155,91,.16);
}
.feuille__t{ display:grid; gap:1px; margin-right:auto; min-width:0; }
.feuille__t b{ font-family:var(--sans); font-weight:500; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.2em; }
.feuille__t span{ font-size:11.5px; color:var(--sur-sombre-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feuille__x{ width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; border:1px solid rgba(237,228,216,.18);
  color:var(--sur-sombre); }
.feuille__co{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:22px var(--pad) calc(28px + var(--bar)); }
.feuille__pas{ display:none; }
.feuille__pas.actif{ display:block; animation:univEntre .5s var(--ease-out); }
.feuille__q{ font-family:var(--serif); font-weight:300; font-size:26px;
  text-align:center; margin-bottom:6px; }
.feuille__s{ text-align:center; font-size:13.5px; color:var(--sur-sombre-2);
  margin-bottom:22px; }
.feuille__ch{ display:grid; gap:10px; }
.feuille__gr{ grid-column:1/-1; margin:14px 0 2px; text-align:left;
  font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--or); }
/* Pendant le chargement d'un dictionnaire, le texte s'estompe un instant :
   sans cela le remplacement se lit comme un clignotement. */
body.traduit-en-cours main,body.traduit-en-cours .pied,
body.traduit-en-cours .feuille__co{ opacity:.55; transition:opacity .2s linear; }
/* Le cadre de l'agenda occupe toute la feuille. C'est la page NORMALE de
   cal.eu qui est chargee, jamais son `/embed` : la variante « embed » se
   masque elle-meme tant que le SDK de Cal n'a pas fait sa poignee de main
   depuis la page hote, et reste donc DESESPEREMENT BLANCHE dans un cadre. */
.feuille__cal{ flex:1; position:relative; background:#17130F; }
.feuille__cal iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.feuille__att{ position:absolute; inset:0; display:grid; place-items:center;
  gap:14px; align-content:center; text-align:center; padding:26px;
  background:#17130F; transition:opacity .5s var(--ease), visibility .5s; }
.feuille__att.part{ opacity:0; visibility:hidden; }
.feuille__att i{ width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(195,155,91,.24); border-top-color:var(--or);
  animation:tourne2 .95s linear infinite; }
@keyframes tourne2{ to{ transform:rotate(360deg) } }
.feuille__att span{ font-size:13px; color:var(--sur-sombre-2); }
.feuille__secours{ display:none; }
.feuille__att.secours i{ display:none; }
.feuille__att.secours .feuille__secours{ display:grid; gap:14px; justify-items:center; }

/* ======================================================= 17. FICHE DU SOIN */
/* Fond OPAQUE : a 96 % d'opacite, le bouton dore de la barre d'action et le
   titre de la barre de navigation restaient lisibles au travers. */
.lb{ position:fixed; inset:0; z-index:1150;
  background:radial-gradient(120% 70% at 50% 0%, #1E1811 0%, #120F0C 58%, #0B0907 100%);
  display:grid; grid-template-rows:auto 1fr auto; opacity:0; visibility:hidden;
  transition:opacity .38s var(--ease-out), visibility .38s; }
.lb.ouvert{ opacity:1; visibility:visible; }
.lb__hd{ display:flex; justify-content:flex-end;
         padding:10px var(--pad); padding-top:calc(10px + env(safe-area-inset-top)); }
.lb__x{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(237,228,216,.2); color:var(--sur-sombre); flex:0 0 auto; }

.lb__co{ min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 var(--pad) 6px; display:grid; gap:18px; align-content:start;
  justify-items:center; }
/* La photo garde l'arche de la maison, en plus grand. */
.lb__ph{ width:min(300px,72vw); border-radius:150px 150px 18px 18px;
  overflow:hidden; background:#241D18; flex:0 0 auto; }
.lb__ph img{ width:100%; aspect-ratio:3/4; height:auto; object-fit:cover;
             object-position:50% 38%; display:block; }
.lb__txt{ display:grid; gap:9px; justify-items:center; text-align:center;
          max-width:44ch; width:100%; }
.lb__u{ font-family:var(--sans); font-weight:500; font-size:9.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--or);
  padding-left:.28em; }
.lb__t{ font-family:var(--serif); font-weight:400; font-size:clamp(25px,6.8vw,34px);
  line-height:1.14; color:var(--lin); }
.lb__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.lb__d{ font-size:14.5px; line-height:1.66; color:var(--sur-sombre-2); }
.lb__txt .btn{ margin-top:5px; max-width:340px; }

.lb__pd{ display:flex; align-items:center; justify-content:center; gap:16px;
  padding:12px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
.lb__fl{ width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:var(--sur-sombre-2);
  border:1px solid rgba(237,228,216,.18);
  transition:border-color .4s var(--ease), color .4s var(--ease); }
.lb__fl:active{ transform:scale(.94); }
.lb__pts{ display:flex; gap:7px; }
.lb__pts b{ width:5px; height:5px; border-radius:50%; background:rgba(237,228,216,.24);
  transition:width .4s var(--ease-out), background-color .4s var(--ease); }
.lb__pts b.on{ width:20px; border-radius:3px; background:var(--or); }
@media (hover:hover) and (pointer:fine){
  .lb__fl:hover{ border-color:var(--or); color:var(--or-clair); }
}
@media (min-width:760px){
  .lb__co{ grid-template-columns:auto minmax(0,1fr); align-items:center;
           justify-items:start; gap:34px; padding-top:10px;
           max-width:840px; margin:0 auto; }
  .lb__ph{ width:300px; }
  .lb__txt{ justify-items:start; text-align:left; }
  .lb__meta{ justify-content:flex-start; }
}

/* ======================================================= 18. AMBIANCES */
/* Poussiere de lumiere : de petits points qui derivent. Uniquement des
   `transform`, a l'arret hors champ, et JAMAIS de flou — un flou sur un
   element en mouvement est re-rasterise a chaque trame. */
.pous{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.pous b{ position:absolute; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,227,198,.95) 0%, rgba(242,227,198,0) 70%);
  opacity:0; }
.pous.is-live b{ animation:derive var(--t,17s) linear var(--dl,0s) infinite; }
@keyframes derive{
  0%  { opacity:0;   transform:translate3d(0,20px,0) scale(.7) }
  14% { opacity:.85 }
  76% { opacity:.5 }
  100%{ opacity:0;   transform:translate3d(var(--dx,16px),-190px,0) scale(1.25) }
}
@media (prefers-reduced-motion:reduce){ .pous{ display:none } }

/* Le halo de bougie derriere un bloc — fixe, jamais anime en filtre. */
.bougie{ position:absolute; width:min(520px,120vw); aspect-ratio:1;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(232,208,160,.16) 0%, rgba(232,208,160,.05) 42%, transparent 70%); }
.sec--clair .bougie,.sec--lin .bougie,.sec--sable .bougie{
  background:radial-gradient(circle, rgba(217,182,164,.30) 0%, rgba(232,208,160,.12) 44%, transparent 72%); }
.bougie--hg{ top:-16%; left:-30%; }
.bougie--bd{ bottom:-20%; right:-32%; }

/* Le contenu doit passer AU-DESSUS des decors : on cible explicitement le
   conteneur et non « tous les enfants », une regle generique de ce genre
   ecraserait le `position:absolute` des decors et les remettrait en flux. */
.sec > .wrap{ position:relative; z-index:1; }

/* ======================================================== 19. LARGE ECRAN */
@media (min-width:760px){
  .pils{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .svcs{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .pros{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .abos{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .tr{ grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  .plan iframe{ height:340px; }
  .pied__g{ grid-template-columns:repeat(3,1fr); gap:30px; }
  .gal__i{ flex-basis:290px; }
  .gal__rail{ padding-left:calc(50% - 145px); padding-right:calc(50% - 145px); }
  .quai{ left:auto; right:24px; bottom:24px; width:auto; border-radius:100px;
         background:rgba(23,19,15,.9); padding:9px 10px 9px 14px;
         box-shadow:0 22px 50px -22px rgba(0,0,0,.9);
         border:1px solid rgba(195,155,91,.2); }
  .quai .btn{ flex:0 0 auto; }
  .feuille__ch{ grid-template-columns:repeat(2,1fr); }
  .dia__ch{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1060px){
  .svcs{ grid-template-columns:repeat(3,1fr); }
  .seq__lgs{ padding-left:60px; padding-right:60px; }
}