/* =========================================================================
   SEIZE COUVERTS · traiteur à Coulommiers
   Un seul moteur, des variables CSS, aucune bibliothèque hors Lenis.
   Rien n'est masqué tant que le script n'a pas posé la classe js.

   La forme ne reprend RIEN de la pâtissière du book : là-bas un film parcouru
   plein écran, une garalde et de l'or sur du crème. Ici une piste d'heures qui
   remplit une table, une serif de titrage haute sur du lin et de l'olive.
   ========================================================================= */

/* PIÈGE DÉJÀ PAYÉ · Google Fonts liste l'italique AVANT le romain dans sa
   feuille. Les deux fichiers ont été extraits en vérifiant `font-style`. */
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-ital.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --lin:#F6F3EC;
  --lin-2:#EBE5D9;
  --nappe:#FFFFFF;
  --ardoise:#22252A;
  --ardoise-doux:#5F6670;
  --olive:#6E7A4F;
  --olive-clair:#98A473;
  --laiton:#A98D5F;
  --nuit:#191C1F;
  --barre-h:clamp(54px,7.4vw,64px);
  --pied-h:clamp(46px,6vw,54px);
  --recit:'Instrument Serif',Georgia,'Times New Roman',serif;
  --interface:'Archivo',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--lin);color:var(--ardoise);
  font-family:var(--interface);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--recit);font-weight:400;
  letter-spacing:-.014em;line-height:1.04;text-wrap:balance}
p{margin:0}
button,input{font:inherit;color:inherit}

/* ---------- les briques d'écriture ---------- */
.geant{font-size:clamp(3rem,9vw,7.4rem);line-height:.97}
.grand{font-size:clamp(2.4rem,6.4vw,5.2rem)}
.moyen{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.ital{font-style:italic}
.dire{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.62;max-width:46ch;
  margin-top:clamp(18px,2.6vh,30px);color:var(--ardoise-doux)}
.capitales{font-family:var(--interface);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase}
.sur{display:block;margin-bottom:clamp(14px,2vh,22px);color:var(--olive)}
.filet{display:block;height:1px;width:min(300px,46vw);margin:clamp(20px,3vh,32px) 0;
  background:linear-gradient(90deg,var(--laiton),transparent)}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--interface);font-size:.94rem;font-weight:600;letter-spacing:.01em;
  padding:15px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .16s}
.bt-plein{background:var(--olive);color:var(--lin)}
.bt-plein:hover{background:#5C6742;transform:translateY(-1px)}
.bt-ligne{border-color:rgba(34,37,42,.28);color:var(--ardoise)}
.bt-ligne:hover{border-color:var(--olive);color:var(--olive)}
.ecran.nuit .bt-ligne{border-color:rgba(246,243,236,.34);color:var(--lin)}
.ecran.nuit .bt-ligne:hover{border-color:var(--olive-clair);color:var(--olive-clair)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,34px)}

/* ---------- la barre ---------- */
.barre{position:fixed;top:0;left:0;right:0;height:var(--barre-h);z-index:80;
  display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);
  padding:0 clamp(18px,2.6vw,32px);
  background:linear-gradient(180deg,rgba(246,243,236,.94),rgba(246,243,236,.5) 68%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.barre.sombre{background:linear-gradient(180deg,rgba(25,28,31,.88),rgba(25,28,31,.42) 68%,transparent);
  color:var(--lin)}
.barre.sombre .capitales{color:var(--olive-clair)}
.marque{font-family:var(--recit);font-size:clamp(1.1rem,2.2vw,1.4rem);
  letter-spacing:.01em;white-space:nowrap}
.marque i{font-style:italic;opacity:.72}
.faits{display:flex;gap:clamp(12px,2.2vw,26px);align-items:center;font-size:.8rem;
  opacity:.74;white-space:nowrap;overflow:hidden}
@media (max-width:900px){.faits span:nth-child(n+3){display:none}}
@media (max-width:620px){.faits{display:none}}
.devis{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--ardoise);color:var(--lin);font-weight:600;font-size:.88rem;
  padding:12px 22px;border-radius:2px;transition:background .2s}
.devis:hover{background:var(--olive)}
.barre.sombre .devis{background:var(--lin);color:var(--ardoise)}
.barre.sombre .devis:hover{background:var(--olive-clair)}

/* ---------- l'écran ---------- */
.ecran{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--barre-h) + 40px) 0 calc(var(--pied-h) + clamp(44px,7vh,90px));
  overflow:clip}
