/* TAPCODE. Une seule source de lumière : une fenêtre en haut à gauche.
   Toutes les ombres partent donc vers le bas et la droite. Le verre est du verre trempé épais, pas un flou décoratif.
   Rien ne bouge sans html.m (donc rien sous prefers-reduced-motion). Aucun tiret cadratin. */

:root{
  --ombre-beige:1px 1px 2px rgb(10 31 51/.08),6px 10px 18px -8px rgb(10 31 51/.16),18px 30px 52px -28px rgb(10 31 51/.32);
  --ombre-marine:inset 0 1px 0 rgb(237 230 216/.22),inset 0 0 0 1px rgb(237 230 216/.06),2px 3px 5px rgb(3 10 18/.22),10px 20px 34px -12px rgb(3 10 18/.45),24px 46px 72px -34px rgb(3 10 18/.7);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Papier : un grain très fin sur le beige, fixe, sans requête */
body{background-image:var(--grain);background-attachment:fixed}
::selection{background:var(--navy);color:var(--beige)}
html{scrollbar-color:rgb(10 31 51/.3) var(--beige)}

/* Lumière de fenêtre au lieu des halos : un seul pan de lumière, du haut à gauche */
.caus::before{inset:0;background:linear-gradient(128deg,rgb(237 230 216/.085) 0%,rgb(237 230 216/.03) 26%,transparent 48%),linear-gradient(180deg,transparent 60%,rgb(2 8 15/.28))}

/* Titres de section : plus grands, plus éditoriaux */
.t2{font-size:clamp(32px,4.3vw,60px);line-height:.98;letter-spacing:-.034em;font-variation-settings:"wdth" 86;font-weight:800}
.mot{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mot>span{display:inline-block}
.m .mots-arme .mot>span{transform:translateY(105%)}
.m .mots-vu .mot>span{transform:none;transition:transform .9s var(--ease);transition-delay:calc(var(--k)*38ms)}

/* Boutons : une touche de clavier, arête claire en haut, s'enfonce à l'appui */
.btn{box-shadow:inset 0 1px 0 rgb(255 255 255/.16),2px 3px 0 -1px rgb(3 10 18/.25),8px 14px 24px -14px rgb(3 10 18/.5)}
.on-navy .btn{box-shadow:inset 0 1px 0 rgb(255 255 255/.75),inset 0 -2px 0 rgb(10 31 51/.12),3px 5px 12px -6px rgb(2 8 15/.6)}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255/.18),3px 4px 0 -1px rgb(3 10 18/.22),12px 20px 30px -14px rgb(3 10 18/.55)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 3px rgb(3 10 18/.3);transition-duration:70ms}
.btn.ghost,.on-navy .btn.ghost{box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost{color:var(--navy)}
.on-navy .btn.ghost{color:var(--beige);box-shadow:inset 0 0 0 1.5px rgb(237 230 216/.45)}
.btn svg{transition:transform .4s var(--ease)}
.btn.copie-ok svg{transform:scale(.0)}

/* ================= Premier écran : la carte-code devient une dalle de verre trempé ================= */
.hero .w{position:relative;z-index:1}
.hero{background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgb(237 230 216/.035) 31px 32px)}
.verre3d{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
.verre3d canvas{display:block;width:100%;height:100%}
.hero.gl .verre3d{opacity:1}
.hero.gl::before{opacity:.5}
/* Dalle de secours (sans WebGL, téléphone) : chant de verre, ombre portée vers le bas à droite, liseré de lumière */
.hero .cons{transform-origin:50% 50%;will-change:auto}
.hero .cons::before{content:"";position:absolute;inset:-9px;z-index:-1;border-radius:calc(var(--r) + 9px);padding:9px;pointer-events:none;
  background:linear-gradient(135deg,rgb(255 255 255/.34),rgb(255 255 255/.06) 22%,rgb(170 200 222/.05) 60%,rgb(255 255 255/.16) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.35)}
.hero .cons::after{content:"";position:absolute;left:26px;right:-22px;bottom:-30px;height:46px;z-index:-2;pointer-events:none;border-radius:50%;
  background:radial-gradient(60% 50% at 60% 40%,rgb(2 8 15/.55),transparent 72%);filter:blur(8px)}
.hero.gl .cons::before,.hero.gl .cons::after{opacity:0;transition:opacity .8s}
@media (max-width:620px){.hero .cons::before{inset:-6px;padding:6px;border-radius:calc(var(--r) + 6px)}}

/* ================= La preuve, sous le premier écran ================= */
.preuve7{padding:clamp(40px,6vw,92px) 0 clamp(36px,5vw,72px)}
.preuve7 .w{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:28px clamp(28px,4vw,64px);align-items:end}
.preuve7 .kit10{grid-column:1/-1;margin-top:clamp(18px,3vw,40px);z-index:3} /* kit à 10 € sous la bande du Registre (décision de Simon, 22/10/2026) ; au-dessus de la dalle 1 qui vole vers la démo */
.pv-titre{display:grid;gap:clamp(6px,1vw,14px);font-weight:800;letter-spacing:-.04em}
.pv-l{display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,22px)}
.pv-l+.pv-l{padding-left:clamp(0px,9vw,140px)}
.pv-n{font:800 clamp(92px,13.5vw,196px)/.8 var(--f-d);font-variation-settings:"wdth" 82;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:inline-flex;overflow:clip;padding-bottom:.04em}
.pv-n .ch{display:inline-block}
.pv-m{font:700 clamp(22px,2.5vw,36px)/1.02 var(--f-d);font-variation-settings:"wdth" 90;letter-spacing:-.02em;max-width:12ch;padding-bottom:.18em}
.pv-l+.pv-l .pv-n{-webkit-text-stroke:2px var(--navy);color:transparent}
.pv-txt{display:grid;gap:12px;font-size:17px;line-height:1.55;max-width:44ch;padding-bottom:10px;border-top:1.5px solid var(--navy);padding-top:16px}
.pv-pied{font-size:15px;color:var(--ink-2)}
.pv-pied a{color:var(--navy);font-weight:600}
.m .pv-arme .pv-n .ch{transform:translateY(102%)}
.m .pv-arme .pv-m{opacity:0;transform:translateY(10px)}
.m .pv-vu .pv-n .ch{transform:none;transition:transform 1s var(--ease);transition-delay:calc(var(--k)*90ms + var(--l,0)*220ms)}
.m .pv-vu .pv-m{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(.35s + var(--l,0)*220ms)}
@media (max-width:900px){
 .preuve7 .w{grid-template-columns:1fr}
 .pv-l+.pv-l{padding-left:0}
 .pv-txt{max-width:60ch}
}
@media (max-width:620px){.pv-l{flex-direction:column;align-items:flex-start;gap:6px}.pv-m{max-width:none;padding-bottom:0}.pv-l+.pv-l{margin-top:14px}.pv-l+.pv-l .pv-n{-webkit-text-stroke-width:1.5px}}

