/* =========================================================================
   Julien · artisan à Pontault-Combault
   Charte du book : Newsreader pour le récit, Inter Tight pour l'interface.
   Principe repris de Lieusaint et Matins Lents : PLEIN ÉCRAN, une idée par
   écran, le texte posé sur l'image, aucune carte blanche flottante.
   ========================================================================= */

@font-face{font-family:'Newsreader';src:url('fonts/newsreader-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-300i.woff2') format('woff2');
  font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('fonts/inter-tight.woff2') format('woff2-variations');
  font-weight:300 700;font-display:swap}

:root{
  --nuit:#1A1712;
  --nuit-2:#241F19;
  --jour:#F2EFE9;
  --jour-2:#E7E2D8;
  --encre:#241F19;
  --encre-doux:#5A5248;
  --chene:#C5BEB0;
  --cuivre:#B87438;
  --teal:#1E7F85;
  --teal-clair:#63C2C7;
  --barre-h:clamp(52px,7.2vw,60px);
  --pied-h:clamp(46px,6vw,54px);
  --r:14px;
  --recit:'Newsreader',Georgia,serif;
  --interface:'Inter Tight',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--jour);
  font-family:var(--interface);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--recit);font-weight:300;line-height:1.02;
  letter-spacing:-.012em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--teal-clair);outline-offset:4px;border-radius:3px}

.ital{font-style:italic;color:var(--chene)}
.enveloppe{width:min(100% - 48px,1240px);margin-inline:auto}
@media (max-width:700px){.enveloppe{width:calc(100% - 34px)}}

/* ---------- barre du haut · fine, les faits, un bouton ---------- */
.barre{position:fixed;top:0;left:0;right:0;height:var(--barre-h);z-index:80;
  display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);
  padding:0 clamp(16px,2.4vw,28px);
  background:linear-gradient(180deg,rgba(26,23,18,.82),rgba(26,23,18,.34) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--jour)}
.barre.clair{background:linear-gradient(180deg,rgba(242,239,233,.9),rgba(242,239,233,.4) 70%,transparent);
  color:var(--encre)}
.sceau{width:30px;height:30px;border-radius:8px;border:1.5px solid currentColor;
  display:grid;place-items:center;font-family:var(--recit);font-size:.95rem;flex:0 0 auto;opacity:.9}
.barre .nom{font-family:var(--recit);font-size:clamp(1.02rem,2vw,1.24rem);font-weight:400;
  letter-spacing:-.01em;white-space:nowrap}
.faits{display:flex;gap:clamp(10px,2vw,26px);align-items:center;font-size:.86rem;
  opacity:.72;white-space:nowrap;overflow:hidden}
.faits span{position:relative;padding-left:clamp(10px,2vw,26px)}
.faits span::before{content:"";position:absolute;left:0;top:50%;width:1px;height:13px;
  translate:0 -50%;background:currentColor;opacity:.3}
@media (max-width:860px){.faits span:nth-child(n+3){display:none}}
@media (max-width:560px){.faits{display:none}}
.appel{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#fff;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:11px 18px;border-radius:999px;transition:background .2s,transform .16s}
.appel:hover{background:#166A70;transform:translateY(-1px)}

/* ---------- l'écran · l'unité de base du site ---------- */
.ecran{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--barre-h) + 30px) 0 calc(var(--pied-h) + clamp(38px,7vh,86px));
  overflow:clip}
/* un écran dense se cale en haut et respire moins : le contenu prime */
.ecran.dense{align-items:flex-start;padding-top:calc(var(--barre-h) + clamp(28px,5vh,60px));
  min-height:auto}
/* un écran dense posé sur une photo a besoin d'un fond plus franc que les autres :
   il porte du texte long, pas une phrase */
.ecran.dense > .fond::after{
  background:
    linear-gradient(180deg,rgba(20,17,13,.72) 0%,rgba(20,17,13,.78) 34%,
      rgba(20,17,13,.86) 70%,rgba(26,23,18,.96) 100%),
    linear-gradient(90deg,rgba(20,17,13,.5) 0%,rgba(20,17,13,.2) 60%,transparent 100%)}
