/* ═══════════════════════════════════════════════════════════════════════════
   EXODIASYNC — site vitrine. QUATRIEME DIRECTION, 19/09/2026.
   Les trois premieres ont ete refusees. Le fondateur a tranche :
   SOMBRE, avec de VRAIS effets 3D, des lumieres qui bougent, de la
   parallaxe, des transitions spectaculaires. Ses quatre griefs sur la
   precedente : les couleurs, la typographie, pas assez de mouvement,
   « ca fait vieux ».

   PARTI PRIS : « LE CHANTIER EN LUMIERE ».
   Le fond n est ni une image ni un degrade : c est une scene 3D calculee
   image par image (projection perspective ecrite a la main). Un chantier en
   fil de fer se monte sur son plan de masse, la grue du logo au second plan,
   une source de lumiere CHAUDE tourne autour. Le defilement pilote la
   CAMERA d un bout a l autre de la page.

   TYPOGRAPHIE : sur reference du fondateur (une plaque « NEW ARCHIVE /
   Brooklyn, New York » en grotesque grasse tres resserree), une seule
   famille, INTER TIGHT, et TOUS LES MOTS en gras : 800 pour les titres,
   700 pour les reperes, 600 pour le corps. Interlettrage negatif partout.
   Rien n est en maigre nulle part : c est la demande, mot pour mot.

   CE QU ON NE REPREND PAS (les tics releves a la 1re direction) : verre,
   degrade violet, halos flous poses au hasard, texte en degrade, lueur qui
   suit le curseur, boutons aimantes, sur-titres en capitales espacees.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/exo-tight.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noir:#04060C; --noir2:#070B14; --acier:#0B111D; --acier2:#111A2B;
  --glace:#86CFFF; --glace2:#CDE9FF;
  --braise:#FF6A18; --braise2:#FFA24A; --braise3:#FFD2AA;
  --vert:#3DDC91;
  --t1:#E9F1FB; --t2:rgba(233,241,251,.68); --t3:rgba(233,241,251,.50);
  --trait:rgba(134,207,255,.16); --trait2:rgba(134,207,255,.32);
  --gout:cubic-bezier(.19,1,.22,1);
  --gout2:cubic-bezier(.33,1,.68,1);
  --marge:clamp(18px,4vw,46px);
  --large:1360px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--noir)}
html,body{overflow-x:hidden}
body{background:var(--noir);color:var(--t1);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;letter-spacing:-.011em;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
:focus-visible{outline:2px solid var(--braise2);outline-offset:3px}
::selection{background:var(--braise);color:#160500}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Une regle d auteur bat TOUJOURS la feuille du navigateur, quelle que soit
   la specificite : « form{display:flex} » rendait visible le formulaire
   masque que Netlify doit lire. Il faut donc reposer [hidden] ici. */
[hidden]{display:none!important}

/* ── LA SCENE 3D ─────────────────────────────────────────────────────────
   Un seul canvas, fixe, derriere toute la page. Le voile n est PAS pose sur
   le sujet : a la 1re direction il couvrait le coucher de soleil et l a
   efface. Ici c est une tache sombre derriere la seule colonne de texte. */
#ch{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.voile{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 54% 82% at 13% 54%,rgba(4,6,12,.93) 0%,
    rgba(4,6,12,.80) 38%,rgba(4,6,12,.34) 70%,rgba(4,6,12,0) 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 150% 108% at 56% 48%,transparent 64%,rgba(4,6,12,.55) 100%)}

/* ── TYPOGRAPHIE ─────────────────────────────────────────────────────────
   Une seule famille, tout en gras, tout resserre. */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.038em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(44px,6.1vw,88px);line-height:.92;letter-spacing:-.042em;display:flow-root}
h2{font-size:clamp(30px,4.1vw,58px);letter-spacing:-.04em}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.028em;line-height:1.14}
h4{font-size:16px;letter-spacing:-.024em}
p,li,td,th,label,figcaption{font-weight:600}
strong,b{font-weight:800;color:var(--t1)}
/* Sur les surfaces CLAIRES (le devis papier, la feuille de l accueil, les
   trois devis d exemple), --t1 est une encre de fond sombre : elle devenait
   illisible. « Conditions : » etait blanc sur blanc. */
.paper strong,.paper b,.feuille strong,.feuille b,.dv strong,.dv b{color:#0A0E16}
/* les reperes : gras, resserres, jamais en capitales espacees */
.rep{font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--glace);
  display:inline-flex;align-items:center;gap:8px}
.rep::before{content:"";width:16px;height:2px;background:var(--braise);flex:none}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── BOUTONS ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:-.018em;padding:14px 22px;border:0;
  cursor:pointer;position:relative;text-align:center;
  transition:transform .4s var(--gout),box-shadow .4s var(--gout),background .3s}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--gout)}
.btn.or{background:var(--braise);color:#160500;
  box-shadow:0 0 0 1px rgba(255,140,60,.5),0 12px 34px -12px rgba(255,106,24,.7)}
.btn.or:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,170,100,.85),0 18px 44px -12px rgba(255,106,24,.95)}
.btn.or:hover svg{transform:translateX(4px)}
.btn.vide{background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px var(--trait2)}
.btn.vide:hover{box-shadow:inset 0 0 0 1px rgba(134,207,255,.75);transform:translateY(-2px)}
.btn.grand{padding:17px 30px;font-size:16px}
.lien{color:var(--glace2);font-weight:700;border-bottom:1.5px solid var(--trait2);
  padding-bottom:1px;transition:border-color .3s,color .3s}
.lien:hover{color:#fff;border-color:var(--braise)}

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  gap:30px;padding:16px var(--marge);padding-top:calc(16px + env(safe-area-inset-top,0px));
  transition:background .45s var(--gout2),box-shadow .45s var(--gout2)}
.nav.pose{background:rgba(4,6,12,.86);box-shadow:0 1px 0 var(--trait)}
.nav .logo img{height:30px;width:auto}
.nav .liens{display:flex;gap:24px;margin-left:auto}
.nav .liens a{font-size:14px;font-weight:700;letter-spacing:-.015em;color:var(--t2);
  position:relative;padding:4px 0;transition:color .3s}
.nav .liens a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--braise);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--gout)}
.nav .liens a:hover{color:var(--t1)}
.nav .liens a:hover::after{transform:scaleX(1)}
.nav .btn{padding:11px 18px;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--t1);margin:4px 0;
  transition:transform .4s var(--gout),opacity .3s}
.nav.ouvert .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.ouvert .burger span:nth-child(2){opacity:0}
.nav.ouvert .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── L ACCUEIL ───────────────────────────────────────────────────────────── */
.accueil{position:relative;z-index:10;min-height:100svh;display:flex;align-items:center;
  padding:120px var(--marge) 70px}
.dedans{width:100%;max-width:var(--large);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,5vw,70px);align-items:center}
/* Le masque des lignes du titre faisait exactement la hauteur d interligne
   (.92em) pour une police de 1em : il coupait 13 px a 88 px, soit .15em —
   le g de « regles », les p de « paperasse ». On rend la place au jambage
   sans bouger la mise en page : la marge negative annule le remplissage, et
   flow-root sur h1 empeche la derniere marge de s echapper du parent. */
h1 .ln{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em}
h1 .ln i{display:block;font-style:normal}
h1 .feu{color:var(--braise2);text-shadow:0 0 44px rgba(255,106,24,.55)}
.lede{font-size:clamp(17px,1.45vw,21px);color:var(--t2);max-width:min(33ch,100%);
  line-height:1.5;margin:26px 0 34px}