/* ================= Une vraie tâche, en 4 temps : des dalles qui se superposent ================= */
.demo7{position:relative;overflow-x:clip;padding:clamp(36px,5vw,80px) 0;border-top:1.5px solid var(--navy)}
.demo-w{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:28px clamp(28px,4vw,60px);align-items:center}
.demo-tete{display:grid;gap:18px;align-content:start}
.demo-tete .t2{font-size:clamp(30px,3.4vw,48px)}
.demo-onglets{display:flex;flex-wrap:wrap;gap:8px}
.demo-onglets [role=tab]{display:grid;gap:2px;text-align:left;min-height:52px;padding:8px 14px;border-radius:14px;border:1.5px solid var(--line);background:rgb(255 255 255/.45);color:var(--navy);cursor:pointer;font:inherit;transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease)}
.demo-onglets [role=tab]:hover{border-color:rgb(10 31 51/.42)}
.demo-onglets [role=tab]:active{transform:scale(.97)}
.demo-onglets [aria-selected=true]{background:var(--navy);border-color:var(--navy);color:var(--beige)}
.o-n{font:500 13px/1.2 var(--f-m);opacity:.86}
.o-t{font:600 15.5px/1.25 var(--f-b)}
.rail{list-style:none;display:grid;gap:0;margin-top:4px;border-left:1.5px solid var(--line)}
.rail li{position:relative;display:flex;align-items:center;gap:10px;padding:7px 0 7px 18px;font:500 15px/1.3 var(--f-b);color:var(--ink-2);transition:color .3s}
.rail li i{position:absolute;left:-6px;width:11px;height:11px;border-radius:50%;background:var(--beige);border:1.5px solid rgb(10 31 51/.4);transition:background .3s,border-color .3s,transform .4s var(--rebond)}
.rail li.on{color:var(--navy);font-weight:600}
.rail li.on i{background:var(--navy);border-color:var(--navy);transform:scale(1.15)}
.rail{display:none}
.pile .rail{display:grid}

.demo-scene{min-width:0}
.dalles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;perspective:1700px;perspective-origin:50% 30%}
.dalle{position:relative;border-radius:18px;padding:18px 20px 18px;display:grid;gap:10px;align-content:start;background:#fffdf8;color:var(--navy);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),1px 1px 0 rgb(10 31 51/.06),8px 12px 22px -10px rgb(10 31 51/.18),22px 34px 56px -30px rgb(10 31 51/.34);border:1px solid rgb(10 31 51/.1);backface-visibility:hidden}
.dalle.on-navy{background:linear-gradient(150deg,#143553,#0a1f33 62%);color:var(--beige);border-color:rgb(237 230 216/.12);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.22),inset 0 0 0 1px rgb(237 230 216/.05),2px 3px 6px rgb(3 10 18/.25),12px 20px 34px -14px rgb(3 10 18/.5),26px 44px 70px -34px rgb(3 10 18/.6)}
.d1{background:var(--beige-2)}
.d-lab{display:flex;align-items:center;gap:9px;font:600 13px/1.2 var(--f-m);letter-spacing:.03em;color:var(--ink-2)}
.on-navy .d-lab{color:var(--on-2)}
.d-lab .no{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--navy);color:var(--beige);font-size:13px;flex:none}
.on-navy .d-lab .no{background:var(--beige);color:var(--navy)}
.d-txt{margin:0;font:400 17px/1.5 var(--f-b)}
.d-code p{margin:0 0 6px;font:400 15.5px/1.5 var(--f-m);color:var(--beige)}
.d-rep p{margin:0 0 3px;font:400 16px/1.48 var(--f-b)}
.d-rep p.saut{color:var(--ink-2)}
.d-note{font:500 13px/1.4 var(--f-m);color:var(--ink-2)}
.on-navy .d-note{color:var(--on-3)}
.dalle .scm{background:#f0d98a;color:var(--navy)}
.d1 .scm{background:var(--beige-3)}
.d2 .scm{background:var(--beige);color:var(--navy)}
.d3{grid-row:span 1}
.tampon-r{position:absolute;right:16px;top:-16px;margin:0;pointer-events:none;z-index:2}
.tampon-r span{display:inline-block;font:800 clamp(22px,2.1vw,30px)/1 var(--f-d);font-variation-settings:"wdth" 86;letter-spacing:.01em;color:var(--navy);background:var(--beige);border-radius:10px;padding:6px 14px 8px;transform:rotate(-5deg);
  box-shadow:0 0 0 3px var(--navy),6px 10px 20px -8px rgb(2 8 15/.55)}
.d-ctrl{list-style:none;display:grid;gap:12px}
.d-ctrl li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.45;color:var(--on-2)}
.d-ctrl b{display:block;color:var(--beige);font-weight:700;font-size:16px}
.case{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--beige);color:var(--navy);border:2px solid var(--beige);margin-top:1px}
.case svg{width:17px;height:17px}
.m .coche-arme .case{background:transparent}
.m .coche-arme .case svg{opacity:0;transform:scale(.4)}
.case svg{transition:opacity .2s,transform .45s var(--rebond)}
.case{transition:background .25s}
.d-pied{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;margin-top:20px}
.d-meta{font:500 13.5px/1.5 var(--f-m);color:var(--ink-2);max-width:56ch}
.d-meta a{color:var(--navy)}
/* Pile animée : seulement avec le mouvement permis et assez de place */
.demo7.pile{padding:6px 0 8px}
.pile .d-note{display:none}
.pile .demo-w{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);align-items:center}
.pile .d-pied{margin-top:10px}
.pile .dalle{padding:15px 18px}
.pile .dalles{transform-style:preserve-3d;gap:14px}
.pile .dalle{will-change:transform}
@media (max-width:999px){
 .demo-w{grid-template-columns:1fr}
}
@media (max-width:700px){
 .dalles{grid-template-columns:1fr;gap:14px}
 .d-txt{font-size:16.5px}
 .tampon-r{top:-14px;right:10px}
 .d-pied .btn{width:100%}
}
.m .revele-dalle{opacity:0;transform:translateY(34px) rotateX(-12deg)}
.m .dalle.vu7{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .9s var(--ease)}

