/* Yodriv · site de présentation v5 (27/10/2026) : la v4 enrichie, ouverture liquide. Charte « Saphir & glacier ».
   Source : brand/saphir-glacier/ (CHARTE.md, MIGRATION.md, yodriv.css). Saphir pour la marque, les boutons et les
   mots-clés (texte blanc dessus) ; glacier décoratif uniquement (facette, point, ombre décalée, trait), jamais de texte
   blanc dessus ni de texte glacier sur blanc ; encre pour les titres et les rares surfaces sombres. Fond blanc dominant.
   Mise en page, animations et contenus de la v4 conservés. */
@font-face{font-family:Lexend;src:url('../fonts/Lexend-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{
 /* Couleurs de la charte (brand/saphir-glacier/yodriv.tokens.json) */
 --brand-primary:#2457A7;--brand-primaryHover:#1C478B;--brand-primaryPressed:#16386F;--brand-primarySoft:#EAF1FC;
 --brand-accent:#72D9E4;--brand-accentSoft:#E8F8FA;
 --text-primary:#172B46;--text-secondary:#57677D;--text-inverse:#FFFFFF;
 --surface-default:#FFFFFF;--surface-page:#F5F8FC;--border-subtle:#DCE4EE;--border-control:#7B8CA5;
 --focus-light:#2457A7;--focus-dark:#72D9E4;
 --status-success:#16734B;--status-successSoft:#EAF7EF;--status-warning:#8A4B00;--status-warningSoft:#FFF5DE;
 --status-danger:#B42318;--status-dangerSoft:#FFF0EE;
 --dark-page:#172B46;--dark-surface:#223B5A;--dark-text:#FFFFFF;--dark-textSecondary:#C5D3E5;--dark-border:#8296B2;--dark-link:#72D9E4;
 --disabled-background:#DCE4EE;--disabled-text:#526177;
 /* Ombres et mouvement de la charte */
 --shadow-card:0 12px 36px -18px rgb(23 43 70 / .20);--shadow-floating:0 20px 48px -20px rgb(23 43 70 / .24);
 --shadow-saphir:0 16px 30px -14px rgb(36 87 167 / .55);
 --duration-fast:160ms;--duration-normal:240ms;--duration-reveal:480ms;
 --sortie:cubic-bezier(.2,.8,.2,1);--ressort:cubic-bezier(.34,1.56,.64,1);
 --cadre:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font:400 18px/1.6 Lexend,system-ui,sans-serif;color:var(--text-primary);background:var(--surface-default);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px;border-radius:10px}
.pied :focus-visible{outline-color:var(--focus-dark)}
.evitement{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;border-radius:12px;background:var(--brand-primary);color:var(--text-inverse);font-weight:600}
.evitement:focus{left:8px}
.cadre{width:min(var(--cadre),calc(100% - 48px));margin:0 auto}
.centre{text-align:center}
.heure,[data-repris],[data-compteur-haut],[data-compte]{font-variant-numeric:tabular-nums}

/* ---------- Ouverture : voir la section « Ouverture liquide » en fin de fichier ---------- */
.avec-ouverture .entete-logo{opacity:0}
.entete-logo{transition:opacity .2s}

/* ---------- Boutons en pilule : saphir, texte blanc, bulle glacier ----------
   Survol : une facette inclinée comme celle du logo balaie le bouton, le libellé roule, la flèche sort de sa bulle et
   revient (la voiture repart). Le bouton suit un peu la souris (--mx, --my posés par le script). Clic : éclats de facettes. */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 7px 0 26px;border-radius:99px;border:0;font:600 17px/1.2 Lexend;cursor:pointer;overflow:hidden;isolation:isolate;translate:var(--mx,0px) var(--my,0px);transition:transform .3s var(--ressort),translate .3s var(--sortie),background var(--duration-fast),color var(--duration-fast)}
.btn svg{flex:none;width:42px;height:42px;padding:11px;border-radius:50%;transition:transform .4s var(--ressort)}
.btn svg use{transform-box:view-box}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-20%;width:140%;z-index:-1;transform:translateX(-105%) skewX(-24deg);transition:transform .5s var(--sortie)}
.btn:hover{transform:scale(1.04)}
.btn:hover::before{transform:translateX(0) skewX(-24deg)}
.btn:hover svg{transform:scale(1.1)}
.btn:hover svg use{animation:repart .55s var(--sortie)}
@keyframes repart{45%{transform:translateX(26px)}46%{transform:translateX(-26px)}100%{transform:none}}
.btn:active{transform:scale(.95)}
.btn-texte{position:relative;display:block;overflow:hidden;height:1.2em}
.btn-roule{display:block;transition:transform .45s var(--ressort)}
.btn-double{position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .btn-roule{transform:translateY(-100%)}

.btn-principal{background:var(--brand-primary);color:var(--text-inverse);box-shadow:var(--shadow-saphir)}
.btn-principal::before{background:var(--brand-primaryHover)}
.btn-principal:active::before{background:var(--brand-primaryPressed)}
.btn-principal svg{background:var(--brand-accent);color:var(--text-primary)}
.btn-secondaire{padding:0 26px;background:var(--surface-default);color:var(--brand-primary);box-shadow:inset 0 0 0 2px var(--brand-primary)}
.btn-secondaire::before{background:var(--brand-primarySoft)}
.btn-sm{min-height:44px;padding:0 5px 0 18px;font-size:14.5px;gap:8px}
.btn-sm svg{width:34px;height:34px;padding:9px}
.btn:disabled{background:var(--disabled-background);color:var(--disabled-text);box-shadow:none;cursor:not-allowed;transform:none}
.btn:disabled::before{display:none}
.btn[aria-busy="true"]{cursor:progress}

/* ---------- Mots-clés sur pastille, étiquettes, badges ---------- */
.mot{display:inline-block;padding:0 .16em .04em;border-radius:.22em;line-height:1.08;transform:rotate(-2deg);transition:transform .5s var(--ressort)}
.mot:hover{transform:rotate(2deg) scale(1.04)}
.mot-saphir{background:var(--brand-primary);color:var(--text-inverse);box-shadow:.07em .07em 0 var(--brand-accent)}
/* Le mot-clé arrive comme un tampon : grand et penché, il s'écrase à sa place, puis son ombre glacier apparaît */
.js .mot{opacity:0;transform:scale(1.6) rotate(-10deg);box-shadow:0 0 0 var(--brand-accent)}
.js .vu .mot,.js .mot.vu{opacity:1;transform:rotate(-2deg);box-shadow:.07em .07em 0 var(--brand-accent);transition:opacity .15s .35s,transform .55s .35s var(--ressort),box-shadow .3s .8s var(--sortie)}
.js .vu .mot:hover{transform:rotate(2deg) scale(1.04);transition:transform .5s var(--ressort)}

/* ---------- En-tête ---------- */
.entete{position:fixed;z-index:100;top:14px;left:50%;transform:translateX(-50%);width:min(1220px,calc(100% - 24px));display:flex;align-items:center;gap:24px;height:64px;padding:0 10px 0 22px;border-radius:99px;transition:background .3s,box-shadow .3s}
.entete.defile{background:rgb(255 255 255 / .92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-card)}
.entete-logo img{height:auto;width:150px}
.entete-liens{display:flex;gap:4px;margin-left:auto}
.entete-liens a{position:relative;padding:10px 14px;border-radius:99px;font-size:15px;font-weight:500;color:var(--text-primary);transition:color .2s,background .2s}
.entete-liens a:hover{background:var(--surface-page)}
.entete-liens a.actif{color:var(--brand-primary)}
.entete-liens a.actif::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:3px;background:var(--brand-primary)}
.entete-menu{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-page);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.entete-menu i{width:18px;height:2.5px;border-radius:2px;background:var(--text-primary);transition:transform .25s}
.entete-menu[aria-expanded="true"] i:first-child{transform:translateY(4.25px) rotate(45deg)}.entete-menu[aria-expanded="true"] i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.menu-mobile{position:fixed;z-index:99;inset:84px 12px auto;padding:14px;border-radius:26px;background:var(--surface-default);display:grid;gap:4px;box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-floating)}
.menu-mobile a{padding:12px 14px;border-radius:14px;font-weight:500}
.menu-mobile a:not(.btn):hover{background:var(--surface-page)}
.menu-mobile .btn{justify-content:space-between;margin-top:8px}
.menu-mobile[hidden]{display:none}