.ecran.nuit{background:var(--nuit);color:var(--lin)}
.ecran.nuit .dire{color:rgba(246,243,236,.76)}
.ecran.nuit .sur{color:var(--olive-clair)}
.enveloppe{width:min(100% - 52px,1280px);margin-inline:auto;position:relative;z-index:2}
@media (max-width:700px){.enveloppe{width:calc(100% - 34px)}}

/* =========================================================================
   1 · LA TABLE QUI SE REMPLIT  ·  la mécanique signature du site

   Un traiteur ne pense pas en pages, il pense en HEURES DE SERVICE. La piste
   traverse une soirée : la table dressée à vide, puis l'apéritif, le buffet,
   la pièce montée, les mignardises. L'heure avance dans le coin, les photos
   se relaient en fondu, et le récit change avec elles.

   Aucun film ici, donc aucun scrub : quatre images fixes qui se passent le
   relais coûtent trente fois moins cher qu'une vidéo, et le geste raconte
   mieux qu'un mouvement.
   ========================================================================= */
.piste-service{height:520vh;position:relative;background:var(--nuit)}
.service-colle{position:sticky;top:0;height:100svh;overflow:clip;background:var(--nuit)}

.plan{position:absolute;inset:0;opacity:var(--vu,0);
  transition:opacity .55s ease}
.plan img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1 + var(--zoom,0) * .06))}
.service-voile{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(98deg, rgba(20,22,25,.76) 0%, rgba(20,22,25,.48) 34%,
      rgba(20,22,25,.1) 62%, transparent 80%),
    linear-gradient(180deg, rgba(20,22,25,.5) 0%, transparent 26%,
      transparent 56%, rgba(20,22,25,.34) 88%, rgba(20,22,25,.5) 100%)}

/* L'HEURE · elle avance avec le service, en chiffres tabulaires pour que les
   colonnes ne dansent pas quand le nombre change. */
.horloge{position:absolute;z-index:4;
  left:max(calc((100vw - 1280px) / 2), 26px);
  top:calc(var(--barre-h) + clamp(26px,6vh,64px));
  font-family:var(--recit);font-size:clamp(2.4rem,4.6vw,3.8rem);
  color:var(--olive-clair);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1}
.horloge small{display:block;font-family:var(--interface);font-size:.7rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,243,236,.52);margin-top:10px}

.service-texte{position:absolute;z-index:4;
  left:max(calc((100vw - 1280px) / 2), 26px);right:auto;
  bottom:clamp(4.6rem,13vh,8rem);max-width:min(700px,54vw);color:var(--lin)}

/* L'OUVERTURE S'EFFACE QUAND LE PREMIER SERVICE ARRIVE.
   Sans cette règle, le script posait bien la variable mais rien ne l'écoutait :
   le titre restait en place et les moments s'écrivaient PAR-DESSUS. Une variable
   pilotée sans propriété qui la lit ne produit aucune erreur, juste un dégât
   silencieux. */
.ouverture{opacity:var(--vu,1);
  transform:translateY(calc((1 - var(--vu,1)) * -18px));
  transition:opacity .2s linear,transform .2s linear}
.ouverture[style*="--vu:0"]{pointer-events:none}

/* le titre d'arrivée tenait sur quatre lignes et remontait jusque sur
   l'horloge : il est calé sur la place réellement disponible. */
.service-texte .geant{font-size:clamp(2.5rem,6.2vw,4.9rem);max-width:15ch}
.service-texte .dire{max-width:36ch}
.service-texte h1,.service-texte h2{color:var(--lin);
  text-shadow:0 2px 30px rgba(0,0,0,.42)}
.service-texte .dire{color:rgba(246,243,236,.86);max-width:38ch;
  text-shadow:0 1px 16px rgba(0,0,0,.5)}
.service-texte .sur{color:var(--olive-clair)}

.moment{position:absolute;left:0;right:0;bottom:0;
  opacity:var(--vu,0);transform:translateY(calc((1 - var(--vu,0)) * 22px));
  transition:opacity .12s linear,transform .12s linear;pointer-events:none}
.moment.vu{pointer-events:auto}
.moment h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.04;margin-bottom:.5rem}
.moment p{font-size:clamp(1rem,1.34vw,1.16rem);line-height:1.58;max-width:40ch;
  color:rgba(246,243,236,.84);text-shadow:0 1px 16px rgba(0,0,0,.55)}