.ecran.dense .bloc p,.ecran.dense .attente-diag{opacity:.95}
.attente-diag{opacity:.95}
.ecran.centre{align-items:center}
.fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.fond img{width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,calc(var(--gl,0) * 1px),0) scale(1.08);will-change:transform}
/* le voile ne coupe jamais : il meurt par un dégradé, jamais sur une arête */
.fond::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,23,18,.72) 0%,rgba(26,23,18,.2) 26%,
      rgba(26,23,18,.58) 60%,rgba(26,23,18,.94) 100%),
    linear-gradient(90deg,rgba(26,23,18,.78) 0%,rgba(26,23,18,.42) 42%,transparent 78%)}
.ecran > .enveloppe{position:relative;z-index:2}

/* ---------- le récit ---------- */
.sur-titre{font-family:var(--interface);font-size:.74rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;opacity:.62;margin-bottom:clamp(14px,2.4vh,26px);display:block}
.geant{font-size:clamp(2.6rem,7.4vw,5.6rem)}
.grand{font-size:clamp(2.1rem,5.4vw,4.1rem)}
.dire{font-size:clamp(1.04rem,1.5vw,1.24rem);line-height:1.55;max-width:46ch;
  margin-top:clamp(18px,2.6vh,28px);opacity:.86}
.ecran.jour{background:var(--jour);color:var(--encre)}
.ecran.jour .dire{opacity:1;color:var(--encre-doux)}
.ecran.jour .sur-titre{color:var(--teal);opacity:1}

/* ---------- boutons ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--interface);font-weight:600;font-size:.97rem;text-decoration:none;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s,background .2s,border-color .2s}
.bt:hover{transform:translateY(-1px)}
.bt-plein{background:var(--teal);color:#fff}
.bt-plein:hover{background:#166A70}
.bt-clair{background:var(--jour);color:var(--nuit)}
.bt-ligne{border-color:rgba(242,239,233,.34);color:var(--jour)}
.bt-ligne:hover{border-color:var(--jour)}
.jour .bt-ligne{border-color:rgba(36,31,25,.24);color:var(--encre)}
.jour .bt-ligne:hover{border-color:var(--encre)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3.4vh,38px)}

/* ---------- la barre de chapitres · reprise de Lieusaint ---------- */
.chapitres{position:fixed;left:0;right:0;bottom:0;height:var(--pied-h);z-index:80;
  display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;
  background:rgba(26,23,18,.9);backdrop-filter:blur(14px);
  border-top:1px solid rgba(242,239,233,.12);
  padding:0 clamp(12px,2vw,22px) env(safe-area-inset-bottom)}
.chapitres::-webkit-scrollbar{display:none}
.chapitres a{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;
  padding:0 clamp(11px,1.5vw,18px);text-decoration:none;font-size:.83rem;
  color:rgba(242,239,233,.5);transition:color .22s;white-space:nowrap;height:100%;
  align-items:center}
.chapitres a:hover{color:var(--jour)}
.chapitres a .num{font-family:var(--recit);font-size:.9rem;opacity:.62}
.chapitres a.ici{color:var(--jour)}
.chapitres a.ici .num{color:var(--teal-clair);opacity:1}
.jauge{position:fixed;left:0;bottom:var(--pied-h);height:2px;z-index:81;
  background:var(--teal-clair);width:calc(var(--avance,0) * 100%);
  transition:width .12s linear}

/* ---------- le diagnostic ---------- */
.diag{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);margin-top:clamp(26px,4vh,44px);align-items:start}
@media (max-width:900px){.diag{grid-template-columns:minmax(0,1fr)}}
/* PIÈGE CORRIGÉ · un scroll interne coupait la liste en plein milieu d'un
   symptôme. Un écran a le droit d'être plus haut que la fenêtre ; un contenu
   tranché net, non. */