/* ---------- Titres et textes ---------- */
.titre-haut{margin:0 auto;font:800 clamp(52px,8.4vw,124px)/1 Lexend;letter-spacing:-.05em}
.titre-haut .ligne{display:block;overflow:hidden;padding:.04em 0 .08em}
.titre-haut .ligne>span{display:inline-block}
.js .titre-haut .ligne>span{transform:translateY(110%);transition:transform .9s var(--sortie);transition-delay:calc(var(--l)*90ms)}
.js .titre-haut.vu .ligne>span{transform:none}
.titre-haut .mot{padding:0 .14em .06em}
.titre-section{margin:0 0 20px;font:800 clamp(40px,5.6vw,80px)/1.04 Lexend;letter-spacing:-.045em}
.entete-section{max-width:900px;margin-bottom:56px}
.entete-section.centre{margin-left:auto;margin-right:auto}
.texte{margin:0;max-width:620px;font-size:20px;color:var(--text-secondary)}
.centre .texte{margin:0 auto}
.petite{max-width:760px;margin:36px 0 0;font-size:14px;color:var(--text-secondary)}
.petite.centre{margin:36px auto 0}
.intro{margin:30px auto 36px;max-width:680px;font:400 clamp(18px,1.6vw,22px)/1.55 Lexend;color:var(--text-secondary)}
.intro strong{font-weight:700;color:var(--text-primary)}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Apparitions (le contenu est visible sans JavaScript) */
.js .reveler{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s var(--sortie),transform .8s var(--ressort)}
.js .reveler.vu{opacity:1;transform:none}

/* ---------- Widgets flottants : blanc ou saphir, ombre glacier décalée ---------- */
.flottant{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;font-size:13px;line-height:1.3;text-align:left;box-shadow:6px 6px 0 var(--brand-accent),var(--shadow-floating);animation:flotte 5s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.flottant b{display:block;font:700 14.5px Lexend}
.flottant>svg{flex:none;width:40px;height:40px;padding:10px;border-radius:14px}
.pile{display:flex}.pile img{width:30px;height:30px;border-radius:50%;background:var(--surface-default);border:2.5px solid var(--brand-primary);margin-left:-10px}.pile img:first-child{margin-left:0}
@keyframes flotte{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-16px) rotate(calc(var(--r,0deg) * -.7))}}
.js .flottant{opacity:0;scale:.5;transition:opacity .4s,scale .6s var(--ressort);transition-delay:var(--e,0s)}
.js .flottant.vu,.js .vu .flottant{opacity:1;scale:1}
@keyframes tourne{to{rotate:360deg}}

/* ---------- Haut de page ---------- */
.haut{position:relative;padding:160px 0 40px;text-align:center;overflow:hidden}
.haut-texte{position:relative}
.annonce{display:inline-flex;align-items:center;gap:10px;margin:0 0 30px;padding:9px 18px 9px 12px;border-radius:99px;background:var(--brand-primarySoft);color:var(--brand-primary);font:600 14px Lexend}
.annonce-point{width:10px;height:10px;border-radius:50%;background:var(--brand-accent);animation:pouls 2s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgb(114 217 228 / .7)}70%,100%{box-shadow:0 0 0 12px rgb(114 217 228 / 0)}}
.f-annule{left:-10px;top:120px;--r:-6deg;--e:.5s}
.f-prevenus{right:-20px;top:70px;--r:5deg;--d:-1.5s;--e:.65s}
.f-sauve{left:20px;bottom:40px;--r:4deg;--d:-3s;--e:.8s}
.f-yanis{right:0;bottom:110px;--r:-4deg;--d:-2s;--e:.95s}

/* Le planning vivant */

.rang{position:relative;height:78px}
/* Leçon réservée : bleu doux, texte encre ; heure libérée : blanc, contour saphir et pointillé glacier ; reprise : saphir, texte blanc */
.lecon{position:absolute;top:10px;height:58px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:16px;background:var(--brand-primarySoft);color:var(--text-primary);font-size:12px;overflow:hidden;transition:background .5s,color .4s,transform .5s var(--ressort),box-shadow .5s,opacity .5s}
.lecon img{width:28px;height:28px;border-radius:50%;background:var(--surface-default);flex:none}
.lecon b{display:block;font:700 13px/1.2 Lexend;white-space:nowrap}.lecon small{display:block;font-size:11px;color:var(--text-secondary);white-space:nowrap}
.lecon.libre{background:var(--surface-default);box-shadow:inset 0 0 0 2px var(--brand-primary);outline:2px dashed var(--brand-accent);outline-offset:3px;overflow:visible;animation:signal 1.2s ease-in-out infinite}
.lecon.libre small{color:var(--brand-primary);font-weight:600}
@keyframes signal{50%{outline-offset:6px}}
.lecon.reprise{background:var(--brand-primary);color:var(--text-inverse);transform:scale(1.06) rotate(-1deg);box-shadow:4px 4px 0 var(--brand-accent),var(--shadow-saphir)}
.lecon.reprise small{color:var(--brand-primarySoft)}
.lecon.reprise img{box-shadow:0 0 0 2px var(--brand-accent)}
.eclat{position:absolute;z-index:6;width:16px;height:18px;margin:-9px 0 0 -8px;pointer-events:none;animation:eclate .8s var(--sortie) forwards}
@keyframes eclate{from{opacity:1;transform:translate(0,0) rotate(0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(220deg) scale(.6)}}

/* ---------- Bandes animées ---------- */
.bandes{position:relative;padding:70px 0 10px;overflow:hidden;contain:paint}
.bandes::before,.bandes::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:120px;pointer-events:none}
.bandes::before{left:0;background:linear-gradient(90deg,var(--surface-default),rgb(255 255 255 / 0))}
.bandes::after{right:0;background:linear-gradient(-90deg,var(--surface-default),rgb(255 255 255 / 0))}
@keyframes glisse{to{transform:translateX(-50%)}}
.p-saphir{background:var(--brand-primary);color:var(--text-inverse)}.p-saphir svg{background:var(--brand-accent);color:var(--text-primary)}.p-saphir img{box-shadow:0 0 0 2px var(--brand-accent)}
.p-glacier{background:var(--brand-accentSoft);color:var(--text-primary)}.p-glacier svg{background:var(--brand-primary);color:var(--text-inverse)}