.invite{position:absolute;left:50%;bottom:calc(var(--pied-h) + 18px);translate:-50% 0;
  z-index:4;font-family:var(--interface);font-size:.68rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(246,243,236,.55);
  opacity:var(--invite-op,1);transition:opacity .3s}

/* le pied de la scène rejoint le lin de l'écran suivant : sans lui, la coupure
   entre le sombre et le clair se voit. */
.service-colle::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  z-index:5;pointer-events:none;opacity:var(--fin,0);
  background:linear-gradient(180deg,
    rgba(246,243,236,0) 0%, rgba(246,243,236,.55) 46%, var(--lin) 100%)}

@media (max-width:1100px){
  .service-texte{max-width:min(520px,64vw)}
  .moment h2{font-size:clamp(1.9rem,4.4vw,2.6rem)}
}
@media (max-width:860px){
  .service-texte{left:17px;right:17px;max-width:none;
    bottom:calc(var(--pied-h) + 30px)}
  .horloge{left:17px;font-size:clamp(2rem,9vw,2.6rem)}
  .service-voile{background:
    linear-gradient(180deg,rgba(20,22,25,.66) 0%,rgba(20,22,25,.24) 20%,
      rgba(20,22,25,.55) 38%,rgba(20,22,25,.72) 58%,rgba(20,22,25,.82) 100%)}
  /* l'olive clair du sur-titre ne tient pas sur une nappe blanche : mesuré à
     2,8:1 au doigt. Il passe au lin, avec une ombre serrée. */
  .service-texte .sur{color:var(--lin);
    text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 18px rgba(0,0,0,.5)}
  .invite{display:none}
  /* la barre d'appel porte déjà les deux mêmes gestes en bas de l'écran :
     répéter le second ici l'envoyait dessous, à moitié caché. */
  .ouverture .actions .bt-ligne{display:none}
  .service-texte .geant{font-size:clamp(2rem,8vw,2.7rem)}
}
@media (prefers-reduced-motion:reduce){
  .piste-service{height:auto}
  .service-colle{position:static;height:auto;padding:calc(var(--barre-h) + 60px) 0 60px}
  .plan{position:relative;inset:auto;opacity:1;height:52svh;margin-bottom:20px}
  .service-texte{position:relative;bottom:auto;left:auto;max-width:none;
    width:min(100% - 52px,1280px);margin-inline:auto}
  .moment{position:relative;opacity:1;transform:none;margin-top:24px}
  .horloge{position:relative;top:auto;left:auto;
    width:min(100% - 52px,1280px);margin:0 auto 18px}
  .invite{display:none}
}

/* =========================================================================
   2 · CE QU'ELLE FAIT · trois colonnes, sans cartes
   Une bordure et une ombre disent « objet séparé » : ici ce sont trois
   facettes d'un même métier, elles n'ont pas à être encadrées.
   ========================================================================= */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px);
  margin-top:clamp(30px,5vh,52px)}
.trois > div{padding-top:20px;border-top:1px solid rgba(34,37,42,.16)}
.ecran.nuit .trois > div{border-top-color:rgba(246,243,236,.2)}
.trois h3{font-size:clamp(1.3rem,2.2vw,1.72rem);margin-bottom:.5rem}
.trois p{font-size:.96rem;line-height:1.58;color:var(--ardoise-doux)}
.ecran.nuit .trois p{color:rgba(246,243,236,.76)}
@media (max-width:860px){.trois{grid-template-columns:1fr;gap:26px}}

/* =========================================================================
   3 · LES FORMULES · un tableau, parce que c'en est un
   Les prix se comparent ligne à ligne : une grille de cartes obligerait
   l'œil à faire des allers-retours pour la même information.
   ========================================================================= */
/* DEUX COLONNES PLUTÔT QU'UNE PILE. Empilées, les quatre formules débordaient
   de l'écran ; et la comparaison ligne à ligne, qui justifie une liste, n'a ici
   qu'un intérêt limité : deux formules seulement portent un nombre de pièces. */
.formules{margin-top:clamp(20px,2.8vh,32px);
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,64px);
  border-top:1px solid rgba(34,37,42,.18)}
@media (max-width:860px){.formules{grid-template-columns:1fr}}
.ecran.nuit .formules{border-top-color:rgba(246,243,236,.22)}
.formule{display:grid;grid-template-columns:1fr auto;gap:12px 26px;
  align-items:baseline;padding:clamp(12px,1.8vh,18px) 0;
  border-bottom:1px solid rgba(34,37,42,.12)}