/* ================= Offres : la pastille de la bascule s'étire comme une goutte ================= */
.m .bascule .pas.etire{animation:etire .42s var(--ease)}
@keyframes etire{40%{scale:1.22 .9}100%{scale:1 1}}
.carte{transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
@media (hover:hover){.carte:not(.pro):hover{transform:translateY(-4px)}}
.montant{font-variation-settings:"wdth" 84}

/* Sections marine : elles montent comme une plaque qu'on pose (piloté par le défilement, voir v7.js) */
.panel{transform-origin:50% 0}

/* Ratés : voyants un peu plus physiques (une lentille, lumière du haut à gauche) */
.rates-b.navy .vo{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 55%,#fff) 0 18%,var(--c) 46%,color-mix(in srgb,var(--c) 70%,#000) 100%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12),2px 3px 4px rgb(2 8 15/.4)}

/* Pages PRO et Équipe : même matière */
.eq-h h1{letter-spacing:-.04em}

/* =====================================================================================
   v7, passe 2 : la dalle héroïne, la vitrine, le graphisme éditorial du bas de page
   ===================================================================================== */

/* ---- Premier écran ---- */
/* la carte attend sa dalle (opacité seulement, place réservée : aucun décalage) ; filet de sécurité à 3,5 s */
.verre-attente .hero .cons{opacity:0;animation:montre 0s linear 3.5s forwards}
@keyframes montre{to{opacity:1}}
.hero .cons{backface-visibility:hidden}
.hero.gl .cons{background:linear-gradient(140deg,rgb(255 255 255/.10),rgb(255 255 255/.02));border-color:rgb(255 255 255/.16)}
.hero.gl{background-image:none}
/* Ligne des prix : trois morceaux nets */
.ligne-prix .lp b{color:var(--beige)}
@media (max-width:900px){
 .ligne-prix{display:grid;gap:2px;font-size:16px!important;line-height:1.45}
 .ligne-prix .pt{display:none}
 .ligne-prix a{justify-self:start;margin-top:4px}
 .hero .surtitre{order:0}.hero h1{order:1}.hero .sous{order:2}.hero .ligne-prix{order:3}.hero .portes{order:4}.hero .cons{order:5}.hero .choix-taches{order:6}
 .hero .sous{font-size:16px}
}
/* Titre : un peu plus d'air entre les lettres et les lignes */
.hero h1{letter-spacing:-.028em;line-height:1.01}
@media (max-width:620px){.hero h1{letter-spacing:-.02em;line-height:1.04}}
/* Tampon UNLOCKED : jamais sur un mot. Ordinateur : en bas à droite de la réponse, là où les lignes s'arrêtent */
.sc-tampon,.sc-tampon{top:auto;bottom:-30px;right:-20px}
.sc-tampon span{font-size:clamp(34px,3vw,46px);padding:6px 18px 9px}
.sc-rep{margin-bottom:8px}
@media (max-width:620px){
 .sc-tampon,.sc-tampon{top:auto;bottom:-40px;right:-2px}
 .sc-tampon span{font-size:24px;padding:3px 10px 5px}
 .sc-rep{margin-bottom:34px}
}
/* Vitrine CSS (téléphone, sans WebGL) : deux dalles dépolies à des profondeurs différentes */
.vitrine{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;border-radius:inherit}
.vitrine i{position:absolute;border-radius:26px;background:linear-gradient(150deg,rgb(255 255 255/.075),rgb(255 255 255/.015) 60%);border:1px solid rgb(255 255 255/.07);box-shadow:inset 1px 1px 0 rgb(255 255 255/.12),18px 30px 60px -30px rgb(2 8 15/.7);will-change:transform}
.vitrine i:nth-child(1){width:62%;height:24%;right:-22%;top:64%;transform:rotate(-4deg)}
.vitrine i:nth-child(2){width:48%;height:26%;left:-14%;bottom:6%;transform:rotate(3deg)}
.vitrine i:nth-child(3){width:70%;height:30%;right:-26%;bottom:-8%;transform:rotate(-2deg)}
.hero.gl .vitrine{display:none}
/* Le chant de la dalle en CSS : une épaisseur extrudée vers le bas à droite (côté ombre), arête claire en haut à gauche */
.hero:not(.gl) .cons{box-shadow:inset 1px 1px 0 rgb(255 255 255/.32),inset 0 0 0 1px rgb(237 230 216/.1),
  1px 1px 0 rgb(170 205 228/.34),2px 2px 0 rgb(150 190 216/.30),3px 3px 0 rgb(130 175 205/.27),4px 4px 0 rgb(112 160 194/.24),5px 5px 0 rgb(96 146 182/.22),6px 6px 0 rgb(82 132 170/.2),7px 7px 0 rgb(70 120 160/.18),8px 8px 0 rgb(60 108 150/.17),9px 9px 0 rgb(52 98 140/.16),10px 10px 0 rgb(46 90 132/.16),
  18px 26px 34px -10px rgb(2 8 15/.6),34px 54px 70px -30px rgb(2 8 15/.7)}
.hero:not(.gl) .cons::after{left:40px;right:-34px;bottom:-40px;height:26px;background:linear-gradient(90deg,transparent,rgb(156 200 230/.22) 30%,rgb(156 200 230/.06) 80%,transparent);filter:blur(5px);border-radius:50%}

/* ---- Filets numérotés : la grille éditoriale ---- */
.filet{display:flex;align-items:baseline;gap:18px;border-top:1.5px solid currentColor;padding-top:10px;margin-bottom:clamp(22px,3vw,40px);font:500 13px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;grid-column:1/-1}
.filet .fn{font-weight:600}
.filet .ft{color:var(--ink-2)}
.on-navy .filet .ft{color:var(--on-2)}
.demo7{border-top:0}
.demo7>.w:first-child .filet{margin-bottom:clamp(18px,2.4vw,30px)}
.pile .demo7>.w:first-child,.demo7.pile>.w:first-child{display:none}

/* ---- Typographie éditoriale du bas de page ---- */
.offres .t2,.comment .t2,.rates-b .t2,.profils .t2{font-size:clamp(40px,6.4vw,100px);line-height:.92;letter-spacing:-.045em;font-variation-settings:"wdth" 80;max-width:14ch}
.offres .off-tete{align-items:end}
.offres .lead{font-size:18px}

/* ---- Offres : vitrine de verre épais, le PRO en scène ---- */
.offres{background:var(--beige-2);border:1px solid var(--line);background-image:repeating-linear-gradient(180deg,transparent 0 47px,rgb(10 31 51/.05) 47px 48px),linear-gradient(128deg,rgb(255 255 255/.7),transparent 40%);position:relative;overflow:clip}
.offres::before{display:none;content:"";position:absolute;right:-2vw;top:clamp(110px,14vw,190px);font:800 clamp(180px,30vw,460px)/.8 var(--f-d);font-variation-settings:"wdth" 78;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgb(10 31 51/.08);pointer-events:none;z-index:0}
.offres .w{position:relative;z-index:1}
.grille{position:relative;perspective:1600px}
.carte{background:linear-gradient(155deg,rgb(255 255 255/.72),rgb(255 255 255/.42) 55%,rgb(246 241 231/.6));-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);border:1px solid rgb(255 255 255/.7);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.95),inset -1px -1px 0 rgb(10 31 51/.06),1px 1px 0 rgb(201 188 160/.6),2px 2px 0 rgb(201 188 160/.45),3px 3px 0 rgb(201 188 160/.35),4px 4px 0 rgb(201 188 160/.28),5px 5px 0 rgb(201 188 160/.22),14px 22px 34px -14px rgb(10 31 51/.3),34px 56px 80px -40px rgb(10 31 51/.34)}
.carte.pro{background:linear-gradient(155deg,#18405f,#0a1f33 58%,#0d2740);border:1px solid rgb(237 230 216/.16);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.28),inset 0 0 0 1px rgb(237 230 216/.05),1px 1px 0 #2a5577,2px 2px 0 #24506f,3px 3px 0 #1f4866,4px 4px 0 #1b415e,5px 5px 0 #173a55,6px 6px 0 #14344d,7px 7px 0 #112e45,8px 8px 0 #0f2a3f,20px 34px 50px -16px rgb(3 10 18/.6),46px 76px 110px -50px rgb(3 10 18/.7)}
@media (min-width:901px){.carte.pro{transform:translateY(-18px) scale(1.035)}.carte.pro.reco{transform:translateY(-24px) scale(1.035)}}
.carte.pro .montant{font-size:clamp(56px,6.2vw,80px)}
.vitre{position:absolute;inset:-20px -24px;z-index:3;border-radius:30px;pointer-events:none;display:none;
  background:linear-gradient(140deg,rgb(255 255 255/.5),rgb(255 255 255/.18) 50%,rgb(220 232 240/.3));-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);border:1px solid rgb(255 255 255/.8);box-shadow:inset 1px 1px 0 #fff,inset 0 0 40px rgb(255 255 255/.25)}
.m .grille.sort .vitre{display:block}
.lignes{position:relative;z-index:1}

/* ---- 3 étapes : grands chiffres creux, filets ---- */
.etapes3 li{position:relative;padding-top:6px}
.etapes3 .gros{display:block;font:800 clamp(110px,13vw,190px)/.78 var(--f-d);font-variation-settings:"wdth" 80;letter-spacing:-.06em;color:var(--navy);margin-bottom:10px}

.etapes3 h3{font-size:clamp(22px,2vw,28px)}
.etapes3 p{font-size:16px}

/* ---- Questions : titre géant à gauche, réponses à droite ---- */
.faq .filet{margin-bottom:24px}
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px clamp(28px,5vw,80px);align-items:start}
.faq-g .t2{font-size:clamp(48px,7vw,110px);line-height:.9;letter-spacing:-.05em;font-variation-settings:"wdth" 80}
.faq details{padding:6px 0}
.faq summary{font-size:18px;min-height:56px}
@media (max-width:900px){.faq-g{grid-template-columns:1fr}}

/* ---- Bandeau final : la phrase en très grand ---- */
.final .t2{font-size:clamp(46px,8vw,128px);line-height:.9;letter-spacing:-.05em;font-variation-settings:"wdth" 80;max-width:11ch}
.final .w{align-items:end}

/* ---- Démonstration : chaque dalle a un chant de verre ---- */
.dalle{box-shadow:inset 1px 1px 0 rgb(255 255 255/.95),1px 1px 0 rgb(201 188 160/.7),2px 2px 0 rgb(201 188 160/.5),3px 3px 0 rgb(201 188 160/.38),4px 4px 0 rgb(201 188 160/.28),12px 18px 26px -12px rgb(10 31 51/.24),26px 40px 64px -32px rgb(10 31 51/.34)}
.dalle.on-navy{box-shadow:inset 1px 1px 0 rgb(255 255 255/.24),1px 1px 0 #2a5577,2px 2px 0 #21496a,3px 3px 0 #1a3f5c,4px 4px 0 #15364f,12px 18px 30px -12px rgb(3 10 18/.45),28px 44px 70px -32px rgb(3 10 18/.55)}
.pv-l+.pv-l .pv-n{-webkit-text-stroke:0;color:var(--navy)}
.pv-l+.pv-l .pv-m{color:var(--navy)}

/* ---- Pages PRO et Équipe : même vitrine, même typographie ---- */
.eq-h h1{font-size:clamp(44px,7.4vw,108px);line-height:.9;letter-spacing:-.05em;font-variation-settings:"wdth" 80}

/* ---- Téléphone ---- */
@media (max-width:700px){
 .filet{gap:12px;font-size:12.5px}
 .etapes3 .gros{font-size:96px}
 .offres::before{font-size:200px;top:120px;right:-30px}
}
/* accents des capitales (É) : jamais rognés par la ligne du dessus ni par le masque des mots */
.offres .t2,.comment .t2,.rates-b .t2,.profils .t2,.final .t2,.faq-g .t2{line-height:1}
.mot{padding-top:.14em;margin-top:-.14em}

/* ---- Passe 3 (juges) ---- */
:root{--on-2:rgb(237 230 216/.87);--on-3:rgb(237 230 216/.78)}
.ligne-prix{display:grid;gap:3px;font-size:16px;line-height:1.45}
.ligne-prix .pt{display:none}
.ligne-prix a{justify-self:start;margin-top:4px}
.sc-tampon,.sc-tampon{bottom:-46px;right:-26px}
.sc-rep{margin-bottom:22px}
.tampon-r{top:auto;bottom:-16px;right:16px}
.tampon-r span{transform:rotate(-4deg)}
.d3{padding-bottom:30px}
.vitre{-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
@media (max-width:900px){
 .hero .surtitre{display:none}
 .hero .sous-l{display:none}
 .hero .sous{order:2}.hero .ligne-prix{order:3}.hero .cons{order:4}.hero .portes{order:5}.hero .choix-taches{order:6}
}
@media (max-width:900px){.hero .surtitre{display:block;font-size:14px}}
@media (max-width:620px){.sc-tampon,.sc-tampon{bottom:-40px;right:-2px}.sc-rep{margin-bottom:34px}}

/* =====================================================================================
   v7, passe 3 : un cran de plus en 3D et en mouvement, et les corrections du juge
   ===================================================================================== */
/* Ordinateur : le message du client tient entier dans la carte (le code montre sa règle clé, en 16 px) */
@media (min-width:901px){
 .sc-code .sc-cap+.sc-l.d{display:none}
 .sc-code .sc-l{font-size:16px;line-height:1.5}
 .sc-plan{gap:10px}
 .sc-cadre{max-height:calc(100svh - 250px)}
}
/* Téléphone : « Pour moi / Pour mon équipe » revient dans le premier écran, juste après les prix */
@media (max-width:900px){
 .hero .sous{order:2}.hero .ligne-prix{order:3}.hero .portes{order:4}.hero .cons{order:5}.hero .choix-taches{order:6}
}
@media (max-width:620px){
 .hero .w{row-gap:14px}
 .hero h1{font-size:clamp(32px,9.4vw,40px)}
 .ligne-prix{font-size:15.5px!important;line-height:1.4;gap:1px}
 .ligne-prix .lp-l{display:none}
 .ligne-prix a{display:none}
 .portes{gap:8px}
 .porte{min-height:52px;padding:8px 14px;border-radius:16px}
 .porte b{font-size:16px}.porte span{font-size:13px}
}
/* Téléphone et sans WebGL : la dalle CSS a un chant plus épais et la vitrine se voit */
.hero:not(.gl) .cons{box-shadow:inset 1px 1px 0 rgb(255 255 255/.36),inset 0 0 0 1px rgb(237 230 216/.12),
  1px 1px 0 rgb(176 210 232/.42),2px 2px 0 rgb(160 198 222/.38),3px 3px 0 rgb(144 186 214/.34),4px 4px 0 rgb(128 174 206/.31),5px 5px 0 rgb(114 162 196/.28),6px 6px 0 rgb(100 150 186/.26),7px 7px 0 rgb(88 138 176/.24),8px 8px 0 rgb(78 128 168/.22),9px 9px 0 rgb(68 118 158/.21),10px 10px 0 rgb(60 108 150/.2),11px 11px 0 rgb(54 100 142/.2),12px 12px 0 rgb(48 92 134/.2),13px 13px 0 rgb(44 86 126/.2),14px 14px 0 rgb(40 80 120/.22),
  22px 30px 36px -10px rgb(2 8 15/.62),40px 60px 76px -30px rgb(2 8 15/.72)}
.hero:not(.gl) .cons::before{background:linear-gradient(135deg,rgb(255 255 255/.5),rgb(255 255 255/.08) 24%,rgb(170 200 222/.06) 60%,rgb(255 255 255/.24) 100%)}
.vitrine i{background:linear-gradient(150deg,rgb(255 255 255/.13),rgb(255 255 255/.03) 60%);border-color:rgb(255 255 255/.12);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.2),4px 4px 0 rgb(120 170 205/.09),8px 8px 0 rgb(120 170 205/.06),18px 30px 60px -30px rgb(2 8 15/.7)}
.vitrine i:nth-child(1){width:60%;height:22%;right:-30%;top:50%;transform:rotate(-5deg)}
.vitrine i:nth-child(2){width:46%;height:22%;left:-24%;top:66%;transform:rotate(4deg)}
.vitrine i:nth-child(3){width:70%;height:30%;right:-26%;bottom:-6%;transform:rotate(-3deg)}
/* Grands titres : posés sur la grille, plus de colonne étroite avec du vide à droite */
.offres .t2,.comment .t2,.rates-b .t2,.profils .t2{max-width:none}
@media (min-width:901px){
 .offres .off-tete{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:24px clamp(32px,4vw,72px);align-items:end}
 .offres .t2{font-size:clamp(44px,5.4vw,84px)}
 .off-cote{display:grid;gap:18px;justify-items:start;padding-bottom:8px}
 .off-cote .lead{margin-top:0}
 .comment .t2{font-size:clamp(44px,5.6vw,86px)}
 .r-tete{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:20px clamp(32px,4vw,72px);align-items:end}
 .rates-b .t2{font-size:clamp(44px,5.2vw,82px)}
 .r-tete .chiffres{margin-top:0;padding-bottom:6px}
}
@media (max-width:900px){.off-cote{display:grid;gap:16px;justify-items:start;margin-top:12px}}
/* Surlignages et tampons allégés : UNLOCKED au premier écran, « Prêt à relire » dans la démo, rien d'autre ne claque */
.badge{transform:none}
.m .badge.claque{animation:ap .3s var(--ease) both}

/* « Qui es-tu » : une liste éditoriale, pas quatre cartes pareilles */
.pf-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px clamp(32px,5vw,88px);align-items:start}
.pf-tete{display:grid;gap:18px;align-content:start}
.profils .pf-tete .t2{font-size:clamp(40px,4.8vw,76px)}
@media (min-width:901px){.pf-tete{position:sticky;top:110px}}
.pf-tete .lead{font-size:18px;line-height:1.5;max-width:36ch;color:var(--ink-2)}
.pf-liste{display:grid;gap:34px}
.profils .groupe{gap:0}
.profils .groupe h3{display:flex;align-items:baseline;gap:12px;font:600 13px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);padding-bottom:10px;border-bottom:1.5px solid var(--navy)}
.gl-n{font-weight:500;color:var(--ink-2)}
.profils .cp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"n f" "o f" "p f";gap:6px 18px;align-items:center;width:100%;padding:20px 4px 20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;text-align:left;transition:padding .45s var(--ease),background .3s}
.profils .cp b{grid-area:n;font:800 clamp(28px,2.6vw,40px)/1 var(--f-d);font-variation-settings:"wdth" 84;letter-spacing:-.03em;transition:transform .45s var(--ease)}
.profils .cp.grand b{font-size:clamp(40px,4.4vw,68px)}
.profils .cp .o{grid-area:o;font-size:16px;line-height:1.45;color:var(--ink-2)}
.profils .cp .px{grid-area:p;font:500 14px/1.4 var(--f-m);color:var(--navy);margin:0}
.cp-f{grid-area:f;justify-self:end;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--navy);position:relative;transition:background .3s,transform .45s var(--ease)}
.cp-f::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translate(-65%,-50%) rotate(-45deg);transition:border-color .3s}
@media (hover:hover){.profils .cp:hover b{transform:translateX(10px)}.profils .cp:hover .cp-f{background:var(--navy)}.profils .cp:hover .cp-f::before{border-color:var(--beige)}}
.profils .cp[aria-expanded=true]{background:transparent;color:var(--navy);padding-left:20px;box-shadow:inset 5px 0 0 var(--navy)}
.profils .cp[aria-expanded=true] .o{color:var(--ink-2)}.profils .cp[aria-expanded=true] .px{color:var(--navy)}
.profils .cp[aria-expanded=true] .cp-f{background:var(--navy);transform:rotate(90deg)}
.profils .cp[aria-expanded=true] .cp-f::before{border-color:var(--beige)}
.profils .lien-etud{font-size:16px}
@media (max-width:900px){.pf-g{grid-template-columns:1fr}.pf-liste{gap:26px}}
@media (max-width:620px){.profils .cp b{font-size:26px}.profils .cp.grand b{font-size:34px}.profils .cp{grid-template-columns:minmax(0,1fr) 44px;padding:16px 0}}

