/* SuperÉtudiant — couche « appli guidée » (06/11/2026). S'ajoute à se.css, ne remplace rien.
   Amélioration progressive : sans JavaScript, le site reste celui d'avant (liens, formulaires, contenu). */

/* ---------- Transitions entre pages (navigateurs compatibles) ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:se-top}
.tabbar{view-transition-name:se-tabs}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:.16s ease both se-vt-out}
  ::view-transition-new(root){animation:.26s ease both se-vt-in}
}
@keyframes se-vt-out{to{opacity:0}}
@keyframes se-vt-in{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- En-tête mobile : « S'inscrire » sort de la barre d'onglets ---------- */
.hright{display:flex;align-items:center;gap:10px}
.hjoin{padding:8px 16px;min-height:40px;font-size:14px;color:var(--wa-fg)}
@media(min-width:900px){.hjoin{display:none}}

/* ---------- Barre d'onglets : indicateur plus net ---------- */
.tabbar a svg{transition:transform .2s}
.tabbar a:active svg{transform:scale(.88)}
.tabbar a[aria-current="page"] svg{transform:translateY(-1px) scale(1.08);stroke-width:2.2}
.tabbar a[aria-current="page"]{font-weight:700}

/* ---------- Polish général : cartes, boutons, héros ---------- */
.c{border-radius:20px}
.btn:active{transform:scale(.98)}
.hero{padding-top:28px}
.hero-card{border-radius:28px}
.promise{font-size:clamp(27px,7.2vw,52px)}
@media(min-width:760px){.hero{padding-top:44px}}

/* ---------- 1. Accueil guidé ---------- */
.guide{display:flex;flex-direction:column;gap:12px;margin:26px 0 0;max-width:520px}
.guide .gv{display:none;flex-direction:column;gap:14px}
.guide .gv.show{display:flex;animation:se-in .28s ease both}
@keyframes se-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gchoice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;text-decoration:none;color:var(--fg);background:var(--surface);border:1.5px solid var(--bd);border-radius:20px;padding:16px;cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s;min-height:72px}
.gchoice:hover{border-color:var(--ac);box-shadow:var(--sh);color:var(--fg)}
.gchoice:active{transform:scale(.985)}
.gchoice .gi{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--ac-soft);color:var(--ac)}
.gchoice.amber .gi{background:var(--wa-soft);color:var(--wa-h)}
.gchoice .gi svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gchoice strong{display:block;font-size:17px;line-height:1.25}
.gchoice small{display:block;color:var(--mut);font-size:13.5px;line-height:1.35}
.gchoice .gc{margin-left:auto;color:var(--mut);font-size:22px;line-height:1}
.gprog{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.gprog i{display:block;height:100%;width:0;background:var(--wa);border-radius:99px;transition:width .35s ease}
.gstep{margin:0;font-size:14px;color:var(--mut)}
.gq{margin:0;font-size:clamp(22px,5.5vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.gq:focus{outline:none}
.gchips{display:flex;flex-wrap:wrap;gap:8px}
.gchip{border:1.5px solid var(--bd);background:var(--surface);color:var(--fg);border-radius:999px;padding:11px 16px;font:inherit;font-weight:650;font-size:15px;cursor:pointer;min-height:46px;transition:transform .12s,background .15s,border-color .15s}
.gchip:hover{border-color:var(--ac)}
.gchip:active{transform:scale(.96)}
.gchip[aria-pressed="true"]{background:var(--ac);color:var(--ac-fg);border-color:var(--ac)}
.gacts{display:flex;flex-direction:column;gap:8px}
.gacts .btn{width:100%}
.gghost{background:transparent;border:0;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;min-height:44px;border-radius:12px}
.gghost:hover{color:var(--fg);background:var(--surface-2)}
.gres{background:var(--ac);color:var(--ac-fg);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px}
.gres b{font-size:20px;line-height:1.2;letter-spacing:-.01em}
.gres span{opacity:.92;font-size:15px;line-height:1.45}
.gres .gm{display:flex;flex-wrap:wrap;gap:8px}
.gres .gm em{font-style:normal;background:rgba(255,255,255,.16);padding:4px 11px;border-radius:99px;font-size:13px;font-weight:700}
:root[data-theme="dark"] .gres .gm em{background:rgba(0,0,0,.18)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .gres .gm em{background:rgba(0,0,0,.18)}}
.gnote{margin:0;font-size:13px;color:var(--mut)}

/* ---------- 2. Mon espace : prochaine étape ---------- */
.nextc{margin:0 0 20px;display:flex;gap:16px;align-items:center;background:var(--ac);color:var(--ac-fg);border-radius:24px;padding:20px;border:0}
.nring{--p:0;flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--wa) calc(var(--p)*1%),rgba(255,255,255,.25) 0);display:grid;place-items:center;transition:background .4s}
:root[data-theme="dark"] .nring{background:conic-gradient(var(--wa) calc(var(--p)*1%),rgba(0,0,0,.25) 0)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .nring{background:conic-gradient(var(--wa) calc(var(--p)*1%),rgba(0,0,0,.25) 0)}}
.nring div{width:64px;height:64px;border-radius:50%;background:var(--ac);display:grid;place-items:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.nextc .nk{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.nextc .nt{display:block;font-size:19px;font-weight:800;line-height:1.25;margin:3px 0 4px;text-wrap:balance}
.nextc .ns{display:block;font-size:14px;opacity:.9;margin-bottom:12px}
.nextc .btn{background:var(--wa);color:var(--wa-fg);min-height:44px;padding:10px 18px}
.nextc .btn:hover{background:var(--wa-h);color:var(--wa-fg)}
@media(max-width:480px){.nextc{gap:14px;padding:16px}.nring{width:68px;height:68px}.nring div{width:52px;height:52px;font-size:14px}.nextc .nt{font-size:17px}}

/* Simulateur mobile : le résultat reste visible pendant qu'on règle les curseurs */
.simbar{display:flex;gap:6px 14px;align-items:baseline;justify-content:center;flex-wrap:wrap;position:fixed;left:12px;right:12px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);z-index:45;background:var(--ac);color:var(--ac-fg);border-radius:18px;padding:10px 16px;box-shadow:var(--sh-lg);font-variant-numeric:tabular-nums;font-size:14px}
.simbar b{font-size:19px;letter-spacing:-.01em}
body.has-simbar{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 76px)}
@media(min-width:900px){.simbar{display:none}body.has-simbar{padding-bottom:0}}

/* Checklist : l'étape à faire maintenant ressort */
.ckitem.next-up{border-color:var(--wa);box-shadow:0 0 0 3px color-mix(in srgb,var(--wa) 22%,transparent)}

/* ---------- Retour d'une action (toast) ---------- */
.se-toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:60;background:var(--fg);color:var(--bg);border-radius:18px;padding:12px 18px;font-weight:650;font-size:15px;max-width:min(92vw,420px);box-shadow:var(--sh-lg);transition:opacity .25s,transform .25s}
.se-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){.se-toast{bottom:28px}}

/* ---------- 3. Simulateur en direct ---------- */
.js #simForm button.btn:not(.ghost){display:none}
.sl{margin-top:10px;display:block}
input[type=range].sl{padding:0;border:0;min-height:32px;background:transparent;box-shadow:none;accent-color:var(--wa);cursor:pointer}
input[type=range].sl:focus{box-shadow:none}
.live{transition:opacity .15s}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}