/* ---------- Sections ---------- */
.bloc{padding:140px 0 20px;position:relative}

/* Étapes de l'heure libérée */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.etape{position:relative;padding:30px 24px 24px;border-radius:28px;transition:transform .45s var(--ressort)}
.etape:hover{transform:translateY(-10px) rotate(-1.5deg)}
.etape:nth-child(2n):hover{transform:translateY(-10px) rotate(1.5deg)}
.etape h3{margin:0 0 6px;font:800 23px Lexend;letter-spacing:-.03em}
.etape p{margin:0 0 20px;font-size:16px;color:var(--text-secondary)}
.etape.active{transform:translateY(-8px)}
.etapes .reveler:nth-child(2){transition-delay:.08s}.etapes .reveler:nth-child(3){transition-delay:.16s}.etapes .reveler:nth-child(4){transition-delay:.24s}
@keyframes rebours{from{transform:scaleX(1)}to{transform:scaleX(.12)}}
.tri{display:flex;flex-wrap:wrap;gap:6px}
.tri i{font-style:normal;padding:5px 10px;border-radius:99px;font-weight:600;font-size:12px;animation:tri 4s infinite}
.tri .ok{background:var(--status-successSoft);color:var(--status-success)}.tri .non{background:var(--status-dangerSoft);color:var(--status-danger);text-decoration:line-through}
.tri i:nth-child(2){animation-delay:.3s}.tri i:nth-child(3){animation-delay:.6s}.tri i:nth-child(4){animation-delay:.9s}
@keyframes tri{0%,8%{transform:scale(.6);opacity:0}16%{transform:scale(1.1);opacity:1}22%,100%{transform:none;opacity:1}}
.preneur{display:flex;align-items:center;gap:10px}.preneur img{width:34px;height:34px;border-radius:50%;background:var(--brand-primarySoft)}.preneur b{display:block;font-size:14px}
@keyframes saut{0%,70%,100%{transform:none}80%{transform:scale(1.15) rotate(-6deg)}}
.gagnant{display:grid;gap:7px}.gagnant i{display:flex;align-items:center;gap:8px;font-style:normal;font-weight:600;font-size:13.5px}.gagnant svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--status-success);color:var(--text-inverse)}

/* Cartes des fonctions */

.carte{position:relative;grid-column:span 2;display:grid;gap:26px;align-content:space-between;min-height:360px;padding:32px;border-radius:28px;overflow:hidden;transition:transform .45s var(--ressort)}
.carte:hover{transform:translateY(-8px) scale(1.01)}
.carte h3{margin:0 0 8px;font:800 28px/1.15 Lexend;letter-spacing:-.04em}
.carte p{margin:0;font-size:16.5px}
.dictee{display:grid;gap:16px;padding:20px;border-radius:20px;background:var(--surface-page)}
.onde{display:flex;align-items:center;gap:5px;height:56px}
.onde i{flex:1;max-width:8px;height:100%;border-radius:6px;background:var(--brand-primary);animation:onde .9s ease-in-out infinite alternate}
.onde i:nth-child(3n){background:var(--brand-accent);animation-delay:.2s}.onde i:nth-child(2n){animation-delay:.4s}.onde i:nth-child(5n){animation-delay:.1s;background:var(--text-primary)}
@keyframes onde{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
.curseur-texte{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--brand-primary);animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
@keyframes attire{50%{transform:translateX(3px)}}
.corriger{margin-left:auto;min-height:44px;padding:0 16px;border-radius:99px;border:0;background:var(--brand-primary);color:var(--text-inverse);font-weight:600;font-size:13.5px;cursor:pointer;transition:background var(--duration-fast),transform .3s var(--ressort)}
.corriger:hover{background:var(--brand-primaryHover);transform:scale(1.05)}

/* Application */
.appli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.appli .texte{min-height:96px;transition:opacity .25s}
.dock{display:inline-flex;gap:8px;margin-top:28px;padding:8px;border-radius:99px;background:var(--surface-page)}
.dock button{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 22px 0 16px;border:0;border-radius:99px;background:transparent;color:var(--text-primary);font-weight:600;font-size:15px;cursor:pointer;transition:background .3s,color .3s,transform .35s var(--ressort)}
.dock button svg{width:22px;height:22px}
.dock button:hover{background:var(--brand-primarySoft)}
.dock button[aria-selected="true"]{background:var(--brand-primary);color:var(--text-inverse);transform:scale(1.04);box-shadow:3px 3px 0 var(--brand-accent)}
@keyframes respire{to{transform:scale(1.08)}}
.telephone{position:relative;z-index:1;width:300px;padding:11px;border-radius:48px;background:var(--dark-page);box-shadow:var(--shadow-floating);transform:rotate(-4deg)}
.ecran{position:relative;min-height:570px;border-radius:38px;background:var(--surface-page);overflow:hidden}
.ecran::before{content:"";position:absolute;top:12px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:var(--dark-page);z-index:2}
.vue{position:absolute;inset:0;padding:48px 18px 20px;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .35s,transform .55s var(--ressort);pointer-events:none}
.vue.actif{opacity:1;transform:none;pointer-events:auto}
.vue>small{font-size:12px;color:var(--text-secondary)}

/* Offres */
.offres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px}
.offre{position:relative;padding:36px;border-radius:28px;background:var(--surface-page);transition:transform .45s var(--ressort)}
.offre:hover{transform:translateY(-8px) rotate(-.6deg)}
.offre h3{margin:16px 0 10px;font:800 32px/1.1 Lexend;letter-spacing:-.04em}
.offre p{margin:0;font-size:17px;color:var(--text-secondary)}
.marque{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-top:26px;padding:20px;border-radius:20px;background:var(--surface-page)}
.marque label{font-size:14px;font-weight:600;color:var(--text-primary)}
.marque input{min-height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--border-control);background:var(--surface-default);font-weight:500;outline:none}
.marque input:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px}