.symptomes{display:flex;flex-direction:column;gap:7px}
.fam{font-family:var(--interface);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;opacity:.45;margin:13px 0 3px}
.fam:first-child{margin-top:0}
.symp{text-align:left;font:inherit;font-size:.95rem;cursor:pointer;
  background:rgba(242,239,233,.06);border:1px solid rgba(242,239,233,.14);
  border-radius:11px;padding:12px 15px;color:var(--jour);
  transition:background .18s,border-color .18s,transform .18s;
  display:flex;gap:10px;align-items:center}
.symp:hover{background:rgba(242,239,233,.12);border-color:rgba(242,239,233,.3);transform:translateX(3px)}
.symp[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.symp i{width:6px;height:6px;border-radius:50%;background:var(--teal-clair);flex:0 0 auto}
.symp[aria-pressed="true"] i{background:#fff}
.fiche{border-left:1px solid rgba(242,239,233,.16);padding-left:clamp(18px,2.6vw,34px);
  min-height:330px;transition:opacity .26s}
.fiche.change{opacity:0}
@media (max-width:900px){.fiche{border-left:0;border-top:1px solid rgba(242,239,233,.16);
  padding:24px 0 0;min-height:0}}
.urgence{display:inline-block;font-family:var(--interface);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:16px}
.u-haute{background:rgba(184,116,56,.22);color:#E3A468}
.u-moyenne{background:rgba(197,190,176,.16);color:var(--chene)}
.u-basse{background:rgba(99,194,199,.16);color:var(--teal-clair)}
.bloc{margin-top:20px}
.bloc h4{font-family:var(--interface);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5;margin:0 0 7px}
.bloc p{font-size:1rem;line-height:1.55;opacity:.88;max-width:56ch}
.gratuit{margin-top:20px;padding:16px 18px;border-radius:12px;
  background:rgba(30,127,133,.16);border:1px solid rgba(99,194,199,.28)}
.gratuit h4{color:var(--teal-clair);opacity:1}
.gratuit p{opacity:1}
.attente-diag{opacity:.62;font-size:1.02rem;max-width:44ch;line-height:1.6}
.attente-diag b{opacity:1;font-weight:600}

/* ---------- le rail des métiers ---------- */
.rail-piste{height:250vh;position:relative;background:var(--nuit)}
.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) + 20px) 0 calc(var(--pied-h) + 26px)}
.rail-titre{padding:0 clamp(24px,8vw,12vw);flex:0 0 auto}
.rail-titre .grand{font-size:clamp(1.9rem,4.4vw,3.2rem)}
@media (max-width:860px){.rail-titre{padding:0}}
.rail{display:flex;gap:clamp(14px,2vw,26px);width:max-content;
  padding:0 clamp(24px,8vw,12vw);align-items:center;
  transform:translate3d(var(--g,0px),0,0);will-change:transform}
.metier{flex:0 0 auto;width:clamp(240px,24vw,340px);position:relative;
  border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  max-height:min(62vh,560px)}
.metier img{width:100%;height:100%;object-fit:cover}
.metier .txt{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,26px);
  background:linear-gradient(180deg,transparent,rgba(26,23,18,.9) 62%)}
.metier h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:7px}
.metier p{font-size:.92rem;opacity:.78;line-height:1.45}
.metier a{position:absolute;inset:0;z-index:2}
@media (max-width:860px){
  .rail-piste{height:auto;padding:clamp(64px,10vh,100px) 17px calc(var(--pied-h) + 40px)}
  .rail-colle{position:static;height:auto;padding:0;gap:24px}
  .rail{flex-direction:column;width:100%;padding:0;gap:14px;transform:none}
  .metier{width:100%;aspect-ratio:16/10}
}