.lede b{color:var(--t1)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.rass{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;font-weight:700;color:var(--t3)}
.rass span{display:flex;align-items:center;gap:8px}
.rass span::before{content:"";width:5px;height:5px;background:var(--glace);flex:none;
  transform:rotate(45deg);opacity:.8}

/* l entree : elle n existe QUE si le script tourne. Sans script, tout est
   deja en place et lisible. */
.js .ent{opacity:0}
.js .ent.la{opacity:1}
/* 120 % et non 105 % : le masque est plus haut de .15em depuis le correctif
   des jambages, il faut descendre la ligne plus bas pour qu elle reste cachee. */
.js h1 .ln i{transform:translateY(120%)}
.js h1.la .ln i{transform:translateY(0);transition:transform 1.05s var(--gout)}
.js h1.la .ln:nth-child(2) i{transition-delay:.09s}
.js h1.la .ln:nth-child(3) i{transition-delay:.18s}
.js .mont{opacity:0;transform:translateY(22px)}
.js .mont.la{opacity:1;transform:none;transition:opacity .9s var(--gout),transform .9s var(--gout)}
.js .lede.la{transition-delay:.34s}
.js .actions.la{transition-delay:.44s}
.js .rass.la{transition-delay:.54s}

/* ── LA FEUILLE DE DEVIS, EN VRAIE PERSPECTIVE ───────────────────────────── */
.scene{perspective:1500px;perspective-origin:56% 46%;position:relative;
  width:100%;max-width:510px;justify-self:end}
.pile{position:relative;transform-style:preserve-3d;
  transform:rotateY(-17deg) rotateX(7deg) rotateZ(-1.1deg)}
.js .pile{opacity:0;transform:rotateY(-30deg) rotateX(13deg) translateZ(-140px)}
.js .pile.la{opacity:1;transform:rotateY(-17deg) rotateX(7deg) rotateZ(-1.1deg);
  transition:opacity 1.1s var(--gout),transform 1.3s var(--gout);transition-delay:.5s}
/* la demande du client, en retrait DERRIERE la feuille : deux plans, donc de
   la profondeur reelle et pas un empilement de cartes. */
.demande{position:absolute;top:-128px;left:-206px;width:284px;
  transform:translateZ(-120px);background:var(--acier);
  box-shadow:inset 0 0 0 1px var(--trait2),0 30px 60px -30px #000;padding:14px 16px}
.demande .qui{font-size:11.5px;font-weight:800;letter-spacing:-.005em;color:var(--glace);
  margin-bottom:5px}
.demande p{font-size:13.5px;color:var(--t2);line-height:1.45}
.feuille{background:linear-gradient(168deg,#FFFFFF,#F1F4F9);color:#0A0E16;
  padding:26px 28px 22px;position:relative;
  box-shadow:0 60px 110px -40px #000,0 0 0 1px rgba(255,255,255,.1),
    0 2px 0 rgba(255,255,255,.5) inset}
.feuille::after{content:"";position:absolute;inset:auto 8% -26px 8%;height:40px;
  background:radial-gradient(ellipse 50% 50% at 50% 0%,rgba(134,207,255,.28),transparent 70%);
  filter:blur(3px);transform:translateZ(-30px)}
.fent{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:14px;border-bottom:1px solid rgba(10,14,22,.14)}
.fent .ent1{font-size:15px;font-weight:800;letter-spacing:-.025em}
.fent .ent2{font-size:11.5px;color:rgba(10,14,22,.62);margin-top:2px}
.fent .numd{text-align:right;font-size:11.5px;font-weight:700;color:rgba(10,14,22,.66);
  line-height:1.5;font-variant-numeric:tabular-nums}
.fent .numd b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;color:#0A0E16}
.fobj{font-size:12px;color:rgba(10,14,22,.7);padding:12px 0;line-height:1.45}
.fobj b{color:#0A0E16}
.lignes{border-top:1px solid rgba(10,14,22,.1)}
.lg{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(10,14,22,.07);font-size:12.5px}
.lg .d{color:rgba(10,14,22,.88);line-height:1.35}
.lg .q{color:rgba(10,14,22,.62);font-variant-numeric:tabular-nums;font-size:11.5px}
.lg .m{font-weight:800;font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.tot{padding-top:12px;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.tot .l{display:flex;justify-content:space-between;color:rgba(10,14,22,.66);
  font-variant-numeric:tabular-nums}
.tot .l.ttc{font-size:17px;font-weight:800;color:#0A0E16;letter-spacing:-.03em;
  padding-top:8px;margin-top:4px;border-top:2px solid #0A0E16}
.fpied{margin-top:16px;padding-top:12px;border-top:1px solid rgba(10,14,22,.1);
  font-size:11px;font-weight:700;color:rgba(10,14,22,.66)}
.jeton{position:absolute;left:-54px;bottom:-30px;transform:translateZ(85px);
  background:var(--braise);color:#160500;padding:11px 16px;display:flex;align-items:center;
  gap:9px;box-shadow:0 22px 50px -14px rgba(255,106,24,.75)}
.jeton .pt{width:7px;height:7px;background:#160500;border-radius:50%;
  animation:bat 1.9s ease-in-out infinite}
@keyframes bat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.jeton .tx{font-size:13px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.jeton .tx s{display:block;text-decoration:none;font-size:11px;font-weight:700;opacity:.72}
.descendre{position:absolute;left:var(--marge);bottom:34px;display:flex;align-items:center;
  gap:14px;font-size:12px;font-weight:700;color:var(--t3)}
.descendre .regle{width:76px;height:1.5px;background:var(--trait);position:relative}
.descendre .regle::after{content:"";position:absolute;inset:0;background:var(--braise);
  transform-origin:left;animation:glisse 2.6s var(--gout) infinite}
@keyframes glisse{0%{transform:scaleX(0)}55%{transform:scaleX(1)}
  56%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ═══ LA DEMONSTRATION : l agent AU TRAVAIL, en boucle ═══════════════════
   Le site racontait l agent sans jamais le montrer faire. Ici, six etapes
   qui rejouent sans fin : la demande arrive, l agent repere ce qui manque,
   le client repond, le devis s ecrit, vous dites « ok », la relance s arme.
   Rien n est cache au lecteur : tout le texte est dans la page des le
   depart, le script ne fait qu en regler l apparition. */
.dm-fil{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.dm-msg{padding:11px 14px;font-size:13.5px;line-height:1.42;max-width:92%;
  box-shadow:inset 0 0 0 1px var(--trait);background:var(--acier);color:var(--t2)}
/* Sans script, TOUT est deja visible : la demonstration n ajoute que le
   rythme, elle ne cache jamais l information. */
.js .dm-msg{opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .5s var(--gout),transform .5s var(--gout)}
.js .dm-msg.on{opacity:1;transform:none}
.dm-msg .qui{display:block;font-size:11px;font-weight:800;margin-bottom:4px;color:var(--glace)}
.dm-msg.agent{align-self:flex-end;background:rgba(255,106,24,.1);
  box-shadow:inset 0 0 0 1px rgba(255,106,24,.36);color:var(--braise3)}
.dm-msg.agent .qui{color:var(--braise2)}
.dm-msg.court{max-width:none;width:auto;align-self:flex-start;font-weight:800;color:var(--t1)}
/* les lignes du devis s ecrivent l une apres l autre */
.js .feuille .lg,.js .feuille .tot .l,.js .feuille .fobj{opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--gout),transform .45s var(--gout)}
.js .feuille.ecrit .lg,.js .feuille.ecrit .tot .l,.js .feuille.ecrit .fobj{opacity:1;transform:none}
.js .feuille.ecrit .fobj{transition-delay:.05s}
.js .feuille.ecrit .lg:nth-child(1){transition-delay:.22s}
.js .feuille.ecrit .lg:nth-child(2){transition-delay:.42s}
.js .feuille.ecrit .lg:nth-child(3){transition-delay:.62s}
.js .feuille.ecrit .tot .l:nth-child(1){transition-delay:.86s}
.js .feuille.ecrit .tot .l:nth-child(2){transition-delay:.98s}
.js .feuille.ecrit .tot .l:nth-child(3){transition-delay:1.1s}
/* le jeton change de texte au fil des etapes */
.jeton{transition:background .4s var(--gout),box-shadow .4s var(--gout)}
.jeton.envoye{background:var(--vert);box-shadow:0 22px 50px -14px rgba(61,220,145,.6)}
.jeton.envoye .pt{animation:none}
/* la reglette des six etapes */
/* 52 px et pas 22 : la pastille « Prêt à envoyer » deborde de 30 px sous la
   feuille, elle serait passee par-dessus la reglette. */
/* min-height : au tout debut le libelle est vide et la rangee se tasse a 2 px
   (la hauteur des barres) ; des la premiere etape elle bondit a 18 px et
   pousse toute la scene. La demonstration tournant en boucle, la secousse
   revenait a chaque tour. Mesure du 19/09 : 0,113 de decalage cumule. */
.dm-barre{display:flex;gap:5px;margin-top:52px;align-items:center;
  font-size:11.5px;min-height:1.6em}
.dm-barre i{flex:1;height:2px;background:var(--trait);position:relative;overflow:hidden}
.dm-barre i.faite::after{content:"";position:absolute;inset:0;background:var(--braise)}
.dm-barre i.encours::after{content:"";position:absolute;inset:0;background:var(--braise);
  transform-origin:left;animation:remplir var(--duree,1.6s) linear forwards}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dm-barre span{font-size:11.5px;font-weight:700;color:var(--t3);white-space:nowrap;
  margin-left:8px;font-variant-numeric:tabular-nums}

/* ═══ LES RUPTURES : casser le rythme des panneaux ═══════════════════════
   Dix sections bâties pareil, ca s eteint apres le deuxieme ecran. Ici
   deux respirations : une phrase seule, puis la scene 3D en grand. */
.rupture{position:relative;z-index:10;min-height:min(78svh,640px);display:flex;
  align-items:center;padding:clamp(70px,10vw,120px) var(--marge);
  background:rgba(4,6,12,.34);border-top:1px solid var(--trait)}
.rupture .in{max-width:var(--large)}
.rupture p{font-size:clamp(28px,4.6vw,66px);font-weight:800;letter-spacing:-.042em;
  line-height:1.02;max-width:17ch;text-wrap:balance}
.rupture p em{font-style:normal;color:var(--braise2);text-shadow:0 0 44px rgba(255,106,24,.45)}
.rupture .app{margin-top:26px;font-size:clamp(15px,1.3vw,18px);font-weight:600;
  color:var(--t2);max-width:48ch}
.rupture.nue{background:transparent}
.rupture.nue p{max-width:14ch}

/* ═══ L ESSAI EN DIRECT ══════════════════════════════════════════════════
   Le visiteur choisit son metier et une demande, et voit le devis se
   fabriquer. Les prix sont des EXEMPLES et c est ecrit noir sur blanc :
   chez lui, l agent n utilise que sa grille. */
.es{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:start}
.es-choix{display:flex;flex-direction:column;gap:24px}
.es-groupe .t{font-size:13px;font-weight:800;color:var(--t2);margin-bottom:12px}
.es-jetons{display:flex;flex-wrap:wrap;gap:8px}
.es-jetons button{background:transparent;color:var(--t2);border:0;cursor:pointer;
  padding:11px 16px;font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  box-shadow:inset 0 0 0 1px var(--trait2);transition:all .3s var(--gout)}
.es-jetons button:hover{color:var(--t1);box-shadow:inset 0 0 0 1px rgba(134,207,255,.62)}
.es-jetons button[aria-pressed=true]{background:var(--braise);color:#160500;
  box-shadow:0 0 0 1px rgba(255,140,60,.55),0 10px 26px -10px rgba(255,106,24,.7)}
.es-note{font-size:12.5px;font-weight:600;color:var(--t3);line-height:1.5;
  padding-top:16px;border-top:1px solid var(--trait)}

/* ── LA SIMULATION ───────────────────────────────────────────────────────
   Le bloc precedent faisait travailler le VISITEUR : il cochait, il reglait,
   il calculait — l inverse du produit. Ici il ecrit la demande comme un
   client la lui enverrait, et l agent fait le reste. */
.sim-g{display:flex;flex-direction:column;gap:14px}
.sim-fil{gap:10px;min-height:0}
.sim-fil:empty{display:none;padding:0}
.sim-fil .bulle{max-width:94%}
.sim-saisie{background:rgba(11,17,29,.96);padding:20px;display:flex;flex-direction:column;
  gap:11px;box-shadow:inset 0 0 0 1px var(--trait)}
.sim-lab{font-size:13px;font-weight:800;color:var(--t2);letter-spacing:-.015em}
.sim-saisie textarea{resize:vertical;min-height:86px;line-height:1.5}
.sim-ou{font-size:12.5px;font-weight:700;color:var(--t3);margin-top:4px}
.sim-ex{display:flex;flex-direction:column;gap:6px}
.sim-ex button{background:transparent;border:0;cursor:pointer;text-align:left;
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--t2);line-height:1.42;
  box-shadow:inset 0 0 0 1px var(--trait);transition:all .3s var(--gout)}
.sim-ex button:hover{color:var(--t1);background:rgba(17,26,43,.92);
  box-shadow:inset 0 0 0 1px var(--trait2)}
.sim-saisie .btn{margin-top:4px}
/* sans script, la demonstration ne peut pas tourner : on le dit, et on donne
   les deux portes de sortie utiles. */
.sim-sansjs{display:none;font-size:14px;line-height:1.55;color:var(--t2);
  background:rgba(11,17,29,.96);padding:20px;box-shadow:inset 0 0 0 1px var(--trait)}
.nojs .sim-sansjs{display:block}
.nojs .sim-fil,.nojs .sim-saisie,.nojs .reponses,.nojs .rejouer{display:none}
.es-sortie{position:relative;min-height:330px}
.es-vide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:30px;box-shadow:inset 0 0 0 1px var(--trait);background:rgba(7,11,20,.7)}
.es-vide p{font-size:15px;font-weight:700;color:var(--t3);max-width:26ch}
.es-papier{background:#fff;color:#0A0E16;padding:24px 26px 22px;
  box-shadow:0 40px 80px -40px #000;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--gout),transform .5s var(--gout)}
.es-papier.on{opacity:1;transform:none}
.es-papier .hh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding-bottom:12px;border-bottom:2px solid #0A0E16;margin-bottom:6px}
.es-papier .hh .g{font-size:15px;font-weight:800;letter-spacing:-.028em}
.es-papier .hh .s{font-size:11.5px;font-weight:600;color:rgba(10,14,22,.62);margin-top:2px}
.es-papier .hh .tva{font-size:11.5px;font-weight:800;background:#0A0E16;color:#fff;
  padding:4px 8px;white-space:nowrap}
.es-papier .obj{font-size:12.5px;font-weight:600;color:rgba(10,14,22,.72);
  padding:10px 0 4px;line-height:1.45}
.es-l{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(10,14,22,.09);font-size:12.5px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--gout),transform .4s var(--gout)}
.es-l.on{opacity:1;transform:none}
.es-l .d{color:rgba(10,14,22,.88);line-height:1.35;font-weight:600}
.es-l .q{color:rgba(10,14,22,.62);font-size:11.5px;font-variant-numeric:tabular-nums}
.es-l .m{font-weight:800;font-variant-numeric:tabular-nums;min-width:82px;text-align:right}
.es-tot{padding-top:12px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;
  opacity:0;transition:opacity .4s var(--gout)}
.es-tot.on{opacity:1}
.es-tot .l{display:flex;justify-content:space-between;color:rgba(10,14,22,.68);
  font-variant-numeric:tabular-nums}
.es-tot .l.ttc{font-size:18px;font-weight:800;color:#0A0E16;letter-spacing:-.032em;
  padding-top:9px;margin-top:4px;border-top:2px solid #0A0E16}
.es-pied{margin-top:14px;padding-top:11px;border-top:1px solid rgba(10,14,22,.12);
  font-size:11px;font-weight:700;color:rgba(10,14,22,.66)}
/* un onglet par piece produite. Ils n apparaissent qu a partir de deux
   documents : avant, il n y a rien a choisir. */
.es-ong[hidden]{display:none}
.es-ong{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.es-ong button{background:transparent;border:0;cursor:pointer;color:var(--t2);
  font-size:12px;font-weight:800;letter-spacing:-.015em;padding:7px 11px;
  box-shadow:inset 0 0 0 1px var(--trait);transition:all .3s var(--gout)}
.es-ong button:hover{color:var(--t1);box-shadow:inset 0 0 0 1px var(--trait2)}
.es-ong button.on{background:var(--braise);color:#160500;box-shadow:none}
/* le coin haut-droit de la feuille dit QUELLE piece on lit : sans ca, les
   cinq documents se ressemblent trop pour qu on les distingue. */
.es-papier .es-dt{text-align:right;flex:none}
.es-papier .es-dt .t{font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:#0A0E16}
.es-papier .es-dt .n{font-size:11px;font-weight:700;color:rgba(10,14,22,.62);
  margin-top:2px;font-variant-numeric:tabular-nums}
.es-sign{margin-top:12px;padding:11px 13px;background:rgba(10,14,22,.05);
  box-shadow:inset 0 0 0 1px rgba(10,14,22,.14)}
.es-sign .q{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:rgba(10,14,22,.66)}
.es-sign .v{font-size:13px;font-weight:800;color:#0A0E16;margin-top:3px;letter-spacing:-.02em}
.es-liens{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-size:14.5px;font-weight:600;color:var(--t2)}
.es-liens a{font-weight:700}

/* ═══ PAGES METIER : les questions, les ouvrages, le 2e exemple ══════════
   Les cinq pages se ressemblaient trop — meme structure, memes trois etapes
   mot pour mot. Google appelle ca du contenu duplique et n en garde qu une.
   Ces blocs portent ce qui est PROPRE au metier. */
.qgrille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:1px;background:var(--trait)}
.qlist{list-style:none;counter-reset:q;background:rgba(7,11,20,.94);
  padding:28px 26px;display:flex;flex-direction:column;gap:2px}
/* Le numero est POSITIONNE, pas une colonne de grille. En grille, chaque
   enfant du <li> devient une case : « <b>titre</b> puis du texte » mettait
   le texte dans la colonne de 44 px — un mot par ligne. */
.qlist li{counter-increment:q;position:relative;padding:14px 0 14px 44px;
  border-bottom:1px solid var(--trait);
  font-size:clamp(15px,1.35vw,17.5px);color:var(--t2);line-height:1.4}
.qlist li:last-child{border-bottom:0}
.qlist li::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-size:15px;font-weight:800;line-height:1.4;
  color:var(--braise);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.qlist li b{color:var(--t1)}
.qlist.serre{background:none;padding:0}
.qlist.serre li{border-color:var(--trait)}
.qcote{background:rgba(11,17,29,.96);padding:28px 26px}
.qcote h3{margin-bottom:16px}
.qouv{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.qouv li{font-size:14.5px;color:var(--t2);line-height:1.45;padding-left:22px;position:relative}
.qouv li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;
  background:var(--glace);transform:rotate(45deg);opacity:.75}
.qnote{font-size:13.5px;color:var(--t3);line-height:1.5;padding-top:16px;
  border-top:1px solid var(--trait)}
.d2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,3.5vw,54px);align-items:start}
.d2-txt h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.03em;margin-bottom:18px}
.d2-txt p{font-size:15px;color:var(--t2);margin-top:18px}
.piedsub .in.autres{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait);
  font-size:13.5px}
.piedsub .in.autres span{color:var(--t3)}

/* ═══ LE CHEMIN COURT ════════════════════════════════════════════════════
   L accueil fait une vingtaine d ecrans sur telephone. L artisan qu on vient
   d avoir au telephone n ira pas au bout : on lui donne trois portes, tout
   de suite apres l accroche. */
.raccourci{position:relative;z-index:10;padding:0 var(--marge);
  margin:0 auto clamp(6px,1vw,14px);max-width:var(--large)}
.raccourci .rc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--trait)}
.raccourci a{background:rgba(7,11,20,.94);padding:18px 20px 20px;display:flex;
  flex-direction:column;gap:5px;transition:background .4s var(--gout)}
.raccourci a:hover{background:rgba(17,26,43,.96)}
.raccourci .n{font-size:11.5px;font-weight:800;color:var(--braise)}
.raccourci .t{font-size:16px;font-weight:800;letter-spacing:-.028em;display:flex;
  align-items:center;gap:8px}
.raccourci .t svg{width:15px;height:15px;transition:transform .4s var(--gout)}
.raccourci a:hover .t svg{transform:translateX(4px)}
.raccourci .s{font-size:13px;color:var(--t3);line-height:1.4}

/* ═══ LA PREUVE ══════════════════════════════════════════════════════════ */
.pv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--trait)}
.pv-c{background:rgba(7,11,20,.94);padding:26px 24px 28px;display:flex;
  flex-direction:column;gap:10px}
.pv-c h3{margin-bottom:2px}
.pv-c p{font-size:14.5px;color:var(--t2);line-height:1.5}
.pv-c .val{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--braise2);
  font-variant-numeric:tabular-nums}
.pv-c .btn{margin-top:auto;align-self:flex-start}
.pv-c .tel-gros{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.035em;
  color:var(--braise2);font-variant-numeric:tabular-nums}

/* ═══ CONTACT : LE TELEPHONE D ABORD ═════════════════════════════════════
   Un couvreur sur un toit ne remplit pas cinq champs. */
.rappel{background:rgba(11,17,29,.96);padding:clamp(22px,2.6vw,30px);
  box-shadow:inset 0 0 0 1px var(--trait);margin-bottom:14px}
.rappel .t{font-size:15px;font-weight:800;letter-spacing:-.025em;margin-bottom:6px}
.rappel .s{font-size:13.5px;color:var(--t2);margin-bottom:14px}
.rappel form{background:none;padding:0;box-shadow:none;flex-direction:row;gap:10px}
.rappel .champ{flex:1;min-width:0}
.rappel .btn{white-space:nowrap}
.appeler{display:none}
.plier{display:none;background:none;border:0;cursor:pointer;font-size:14px;
  font-weight:700;color:var(--glace2);padding:10px 0;text-align:left;
  border-bottom:1.5px solid var(--trait2);transition:color .3s}
.plier:hover{color:#fff}

/* ── SECTIONS COURANTES ──────────────────────────────────────────────────
   Elles posent un fond presque opaque : la scene 3D continue derriere et
   respire dans les interlignes, sans jamais gener la lecture. */
.sect{position:relative;z-index:10;padding:clamp(56px,9vw,128px) var(--marge);
  background:rgba(4,6,12,.9);border-top:1px solid var(--trait)}
.sect.claire{background:rgba(4,6,12,.66)}
.in{width:100%;max-width:var(--large);margin:0 auto}
/* aligne a GAUCHE comme toutes les autres sections : centre, le bloc etroit
   decalait les questions de 220 px et cassait la colonne de la page. */
.in.etroit{max-width:980px;margin-left:0}
/* La largeur se pose sur le TITRE, jamais sur le bloc : l unite ch se
   calcule sur la taille de l element qui la porte. Posee sur .tete (16 px),
   « 22ch » valait 176 px et hachait les titres mot par mot. */
.tete{margin-bottom:clamp(38px,5vw,62px)}
.tete .rep{margin-bottom:16px}
.tete h2{max-width:14em}
.tete p{font-size:clamp(16px,1.3vw,19px);color:var(--t2);margin-top:16px;max-width:52ch}

/* apparition au defilement : depuis un etat VISIBLE, jamais depuis opacity 0
   fige. Si l observateur ne part pas, la page reste lisible. */
.js .mo{opacity:0;transform:translateY(26px)}
.js .mo.vu{opacity:1;transform:none;
  transition:opacity .85s var(--gout),transform .85s var(--gout)}

/* ── LE PROBLEME : une journee, heure par heure ──────────────────────────── */
.chrono{display:grid;gap:1px;background:var(--trait);margin-top:8px}
.ch{background:rgba(7,11,20,.92);padding:22px 24px;display:grid;
  grid-template-columns:130px 1fr;gap:20px;align-items:baseline;
  transition:background .5s var(--gout)}
.ch:hover{background:rgba(17,26,43,.96)}
.ch .h{font-size:clamp(20px,2.1vw,28px);font-weight:800;letter-spacing:-.04em;
  color:var(--braise2);font-variant-numeric:tabular-nums}
.ch p{font-size:clamp(15px,1.25vw,17.5px);color:var(--t2);line-height:1.45}
.apres-chrono{margin-top:34px;font-size:clamp(17px,1.5vw,22px);font-weight:800;
  letter-spacing:-.03em;max-width:40ch;line-height:1.28}

/* ── AVANT / APRES ───────────────────────────────────────────────────────── */
.avap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--trait)}
.col{background:rgba(7,11,20,.94);padding:30px 28px 32px}
.col .t{font-size:13px;font-weight:800;letter-spacing:-.01em;margin-bottom:20px;
  display:flex;align-items:center;gap:9px}
.col.av .t{color:var(--t3)}
.col.ap .t{color:var(--vert)}
.col .t::before{content:"";width:9px;height:9px;flex:none;transform:rotate(45deg);
  background:currentColor}
.col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.col li{font-size:15.5px;line-height:1.4;padding-left:26px;position:relative;color:var(--t2)}
.col.av li{text-decoration:line-through;text-decoration-color:rgba(255,106,24,.7);
  text-decoration-thickness:2px;color:var(--t3)}
.col.av li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:1.5px;
  background:rgba(233,241,251,.3)}