/* Questions */

.questions{display:grid;gap:12px}
.questions details{border-radius:24px;background:var(--surface-page);transition:background .3s}
.questions details[open]{background:var(--brand-primarySoft)}
.questions summary{position:relative;list-style:none;cursor:pointer;padding:24px 76px 24px 28px;font:700 18px Lexend}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";position:absolute;right:20px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:var(--brand-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:3px 3px 0 var(--brand-accent);transition:transform .45s var(--ressort)}
.questions details[open] summary::after{transform:rotate(135deg)}
.questions p{margin:0;padding:0 28px 24px;font-size:17px;color:var(--text-secondary)}

/* Pilote */
.pilote{padding-bottom:140px}
.formulaire{display:grid;gap:14px;padding:32px;border-radius:28px;background:var(--surface-page);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.formulaire label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--text-primary)}
.formulaire input{min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--border-control);background:var(--surface-default);font-size:16px;outline:none}
.formulaire input:focus-visible{outline:3px solid var(--focus-light);outline-offset:3px}
.formulaire input[aria-invalid="true"]{border:2px solid var(--status-danger)}
.formulaire .btn{justify-content:space-between;margin-top:6px}

/* ---------- Pied de page encre, logo géant inverse ---------- */
.pied{padding:100px 0 28px;background:var(--dark-page);color:var(--dark-text);overflow:hidden;border-radius:44px 44px 0 0}
.pied-phrase{margin:0 0 28px;font:800 clamp(40px,5vw,72px)/1.05 Lexend;letter-spacing:-.05em}
.pied nav{display:grid;gap:12px;align-content:start}
.pied nav a{font-weight:500;color:var(--dark-textSecondary);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:color .2s,text-decoration-color .2s}
.pied nav a:hover{color:var(--dark-text);text-decoration-color:var(--brand-accent)}
.pied-logo{width:calc(100% - 32px);margin:70px auto 28px}
.pied-logo img{width:100%;height:auto;opacity:0;transform:translateY(35%) scale(.95);transition:opacity .9s var(--sortie),transform 1.1s var(--ressort)}
.pied-logo.vu img{opacity:1;transform:none}
.pied-bas{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:22px;border-top:1px solid var(--dark-border);font-size:14px;color:var(--dark-textSecondary)}
.pied-bas a{color:var(--dark-link);text-decoration:underline;text-underline-offset:.2em}
.pied-bas a:hover{color:var(--dark-text)}.haut-page{margin-left:auto}

/* ---------- Écrans moyens et petits ---------- */
@media (max-width:1080px){
 .entete-liens{display:none}
 .entete-menu{display:flex;margin-left:auto}
 .entete .btn-sm{display:none}
 .entete-logo img{width:130px}
 .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bento{grid-template-columns:minmax(0,1fr)}.carte,.carte-large{grid-column:auto}
 .appli,.offres,.pilote-cadre{grid-template-columns:minmax(0,1fr);gap:48px}
 .f-annule,.f-prevenus{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:14px auto 0;width:fit-content}.haut-texte{display:flex;flex-direction:column;align-items:center}.haut-texte .flottant{order:5}.f-sauve,.f-yanis{display:none}
}
@media (max-width:640px){
 body{font-size:16px}
 .cadre{width:calc(100% - 40px)}
 .entete-logo img{width:120px}
 .haut{padding-top:124px}
 .titre-haut{font-size:clamp(44px,13vw,64px)}
 .intro{font-size:17px}
 .btn{min-height:52px;font-size:16px;padding-left:22px}.btn svg{width:38px;height:38px}
 .btn-secondaire{padding:0 22px}
 .f-annule,.f-prevenus{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:14px auto 0;width:fit-content}
 .haut-texte{display:flex;flex-direction:column;align-items:center}
 .haut-texte .flottant{order:5}
 .bloc{padding:72px 0 10px}
 .titre-section{font-size:clamp(34px,10vw,48px)}
 .texte{font-size:17px}
 .entete-section{margin-bottom:40px}
 .etapes{grid-template-columns:minmax(0,1fr)}
 .carte{min-height:0;padding:24px;border-radius:22px}
 .telephone{width:270px}.ecran{min-height:530px}
 .dock{display:flex;width:100%}.dock button{flex:1;justify-content:center;padding:0 8px;font-size:14px}.dock button svg{display:none}
 .offre{padding:26px 22px}
 .marque{grid-template-columns:minmax(0,1fr)}
 .formulaire{padding:22px}
 .bandes::before,.bandes::after{width:40px}
 .questions summary{font-size:16px;padding:20px 66px 20px 22px}
 .haut-page{margin-left:0}
}

/* Mouvement réduit : ouverture en simple fondu (ouverture.js), pas de flottement ni de boucle, états utiles affichés directement */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .reveler,.js .flottant,.pied-logo img{opacity:1;transform:none;scale:1}
 .js .titre-haut .ligne>span{transform:none}
 .js .mot{opacity:1;transform:rotate(-2deg);box-shadow:.07em .07em 0 var(--brand-accent)}
 .barres i{transform:none}
}

/* ---------- Plus d'énergie (24/10/2026, demande d'Adam) ----------
   Le glacier plein entre dans les petits éléments (widgets, pastilles, une carte par section, question ouverte) avec
   du texte encre (8,68:1 selon la charte) : jamais de texte blanc ni gris dessus, jamais sur un bouton ni un gros titre.
   Le saphir plein prend une étape, une offre et les étiquettes de section. Pas de grand aplat de section. */