/* ---------- deux colonnes de comparaison ---------- */
.face{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(28px,4vh,46px)}
@media (max-width:760px){.face{grid-template-columns:1fr}}
.face > div{padding:clamp(20px,2.4vw,30px);border-radius:var(--r)}
.f-eux{background:rgba(36,31,25,.05);border:1px solid rgba(36,31,25,.12)}
.f-lui{background:rgba(30,127,133,.08);border:1px solid rgba(30,127,133,.26)}
.face h3{font-size:1.14rem;margin-bottom:14px}
.face ol{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:9px;
  font-size:.97rem;color:var(--encre-doux)}
.f-lui ol{color:var(--encre)}

/* ---------- les communes ---------- */
.communes{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3.4vh,38px);max-width:1000px}
.commune{border:1px solid rgba(242,239,233,.2);border-radius:999px;padding:8px 15px;
  font-size:.9rem;display:inline-flex;gap:8px;align-items:baseline}
.commune em{font-style:normal;color:var(--teal-clair);font-size:.82rem}
.jour .commune{border-color:rgba(36,31,25,.16)}
.jour .commune em{color:var(--teal)}

/* ---------- ce que je ne fais pas ---------- */
.refus{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);
  margin-top:clamp(26px,4vh,42px)}
@media (max-width:820px){.refus{grid-template-columns:1fr}}
.refus > div{padding-top:20px;border-top:1px solid rgba(242,239,233,.18)}
.refus h3{font-size:1.16rem;margin-bottom:9px}
.refus p{font-size:.95rem;opacity:.78;line-height:1.5}
.refus .vers{margin-top:11px;font-size:.92rem;opacity:1}
.refus .vers b{color:var(--teal-clair);font-weight:600}

/* ---------- portes et formulaire ---------- */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);
  margin-top:clamp(26px,4vh,40px)}
@media (max-width:860px){.portes{grid-template-columns:1fr}}
.porte{padding:clamp(20px,2.2vw,26px);border-radius:var(--r);
  background:rgba(242,239,233,.06);border:1px solid rgba(242,239,233,.15);
  display:flex;flex-direction:column;gap:10px;transition:background .2s,transform .2s}
.porte:hover{background:rgba(242,239,233,.1);transform:translateY(-3px)}
.porte .quand{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-clair)}
.porte h3{font-size:1.18rem}
.porte p{font-size:.93rem;opacity:.74;flex:1;line-height:1.45}
.porte .bt{width:100%;margin-top:6px}

.form{margin-top:clamp(28px,4vh,44px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:860px}
@media (max-width:700px){.form{grid-template-columns:minmax(0,1fr)}}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1/-1}
.champ label{font-size:.85rem;font-weight:500;opacity:.8}
.champ .aide{opacity:.5;font-weight:400}
.champ .aide::before{content:"· "}
.champ input,.champ select,.champ textarea{font:inherit;font-size:.98rem;padding:12px 14px;
  border-radius:10px;background:rgba(242,239,233,.07);color:var(--jour);
  border:1px solid rgba(242,239,233,.18);width:100%;transition:border-color .18s,background .18s}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--teal-clair);background:rgba(242,239,233,.11);outline:none}
.champ textarea{min-height:96px;resize:vertical}
.champ select option{background:var(--nuit)}
.recu{grid-column:1/-1;padding:15px 18px;border-radius:11px;font-size:.96rem;
  background:rgba(30,127,133,.16);border:1px solid rgba(99,194,199,.3)}
.recu[hidden]{display:none}

/* ---------- questions ---------- */
.questions{margin-top:clamp(24px,3.4vh,40px);max-width:840px}
.q{border-top:1px solid rgba(36,31,25,.14)}
.q summary{cursor:pointer;padding:17px 0;font-family:var(--recit);font-size:1.14rem;
  font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:var(--interface);font-size:1.3rem;color:var(--teal);
  transition:rotate .2s;flex:0 0 auto}
.q[open] summary::after{rotate:45deg}
.q p{padding-bottom:19px;font-size:.98rem;color:var(--encre-doux);max-width:68ch;line-height:1.55}