.col.ap li::before{content:"";position:absolute;left:0;top:.28em;width:13px;height:8px;
  border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);
  transform:rotate(-45deg)}
.col .bilan{margin-top:22px;padding-top:18px;border-top:1px solid var(--trait);
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--t1)}
.souligne{margin-top:34px;font-size:clamp(16px,1.35vw,19px);color:var(--t2);max-width:60ch}

/* ── LE CALCULATEUR ──────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:1px;
  background:var(--trait)}
.calc .reglages{background:rgba(7,11,20,.94);padding:32px 30px}
.calc .res{background:rgba(11,17,29,.96);padding:32px 30px;display:flex;
  flex-direction:column;justify-content:center}
.curs{margin-bottom:30px}
.curs:last-child{margin-bottom:0}
.curs label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14.5px;color:var(--t2);margin-bottom:14px}
.curs label output{font-size:22px;font-weight:800;letter-spacing:-.035em;color:var(--t1);
  font-variant-numeric:tabular-nums}
.curs input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:none;
  height:26px;cursor:pointer}
.curs input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--trait2)}
.curs input[type=range]::-moz-range-track{height:3px;background:var(--trait2)}
.curs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  background:var(--braise);margin-top:-8.5px;
  box-shadow:0 0 0 1px rgba(255,160,90,.7),0 6px 18px -6px rgba(255,106,24,.9)}
.curs input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;
  background:var(--braise);box-shadow:0 0 0 1px rgba(255,160,90,.7)}
.res .gros{display:flex;align-items:baseline;gap:10px}
.res .gros b{font-size:clamp(56px,7.5vw,104px);font-weight:800;letter-spacing:-.055em;
  line-height:.86;color:var(--braise2);font-variant-numeric:tabular-nums;
  text-shadow:0 0 50px rgba(255,106,24,.45)}
.res .gros span{font-size:clamp(22px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;
  color:var(--braise2)}
.res .sous{font-size:16px;color:var(--t2);margin-top:18px;line-height:1.45}
.res .sous b{color:var(--t1)}
.res .note{font-size:12.5px;color:var(--t3);margin-top:20px;padding-top:16px;
  border-top:1px solid var(--trait)}

/* ── COMMENT CA MARCHE ───────────────────────────────────────────────────── */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--trait)}
.et{background:rgba(7,11,20,.94);padding:28px 26px 32px;position:relative;
  transition:background .5s var(--gout)}