.annonce{background:var(--brand-primary);color:var(--text-inverse);box-shadow:4px 4px 0 var(--brand-accent)}
.surligne{background:linear-gradient(transparent 60%,var(--brand-accent) 60%,var(--brand-accent) 90%,transparent 90%) no-repeat 0 0/100% 100%;padding:0 .06em}
.js .surligne{background-size:0 100%}
.js .vu .surligne{background-size:100% 100%;transition:background-size .7s .55s var(--sortie)}
.questions details:nth-child(odd)[open]{background:var(--brand-accent)}
.questions details:nth-child(odd)[open] p{color:var(--text-primary)}
.questions details:nth-child(even)[open]{background:var(--brand-primary);color:var(--text-inverse)}
.questions details:nth-child(even)[open] p{color:var(--brand-primarySoft)}
.questions details:nth-child(even)[open] summary::after{background-color:var(--brand-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172B46' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");box-shadow:3px 3px 0 var(--text-primary)}
.questions details:nth-child(even)[open] :focus-visible{outline-color:var(--focus-dark)}
.formulaire{background:var(--surface-default);box-shadow:inset 0 0 0 2px var(--brand-primary),10px 10px 0 var(--brand-accent)}
.dock{background:var(--brand-accentSoft)}

/* ---------- Décor : les facettes du logo dans les marges ----------
   Posées par le script dans chaque section, derrière le contenu. Elles glissent un peu au défilement et suivent la
   souris en profondeur (souris seulement). Fixes avec le mouvement réduit. */
.deco-calque{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.haut>.cadre,.bloc>.cadre{position:relative;z-index:1}
.js .deco{opacity:0;scale:.4;transition:opacity .5s var(--sortie),scale .7s var(--ressort)}
.js .deco.vu{opacity:1;scale:1}

/* Cartes qui s'inclinent vers la souris (le script pose l'inclinaison en ligne pendant le survol) */
.incline{transition:transform .12s ease-out!important}

/* Commande pour figer les mouvements qui tournent seuls (WCAG 2.2.2) */

.pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 8px;border-radius:99px;border:0;background:var(--surface-default);box-shadow:inset 0 0 0 1.5px var(--border-control);font:600 14px Lexend;color:var(--text-primary);cursor:pointer;transition:background var(--duration-fast)}
.pause:hover{background:var(--brand-primarySoft)}
.pause svg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--brand-primary);color:var(--text-inverse)}
.pause .i-lecture{display:none}
.pause[aria-pressed="true"] .i-lecture{display:block}.pause[aria-pressed="true"] .i-pause{display:none}
.fige *,.fige *::before,.fige *::after{animation-play-state:paused!important}

@media (max-width:640px){.deco{width:calc(var(--t) * .6)}.deco.d-cache{display:none}}
@media (prefers-reduced-motion:reduce){
 .js .deco{opacity:1;scale:1}
 .js .surligne{background-size:100% 100%}
 .btn{translate:none}
}

/* ---------- L'étincelle du Y (24/10/2026, choix d'Adam) ----------
   Étoile à quatre branches dessinée d'après le creux du Y du logo, avec sa pointe glacier. Symbole #etincelle :
   le corps et la pointe prennent --et-corps et --et-pointe. Fixes et grandes dans les marges, petites et
   scintillantes dans les coins vides, mini en éclats (heure reprise, clic sur un bouton) et entre les phrases des bandes. */
.et-saphir{--et-corps:var(--brand-primary);--et-pointe:var(--brand-accent)}
.et-glacier{--et-corps:var(--brand-accent);--et-pointe:var(--brand-primary)}
.et-encre{--et-corps:var(--text-primary);--et-pointe:var(--brand-accent)}
.et-blanc{--et-corps:var(--surface-default);--et-pointe:var(--brand-accent)}
.deco{position:absolute;left:var(--x);top:var(--y);width:var(--t);height:auto;aspect-ratio:180/200;overflow:visible;rotate:var(--r,0deg);transform:translate3d(var(--px,0px),var(--py,0px),0);will-change:transform}
.scintille{animation:scintille 5.5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes scintille{0%,100%{opacity:0;scale:.35;rotate:calc(var(--r,0deg) - 25deg)}38%,62%{opacity:1;scale:1;rotate:var(--r,0deg)}}
.js .deco.scintille{scale:.35}
.eclat,.eclat-etincelle{overflow:visible}
.eclat-etincelle{position:fixed;z-index:120;width:18px;height:20px;margin:-10px 0 0 -9px;pointer-events:none;animation:eclate .8s var(--sortie) forwards}

/* ---------- Boutons, version forte ----------
   Saphir : le bouton se penche, une facette encre-saphir balaie le fond et un trait glacier la précède puis sort du
   bouton (il ne reste jamais sous le texte). Secondaire : il se remplit de saphir et son texte passe en blanc. */
.btn:hover{transform:scale(1.06) rotate(-1.5deg)}
.btn-principal::before{background:var(--brand-primaryPressed)}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-30px;width:12px;z-index:-1;background:var(--brand-accent);transform:skewX(-24deg);opacity:0;pointer-events:none}
.btn-principal:hover::after{animation:trait .6s var(--sortie)}
@keyframes trait{0%{left:-30px;opacity:1}99%{left:calc(100% + 30px);opacity:1}100%{opacity:0}}
.btn-secondaire{transition:transform .3s var(--ressort),translate .3s var(--sortie),color .12s .05s}
.btn-secondaire::before{background:var(--brand-primary);transition-duration:.3s}
.btn-secondaire:hover{color:var(--text-inverse)}
.btn-principal:hover{box-shadow:0 22px 36px -14px rgb(36 87 167 / .7)}

/* ---------- Grandes bandes de phrases qui traversent l'écran ---------- */

.gb-piste{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px);width:max-content;animation:glisse 36s linear infinite;font:800 clamp(30px,5vw,72px)/1 Lexend;letter-spacing:-.04em;white-space:nowrap}
.gb-piste svg{flex:none;width:clamp(30px,3.6vw,54px);height:auto;aspect-ratio:180/200;overflow:visible}

@media (max-width:640px){.deco.scintille{width:calc(var(--t) * .8)}}
@media (prefers-reduced-motion:reduce){
 .deco{transform:none!important}
 .js .deco.scintille{opacity:1;scale:1}
 .btn::after{display:none}
}

/* Les mots en tampon démarrent agrandis : chaque section les contient horizontalement */
.bloc{overflow-x:clip}
@media (max-width:640px){.js .mot{transform:scale(1.25) rotate(-8deg)}}


/* =====================================================================
   Ouverture : la goutte (piste A2 de site/ouverture-pistes/, choisie par Adam le 28/10/2026)
   ===================================================================== */
.voile{position:fixed;inset:0;z-index:150;background:var(--surface-default);display:grid;place-items:center}
.scene-logo{position:fixed;z-index:151;left:50%;top:50%;width:min(74vw,600px);transform:translate(-50%,-58%);pointer-events:none}
.scene-logo .logo-anime{width:100%;aspect-ratio:1722/555}
.scene-logo svg{display:block;width:100%;height:100%;overflow:visible}
/* Chaque forme s'anime autour de son propre centre ; l'encre (niveau, vague) se déplace en unités du logo. */
.scene-logo svg *{transform-box:fill-box;transform-origin:50% 50%}
.scene-logo .niveau,.scene-logo .vague{transform-box:view-box;transform-origin:0 0}
.scene-logo .source{transform-origin:50% 0}
.scene-logo .goutte,.scene-logo .point{transform-origin:50% 100%}
/* Mouvement réduit : le logo seul, au même endroit, qui s'efface en fondu. */
.voile .logo-fondu{width:min(74vw,600px);transform:translateY(-8%)}
/* Pendant l'ouverture, les animations de la page attendent : toute la carte graphique va au logo. */
.avec-ouverture main *,.avec-ouverture .bandes *{animation-play-state:paused!important}
.passer{position:fixed;z-index:152;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--border-control);background:var(--surface-default);color:var(--text-primary);font:600 14px Lexend;cursor:pointer}
.passer:hover{background:var(--brand-primarySoft)}