/* ---------- pied ---------- */
.pied{background:var(--nuit-2);padding:clamp(48px,7vh,84px) 0 calc(var(--pied-h) + 40px);
  font-size:.94rem}
.pied-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
@media (max-width:760px){.pied-in{grid-template-columns:1fr;gap:26px}}
.pied h4{font-family:var(--recit);font-size:1.06rem;font-weight:400;margin-bottom:12px}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pied a{text-decoration:none;opacity:.66;transition:opacity .18s}
.pied a:hover{opacity:1}
.pied p{opacity:.66;line-height:1.55}
.pied .tel{color:var(--teal-clair);font-weight:600;opacity:1;text-decoration:none}
.pied-bas{margin-top:34px;padding-top:20px;border-top:1px solid rgba(242,239,233,.12);
  font-size:.82rem;opacity:.45;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* =========================================================================
   LE MOUVEMENT · rien n'est masqué tant que le script n'a pas posé .js
   ========================================================================= */
/* ---------- LE ZOOM AU DÉFILEMENT ----------
   Le titre grandit pendant qu'il traverse l'écran. --zz va de 0 à 1, posé par
   le moteur : c'est du défilement, pas une transition d'entrée qui se joue une
   fois puis s'arrête. */
/* le bloc ENTIER grandit : sur-titre, titre, texte et boutons ensemble, comme
   une section qui s'approche. Le pivot est sur la marge gauche pour que le texte
   reste aligné pendant qu'il grandit. */
[data-zoom]{transform:scale(calc(.93 + var(--zz,1) * .07));
  transform-origin:0% 50%;will-change:transform}
@media (max-width:700px){[data-zoom]{transform:scale(calc(.96 + var(--zz,1) * .04))}}
@media (prefers-reduced-motion:reduce){[data-zoom]{transform:none}}

/* PIÈGE CORRIGÉ · overflow:hidden coupe dans les DEUX axes. Une italique déborde
   de sa boîte sur la droite : le jambage du « d » de standard était tranché net.
   On élargit la boîte à droite et on annule par une marge : la coupe verticale
   qui fait la révélation reste intacte, le débordement latéral passe. */
.mot{display:inline-block;overflow:hidden;vertical-align:top;
  padding-right:.16em;margin-right:-.16em;
  padding-left:.03em;margin-left:-.03em}
.mot > span{display:inline-block;transform:translateY(var(--ty,0));opacity:var(--op,1);
  transition:transform .9s cubic-bezier(.16,.84,.3,1),opacity .7s ease;
  transition-delay:var(--d,0ms)}
.js .mot > span{--ty:110%;--op:0}
.js .vu .mot > span{--ty:0%;--op:1}
.js [data-monte]{opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms)}
.js .vu [data-monte],.js [data-monte].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .mot > span{--ty:0%;--op:1}
  .js [data-monte]{opacity:1;transform:none}
  .fond img{transform:none}
}

/* =========================================================================
   CONVERSION
   Trois faits mesurés commandent tout ce bloc :
   · un appel converti à 46 %, contre 7,8 % tous canaux confondus ;
   · trois visiteurs sur quatre sont sur un téléphone ;
   · 47 % des particuliers comparent deux ou trois artisans, et celui qui
     répond le premier l'emporte. Le délai de rappel est donc un argument,
     pas un détail, et il s'affiche à côté de chaque bouton d'appel.
   ========================================================================= */

/* ---------- le rappel de délai, collé sous les boutons ---------- */
.delai{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;opacity:.72;
  margin-top:14px}
.delai::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-clair);
  box-shadow:0 0 0 4px rgba(99,194,199,.2);flex:0 0 auto;
  animation:pouls 2.6s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.delai::before{animation:none}}
.jour .delai{opacity:.8}
.jour .delai::before{background:var(--teal)}

/* ---------- le bouton d'appel de la barre, plus présent ---------- */
.appel{padding:13px 22px;font-size:.98rem;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 4px 16px -6px rgba(30,127,133,.7)}
.appel .tel-mot{display:none}
@media (min-width:900px){.appel .tel-mot{display:inline}}