/* passe 3, juges : la carte HTML n'a plus son propre cadre quand la dalle 3D est là (la dalle est le cadre) */
.hero.gl .cons{border-color:transparent;box-shadow:none;background:linear-gradient(140deg,rgb(255 255 255/.06),rgb(255 255 255/0) 60%)}
/* Téléphone et sans WebGL : une vraie dalle penchée derrière la carte, la carte et son texte restent droits */
@media (max-width:999px){
 .hero:not(.gl) .cons::before{inset:-14px -10px -18px -12px;padding:0;border-radius:calc(var(--r) + 12px);-webkit-mask:none;mask:none;
  background:linear-gradient(135deg,rgb(255 255 255/.26),rgb(255 255 255/.05) 30%,rgb(140 185 215/.08) 62%,rgb(255 255 255/.18));
  border:1px solid rgb(255 255 255/.22);transform:perspective(900px) rotateY(-11deg) rotateX(6deg) translateZ(-24px);transform-origin:50% 50%;
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.4),2px 2px 0 rgb(150 192 222/.34),4px 4px 0 rgb(128 176 210/.3),6px 6px 0 rgb(110 162 198/.27),8px 8px 0 rgb(94 148 186/.24),10px 10px 0 rgb(80 134 174/.22),12px 12px 0 rgb(68 120 162/.2),14px 14px 0 rgb(58 108 150/.2),16px 16px 0 rgb(50 98 140/.2),26px 36px 44px -12px rgb(2 8 15/.65)}
 .hero:not(.gl) .cons{box-shadow:inset 1px 1px 0 rgb(255 255 255/.3),inset 0 0 0 1px rgb(237 230 216/.12),6px 10px 22px -8px rgb(2 8 15/.5)}
}
/* « Prêt à relire » : dans la dalle 3, jamais sur la ligne du dessous */
.d3{padding-bottom:58px}
.tampon-r{bottom:12px;right:16px}
.final .t2{max-width:16ch}
/* passe 3, juge 4 : petites lignes machine à écrire à 14 px, prix du téléphone sur deux lignes, marge du code */
.sc-preuve,.sc-cap,.sp,.d-meta,.d-note{font-size:14px!important;line-height:1.5}
@media (max-width:620px){
 .ligne-prix{display:block!important}
 .ligne-prix .pt{display:inline!important}
 .ligne-prix .lp{white-space:nowrap}
 .sc-code{padding:0 12px}
}