/* =====================================================================
   v5 — Le parcours : une route verticale qui se remplit au défilement
   ===================================================================== */
.parcours{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
.route{--avance:0;position:relative;list-style:none;margin:0;padding:0 0 0 72px;display:grid;gap:28px}
/* Le trait de la route, puis la partie parcourue en saphir, et l'heure (le point glacier) qui avance. */
.route::before,.route::after{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:6px;border-radius:6px}
.route::before{background:var(--border-subtle)}
.route::after{background:var(--brand-primary);transform-origin:top;transform:scaleY(var(--avance))}
.station{position:relative;display:grid;gap:18px;padding:28px;border-radius:28px;background:var(--surface-page);transition:background .4s,box-shadow .4s,transform .45s var(--ressort)}
.station.atteinte{background:var(--surface-default);box-shadow:inset 0 0 0 1px var(--border-subtle),var(--shadow-card)}
.station h3{margin:0 0 6px;font:800 26px/1.15 Lexend;letter-spacing:-.035em}
.station p{margin:0;font-size:16.5px;color:var(--text-secondary);max-width:52ch}
/* Apparition des petites interfaces quand la station est atteinte */


/* =====================================================================
   v5 — Fonctions : seconde rangée
   ===================================================================== */

.interrupteurs{display:grid;gap:8px}
.interrupteurs button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 12px 0 16px;border:0;border-radius:14px;background:rgb(255 255 255 / .12);color:var(--text-inverse);font-weight:600;font-size:15px;cursor:pointer;text-align:left}
.interrupteurs i{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:rgb(255 255 255 / .28);transition:background .25s}
.interrupteurs i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s var(--ressort)}
.interrupteurs [aria-checked="true"] i{background:var(--brand-accent)}
.interrupteurs [aria-checked="true"] i::after{transform:translateX(18px)}
.interrupteurs button:focus-visible{outline-color:var(--focus-dark)}
.interrupteurs button.pop{animation:saut .45s var(--ressort)}
.voiture{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-default);font-size:14px;font-weight:600;box-shadow:var(--shadow-card)}
.voiture i{width:12px;height:12px;border-radius:50%;background:var(--status-success);flex:none}
.voiture.v2 i{background:var(--brand-primary)}
.voiture.v3 i{background:var(--border-control)}
@keyframes roule{50%{transform:translateX(10px)}}

/* =====================================================================
   v5 — Pour chacun : dock à quatre espaces, puis l'entrée par QR
   ===================================================================== */
.dock{flex-wrap:wrap}

/* =====================================================================
   v5 — Vos données
   ===================================================================== */