/* ---------- la bande de rappel entre deux écrans ---------- */
.bande{background:var(--teal);color:#fff;padding:clamp(20px,3vw,30px) 0}
.bande .enveloppe{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.bande p{font-family:var(--recit);font-size:clamp(1.16rem,2.2vw,1.6rem);
  font-weight:300;letter-spacing:-.012em;max-width:38ch}
.bande .bt-clair{background:#fff;color:var(--teal);font-weight:700}
.bande .bt-clair:hover{background:#EAF6F6}

/* ---------- sur téléphone, la barre du bas sert à APPELER ----------
   Les chapitres sont un confort de grand écran. Au doigt, le geste utile
   est l'appel : la barre devient donc deux boutons, pleine largeur. */
.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(26,23,18,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(242,239,233,.14)}
.action-tel .bt{flex:1;padding:15px 10px;font-size:1rem}
.action-tel .bt-plein{flex:1.5}
@media (max-width:860px){
  .action-tel{display:flex}
  .chapitres{display:none}
  .jauge{bottom:calc(var(--pied-h) + 6px)}
  :root{--pied-h:66px}
}

/* ---------- formulaire : ce qui est obligatoire d'abord ---------- */
.form-plus{grid-column:1/-1;border:0;padding:0;margin:2px 0 0}
.form-plus summary{cursor:pointer;list-style:none;font-size:.92rem;opacity:.72;
  display:inline-flex;align-items:center;gap:8px;padding:6px 0}
.form-plus summary::-webkit-details-marker{display:none}
.form-plus summary::after{content:"+";font-size:1.15rem;color:var(--teal-clair)}
.form-plus[open] summary::after{content:"−"}
.form-plus summary:hover{opacity:1}
.form-plus .champs-plus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:14px}
@media (max-width:700px){.form-plus .champs-plus{grid-template-columns:minmax(0,1fr)}}
.form-note{grid-column:1/-1;font-size:.86rem;opacity:.6;max-width:52ch}

/* =========================================================================
   LE FILM DU HÉROS
   Le mur filmé est blanc : mesuré à 158/255 de moyenne sous le texte, avec des
   pics à 228. Un voile ordinaire ne suffit pas. Celui-ci est calculé pour
   ramener la zone du texte sous 85, et il MEURT par un dégradé : jamais d'arête.
   ========================================================================= */
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--nuit);object-position:50% 50%}
/* en portrait, un 16/9 rogné au centre ne montre que le mur : on descend le
   cadrage sur les mains, qui sont le sujet */
@media (max-width:860px){.film{object-position:46% 62%}}
.fond-film::after{
  background:
    /* protège la colonne de texte, et laisse le geste visible à droite */
    /* 66 % au plus fort : mesuré, le fond passe à 78/255, soit 8,4:1 de contraste
       pour du texte blanc. Au-delà on noie la vidéo sans rien gagner en lisibilité. */
    linear-gradient(100deg,rgba(20,17,13,.66) 0%,rgba(20,17,13,.58) 30%,
      rgba(20,17,13,.26) 62%,rgba(20,17,13,.04) 90%,transparent 100%),
    /* assied le bas de l'écran sur le fond de page */
    linear-gradient(180deg,rgba(20,17,13,.42) 0%,rgba(20,17,13,.06) 24%,
      rgba(20,17,13,.3) 66%,rgba(26,23,18,.94) 100%)}
/* au doigt, la colonne fait toute la largeur : le voile devient vertical,
   sinon il noierait l'image sans protéger la ligne de texte */
@media (max-width:860px){
  .fond-film::after{
    background:linear-gradient(180deg,rgba(20,17,13,.5) 0%,rgba(20,17,13,.22) 18%,
      rgba(20,17,13,.66) 50%,rgba(26,23,18,.96) 100%)}
}
@media (prefers-reduced-motion:reduce){.film{display:none}}


/* =========================================================================
   LA LAMPE
   Sur l'écran clair, une lueur chaude respire lentement, comme une ampoule
   qu'on vient d'allumer. C'est le seul ornement du site, et il dit le métier.
   Tout en CSS : aucune image, aucun canvas, aucun coût de chargement.
   ========================================================================= */
.lampe{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* posée dans le vide à droite du texte, jamais derrière lui */
.lampe::before,.lampe::after{content:"";position:absolute;border-radius:50%;
  left:72%;top:48%;translate:-50% -50%}
/* le cœur : chaud, celui d'un filament qui monte en température */
.lampe::before{width:min(46vw,520px);aspect-ratio:1;
  background:radial-gradient(circle,
    rgba(255,222,170,.95) 0%, rgba(255,198,120,.72) 12%,
    rgba(250,176,96,.38) 30%, rgba(226,158,100,.14) 52%, transparent 72%);
  filter:blur(18px);
  animation:respire 9.5s ease-in-out infinite}
/* le halo froid : il tient la lueur dans la palette du site */
.lampe::after{width:min(80vw,880px);aspect-ratio:1;
  background:radial-gradient(circle,
    rgba(99,194,199,.26) 0%, rgba(30,127,133,.13) 36%, transparent 66%);
  filter:blur(40px);
  animation:respire 9.5s ease-in-out infinite reverse;
  animation-delay:-2.4s}
@media (max-width:860px){
  .lampe::before,.lampe::after{left:76%;top:24%}
  .lampe::before{width:min(70vw,340px)}
  .lampe::after{width:min(110vw,520px)}
}
@keyframes respire{
  0%,100%{transform:scale(.86);opacity:.42}
  50%    {transform:scale(1.1);opacity:1}
}
.ecran.jour .enveloppe{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .lampe::before,.lampe::after{animation:none;opacity:.72}
}

/* ---------- les symptômes se posent un par un ----------
   MÉCANIQUE INVERSÉE, et c'est le point important : l'état masqué n'est posé
   QUE par le script, juste avant de révéler. Sans JavaScript, sans observateur,
   dans un onglet en arrière-plan ou si le minuteur est bridé, les encadrés sont
   simplement là, normaux et lisibles. Une animation ne doit jamais être la
   condition d'affichage du contenu : c'est ce qui les laissait coupés. */
.js .symp.avant{opacity:0;transform:translateX(-12px);
  /* CALCUL, pas au jugé · CSS place un masque plus large que sa boîte ainsi :
     décalage = (largeur_boîte - largeur_masque) x position%. Avec un masque à
     300 %, seule la plage 100% -> 0% est utilisable : à 100 % la carte lit la
     fin du dégradé (transparente, donc cachée), à 0 % elle lit le premier tiers
     (noir, donc visible en entier). Sortir de cette plage décale le masque DANS
     l'autre sens et tranche le côté gauche de la carte : c'est ce qui se voyait. */
  -webkit-mask-image:linear-gradient(104deg,#000 0 40%,rgba(0,0,0,.5) 56%,transparent 74%);
          mask-image:linear-gradient(104deg,#000 0 40%,rgba(0,0,0,.5) 56%,transparent 74%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:opacity .5s ease,transform .75s cubic-bezier(.16,.84,.3,1),
    -webkit-mask-position 1.2s cubic-bezier(.22,.7,.25,1),
    mask-position 1.2s cubic-bezier(.22,.7,.25,1);
  transition-delay:var(--d,0ms)}
.js .symp.avant.vu{opacity:1;transform:none;
  -webkit-mask-position:0% 0; mask-position:0% 0}
.js .fam.avant{opacity:0;transition:opacity .5s ease;transition-delay:var(--d,0ms)}
.js .fam.avant.vu{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .symp.avant,.js .fam.avant{opacity:1;transform:none;
    -webkit-mask-image:none;mask-image:none}
}
}