/* =====================================================================================
   v7, passe 3 bis : un peu de toolscale (verre, défilement doux, tuiles), à notre façon
   ===================================================================================== */
/* Barre de navigation : pilule de verre marine flottante, qui se détache du haut au défilement */
.nav{background:rgb(10 31 51/.93);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);border:1px solid rgb(255 255 255/.12);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 10px 30px -18px rgb(2 8 15/.6);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.nav .wm,.nav .wm b{color:var(--beige)}
.nav nav a{color:var(--on-2)}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--beige);background:rgb(237 230 216/.12)}
.nav .cnx{color:var(--beige)}
.nav .small.muted{color:var(--on-2)}
.hdr.detache .nav{transform:translateY(4px) scale(.94);box-shadow:inset 0 1px 0 rgb(255 255 255/.12),0 22px 44px -20px rgb(2 8 15/.75)}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Bouton principal : pilule et pastille ronde avec la flèche, qui glisse un peu au survol */
.btn.fl{border-radius:999px;padding-right:8px;gap:12px}
.btn.fl::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--beige) no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a1f33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");transition:transform .45s var(--ease)}
.on-navy .btn.fl::after,.basbar .btn.fl::after,.carte.pro .btn.fl::after{background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ede6d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E")}
.carte.equipe .btn.fl::after{background-color:var(--beige)}
@media (hover:hover){.btn.fl:hover::after{transform:translateX(5px)}}
.carte .btn.fl{justify-content:space-between;padding-left:22px}

/* Tuiles de vraies tâches qui flottent autour du titre (ordinateur large seulement, décor) */
.tuiles{display:none}
@media (min-width:1280px){
 .tuiles{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
 section:has(#e3:not([hidden])) .tuiles{display:none} /* le formulaire de l'e-mail et ses mentions ne sont jamais cachés par une tuile */
 .tuiles i{position:absolute;left:var(--x);top:var(--y);max-width:128px;font:500 15px/1.3 var(--f-b);font-style:normal;color:var(--beige);padding:10px 13px;border-radius:14px;
  background:linear-gradient(150deg,rgb(255 255 255/.14),rgb(255 255 255/.04));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgb(255 255 255/.16);
  box-shadow:inset 1px 1px 0 rgb(255 255 255/.22),2px 2px 0 rgb(130 175 205/.16),4px 4px 0 rgb(110 160 195/.1),14px 22px 34px -16px rgb(2 8 15/.7);
  translate:calc(var(--mx,0) * var(--p) * 7px) calc(var(--my,0) * var(--p) * 10px + var(--sy,0) * var(--p) * -1px);rotate:calc((var(--p) - .85) * 6deg)}
 .tuiles i:nth-child(3){max-width:none}
 .m .tuiles i{animation:tuile-in .9s var(--ease) both;animation-delay:calc(var(--p) * .6s + .4s)}
}
@keyframes tuile-in{from{opacity:0;transform:translateY(14px) scale(.94)}}

/* Carte de verre : les vrais codes du Registre défilent en boucle, fondu en haut et en bas */
.defile{margin-top:6px;border-radius:20px;padding:14px 16px 12px;background:linear-gradient(155deg,rgb(255 255 255/.72),rgb(255 255 255/.4));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(255 255 255/.75);
  box-shadow:inset 1px 1px 0 #fff,1px 1px 0 rgb(201 188 160/.6),2px 2px 0 rgb(201 188 160/.45),3px 3px 0 rgb(201 188 160/.32),14px 22px 34px -14px rgb(10 31 51/.3)}
.df-tete,.df-pied{display:flex;justify-content:space-between;gap:12px;font:500 14px/1.3 var(--f-m);color:var(--ink-2)}
.df-pied{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;flex-wrap:wrap}
.df-pied b{color:var(--navy);font-family:var(--f-d);font-size:18px;font-weight:800}
.df-fen{height:216px;overflow:auto;margin-top:8px;-webkit-mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000);mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000)}
.df-l{list-style:none;margin:0;padding:0}
.df-bis{display:none}
.df-l li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.3}
.df-l .n{font:500 14px/1 var(--f-m);color:var(--ink-2)}
.df-l .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-l .v{font:600 13px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px}
.df-l .v.vert{background:rgb(35 102 62/.12);color:#1d5a36}.df-l .v.orange{background:rgb(176 98 20/.14);color:#7a420c}
.m .df-fen{overflow:hidden}
.m .df-bis{display:block}
.m .df-fen>ul{animation:df-boucle 160s linear infinite}
.m .defile:hover .df-fen>ul,.m .defile:focus-within .df-fen>ul{animation-play-state:paused}
@keyframes df-boucle{to{transform:translateY(-100%)}}

/* Les 3 étapes : des cartes, une image en haut barrée d'une bande de lumière, numéro au-dessus du titre */
.etapes3 li{padding:12px 12px 20px;border-radius:22px;background:linear-gradient(155deg,rgb(255 255 255/.62),rgb(255 255 255/.32));border:1px solid rgb(255 255 255/.7);
  box-shadow:inset 1px 1px 0 #fff,1px 1px 0 rgb(201 188 160/.55),2px 2px 0 rgb(201 188 160/.4),3px 3px 0 rgb(201 188 160/.28),14px 22px 34px -16px rgb(10 31 51/.28)}
.etapes3 li>:not(.e-img){margin-inline:8px}
.etapes3 .n{font-size:14px;color:var(--navy)}
.e-img{position:relative;overflow:clip;height:150px;border-radius:14px;margin-bottom:12px;background:linear-gradient(150deg,#18405f,#0a1f33 62%);padding:16px;display:flex;flex-direction:column;gap:8px;justify-content:center;color:var(--beige)}
.e-img::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 42%,rgb(255 255 255/.16) 48%,rgb(255 255 255/.05) 52%,transparent 58%);transform:translateX(-30%);pointer-events:none}
.m .etapes3.vu .e-img::after{animation:lumiere 1.6s var(--ease) both}
.m .etapes3.vu li:nth-child(2) .e-img::after{animation-delay:.2s}.m .etapes3.vu li:nth-child(3) .e-img::after{animation-delay:.4s}
@keyframes lumiere{from{transform:translateX(-70%)}to{transform:translateX(-30%)}}
.e-img .ep{align-self:flex-start;font:500 14px/1.2 var(--f-b);padding:7px 11px;border-radius:999px;border:1px solid rgb(237 230 216/.3)}
.e-img .ep.on{background:var(--beige);color:var(--navy);border-color:var(--beige)}
.e-img .et{font:500 14px/1.3 var(--f-m);border-bottom:2px dashed rgb(237 230 216/.5);align-self:flex-start;padding:2px 4px}
.e-img .el{font:500 14px/1.4 var(--f-m)}
.e-img .el.c i{display:inline-block;width:.55em;height:1em;background:var(--beige);vertical-align:-.15em;margin-left:4px}
.m .e-img .el.c i{animation:clig 1.06s steps(1) infinite}
.e-img .ec{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--f-b)}
.e-img .ec::before{content:"";width:20px;height:20px;border-radius:6px;flex:none;background:var(--beige) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a1f33' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E")}
.etapes3::before{display:none}

/* Téléphone : barre d'action collante en verre (elle se cache pendant la démo, voir console.js) */
.basbar{background:rgb(10 31 51/.72);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgb(255 255 255/.13)}
.basbar .btn.fl{justify-content:space-between;padding-left:22px}

/* Registre : les lignes entrent en décalé, du flou vers le net, à chaque filtre */
.m .liste .ligne.entre{animation:flou-net .5s var(--ease) both;animation-delay:calc(var(--k,0) * 35ms)}
@keyframes flou-net{from{opacity:0;filter:blur(6px);transform:translateY(10px)}}
.filtres .puce[aria-pressed=true]{background:var(--navy);color:var(--beige);border-color:var(--navy)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media (min-width:901px){.preuve7 .defile{grid-column:1;max-width:560px;margin-left:clamp(0px,9vw,140px)}}

/* Téléphone : la page réserve la hauteur de la barre d'action, elle ne masque jamais un bouton */
@media (max-width:760px){body{padding-bottom:84px}}
.tuiles i{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(150deg,rgb(24 64 95/.92),rgb(10 31 51/.88))}
/* Reflet de la dalle 3D : la face de la carte reçoit un fond marine plein, pour que le reflet blanc ne passe jamais derrière le texte.
   Le verre reste visible sur le chant et le pourtour. */
.hero.gl .cons{background:linear-gradient(150deg,rgb(20 53 83/.97),rgb(10 31 51/.97) 60%);border-color:rgb(255 255 255/.10)}

/* =====================================================================================
   v7, lot 5-8 (21/10/2026) : premier écran téléphone, cartes d'étapes, en-tête téléphone
   ===================================================================================== */
/* Tampon du haut de carte (téléphone seulement) : la carte arrive finie, UNLOCKED et « Rejoué » visibles d'emblée */
.sc-tampon-mo{display:none}
.sc-arme .sc-tampon-mo{opacity:0}
@media (max-width:620px){
 .hero .surtitre{display:none}
 .hero .cons{margin-top:22px;padding:12px 12px 10px}
 .scene{gap:10px}
 .sc-pied{display:contents}
 .sc-pied .sc-preuve{order:-1;padding:2px 2px 0}
 .sc-pied .sc-preuve::before{content:"";float:right;width:122px;height:12px}
 .sc-pied .sc-rejouer{order:2;justify-self:start}
 .sc-rep .sc-tampon{display:none}
 .sc-rep{margin-bottom:2px}
 .sc-tampon-mo{display:block;position:absolute;top:-19px;right:10px;z-index:3;margin:0;pointer-events:none}
 .sc-tampon-mo span{font-size:27px;padding:3px 11px 6px;border-radius:8px;transform:rotate(-6deg);
  box-shadow:0 0 0 3px rgb(10 31 51/.65),0 14px 26px -10px rgb(2 8 15/.9)}
 .m:not(.sc-arme) .sc-tampon-mo span{animation:claque-mo .5s .62s both}
}
@keyframes claque-mo{
 0%{opacity:0;transform:scale(2.3) rotate(3deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
 42%{opacity:1;transform:scale(1) rotate(-6deg);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
 62%{transform:scale(1.07) rotate(-6deg)}
 100%{opacity:1;transform:scale(1) rotate(-6deg)}}

/* Les 3 étapes : le grand chiffre en filigrane, même matière pour les trois cartes */
.etapes3 li{overflow:clip;isolation:isolate}
.etapes3 .gros{position:absolute;right:10px;bottom:-.2em;z-index:-1;margin:0;font:800 clamp(130px,12vw,170px)/.8 var(--f-d);font-variation-settings:"wdth" 80;letter-spacing:-.06em;color:var(--navy);opacity:.06;pointer-events:none;user-select:none}
.etapes3 .n{font:600 14px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase}

/* En-tête : « Équipes » aussi sur téléphone */
.nav .nav-c{display:none}
@media (max-width:820px){.nav .nav-l{display:none}.nav .nav-c{display:inline}}
@media (max-width:400px){.nav{padding-left:16px;gap:8px}.nav nav{gap:0}.nav nav a{padding:12px 7px}}
/* Téléphone et sans WebGL : la face de la dalle est un calque à part, posé entre la dalle penchée et le texte
   (ordre garanti même quand la carte bouge) ; biseau clair en haut à gauche, arête sombre en bas à droite */
@media (max-width:999px){
 .hero:not(.gl) .cons{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:6px 10px 22px -8px rgb(2 8 15/.5)}
 .hero:not(.gl) .cons::before{z-index:-2}
 .hero:not(.gl) .cons::after{inset:0;left:0;right:0;bottom:0;height:auto;z-index:-1;border-radius:inherit;filter:none;
  background:linear-gradient(152deg,rgb(34 70 102),rgb(14 40 64) 58%,rgb(11 33 54));
  box-shadow:inset 1.5px 1.5px 0 rgb(255 255 255/.34),inset -1px -1px 0 rgb(2 8 15/.4),inset 0 0 0 1px rgb(237 230 216/.1)}
}
.sc-preuve .nw,.sc-preuve a{white-space:nowrap}
@media (max-width:380px){.nav .wm .c{display:none}}
/* Pages de paiement : mentions avant de payer et dépliant « Les conditions en clair » (corrections juridiques du 22/10/2026) */
.claude-a-part{border-radius:16px;padding:14px 16px;border:1.5px dashed rgb(10 31 51/.4);font-size:15px;line-height:1.5}
.claude-a-part b{display:block}
.avant-k{margin-top:24px;padding-top:18px;border-top:1.5px solid var(--navy);display:grid;gap:12px}
.avant-k h3{font-size:21px}
.clair{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.clair summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}
.clair-c{display:grid;gap:10px;padding:4px 0 14px;font-size:15px;line-height:1.55;overflow-wrap:break-word}
.clair-c ul{padding-left:1.2em;display:grid;gap:6px}

/* Annonce du kit 10 € en tête des tarifs (produit d'appel) */
.appel-10{margin:0 0 18px;padding:12px 16px;border-radius:14px;border:1px dashed rgb(10 31 51/.28);background:rgb(255 255 255/.45);font-size:16px;line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.appel-10 a{font-weight:700;color:var(--navy);text-underline-offset:3px}