@media (max-width:1080px){
 .parcours{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:640px){
 .route{padding-left:54px;gap:20px}
 .route::before,.route::after{left:19px}
 .station{padding:20px;border-radius:22px}
 .station h3{font-size:22px}
 .station p{font-size:15.5px}
 .dock button{font-size:13px;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
 .route::after{transform:scaleY(1)}
}

/* Mot à trait d’union jamais coupé en fin de ligne (« e-mail ») */
.insecable{white-space:nowrap}

/* Phase du site (28/10/2026, site du lancement) : avant le lancement, <html data-phase="avant-lancement"> montre
   « Être prévenu du lancement » ; le jour du lancement, retirer l'attribut fait apparaître « Demander une démonstration ». */
[data-phase="avant-lancement"] .si-lance,:root:not([data-phase="avant-lancement"]) .avant-lance{display:none}
/* Le problème : trois cartes */

/* Les lignes claires d'une liste gardent un texte encre, même sur une carte saphir ou encre (contraste) */


/* ---------- Menu du téléphone (28/10/2026, demande d'Adam : « plus Yodriv ») ----------
   Plein écran blanc, ouvert en cercle depuis le bouton (comme une goutte qui s'étale). Grands liens numérotés, tuiles
   penchées comme les étapes du parcours ; la section où l'on est passe en saphir avec le surlignage glacier. */
html.menu-ouvert{overflow:hidden}
.menu-ouvert .entete{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-mobile{inset:0;display:flex;flex-direction:column;gap:0;padding:104px 24px calc(28px + env(safe-area-inset-bottom,0px));border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;
 clip-path:circle(22px at calc(100% - 46px) 46px);opacity:0;transition:clip-path .5s var(--sortie),opacity .2s}
.menu-mobile.ouvert{clip-path:circle(150% at calc(100% - 46px) 46px);opacity:1}
.menu-etincelle{position:absolute;right:-46px;bottom:150px;width:190px;height:auto;aspect-ratio:180/200;overflow:visible;opacity:.9;rotate:14deg;pointer-events:none;transition:transform .7s .15s var(--ressort);transform:scale(.4) rotate(-40deg)}
.menu-mobile.ouvert .menu-etincelle{transform:none}
.menu-liens{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu-mobile .menu-liens a{display:flex;align-items:center;gap:18px;padding:12px 8px;border-radius:20px;font:800 clamp(28px,8.4vw,36px)/1.1 Lexend;letter-spacing:-.045em;color:var(--text-primary);
 transform:translateY(18px);opacity:0;transition:transform .5s var(--ressort),opacity .3s,background .2s}
.menu-mobile.ouvert .menu-liens a{transform:none;opacity:1}
.menu-mobile.ouvert .menu-liens li:nth-child(1) a{transition-delay:.08s}.menu-mobile.ouvert .menu-liens li:nth-child(2) a{transition-delay:.12s}
.menu-mobile.ouvert .menu-liens li:nth-child(3) a{transition-delay:.16s}.menu-mobile.ouvert .menu-liens li:nth-child(4) a{transition-delay:.2s}
.menu-mobile.ouvert .menu-liens li:nth-child(5) a{transition-delay:.24s}
.menu-n{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:var(--brand-primarySoft);color:var(--brand-primary);font:800 15px Lexend;letter-spacing:0;font-variant-numeric:tabular-nums;transform:rotate(-6deg);transition:background .25s,color .25s,box-shadow .25s}
.menu-mobile .menu-liens a:hover .menu-n,.menu-mobile .menu-liens a.actif .menu-n{background:var(--brand-primary);color:var(--text-inverse);box-shadow:3px 3px 0 var(--brand-accent)}
.menu-mobile .menu-liens a.actif .menu-texte{background:linear-gradient(transparent 62%,var(--brand-accent) 62%,var(--brand-accent) 92%,transparent 92%)}
.menu-mobile .menu-liens a:not(.btn):hover{background:transparent}
.menu-pied{position:relative;display:grid;gap:18px;margin-top:auto;padding-top:32px;transform:translateY(18px);opacity:0;transition:transform .5s .28s var(--ressort),opacity .3s .28s}
.menu-mobile.ouvert .menu-pied{transform:none;opacity:1}
.menu-mobile .menu-pied .btn{margin:0;justify-content:space-between}
.menu-phrase{margin:0;font:800 22px/1.1 Lexend;letter-spacing:-.04em;color:var(--text-primary)}
.menu-mot{display:inline-block;padding:0 .16em .04em;border-radius:.22em;background:var(--brand-primary);color:var(--text-inverse);box-shadow:.07em .07em 0 var(--brand-accent);transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){
 .menu-mobile,.menu-mobile.ouvert{clip-path:none}
 .menu-mobile .menu-liens a,.menu-pied,.menu-etincelle{transform:none;opacity:1}
}
.menu-mobile{overflow-x:hidden}
.menu-etincelle{right:18px;bottom:auto;top:calc(50% + 40px);width:120px}

/* ---------- Accueil, version 4 (28/10/2026, Adam : garder l'accueil d'origine, juste l'aérer) ----------
   Texte et titre d'origine, un peu plus petits pour que tout tienne jusqu'aux deux boutons. Les quatre widgets
   passent dans les côtés, en quinconce (deux à gauche, deux à droite), loin des lettres ; leur contenu s'anime. */
.haut{padding-top:128px}
.haut-widgets{position:absolute;inset:0;pointer-events:none}
.haut-texte .haut-widgets .flottant{display:flex}
@media (min-width:641px){.haut .titre-haut{font-size:clamp(52px,7.4vw,96px)}}
.haut .intro{margin:24px auto 30px}
.f-annule{left:auto;right:calc(50% + 27vw + 26px);top:70px;bottom:auto}
.f-prevenus{right:auto;left:calc(50% + 27vw + 20px);top:175px;bottom:auto}
.f-sauve{left:auto;right:calc(50% + 27vw + 6px);top:345px;bottom:auto}
.f-yanis{right:auto;left:calc(50% + 27vw + 4px);top:450px;bottom:auto}
.flottant.pop{scale:1.08}
/* Tom annule : la cloche sonne */
.w-cloche{transform-origin:50% 25%}
.w-anime.e1 .w-cloche{animation:sonne .9s var(--sortie)}
@keyframes sonne{0%,100%{rotate:0deg}15%{rotate:22deg}30%{rotate:-18deg}45%{rotate:14deg}60%{rotate:-10deg}75%{rotate:5deg}}
/* Trois élèves prévenus : les avatars arrivent */
.f-prevenus [data-w-prevenus]{display:inline-block;min-width:.7em;font-variant-numeric:tabular-nums}
.w-anime .f-prevenus .pile img:not(:first-child){scale:0;transition:scale .4s var(--ressort)}
.w-anime.e2 .f-prevenus .pile img:not(:first-child){scale:1}
.w-anime.e2 .f-prevenus .pile img:nth-child(3){transition-delay:.17s}
/* Yanis écrit, puis « Je prends ! » et la coche */
.f-yanis{min-width:200px}
.w-bulle{display:flex;align-items:center;min-height:1.3em}
.w-points{display:none;gap:4px;padding:3px 0}
.w-points i{width:7px;height:7px;border-radius:50%;background:var(--border-control)}
.w-anime .w-message{display:none}
.w-anime .w-points{display:inline-flex}
.w-anime.e3 .w-points i{background:var(--brand-primary);animation:tape .9s ease-in-out infinite}
.w-anime.e3 .w-points i:nth-child(2){animation-delay:.15s}.w-anime.e3 .w-points i:nth-child(3){animation-delay:.3s}
@keyframes tape{0%,60%,100%{translate:0 0}30%{translate:0 -5px}}
.w-anime.e3b .w-points{display:none}
.w-anime.e3b .w-message{display:inline}
.w-ok{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-left:2px;border-radius:50%;background:var(--status-success);color:var(--text-inverse)}
.w-ok svg{width:15px;height:15px}
.w-anime .w-ok{scale:0;transition:scale .45s var(--ressort)}
.w-anime.e3b .w-ok{scale:1}
/* Une heure reprise de plus : le chiffre saute, la dernière barre monte */

/* Téléphone et tablette : les quatre widgets en grille aérée sous les boutons */
@media (max-width:1080px){
 .haut-widgets{position:relative;inset:auto;order:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;width:100%;max-width:560px;margin:36px auto 0;text-align:left}
 .haut-texte .haut-widgets .flottant{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0;width:auto;min-width:0}
}
@media (max-width:640px){
 .haut{padding-top:118px}
 .haut-texte .haut-widgets .flottant{padding:10px 12px 10px 10px;gap:9px;border-radius:18px;box-shadow:4px 4px 0 var(--brand-accent),var(--shadow-floating)}
 .haut-widgets .flottant b{font-size:13px}
 .haut-widgets .flottant small{font-size:11.5px}
 .haut-widgets .flottant>svg{width:32px;height:32px;padding:7px;border-radius:11px}
 .haut-widgets .pile img{width:24px;height:24px;margin-left:-8px}
 .haut-widgets .f-prevenus{flex-direction:column;align-items:flex-start}
 .haut-widgets .w-ok{width:20px;height:20px}.haut-widgets .w-ok svg{width:12px;height:12px}
 .f-yanis{min-width:0}
}
@media (prefers-reduced-motion:reduce){.w-cloche,.w-points i{animation:none}}
@media (max-width:1080px){.haut-widgets .f-yanis{order:3}.haut-widgets .f-sauve{order:4}}
@media (min-width:1081px){
 .haut{padding-top:108px}
 .haut .intro{margin:20px auto 26px}
 .haut-texte .haut-widgets .flottant{width:max-content}
 .f-annule{top:76px}.f-prevenus{top:178px}.f-sauve{top:340px}.f-yanis{top:440px}
}
@media (max-width:1080px){.haut-texte .haut-widgets .f-annule{order:1}.haut-texte .haut-widgets .f-prevenus{order:2}.haut-texte .haut-widgets .f-yanis{order:3}.haut-texte .haut-widgets .f-sauve{order:4}}
/* Annonce du haut sur deux lignes au téléphone : bloc arrondi, point aligné sur la première ligne */
@media (max-width:640px){
 .annonce{align-items:flex-start;border-radius:20px;padding:10px 16px 10px 12px;text-align:left;max-width:100%}
 .annonce-point{flex:none;margin-top:4px}
}


/* ---------- Section « Le logiciel » (28/10/2026, proposition) : visite en quatre onglets ----------
   À gauche le bureau, à droite l'application de l'élève tenue en main (maquette du dépôt). La main sort de la
   lumière : fondu sur les bords et ombre floue, jamais coupée net. */

.vp{padding:24px 140px 28px 26px}
.vp.actif{animation:vp-entre .45s var(--sortie)}
@keyframes vp-entre{from{opacity:0;translate:0 12px}}
/* Planning */

/* Livret, paiements, examens */

.vp em{justify-self:end;padding:4px 10px;border-radius:99px;background:var(--surface-default);font:600 12px Lexend;font-style:normal;color:var(--text-secondary);white-space:nowrap}
.vp em.ok{background:var(--status-successSoft);color:var(--status-success)}
.vp em.cours{background:var(--brand-primarySoft);color:var(--brand-primary)}
.vp em.erreur{background:var(--status-dangerSoft);color:var(--status-danger)}
/* Le téléphone en main, qui sort de la lumière */

.ea{position:absolute;left:0;top:0;width:640px;height:1388px;transform-origin:0 0;transform:scale(var(--k)) matrix3d(.76079388,.01139086,0,.00000864,.04312471,.72215633,0,-.00001334,0,0,1,0,147.92738589,17.93153527,0,1);padding:140px 40px 0;background:var(--surface-page);color:var(--text-primary);font-family:Lexend,sans-serif}
.ea-vue{display:none}
.ea-vue.actif{display:grid;gap:18px;animation:vp-entre .45s var(--sortie)}
@media (max-width:1080px){
 .vp{padding:20px}
}
@media (prefers-reduced-motion:reduce){.vp.actif,.ea-vue.actif{animation:none}}
@media (min-width:1081px){.vp{padding-right:200px}}

/* ---------- La main du téléphone : plus d'ombre ni de halo ; le bras s'efface avant le bord de l'image ---------- */
/* La main : plus d'ombre ni de halo derrière ; le bras s'efface vers le bas et la droite avant le bord de l'image */

@media (max-width:640px){
 .haut{padding-bottom:48px}
}

/* ---------- Séparation accueil → « Le logiciel » (28/10/2026, piste B choisie par Adam) ----------
   Un repère « Découvrir le logiciel » ferme l'accueil ; le blanc bleuté prend ensuite toute la largeur et commence
   par une vague douce, comme un changement de scène. */
.logiciel{width:auto;border-radius:0}
/* Survol des onglets : jamais sur l'onglet choisi (il gardait son texte blanc sur un fond devenu clair) */

/* Le repère de suite */
.suite{display:flex;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:56px auto 0;color:var(--text-secondary);font:600 14px Lexend;transition:color var(--duration-fast)}
.suite i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--brand-primary);color:var(--brand-primary);transition:background var(--duration-fast),color var(--duration-fast)}
.suite svg{width:20px;height:20px;rotate:90deg;animation:descend 1.8s var(--sortie) infinite}
@keyframes descend{0%,100%{translate:0 -3px}50%{translate:0 4px}}
.suite:hover{color:var(--brand-primary)}
.suite:hover i{background:var(--brand-primary);color:var(--text-inverse)}
.haut{padding-bottom:48px}
.logiciel{position:relative;margin-top:70px;padding:70px 0 110px;background:var(--surface-page)}
.logiciel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:70px;background:var(--surface-page);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C240 6 480 0 720 22s480 40 720 4v44z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C240 6 480 0 720 22s480 40 720 4v44z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.logiciel+.bloc{padding-top:120px}
@media (max-width:640px){
 .suite{margin-top:40px}
 .logiciel{margin-top:44px;padding:50px 0 72px}
 .logiciel::before{height:44px}
}
@media (prefers-reduced-motion:reduce){.suite svg{animation:none}}



/* ---------- Le problème (28/10/2026, avant / après validé par Adam) ----------
   Fond blanc ; une vague referme « Le logiciel » au-dessus. */
.logiciel{padding-bottom:70px}
.logiciel::after{content:"";position:absolute;left:0;right:0;top:100%;height:70px;background:var(--surface-page);transform:scaleY(-1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C240 6 480 0 720 22s480 40 720 4v44z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C240 6 480 0 720 22s480 40 720 4v44z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.probleme{margin:0;padding:0}
@media (max-width:640px){.logiciel::after{height:44px}}

/* ---------- Le problème, version avant / après (28/10/2026, carte blanche d'Adam) ----------
   La même journée de Karim, sans Yodriv puis avec Yodriv. Un interrupteur ; la case de 16:00 se remplit et les trois
   cartes se retournent (✕ le souci, ✓ la réponse). Fond blanc, vocabulaire du site. */
.ap{position:relative;max-width:1080px;margin:0 auto}
/* L'interrupteur */

.ap-choix{position:relative;z-index:1;min-height:52px;border:0;border-radius:99px;background:transparent;color:var(--text-secondary);font:700 16px Lexend;cursor:pointer;transition:color .3s}
.ap-choix[aria-pressed="true"]{color:var(--text-inverse)}
/* La journée de Karim */

.ap-cible{display:grid;place-items:center;padding:0;background:var(--surface-default);outline:2px dashed var(--status-danger);outline-offset:-2px;transition:background .45s,outline-color .3s,box-shadow .45s,scale .55s var(--ressort)}
.ap-cible small{z-index:1}
.ap.avec .ap-cible{background:var(--brand-primary);outline-color:transparent;box-shadow:4px 4px 0 var(--brand-accent),var(--shadow-saphir);scale:1.03}
.ap.avec .ap-cible small{color:var(--brand-primarySoft)}
/* Les trois cartes qui se retournent */

@media (max-width:640px){
 .ap-choix{font-size:15px}
}
/* Avant / après : toute la partie tient dans un écran (Adam : « qu'on voie toute la partie sur une page ») */

.probleme .entete-section{margin-bottom:22px}
.probleme .titre-section{font-size:clamp(30px,3.9vw,54px);line-height:1.1}
.ap-choix{min-height:44px;font-size:15px}
.probleme+.bloc{padding-top:110px}
@media (max-width:640px){
 .probleme .titre-section{font-size:clamp(28px,8.4vw,34px)}
 .probleme .entete-section{margin-bottom:16px}
}
@media (min-width:1081px){.probleme .entete-section{max-width:1160px}.probleme .titre-section{font-size:clamp(30px,3.6vw,50px)}}