.ecran.nuit .formule{border-bottom-color:rgba(246,243,236,.16)}
.formule h3{font-size:clamp(1.24rem,2vw,1.6rem)}
.formule p{font-size:.94rem;color:var(--ardoise-doux);margin-top:.3rem;max-width:52ch}
.ecran.nuit .formule p{color:rgba(246,243,236,.74)}
.formule .prix{font-family:var(--recit);font-size:clamp(1.2rem,2vw,1.55rem);
  color:var(--laiton);white-space:nowrap;font-variant-numeric:tabular-nums}
.formule .prix i{display:block;font-style:normal;font-family:var(--interface);
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ardoise-doux);margin-top:5px;text-align:right}
.ecran.nuit .formule .prix i{color:rgba(246,243,236,.6)}
@media (max-width:620px){
  .formule{grid-template-columns:1fr}
  .formule .prix{text-align:left}
  .formule .prix i{text-align:left}
}

/* =========================================================================
   4 · LE DEVIS QUI SE CALCULE · le geste gratuit du site
   ========================================================================= */
/* LE CALCULATEUR VIENT À CÔTÉ DU TEXTE, pas dessous. Empilé, l'ensemble
   mesurait 885 px pour 679 disponibles et débordait de deux cents pixels ;
   or l'écran fait 1280 px de large et la moitié restait vide. */
.devis-grille{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px);align-items:start}
.devis-mots .dire{max-width:36ch}
@media (max-width:960px){
  .devis-grille{grid-template-columns:1fr;gap:clamp(24px,4vh,38px)}
}
.compteur{margin-top:0;max-width:none}
.ligne-compteur{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  font-family:var(--recit);font-size:clamp(1.3rem,2.6vw,2rem)}
.ligne-compteur input{width:4.2ch;background:transparent;border:0;
  border-bottom:1px solid var(--laiton);color:var(--laiton);
  font-family:var(--recit);font-size:inherit;text-align:center;padding:2px 0;
  font-variant-numeric:tabular-nums}
.ligne-compteur input:focus-visible{outline:2px solid var(--olive-clair);
  outline-offset:3px;border-radius:1px}
.reponse{margin-top:clamp(22px,3.4vh,34px);padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(246,243,236,.2)}
/* trois quantités alignées plutôt qu'une phrase : les chiffres se comparent
   ligne à ligne, et le bloc ne déborde plus sous le pied de page. */
.quantites{margin:0;display:grid;gap:clamp(10px,1.6vh,16px)}
.quantites > div{display:grid;grid-template-columns:8.5rem 1fr;gap:8px 18px;
  align-items:baseline;padding-bottom:clamp(9px,1.4vh,13px);
  border-bottom:1px solid rgba(246,243,236,.13)}
.quantites dt{font-family:var(--interface);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(246,243,236,.55)}
.quantites dd{margin:0;font-family:var(--recit);font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.16;color:var(--laiton)}
@media (max-width:560px){.quantites > div{grid-template-columns:1fr}}
.reponse .note{font-size:.92rem;color:rgba(246,243,236,.7);margin-top:.7rem;max-width:44ch}

/* =========================================================================
   5 · LE RAIL DES LIEUX
   ========================================================================= */
.rail-piste{height:300vh;position:relative;background:var(--lin)}
.rail-colle{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(20px,3.4vh,40px);overflow:hidden;
  padding:calc(var(--barre-h) + 24px) 0 calc(var(--pied-h) + 30px)}
.rail-titre{padding:0 clamp(26px,8vw,12vw)}
.rail{display:flex;gap:clamp(16px,2.4vw,30px);width:max-content;align-items:flex-start;
  padding:0 clamp(26px,8vw,12vw);transform:translate3d(var(--g,0px),0,0);will-change:transform}
.vue{flex:0 0 auto}
.vue .cadre{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--lin-2);
  height:clamp(220px, calc(100svh - 430px), 420px);width:auto}
.vue img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.25,1)}
.vue figcaption{margin-top:13px;font-family:var(--recit);font-style:italic;
  font-size:1.1rem}