.et:hover{background:rgba(17,26,43,.96)}
.et::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--braise);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--gout)}
.et:hover::before{transform:scaleX(1)}
.et .n{font-size:clamp(34px,3.6vw,50px);font-weight:800;letter-spacing:-.06em;
  color:rgba(134,207,255,.55);line-height:1;margin-bottom:18px;font-variant-numeric:tabular-nums;
  transition:color .5s var(--gout)}
.et:hover .n{color:var(--braise)}
.et h3{margin-bottom:10px}
.et p{font-size:15px;color:var(--t2);line-height:1.5}

/* le telephone : ce que l artisan recoit vraiment */
.tel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);
  align-items:center;margin-top:clamp(46px,6vw,80px)}
.tel .txt h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.035em;margin-bottom:18px}
.tel .txt p{font-size:16px;color:var(--t2);margin-bottom:18px}
.jours{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.jours b{background:rgba(255,106,24,.14);color:var(--braise2);padding:8px 14px;font-size:14px;
  font-weight:800;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(255,106,24,.35)}
.ecran{background:var(--acier);padding:20px 18px;max-width:420px;justify-self:center;width:100%;
  box-shadow:inset 0 0 0 1px var(--trait2),0 40px 80px -40px #000;
  display:flex;flex-direction:column;gap:12px}
.bulle{padding:13px 15px;font-size:14.5px;line-height:1.45;max-width:88%}
.bulle.lui{background:var(--acier2);color:var(--t1);align-self:flex-start;
  box-shadow:inset 0 0 0 1px var(--trait)}
.bulle.vous{background:var(--braise);color:#160500;align-self:flex-end;font-weight:800}
.bulle.note{background:transparent;color:var(--t3);align-self:flex-start;font-size:13px;
  padding:4px 2px}
/* ── UNE JOURNEE ENTIERE SUR LE TELEPHONE ────────────────────────────────
   Le bloc precedent montrait UN message et trois boutons. Celui-ci joue une
   journee complete : les evenements tombent a l heure, le compteur de « fait
   sans vous » grimpe, et l artisan n intervient que trois fois. C est le
   miroir exact de la section « 19 h 40, 21 h 15, 22 h 47 ». */
/* cible d un des trois raccourcis du haut : la barre fixe fait 72 px et ce
   bloc n a pas le retrait de 140 px des sections. */
#journee{scroll-margin-top:122px}
/* 122 = 96 px de degagement + les 26 px dont la revelation « .mo » decale
   le bloc : au moment du saut il est encore descendu, il remonte ensuite.
   Mesure du 19/09 : sans ces 26 px le titre finissait 2 px SOUS la barre. */
.jr{background:var(--acier);max-width:450px;width:100%;justify-self:center;
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--trait2),0 40px 80px -40px #000}
.jr-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--trait);background:rgba(4,6,12,.55)}
.jr-h{font-size:15.5px;font-weight:800;color:var(--t1);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.jr-h s{display:block;text-decoration:none;font-size:11px;font-weight:700;color:var(--t3);
  letter-spacing:0}
.jr-c{text-align:right;font-size:11px;font-weight:700;color:var(--t3);line-height:1.3}
.jr-c b{display:block;font-size:19px;color:var(--braise2);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.jr-fil{padding:16px;display:flex;flex-direction:column;gap:10px;
  min-height:250px;max-height:430px;overflow-y:auto;scrollbar-width:thin}
.jr-fil .bulle{max-width:94%}
.jr-fil .bulle.ok{background:rgba(61,220,145,.12);color:var(--t1);
  box-shadow:inset 0 0 0 1px rgba(61,220,145,.4)}
.jr-heure{display:block;font-size:11px;font-weight:800;color:var(--glace);margin-bottom:3px}
.jr-fil .bulle.ok .jr-heure{color:var(--vert)}
.jr-bas{padding:13px 16px;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;
  gap:8px;align-items:center}
.jr-bas .att{font-size:12px;font-weight:700;color:var(--braise2);flex:1 1 100%}
.jr-bas button{background:transparent;color:var(--t1);border:0;cursor:pointer;
  padding:11px 15px;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  box-shadow:inset 0 0 0 1px var(--trait2);transition:all .3s var(--gout)}
.jr-bas button:hover{box-shadow:inset 0 0 0 1px rgba(134,207,255,.7);transform:translateY(-1px)}
.jr-bas button.oui{background:var(--braise);color:#160500;
  box-shadow:0 0 0 1px rgba(255,140,60,.55),0 10px 24px -10px rgba(255,106,24,.7)}
.jr-bas .fin{background:none;box-shadow:none;color:var(--glace2);padding:6px 0;
  border-bottom:1.5px solid var(--trait2);font-size:13px}
.jr-bas .fin:hover{color:#fff;transform:none;box-shadow:none;border-color:var(--braise)}
.jr-recap{padding:16px;border-top:1px solid var(--trait);background:rgba(255,106,24,.07)}
.jr-recap h4{margin-bottom:11px}
.jr-recap ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.jr-recap li{font-size:13.5px;color:var(--t2);display:flex;justify-content:space-between;gap:12px}
.jr-recap li b{color:var(--t1);font-variant-numeric:tabular-nums}
.jr-recap .fort{font-size:15.5px;font-weight:800;color:var(--t1);line-height:1.42;
  letter-spacing:-.02em;padding-top:12px;border-top:1px solid rgba(255,106,24,.3)}
.jr-recap .fort em{font-style:normal;color:var(--braise2)}
/* sans script, la journee se lit d une traite : pas de fil a faire defiler
   dans un cadre de 430 px quand le contenu en fait 606. */
.nojs .jr-tete,.nojs .jr-bas{display:none}
.nojs .jr-fil{max-height:none;overflow:visible}

/* ── LA MESSAGERIE PARTAGEE ─────────────────────────
   Les bulles, l animation d arrivee et le « ••• » servent a deux endroits : la
   simulation plus haut et la journee juste au-dessus. Les boutons de reponse
   aussi. Une seule ecriture pour les deux, sinon elles divergent. */
.bulle.arrive{animation:monte .42s var(--gout) both}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bulle.ecrit{color:var(--t3);font-style:normal;letter-spacing:.14em;padding:13px 15px}
.reponses{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--trait)}
.reponses button{background:transparent;color:var(--t1);border:0;cursor:pointer;
  padding:11px 15px;font-size:14px;font-weight:700;letter-spacing:-.015em;
  box-shadow:inset 0 0 0 1px var(--trait2);transition:all .3s var(--gout)}
.reponses button:hover{box-shadow:inset 0 0 0 1px rgba(134,207,255,.7);
  transform:translateY(-1px)}
.reponses button.oui{background:var(--braise);color:#160500;
  box-shadow:0 0 0 1px rgba(255,140,60,.55),0 10px 24px -10px rgba(255,106,24,.7)}
.reponses button.oui:hover{transform:translateY(-2px)}
.reponses button[disabled]{opacity:.45;cursor:default;transform:none}
.rejouer{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rejouer button{background:none;border:0;cursor:pointer;font-size:13.5px;font-weight:700;
  color:var(--glace2);border-bottom:1.5px solid var(--trait2);padding:4px 0;
  transition:color .3s}
.rejouer button:hover{color:#fff}
.rejouer span{font-size:12.5px;color:var(--t3)}
.tel .invite{font-size:13px;font-weight:700;color:var(--braise2);margin-top:14px;
  display:flex;align-items:center;gap:9px}
.tel .invite::before{content:"";width:7px;height:7px;background:var(--braise);flex:none;
  transform:rotate(45deg)}

/* ── APRES LA SIGNATURE ──────────────────────────────────────────────────── */
.suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;
  background:var(--trait)}
.sui{background:rgba(7,11,20,.94);padding:26px 24px 28px;transition:background .5s var(--gout)}
.sui:hover{background:rgba(17,26,43,.96)}
.sui .p{font-size:12px;font-weight:800;color:var(--braise);margin-bottom:12px;
  font-variant-numeric:tabular-nums}
.sui h3{margin-bottom:9px}
.sui p{font-size:14.5px;color:var(--t2);line-height:1.5}
.photo{margin-top:clamp(40px,5vw,64px);position:relative;overflow:hidden}
.photo img{width:100%;height:clamp(280px,38vw,440px);object-fit:cover;filter:saturate(.85) contrast(1.05)}
.photo .sur{position:absolute;inset:auto 0 0 0;padding:clamp(30px,4vw,50px);
  background:linear-gradient(180deg,transparent,rgba(4,6,12,.72) 34%,
    rgba(4,6,12,.94) 66%,rgba(4,6,12,.99))}
.photo h3{font-size:clamp(20px,2.3vw,30px);letter-spacing:-.035em;max-width:24ch;margin-bottom:10px}
/* sur une photo, le texte secondaire a besoin de plus que --t2 */
.photo p{font-size:15px;color:rgba(233,241,251,.88);max-width:56ch}

/* ── LES METIERS : trois devis blancs poses sur la nuit ──────────────────── */
.devis{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(18px,2vw,28px)}
.dv{background:#F7F9FC;color:#0A0E16;padding:22px 22px 20px;display:flex;flex-direction:column;
  box-shadow:0 30px 70px -36px #000;transition:transform .5s var(--gout),box-shadow .5s var(--gout)}
.dv:hover{transform:translateY(-6px);box-shadow:0 46px 90px -36px #000}
.dv .hh{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:12px;border-bottom:2px solid #0A0E16;margin-bottom:14px}
.dv .mt{font-size:14px;font-weight:800;letter-spacing:-.025em}
.dv .tva{font-size:11.5px;font-weight:800;background:#0A0E16;color:#fff;padding:4px 8px}
.dv h3{font-size:17.5px;letter-spacing:-.03em;margin-bottom:6px;color:#0A0E16}
.dv .ctx{font-size:12px;color:rgba(10,14,22,.62);margin-bottom:14px;line-height:1.4}
.dv .ll{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;
  padding:8px 0;border-bottom:1px solid rgba(10,14,22,.09)}
.dv .ll span:first-child{color:rgba(10,14,22,.82)}
.dv .ll span:last-child{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv .tt{display:flex;justify-content:space-between;gap:14px;font-size:15px;font-weight:800;
  letter-spacing:-.025em;padding-top:12px;margin-top:4px;font-variant-numeric:tabular-nums}
.dv .st{margin-top:16px;padding-top:12px;border-top:1px solid rgba(10,14,22,.12);
  font-size:11.5px;font-weight:800;color:rgba(10,14,22,.64);display:flex;align-items:center;gap:8px}
.dv .st::before{content:"";width:7px;height:7px;background:var(--vert);flex:none;transform:rotate(45deg)}
.dv.att .st::before{background:var(--braise)}
.apres-devis{margin-top:32px}

/* ── POURQUOI / GARANTIES ────────────────────────────────────────────────── */
.grille3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--trait)}
.gr{background:rgba(7,11,20,.94);padding:28px 26px 30px}
.gr h3{margin-bottom:11px}
.gr p{font-size:15px;color:var(--t2);line-height:1.5}
.gr .no{font-size:12px;font-weight:800;color:var(--braise);margin-bottom:14px}
.engage{margin-top:clamp(40px,5vw,64px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:1px;background:var(--trait)}
.engage .g{background:rgba(11,17,29,.96);padding:34px 32px}
.engage .g h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.035em;margin-bottom:18px}
.engage .g ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.engage .g li{font-size:15px;color:var(--t2);line-height:1.5;padding-left:24px;position:relative}
.engage .g li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;
  background:var(--braise);transform:rotate(45deg)}
.engage .d{background:rgba(7,11,20,.94);padding:34px 32px;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:6px}
.pastille{width:64px;height:64px;background:var(--braise);color:#160500;display:grid;
  place-items:center;font-size:23px;font-weight:800;letter-spacing:-.04em;margin-bottom:16px}
.engage .d .nom{font-size:19px;font-weight:800;letter-spacing:-.03em}
.engage .d .role{font-size:14px;color:var(--t2)}
.engage .d .tl{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--braise2);
  margin-top:14px;font-variant-numeric:tabular-nums}

/* ── QUESTIONS ───────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:1px;background:var(--trait)}
.faq details{background:rgba(7,11,20,.94)}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;font-size:clamp(16px,1.35vw,19px);
  font-weight:800;letter-spacing:-.028em;transition:background .35s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(17,26,43,.9)}
.faq summary .pm{width:20px;height:20px;flex:none;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--braise);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:16px;height:2px}
.faq summary .pm::after{width:2px;height:16px;transition:transform .4s var(--gout)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .rep-txt{padding:0 24px 24px;font-size:15.5px;color:var(--t2);line-height:1.58;max-width:78ch}

/* ── CONTACT ─────────────────────────────────────────────────────────────── */
.contact{background:rgba(4,6,12,.72)}
.ctt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,70px)}
.ctt h2{margin-bottom:18px}
.ctt .intro{font-size:clamp(16px,1.35vw,19px);color:var(--t2);max-width:46ch;margin-bottom:28px}
.ctt ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.ctt ul li{font-size:15px;color:var(--t2);line-height:1.45;padding-left:24px;position:relative}
.ctt ul li::before{content:"";position:absolute;left:0;top:.36em;width:12px;height:7px;
  border-left:2px solid var(--braise);border-bottom:2px solid var(--braise);transform:rotate(-45deg)}
.joindre{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:17px;font-weight:800;
  letter-spacing:-.03em}
.joindre a{color:var(--braise2);transition:color .3s}
.joindre a:hover{color:#fff}
form{background:rgba(11,17,29,.96);padding:clamp(24px,3vw,34px);display:flex;
  flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--trait)}
.champ{background:rgba(4,6,12,.7);border:0;box-shadow:inset 0 0 0 1px var(--trait2);
  padding:14px 16px;font-size:15px;font-weight:600;color:var(--t1);width:100%;
  transition:box-shadow .3s}
.champ::placeholder{color:var(--t3);font-weight:600}
.champ:focus{outline:none;box-shadow:inset 0 0 0 2px var(--braise)}
textarea.champ{min-height:104px;resize:vertical}
form .btn{margin-top:6px}
.apresform{font-size:12.5px;color:var(--t3);margin-top:14px}
.merci{background:rgba(11,17,29,.96);padding:clamp(28px,3.4vw,40px);
  box-shadow:inset 0 0 0 1px rgba(61,220,145,.4)}
.merci h3{font-size:24px;letter-spacing:-.035em;margin-bottom:12px;color:var(--vert)}
.merci p{font-size:15.5px;color:var(--t2)}

/* ── PIED DE PAGE ────────────────────────────────────────────────────────── */
.pied{position:relative;z-index:10;background:rgba(4,6,12,.96);border-top:1px solid var(--trait);
  padding:clamp(52px,6vw,80px) var(--marge) 34px}
.pied .haut{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,60px);max-width:var(--large);margin:0 auto}
.pied img{height:34px;width:auto;margin-bottom:18px}
.pied .quoi{font-size:14.5px;color:var(--t2);line-height:1.55;max-width:46ch}
.pied h4{margin-bottom:14px;color:var(--t1)}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pied ul a{font-size:14.5px;color:var(--t2);transition:color .3s}
.pied ul a:hover{color:var(--braise2)}
.pied .bas{max-width:var(--large);margin:clamp(34px,4vw,52px) auto 0;padding-top:22px;
  border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;gap:12px 24px;
  justify-content:space-between;font-size:13px;color:var(--t3)}

/* ── BARRE FIXE TELEPHONE ────────────────────────────────────────────────── */
.barrebas{display:none}

/* ═══════ PAGES SECONDAIRES ═══════════════════════════════════════════════ */
.navsub{position:relative;z-index:20;display:flex;align-items:center;gap:22px;
  padding:18px var(--marge);padding-top:calc(18px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--trait);background:rgba(4,6,12,.9)}
.navsub img{height:28px;width:auto}
.navsub .ret{font-size:14px;font-weight:700;color:var(--t2);transition:color .3s}
.navsub .ret:hover{color:var(--t1)}
.navsub .droite{margin-left:auto;display:flex;gap:10px}
.navsub .btn{padding:10px 16px;font-size:13.5px}

.docpage,.txtpage{position:relative;z-index:10;max-width:860px;margin:0 auto;
  padding:clamp(46px,6vw,80px) var(--marge) clamp(60px,7vw,100px)}
.docintro{margin-bottom:clamp(30px,4vw,46px)}
.docintro h1{font-size:clamp(30px,4vw,52px);margin:14px 0 16px}
.docintro p{font-size:16px;color:var(--t2);max-width:58ch}
.docfin{margin-top:clamp(34px,4vw,50px);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.docfin p{font-size:14px;color:var(--t3)}

/* le devis d exemple : une VRAIE feuille, encre noire sur papier blanc */
.paper{background:#fff;color:#0A0E16;padding:clamp(26px,4vw,48px);
  box-shadow:0 50px 100px -40px #000}
.paper .ent{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:2px solid #0A0E16}
.paper .k{font-size:11px;font-weight:800;color:rgba(10,14,22,.62);margin-bottom:5px}
.paper .v{font-size:13.5px;line-height:1.5;color:rgba(10,14,22,.88)}
.paper .quoi{text-align:right}
.paper .titre{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.045em;
  margin-bottom:6px}
.paper .duo2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;
  padding:20px 0;border-bottom:1px solid rgba(10,14,22,.14)}
.paper table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.paper th{text-align:left;font-size:11px;font-weight:800;color:rgba(10,14,22,.62);
  padding:10px 0;border-bottom:1.5px solid rgba(10,14,22,.3)}
.paper th:not(:first-child),.paper td:not(:first-child){text-align:right;white-space:nowrap}
.paper td{padding:12px 0;border-bottom:1px solid rgba(10,14,22,.1);
  color:rgba(10,14,22,.88);font-variant-numeric:tabular-nums}
.paper td:first-child{padding-right:18px}
.totaux{margin-top:20px;margin-left:auto;max-width:330px;display:flex;flex-direction:column;gap:7px}
.totaux .l{display:flex;justify-content:space-between;gap:18px;font-size:13.5px;
  color:rgba(10,14,22,.7);font-variant-numeric:tabular-nums}
.totaux .l.ttc{font-size:20px;font-weight:800;letter-spacing:-.035em;color:#0A0E16;
  padding-top:11px;border-top:2px solid #0A0E16;margin-top:5px}
.cond{margin-top:22px;font-size:13px;color:rgba(10,14,22,.78);line-height:1.55}
.mentions{margin-top:24px;padding-top:18px;border-top:1px solid rgba(10,14,22,.14);
  display:flex;flex-direction:column;gap:11px}
.mentions p{font-size:12px;color:rgba(10,14,22,.68);line-height:1.5}
.mentions strong{color:#0A0E16}
.sign{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;align-items:center}
.sign .case{border:1.5px dashed rgba(10,14,22,.4);padding:18px;min-height:96px}
.sign .case .t{font-size:13.5px;font-weight:800;margin-bottom:5px}
.sign .case .s{font-size:11.5px;color:rgba(10,14,22,.62)}
.sign .enligne{font-size:12.5px;color:rgba(10,14,22,.7);line-height:1.5}
.paper .pied{font-size:11px;color:rgba(10,14,22,.66);margin-top:24px;padding-top:14px;
  border-top:1px solid rgba(10,14,22,.12);background:none;border-left:0;border-right:0;
  padding-left:0;padding-right:0;position:static}

/* mentions legales */
.txtpage h1{font-size:clamp(28px,3.6vw,46px);margin:14px 0 14px}
.txtpage .maj{font-size:14.5px;color:var(--t3);margin-bottom:34px}
.txtpage h2{font-size:clamp(20px,2.1vw,27px);margin:38px 0 14px}
.txtpage p{font-size:15.5px;color:var(--t2);line-height:1.62;margin-bottom:14px;max-width:72ch}
.txtpage a:not(.btn):not(.lien){color:var(--glace2);border-bottom:1.5px solid var(--trait2)}
.fiche{display:flex;flex-direction:column;gap:1px;background:var(--trait);margin:18px 0 8px}
.fiche .l{background:rgba(7,11,20,.94);padding:13px 16px;display:grid;
  grid-template-columns:210px 1fr;gap:16px;font-size:14.5px}
.fiche .l b{color:var(--t1)}
.fiche .l span{color:var(--t2)}

/* 404 */
.p404{position:relative;z-index:10;min-height:100svh;display:grid;place-items:center;
  padding:60px var(--marge);text-align:center}
.p404 img{height:38px;width:auto;margin:0 auto 26px}
.p404 .code{font-size:13px;font-weight:800;color:var(--braise);margin-bottom:14px}
.p404 h1{font-size:clamp(32px,5vw,64px);margin-bottom:16px}
.p404 p{font-size:16.5px;color:var(--t2);max-width:44ch;margin:0 auto 30px}
.p404 .actions{justify-content:center}
.piedsub{position:relative;z-index:10;border-top:1px solid var(--trait);
  padding:26px var(--marge);background:rgba(4,6,12,.94)}
.piedsub .in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  max-width:var(--large);margin:0 auto;font-size:13.5px;color:var(--t3)}
.piedsub img{height:26px;width:auto}
.piedsub a{color:var(--t2);transition:color .3s}
.piedsub a:hover{color:var(--braise2)}

/* ═══════ TABLETTE ET TELEPHONE ═══════════════════════════════════════════ */
@media (max-width:1000px){
  .dedans{grid-template-columns:1fr;gap:34px}
  /* Meme inclinaison qu au-dessus de 1000 px : mesure du 19/09, la feuille
     tient a 320, 375, 753 et 985 px sans deborder d un pixel, animation
     d entree comprise. On borne la largeur pour qu elle ne s etire plus a
     900 px sur tablette, ce qui la rendait plus grande que sur bureau. */
  .scene{perspective-origin:50% 50%;max-width:620px;justify-self:center}
  .pile,.js .pile.la{transform:rotateY(-17deg) rotateX(7deg) rotateZ(-1.1deg)}
  .demande{position:static;width:auto;transform:none;margin-bottom:16px}
  .jeton{left:auto;right:0;bottom:-26px;transform:none}
  .voile{background:linear-gradient(180deg,rgba(4,6,12,.9) 0%,rgba(4,6,12,.62) 42%,rgba(4,6,12,.34) 100%)}
  .nav .liens{display:none}
  .burger{display:block}
  .nav > .btn{display:none}
  .nav.ouvert{background:rgba(4,6,12,.97);flex-wrap:wrap}
  .nav.ouvert .liens{display:flex;flex-direction:column;gap:2px;width:100%;margin:14px 0 6px}
  .nav.ouvert .liens a{padding:12px 0;border-bottom:1px solid var(--trait);font-size:16px}
  .nav.ouvert > .btn{display:inline-flex;width:100%;margin-bottom:6px}
  .descendre{display:none}
  .calc,.tel,.engage,.ctt,.es,.qgrille,.d2{grid-template-columns:1fr}
  /* des cibles confortables : un artisan peut avoir des gants. */
  .reponses button{padding:14px 16px;font-size:15px}
  .sim-ex button{font-size:13.5px;padding:12px 14px}
  .rupture{min-height:auto}
  /* LE TELEPHONE D ABORD : l appel devient l action principale, le
     formulaire complet se replie derriere un bouton. */
  .appeler{display:flex;width:100%;font-size:17px;padding:18px 22px;margin-bottom:12px}
  /* Vise le SEUL formulaire complet. « .ctt form » masquait aussi le champ
     unique « votre numéro », qui est justement ce qu on veut mettre devant. */
  #form-rdv{display:none}
  #form-rdv.deplie{display:flex}
  .plier{display:block}
  .barrebas .btn.or{order:2}
  .barrebas a[href^="tel:"]{order:1;background:var(--braise);color:#160500;
    box-shadow:0 0 0 1px rgba(255,140,60,.5)}
  .barrebas .btn.or.second{background:transparent;color:var(--t1);
    box-shadow:inset 0 0 0 1px var(--trait2)}
  .tel .ecran{max-width:420px}
  .pied .haut{grid-template-columns:1fr 1fr}
  .pied .quoi{grid-column:1 / -1}
  body{padding-bottom:70px}
  .barrebas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:38;gap:10px;
    padding:10px var(--marge);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(4,6,12,.94);border-top:1px solid var(--trait)}
  .barrebas .btn{flex:1;padding:13px 14px;font-size:14px}
}
@media (max-width:700px){
  /* la feuille inclinee reste inclinee sur telephone : c est la que le site
     sera le plus vu. Rien a neutraliser ici, tout vient du bloc 1000 px. */
  .accueil{padding-top:92px}
  .feuille{padding:20px 18px 18px}
  .ch{grid-template-columns:1fr;gap:6px}
  .fiche .l{grid-template-columns:1fr;gap:3px}
  .pied .haut{grid-template-columns:1fr}
  .paper .quoi{text-align:left}
}
@media (max-width:620px){
  .lg{grid-template-columns:1fr auto;gap:6px 12px}
  .lg .q{grid-column:1;font-size:11px}
  .lg .m{grid-row:1;grid-column:2}
  .paper table{font-size:12.5px}
  .sign{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
  .js .mo,.js .ent{opacity:1!important;transform:none!important}
  /* une inclinaison FIXE n est pas du mouvement : on coupe l animation
     d entree mais on rend a la feuille son angle de repos, sinon elle
     resterait a plat pour qui a demande moins d animations. */
  .js .pile{opacity:1!important;transform:rotateY(-17deg) rotateX(7deg) rotateZ(-1.1deg)!important}
}
/* mode de capture (?fige&plat) : rien de fixe, pour que le rendu hors ecran
   puisse defiler. N a aucun effet sur le site en ligne. */
.plat #ch,.plat .voile,.plat .grain{position:absolute;top:0;height:940px}
.plat .nav{position:absolute}
.plat .barrebas{display:none}
.plat .accueil{min-height:880px}
.plat body{padding-bottom:0}

@media print{
  /* Sans regle @page, le devis telecharge sortait au format par defaut de
     l imprimante — US Letter (612x792 pt) sur la machine d essai. Pour un
     document francais c est A4. Mesure du 19/09. */
  @page{size:A4;margin:12mm}
  /* Le PDF, c est LE DEVIS — pas la page qui l entoure. L introduction etait
     ecrite pour un fond sombre : sur papier elle sortait en gris tres pale. */
  #ch,.voile,.grain,.nav,.navsub,.barrebas,.descendre,.docfin,
  .docintro,.piedsub,.pied{display:none!important}
  body{background:#fff;color:#000}
  .docpage{padding:0;max-width:none}
  .paper{box-shadow:none;padding:0}
}

/* ═══ DEUX REGLES QUI S ECRASAIENT (trouvees par l audit de contraste) ════
   1. « strong,b{color:var(--t1)} » s applique DIRECTEMENT au <b>, donc il
      battait la couleur sombre de la pastille : « Devis envoye » sortait en
      blanc casse sur le vert, a 1,56 de contraste.
   2. « .pv-c p » (0,2,0) battait « .pastille » (0,1,0) : le « LM » passait
      en gris clair sur l orange, a 1,83. */
.jeton .tx b,.jeton .tx s{color:inherit}
.pv-c .pastille{color:#160500}

/* Mode capture (?fige) : on garde la classe « js » pour que l ecran
   interactif montre ses boutons, et on coupe seulement les animations. */
.sansanim *,.sansanim *::before,.sansanim *::after{
  transition:none!important;animation:none!important}