.vue .quoi{font-size:.88rem;color:var(--ardoise-doux);margin-top:3px}
@media (hover:hover) and (pointer:fine){
  .vue:hover img{transform:scale(1.05)}
}
@media (max-width:860px){
  .rail-piste{height:auto;padding:clamp(66px,10vh,104px) 17px calc(var(--pied-h) + 44px)}
  .rail-colle{position:static;height:auto;padding:0;gap:26px}
  .rail-titre{padding:0}
  .rail{flex-direction:column;width:100%;padding:0;gap:28px;transform:none}
  .vue{width:100%}
  .vue .cadre{height:auto;width:100%}
}

/* =========================================================================
   6 · LES ÉTAPES, LES QUESTIONS, LE PIED
   ========================================================================= */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(30px,5vh,52px);counter-reset:pas}
.etape{padding-top:18px;border-top:1px solid rgba(246,243,236,.22)}
.etape::before{counter-increment:pas;content:counter(pas,decimal-leading-zero);
  display:block;font-family:var(--recit);font-style:italic;font-size:1.5rem;
  color:var(--olive-clair);margin-bottom:8px}
.etape h3{font-size:1.1rem;margin-bottom:.4rem}
.etape p{font-size:.92rem;line-height:1.55;color:rgba(246,243,236,.76)}
@media (max-width:900px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.etapes{grid-template-columns:1fr}}

.questions{margin-top:clamp(26px,4vh,42px);border-top:1px solid rgba(34,37,42,.16)}
.q{border-bottom:1px solid rgba(34,37,42,.12)}
.q summary{list-style:none;cursor:pointer;padding:clamp(16px,2.4vh,22px) 0;
  font-family:var(--recit);font-size:clamp(1.14rem,1.9vw,1.44rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:var(--interface);font-size:1.1rem;
  color:var(--laiton);flex:none;transition:transform .25s}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding-bottom:clamp(16px,2.4vh,22px);font-size:.98rem;line-height:1.62;
  color:var(--ardoise-doux);max-width:64ch}

.pied{background:var(--nuit);color:var(--lin);
  padding:clamp(52px,8vh,90px) 0 calc(var(--pied-h) + 40px)}
.pied-haut{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
.pied h3{font-size:1.1rem;margin-bottom:.7rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  font-size:.94rem;color:rgba(246,243,236,.76)}
.pied a:hover{color:var(--olive-clair)}
.pied-bas{margin-top:clamp(34px,5vh,60px);padding-top:22px;
  border-top:1px solid rgba(246,243,236,.16);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:.82rem;color:rgba(246,243,236,.58)}
@media (max-width:860px){.pied-haut{grid-template-columns:1fr;gap:30px}}

/* ---------- les chapitres, la jauge, l'appel au doigt ---------- */
.chapitres{position:fixed;left:0;right:0;bottom:0;height:var(--pied-h);z-index:80;
  display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;
  gap:clamp(14px,2.4vw,30px);padding:0 clamp(18px,2.6vw,32px);
  background:rgba(25,28,31,.92);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}
.chapitres::-webkit-scrollbar{display:none}
.chapitres a{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
  font-size:.82rem;color:rgba(246,243,236,.5);transition:color .25s}
.chapitres a .n{font-family:var(--recit);font-style:italic;font-size:.94rem}
.chapitres a.ici{color:var(--lin)}
.chapitres a.ici .n{color:var(--olive-clair)}
.jauge{position:fixed;left:0;bottom:var(--pied-h);height:2px;z-index:81;
  background:var(--olive-clair);width:var(--j,0%);transition:width .1s linear}
.action-tel{position:fixed;left:0;right:0;bottom:0;z-index:82;display:none;gap:9px;
  padding:10px 13px calc(10px + env(safe-area-inset-bottom));
  background:rgba(25,28,31,.95);backdrop-filter:blur(14px)}
.action-tel .bt{flex:1;padding:15px 10px}
.action-tel .bt-ligne{color:var(--lin);border-color:rgba(246,243,236,.34)}
@media (max-width:860px){
  .action-tel{display:flex}.chapitres{display:none}
  .jauge{bottom:calc(var(--pied-h) + 6px)}:root{--pied-h:66px}
}

/* ---------- le mouvement · rien n'est masqué sans la classe js ---------- */
.js [data-monte]{opacity:0;transform:translateY(20px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms)}
.js .vu[data-monte]{opacity:1;transform:none}
.js [data-reveler]{opacity:0;transform:translateY(26px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.16,.84,.3,1)}
.js .vu[data-reveler]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-monte],.js [data-reveler]{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}