:root{
--encre:#1E2266;
--texte:#1E2266;
--texte2:#3A3F7A;
--encre2:#4A50A8;
--violet-clair:#F2EFFF;
--miel:#FFF6D6;
--miel-texte:#7A6A2E;
--papier:#F1F4FF;
--fiche:#FFFFFF;
--reglure:#E3E9FB;
--marge:#EE8F97;
--surligneur:#FFDD3C;
--vert:#0A7A55;
--vert-fond:#E1F6EE;
--rouge:#BC2F2F;
--rouge-fond:#FCE9E9;
--mauve:#5B3FD9;
--gris:#666B95;
--display:"Bricolage Grotesque",system-ui,sans-serif;
--corps:"Public Sans",system-ui,sans-serif;
--main:"Caveat","Segoe Script",cursive;
--r:16px;
--ombre:0 2px 0 rgba(30,34,102,.10), 0 10px 24px -14px rgba(30,34,102,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
font-family:var(--corps);
color:var(--texte);
background-color:var(--papier);
background-image:linear-gradient(var(--reglure) 1px, transparent 1px);
background-size:100% 30px;
-webkit-font-smoothing:antialiased;
line-height:1.55;
}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--mauve);outline-offset:2px;border-radius:6px}
.appli{max-width:480px;margin:0 auto;min-height:100%;padding:0 16px 120px;position:relative;display:none}
/* Chaque écran est reconstruit d'un bloc. Sans transition, ça clignote. */
.appli.actif > *:not(.barre-onglets):not(.entete){animation:apparait .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes apparait{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.panne{
background:var(--rouge-fond);color:var(--rouge);border-left:4px solid var(--rouge);
border-radius:12px;padding:14px 16px;margin:16px auto;max-width:640px;
font-size:14.5px;line-height:1.5;
}
.panne{color:#B02B2B}
.panne b{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px}
.avert{
background:var(--miel);border-left:3px solid var(--surligneur);border-radius:12px;
padding:13px 15px;margin-bottom:18px;font-size:14px;color:var(--miel-texte);line-height:1.5;
}
.avert b{display:block;font-family:var(--display);font-size:15px;color:var(--texte);margin-bottom:3px}
.rappel-etape{
background:var(--miel);border-radius:14px;padding:16px;margin:10px 0;
font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--miel-texte);
text-align:center;box-shadow:var(--ombre);
}
/* ---------- en-tete ---------- */
.entete{
position:sticky;top:0;z-index:20;
margin:0 -16px 18px;
/* Installée, l'application passe sous la barre d'état du téléphone.
Sans cette réserve, le logo se retrouve derrière l'heure. */
padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
background:linear-gradient(160deg, var(--encre) 0%, #171B4D 100%);color:#fff;
border-radius:0 0 22px 22px;
box-shadow:0 8px 20px -12px rgba(30,34,102,.8);
}
.entete::after{
content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
background:linear-gradient(90deg, var(--surligneur), transparent 85%);
border-radius:99px;opacity:.85;
}
.entete-haut{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.logo{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;flex-shrink:1;white-space:nowrap;overflow:hidden}
.logo span{color:var(--surligneur)}
.jauges{display:flex;align-items:center;gap:8px;flex-shrink:0}
.jauge{
display:flex;align-items:center;gap:5px;
background:rgba(255,255,255,.13);border-radius:999px;padding:5px 11px;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
transition:transform .1s ease;
}
.jauge:active{transform:scale(.92)}
.jauge.acquis{background:rgba(255,221,60,.18);box-shadow:inset 0 0 0 1px rgba(255,221,60,.4)}
.jauge b{font-weight:700}
.sous-titre{font-family:var(--main);font-size:19px;color:#C9CEF5;margin-top:2px}
/* ---------- carnet d'étapes ---------- */
.carnet{
background:var(--fiche);border-radius:var(--r);padding:14px 16px;margin-bottom:22px;
box-shadow:var(--ombre);
}
.carnet h2{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gris)}
.carnet .vide{font-family:var(--main);font-size:18px;color:var(--gris);margin-top:8px}
.grille-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.etape{text-align:center}
.etape-rond{
width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:28px;margin:0 auto 6px;
border:3px solid var(--fiche);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12), 0 5px 12px -6px rgba(30,34,102,.5);
position:relative;
}
.etape-rond.verrouillee{background:var(--reglure) !important;box-shadow:none}
.etape-rond.verrouillee span:first-child{filter:grayscale(1);opacity:.4}
.etape-rond .cadenas{position:absolute;bottom:-2px;right:-2px;background:var(--fiche);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:10px;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.etape-nom{display:block;font-size:11px;color:var(--texte);font-weight:700;line-height:1.25}
.etape-nom.verrouillee{color:var(--gris)}
.etape-nb{font-size:9.5px;color:var(--gris)}
/* ---------- écran de bravo, fin d'une étape ---------- */
.fin-bravo{position:relative;overflow:hidden}
.fin-bravo .confetti{position:absolute;inset:0;pointer-events:none}
.fin-bravo .confetti i{position:absolute;width:7px;height:13px;border-radius:2px;opacity:.85}
.fin-bravo .badge-bravo{
width:110px;height:110px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:48px;
background:radial-gradient(circle at 35% 30%,#FFE98A,var(--surligneur) 55%,#E0A800 100%);
box-shadow:0 0 0 8px rgba(255,221,60,.15), 0 18px 38px -12px rgba(255,221,60,.5);position:relative
}
.fin-bravo .mots-bravo{
font-family:var(--display);font-weight:800;font-size:30px;
background:linear-gradient(90deg,var(--surligneur),#FFB84D);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.fin-bravo .gommette-gagnee{
margin:20px auto 0;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;font-size:34px;
border:4px solid var(--fiche);box-shadow:0 0 0 5px rgba(0,0,0,.05);
}
.fin-bravo .applaudir{font-size:12.5px;color:var(--gris);margin-top:8px}
/* ---------- unites ---------- */
.unite{margin-bottom:26px}
.unite-titre{
display:flex;align-items:baseline;gap:9px;margin:0 0 10px;padding:9px 4px;
width:100%;text-align:left;border-radius:11px;
}
.unite-titre:active{background:rgba(30,34,102,.05)}
.chevron{
margin-left:6px;font-size:21px;color:var(--gris);line-height:1;align-self:center;
transform:rotate(90deg);transition:transform .22s ease;
}
.unite.ouverte > .unite-titre .chevron{transform:rotate(-90deg)}
.unite > .unite-corps{display:none}
.unite.ouverte > .unite-corps{display:block;animation:deplie .24s ease both}
@keyframes deplie{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.unite-num{
font-family:var(--display);font-weight:800;font-size:13px;color:#fff;background:var(--mauve);
border-radius:6px;padding:2px 7px;letter-spacing:.04em;
}
.unite-titre h3{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.01em}
.unite-resume{font-size:14px;color:var(--gris);margin:0 4px 12px}
.fiche{
width:100%;text-align:left;background:var(--fiche);border-radius:var(--r);
padding:14px 15px 14px 17px;margin-bottom:10px;box-shadow:var(--ombre);
border-left:3px solid transparent;
display:flex;align-items:center;gap:13px;
transition:transform .12s ease, box-shadow .12s ease;
}
.fiche:hover:not(.verrou){transform:translateY(-2px)}
.fiche:active:not(.verrou){transform:translateY(0)}
.fiche.verrou{opacity:.5;cursor:not-allowed;border-left-color:var(--reglure)}
.fiche.fait{border-left-color:var(--vert)}
.pastille{
width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
font-size:20px;background:var(--papier);
}
.fiche.fait .pastille{background:var(--vert-fond)}
.fiche-texte{flex:1;min-width:0}
.fiche-texte b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}
.fiche-texte small{display:block;color:var(--gris);font-size:13px;margin-top:1px}
.fiche-etat{font-size:19px;flex:none;color:var(--gris)}
.fiche.fait .fiche-etat{color:var(--vert)}
/* ---------- lecon ---------- */
.barre-nav{
display:flex;align-items:center;gap:12px;margin:0 -16px 16px;
padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
position:sticky;top:0;z-index:20;background:var(--papier);
box-shadow:0 10px 14px -12px rgba(30,34,102,.5);
}
.retour{font-size:22px;line-height:1;padding:4px 8px;border-radius:9px;background:var(--fiche);box-shadow:var(--ombre)}
.progression{flex:1;height:11px;border-radius:99px;background:var(--reglure);overflow:hidden}
.progression i{display:block;height:100%;background:var(--surligneur);border-radius:99px;transition:width .35s ease;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.compteur{font-size:13px;font-weight:700;color:var(--gris);font-variant-numeric:tabular-nums}
.bloc{background:var(--fiche);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--ombre);border-left:3px solid var(--marge)}
.bloc h1{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.bloc h4{font-family:var(--display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:8px}
.bloc p{font-size:16px;margin-bottom:11px}
.bloc p:last-child{margin-bottom:0}
.bloc .en{font-weight:700;color:var(--mauve)}
.bloc .fr{font-style:italic;color:var(--gris)}
.surligne{background:linear-gradient(transparent 58%, var(--surligneur) 58%);padding:0 2px;font-weight:600}
.idee{background:var(--encre);color:#fff;border-left-color:var(--surligneur)}
.idee h4{color:#A8AEE8}
.idee p{font-size:17.5px}
/* Scène spatiale : montre une vraie relation (sous, sur, derrière...) entre
deux emojis au lieu de les coller en texte, pour que l'image seule se
comprenne sans lire l'anglais. */
.scene-spatiale{position:relative;height:150px;max-width:230px;margin:0 auto 14px}
.scene-spatiale .objet-scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;z-index:1}
.scene-spatiale .sujet-scene{position:absolute;font-size:56px;transition:none}
.scene-spatiale .sujet-scene.rel-sous{left:50%;top:88%;transform:translate(-50%,-50%) scale(.8);z-index:2}
.scene-spatiale .sujet-scene.rel-sur{left:50%;top:14%;transform:translate(-50%,-50%);z-index:2}
.scene-spatiale .sujet-scene.rel-dans{left:50%;top:58%;transform:translate(-50%,-50%) scale(.5);z-index:2;opacity:.9}
.scene-spatiale .sujet-scene.rel-derriere{left:68%;top:42%;transform:translate(-50%,-50%) scale(.75);z-index:0}
.scene-spatiale .sujet-scene.rel-a-cote{left:84%;top:50%;transform:translate(-50%,-50%);z-index:2}
.scene-spatiale .sujet-scene.rel-au-dessus{left:50%;top:2%;transform:translate(-50%,-50%);z-index:2}
.scene-spatiale .sujet-scene.rel-loin{left:96%;top:50%;transform:translate(-50%,-50%);z-index:2}
.scene-spatiale.rel-loin-conteneur{max-width:280px}
.scene-spatiale .sujet-scene.rel-pres{left:66%;top:50%;transform:translate(-50%,-50%);z-index:2}
.scene-spatiale .sujet-scene.rel-autour{left:78%;top:76%;transform:translate(-50%,-50%) rotate(-12deg) scale(.85);z-index:2}
.scene-spatiale.a-autour .objet-scene{outline:3px dashed var(--reglure);outline-offset:10px;border-radius:50%}
.idee .surligne{background:linear-gradient(transparent 58%, rgba(255,221,60,.45) 58%);color:#fff}
table.tab{width:100%;border-collapse:collapse;margin:4px 0 10px;table-layout:fixed}
table.tab td{padding:8px 6px;border-bottom:1px dashed var(--reglure);font-size:15.5px;vertical-align:top;overflow-wrap:break-word}
table.tab td:first-child{font-weight:700;color:var(--mauve);width:52%;padding-right:14px}
table.tab tr:last-child td{border-bottom:none}
.note{
font-family:var(--main);font-size:20px;line-height:1.35;color:var(--rouge);
background:var(--rouge-fond);border-radius:12px;padding:12px 14px;margin:2px 0 11px;
transform:rotate(-.5deg);
}
.note::before{content:"✎ ";opacity:.6}
.piege{border-left-color:var(--rouge);background:#FFF8F3}
.piege h4{color:var(--rouge)}
.faux{color:var(--rouge);text-decoration:line-through;font-weight:700}
.juste{color:var(--vert);font-weight:700}
.gros-bouton{
width:100%;padding:16px;border-radius:14px;background:var(--mauve);color:#fff;
font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.01em;
box-shadow:0 4px 0 #4530AE;margin-top:6px;
}
.gros-bouton:active{transform:translateY(3px);box-shadow:0 1px 0 #4530AE}
.gros-bouton.vert{background:var(--vert);box-shadow:0 4px 0 #0A6E4E}
.gros-bouton.vert:active{box-shadow:0 1px 0 #0A6E4E}
.gros-bouton[disabled]{background:#C3C8E4;color:#434974;box-shadow:0 4px 0 #A9AFD2;cursor:not-allowed}
.jours-rappel{display:flex;gap:6px;justify-content:space-between}
.jour-case{flex:1;text-align:center}
.jour-case input{position:absolute;opacity:0;width:1px;height:1px}
.jour-case label{display:block;padding:10px 0;border-radius:10px;background:var(--fiche);color:var(--gris);font-family:var(--display);font-weight:700;font-size:13px;cursor:pointer;border:2px solid var(--reglure)}
.jour-case input:checked + label{background:var(--mauve);color:#fff;border-color:var(--mauve)}
/* ---------- exercices ---------- */
.consigne{font-family:var(--display);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);margin:6px 4px 12px}
.question{font-family:var(--display);font-size:23px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 4px 18px}
.question .trou{
display:inline-block;min-width:64px;border-bottom:3px solid var(--mauve);
text-align:center;color:var(--mauve);
}
.options{display:flex;flex-direction:column;gap:9px}
.option{
background:var(--fiche);border-radius:13px;padding:14px 16px;text-align:left;
box-shadow:var(--ombre);font-size:17px;font-weight:600;
border:2px solid transparent;transition:transform .1s ease;
}
.option:active{transform:scale(.985)}
.option.choisie{border-color:var(--mauve);background:var(--violet-clair)}
.option.bonne{border-color:var(--vert);background:var(--vert-fond);animation:valide .34s ease}
@keyframes valide{0%{transform:scale(1)}42%{transform:scale(1.025)}100%{transform:scale(1)}}
.option.mauvaise{border-color:var(--rouge);background:var(--rouge-fond)}
.option[disabled]{cursor:default}
.zone-reponse{
min-height:64px;background:var(--fiche);border-radius:13px;padding:10px;
box-shadow:var(--ombre);display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
margin-bottom:16px;border-bottom:3px solid var(--reglure);
}
.zone-reponse:empty::after{
content:"Touche les mots ci-dessous";font-family:var(--main);font-size:19px;color:var(--gris);
}
.banque{display:flex;flex-wrap:wrap;gap:8px}
.mot{
background:var(--fiche);border-radius:11px;padding:9px 13px;font-size:16px;font-weight:600;
box-shadow:var(--ombre);
}
.mot.pris{opacity:.25;pointer-events:none;box-shadow:none;background:#E6EAFA;color:transparent}
.zone-reponse .mot{background:var(--violet-clair)}
.secousse{animation:secousse .32s}
@keyframes secousse{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
/* ---------- retour ---------- */
.retour-bas{
position:fixed;left:0;right:0;bottom:0;z-index:45;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:var(--vert-fond);border-radius:20px 20px 0 0;
box-shadow:0 -8px 30px -14px rgba(30,34,102,.6);
animation:monte .25s ease both;
max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.retour-bas.ko{background:var(--rouge-fond)}
@keyframes monte{from{transform:translateY(100%)}to{transform:translateY(0)}}
.retour-bas .interieur{max-width:480px;margin:0 auto}
.rappel-enonce{
font-size:14px;color:var(--gris);line-height:1.4;padding-bottom:10px;margin-bottom:10px;
border-bottom:1px solid rgba(30,34,102,.1);
}
.verdict{font-family:var(--display);font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--vert)}
.retour-bas.ko .verdict{color:var(--rouge)}
.correction{font-size:15px;margin-top:4px}
.correction b{color:var(--vert)}
.retour-bas.ko .correction b{color:var(--rouge)}
.explique{font-family:var(--corps);font-size:14.5px;line-height:1.45;margin-top:6px;color:var(--texte)}
/* ---------- fin ---------- */
.fin{text-align:center;padding-top:calc(26px + env(safe-area-inset-top, 0px))}
.fin-palier .badge-palier{
width:100px;height:100px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
font-size:44px;background:radial-gradient(circle at 35% 30%,#FFE98A,var(--surligneur) 55%,#E0A800 100%);
box-shadow:0 0 0 7px rgba(255,221,60,.16), 0 18px 34px -12px rgba(255,221,60,.5);
}
.fin-palier .stat-ligne{display:flex;gap:10px;justify-content:center;margin:18px 0}
.fin-palier .stat{background:var(--fiche);border-radius:14px;padding:12px 20px;text-align:center;box-shadow:var(--ombre)}
.fin-palier .stat b{display:block;font-family:var(--display);font-size:22px;font-weight:800;color:var(--mauve)}
.fin-palier .stat span{font-size:11px;color:var(--gris)}
.carte-gel{
background:var(--fiche);border:1px solid rgba(91,63,217,.2);border-radius:16px;
padding:14px 16px;margin:18px auto;max-width:340px;display:flex;gap:12px;align-items:flex-start;text-align:left;
}
.carte-gel .icone{font-size:22px;flex:none}
.carte-gel b{display:block;font-size:13.5px;margin-bottom:2px;color:var(--texte)}
.carte-gel p{font-size:12px;color:var(--gris);line-height:1.4}
.fin .grosse-gommette{
width:110px;height:110px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
font-size:52px;border:4px solid #fff;
box-shadow:inset 0 -6px 0 rgba(0,0,0,.12), 0 12px 26px -12px rgba(30,34,102,.7);
animation:coller .6s cubic-bezier(.2,1.5,.4,1) both;
}
.fin h1{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.fin .bilan{font-family:var(--main);font-size:22px;color:var(--gris);margin-bottom:22px}
.scores{display:flex;gap:10px;margin-bottom:22px}
.scores .score{animation:apparait .3s ease both}
.scores .score:nth-child(2){animation-delay:.09s}
.scores .score:nth-child(3){animation-delay:.18s}
.cadeaux .cadeau{animation:apparait .32s ease both}
.cadeaux .cadeau:nth-child(2){animation-delay:.1s}
.cadeaux .cadeau:nth-child(3){animation-delay:.2s}
.cadeaux .cadeau:nth-child(4){animation-delay:.3s}
.cadeaux .cadeau:nth-child(5){animation-delay:.4s}
.score{flex:1;background:var(--fiche);border-radius:var(--r);padding:14px 8px;box-shadow:var(--ombre)}
.score b{display:block;font-family:var(--display);font-size:26px;font-weight:800;line-height:1.1}
.score small{color:var(--gris);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pied{text-align:center;font-size:12.5px;color:var(--gris);margin-top:26px}
.reprise{
width:100%;text-align:left;background:var(--encre);color:#fff;border-radius:var(--r);
padding:16px 18px;margin-bottom:22px;display:flex;align-items:center;gap:14px;
box-shadow:0 4px 0 #14163F, 0 14px 26px -16px rgba(30,34,102,.9);
}
.reprise:active{transform:translateY(3px);box-shadow:0 1px 0 #14163F}
.reprise .pastille{background:rgba(255,255,255,.14)}
.reprise small{display:block;font-family:var(--display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--surligneur)}
.reprise b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25;margin-top:2px}
.reprise .fleche{font-size:22px;margin-left:auto;opacity:.7}
.reprise{padding:20px}
.reprise .pastille{width:52px;height:52px;font-size:25px}
.reprise b{font-size:19px;margin-top:3px}
.ligne-etape{
display:flex;align-items:center;gap:9px;margin:0 4px 10px;
font-family:var(--display);font-size:13px;font-weight:600;color:var(--gris);
}
.ligne-etape b{color:var(--texte);font-weight:600}
.compte-unite{
margin-left:auto;font-size:12.5px;font-weight:700;color:var(--texte2);
font-variant-numeric:tabular-nums;background:var(--fiche);border-radius:99px;
padding:2px 9px;box-shadow:var(--ombre);
}
.unite-titre{width:100%}
/* ---------- profils ---------- */
.accueil-profils{padding-top:calc(34px + env(safe-area-inset-top, 0px));text-align:center}
.logo-seul{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.03em;margin-bottom:6px}
.chargement-initial{
position:fixed;inset:0;z-index:999;background:var(--papier);
display:flex;align-items:center;justify-content:center;
}
.chargement-initial .logo-seul{margin:0;animation:pulseChargement 1.4s ease-in-out infinite}
@keyframes pulseChargement{0%,100%{opacity:1}50%{opacity:.45}}
.logo-seul span{color:#E0A800}
.accroche{font-family:var(--main);font-size:22px;color:var(--gris);margin-bottom:22px;line-height:1.3}
.titre-creation{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:14px 0 4px}
.grille-profils{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:24px}
.carte-profil{display:flex;flex-direction:column;align-items:center;gap:7px}
.ouvre-profil{display:flex;flex-direction:column;align-items:center;gap:8px}
.carte-profil.en-pause .avatar{filter:grayscale(1);opacity:.55}
.carte-profil.en-pause .nom-profil{color:var(--gris)}
.avatar{
width:82px;height:82px;border-radius:26px;display:grid;place-items:center;font-size:40px;
border:3px solid #fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.1), 0 8px 18px -10px rgba(30,34,102,.8);
}
.avatar.gros{width:104px;height:104px;font-size:50px;margin:0 auto;display:grid}
.avatar.mini{width:33px;height:33px;border-radius:11px;font-size:17px;border-width:2px;box-shadow:0 2px 6px -2px rgba(0,0,0,.5)}
.avatar.contour-debloque{box-shadow:0 0 0 4px var(--surligneur), inset 0 -5px 0 rgba(0,0,0,.1), 0 8px 18px -10px rgba(30,34,102,.8)}
.avatar-enveloppe{position:relative;display:block;width:104px;margin:0 auto}
.couronne-premium{
position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-8deg);
font-size:30px;filter:drop-shadow(0 3px 4px rgba(30,34,102,.35));
}
.mention-gel{font-size:13px;color:var(--mauve);font-weight:600;margin-top:10px;text-align:center}
.ouvre-profil:active .avatar{transform:scale(.95)}
.nom-profil{font-family:var(--display);font-weight:600;font-size:16px}
.supprime{font-size:12.5px;font-weight:700;color:var(--rouge);text-transform:uppercase;letter-spacing:.04em}
.lien-discret{font-family:var(--main);font-size:20px;color:var(--gris);margin-top:12px;display:block;width:100%}
.separateur-ou{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--gris);font-size:13px;font-family:var(--corps)}
.separateur-ou::before,.separateur-ou::after{content:"";flex:1;height:1px;background:var(--reglure)}
.champ{
width:100%;font-family:var(--display);font-size:19px;font-weight:600;color:var(--texte);
background:var(--fiche);border:2px solid var(--reglure);border-radius:13px;padding:14px 16px;
margin-bottom:16px;text-align:center;
}
.champ::placeholder{color:var(--gris);font-weight:400}
.champ:focus{outline:none;border-color:var(--mauve)}
/* Un a ses propres pièces internes (heure, minute,
AM/PM) gérées par le navigateur, qui n'obéissent pas à text-align tout
seul : sans ce correctif, "4:02 PM" reste collé à gauche même si le
champ est déclaré centré. */
.champ[type="time"]::-webkit-datetime-edit{ text-align:center; }
.champ[type="time"]::-webkit-datetime-edit-fields-wrapper{ display:flex; justify-content:center; width:100%; }
.choix{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:16px}
.pion{
width:46px;height:46px;border-radius:14px;font-size:23px;background:var(--fiche);
box-shadow:var(--ombre);border:2px solid transparent;display:grid;place-items:center;
}
.pion.actif{border-color:var(--mauve);background:var(--violet-clair)}
.pastel{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:var(--ombre)}
.pastel.actif{outline:3px solid var(--mauve);outline-offset:2px}
.ligne-profil{
display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
background:rgba(255,255,255,.12);border-radius:999px;color:#fff;font-size:14px;font-weight:600;
transition:transform .1s ease,background .15s ease;
min-width:0;max-width:100px;
}
.ligne-profil span:not(.avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-profil:active{transform:scale(.97);background:rgba(255,255,255,.18)}
.entete-bas{display:flex;align-items:center;gap:10px}
.aide-champ{font-size:13.5px;color:var(--gris);line-height:1.45;margin-bottom:9px}
.bascule-mdp{
display:block;background:none;border:none;font-family:var(--corps);
font-size:13px;font-weight:700;color:var(--mauve);margin:-8px 0 12px;
cursor:pointer;text-align:left;padding:0;
}
/* ---------- prononciation ---------- */
.trad-parler{font-family:var(--corps);font-style:italic;font-size:16px;color:var(--gris);margin:-10px 4px 18px;line-height:1.45}
.micro-zone{text-align:center;margin-bottom:14px}
.btn-micro{
width:104px;height:104px;border-radius:50%;background:var(--mauve);color:#fff;font-size:44px;
display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 5px 0 #4530AE;
}
.btn-micro:active{transform:translateY(4px);box-shadow:0 1px 0 #4530AE}
.btn-micro[disabled]{background:#C3C8E4;box-shadow:0 5px 0 #A9AFD2}
.btn-micro.ecoute{background:var(--rouge);box-shadow:0 5px 0 #972626;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* --- Animations de l'univers enfant --- */
@keyframes confetti-chute{
0%{transform:translateY(-20px) rotate(0deg);opacity:1}
100%{transform:translateY(260px) rotate(540deg);opacity:0}
}
@keyframes nino-saute{
0%,100%{transform:translateY(0) scale(1)}
30%{transform:translateY(-26px) scale(1.1)}
55%{transform:translateY(0) scale(.94)}
75%{transform:translateY(-10px) scale(1.04)}
}
@keyframes nino-secoue{
0%,100%{transform:rotate(0)}
25%{transform:rotate(-9deg)}
75%{transform:rotate(9deg)}
}
@keyframes etoile-envol{
0%{transform:translateY(0) scale(.4);opacity:0}
35%{transform:translateY(-16px) scale(1.25);opacity:1}
100%{transform:translateY(-58px) scale(.7);opacity:0}
}
@keyframes carte-retourne{
0%{transform:rotateY(0)}
100%{transform:rotateY(180deg)}
}
.zone-depot.survol{background:var(--vert-fond);border-color:var(--vert)}
.piece-glissee{touch-action:none;user-select:none;-webkit-user-select:none}
.etat-micro{font-family:var(--main);font-size:20px;color:var(--gris);line-height:1.3;padding:0 12px}
.entendu{display:block;font-size:15px;color:var(--gris);font-style:italic;margin-bottom:7px}
.mots-dits{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.6;margin-bottom:7px}
.mot-ok{color:var(--vert)}
.mot-ko{color:var(--rouge);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:4px}
.conseil{display:block;font-size:15px;margin-bottom:6px}
.rappel{display:block;font-size:15px;color:var(--texte)}
/* Une liste déroulante doit se voir comme telle : un chevron large, un
fond distinct du champ de saisie, et une étiquette au-dessus. */
.selecteur{
text-align:left;text-transform:none;letter-spacing:normal;font-family:var(--corps);
font-size:16px;font-weight:600;appearance:none;-webkit-appearance:none;
background-color:var(--violet-clair);
border:2px solid var(--mauve);
background-image:url("data:image/svg+xml;utf8,");
background-position:calc(100% - 14px) center;
background-size:18px 18px;background-repeat:no-repeat;padding-right:44px;
cursor:pointer;
}
.etiquette-champ{
display:block;text-align:left;font-family:var(--display);font-size:13px;font-weight:600;
color:var(--gris);margin:0 4px 5px;
}
.gros-bouton.pale{background:#fff;color:var(--texte);box-shadow:var(--ombre);margin-top:10px}
.gros-bouton.rouge{background:var(--rouge);box-shadow:0 4px 0 #972626}
.gros-bouton.defi{background:#C4416B;box-shadow:0 4px 0 #8E2E4C}
.gros-bouton.defi:active{box-shadow:0 1px 0 #8E2E4C}
.gros-bouton.rouge:active{box-shadow:0 1px 0 #972626}
/* ---------- test de placement ---------- */
.carte-test{
width:100%;text-align:left;background:#5B3FD9;border-radius:var(--r);
padding:15px 16px;margin-bottom:18px;display:flex;align-items:flex-start;gap:13px;
box-shadow:var(--ombre);border-left:3px solid var(--surligneur);
}
.carte-test .pastille{background:rgba(255,255,255,.2);flex:none}
.carte-test b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3;color:#fff}
.carte-test small{display:block;color:rgba(255,255,255,.85);font-size:13.5px;margin-top:3px;line-height:1.4}
table.recap td{font-size:15px;padding:7px 4px}
table.recap td:first-child{color:var(--texte);font-weight:700;white-space:nowrap}
table.recap td.pts{text-align:right;color:var(--gris);font-weight:700;font-variant-numeric:tabular-nums;width:1%}
.legende{font-size:13px;color:var(--gris);line-height:1.5;margin-top:10px}
.fiche.acquis{border-left-color:var(--mauve);opacity:.85}
.fiche.acquis .pastille{background:var(--violet-clair)}
.fiche.acquis .fiche-etat{color:var(--mauve)}
.etape{
background:var(--fiche);border-radius:var(--r);box-shadow:var(--ombre);
padding:4px 12px 2px;margin-bottom:12px;
}
.etape > .unite-titre{padding:12px 4px}
.etape.finie > .unite-titre h3{opacity:.65}
.etape-num{
font-family:var(--display);font-weight:800;font-size:11px;color:#fff;background:var(--gris);
border-radius:6px;padding:2px 7px;letter-spacing:.05em;flex:none;
}
.etape.ouverte .etape-num{background:var(--mauve)}
.etape.finie .etape-num{background:var(--vert)}
.etape > .unite-corps{padding-bottom:10px}
.jauge-etape{height:6px;border-radius:99px;background:var(--reglure);overflow:hidden;margin:0 4px 14px}
.jauge-etape i{display:block;height:100%;background:var(--vert);border-radius:99px;transition:width .4s ease}
.etape .unite{margin-bottom:14px}
.etape .unite:last-child{margin-bottom:0}
.etape .unite-titre{padding-left:0;padding-right:0}
.puce-apercu{
font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.06em;
color:#fff;background:var(--vert);border-radius:999px;padding:2px 8px;white-space:nowrap;
vertical-align:middle;margin-left:6px;
}
.offre{
background:var(--encre);color:#fff;border-radius:var(--r);padding:20px;margin-bottom:20px;
box-shadow:var(--ombre);border-left:3px solid var(--surligneur);
}
.offre h2{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.offre p{font-size:15px;color:#C9CEF5;line-height:1.5;margin-bottom:14px}
.offre-prix{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.offre-prix b{font-family:var(--display);font-size:30px;font-weight:800;line-height:1}
.offre-prix span{font-family:var(--main);font-size:19px;color:var(--surligneur)}
.liste-premium{margin-bottom:18px}
.ligne-premium{
display:flex;gap:13px;align-items:flex-start;background:var(--fiche);border-radius:var(--r);
padding:14px 15px;margin-bottom:9px;box-shadow:var(--ombre);
}
.ligne-premium .pastille{flex:none;background:var(--violet-clair)}
.ligne-premium b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}
.ligne-premium small{display:block;color:var(--texte2);font-size:14px;margin-top:4px;line-height:1.5}
.titre-groupe{
font-family:var(--display);font-size:13px;font-weight:600;text-transform:uppercase;
letter-spacing:.06em;color:var(--gris);margin:6px 4px 12px;
}
/* ---------- barre d'onglets ---------- */
.barre-onglets{
position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--fiche);border-top:1px solid var(--reglure);
padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
box-shadow:0 -6px 22px -16px rgba(30,34,102,.7);
-webkit-transform:translateZ(0);transform:translateZ(0);
}
.onglets{max-width:480px;margin:0 auto;display:flex}
.onglet{
flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
padding:9px 3px 8px;color:var(--gris);
font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:0;
border-top:2px solid transparent;transition:color .15s ease;
}
.onglet svg{width:23px;height:23px;display:block;flex:none}
/* Hauteur réservée pour deux lignes : « Aller plus loin » passe à la ligne
sans décaler les icônes des autres onglets. */
.onglet span{
display:block;text-align:center;line-height:1.15;
min-height:2.3em;word-break:break-word;
}
.onglet.actif{color:var(--mauve);border-top-color:var(--mauve)}
.onglet:active{transform:scale(.94)}
.appli.avec-barre{padding-bottom:96px}
.profil-carte{text-align:center}
.profil-carte .avatar{margin-bottom:10px}
.profil-carte .titre-creation{margin-top:0;margin-bottom:14px}
.profil-carte .scores{margin-bottom:14px}
.bloc h4 + .gros-bouton{margin-top:4px}
.bloc .gros-bouton + .gros-bouton{margin-top:9px}
/* ---------- mises en situation ---------- */
.entete-section{display:flex;align-items:baseline;gap:9px;margin:26px 4px 10px}
.entete-section h3{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.01em}
.fiche.situation{border-left-color:var(--mauve)}
.fiche.quotidien{border-left-color:var(--surligneur)}
.apercu{
display:flex;gap:13px;align-items:flex-start;background:var(--fiche);border-radius:var(--r);
padding:15px 16px;margin:4px 0 22px;box-shadow:var(--ombre);border-left:3px dashed var(--mauve);
}
.apercu .pastille{background:var(--violet-clair);flex:none}
.api{font-family:ui-monospace,monospace;font-size:.95em;color:var(--mauve);background:var(--violet-clair);border-radius:5px;padding:1px 5px}
/* ---------- images ---------- */
.vignette{
font-size:88px;line-height:1;text-align:center;background:var(--fiche);border-radius:var(--r);
padding:22px;margin-bottom:18px;box-shadow:var(--ombre);
}
.scene-dessin{
background:var(--fiche);border-radius:var(--r);padding:10px;margin-bottom:18px;
box-shadow:var(--ombre);
}
.scene-dessin .dessin{display:block;width:100%;height:auto;border-radius:10px}
.apercu b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}
.apercu small{display:block;color:var(--gris);font-size:13.5px;margin-top:3px;line-height:1.45}
/* ---------- révélation ---------- */
.revelation .bloc{text-align:left;margin-bottom:18px}
.cadeaux{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;text-align:left}
.cadeau{
background:var(--fiche);border-radius:var(--r);padding:15px 16px;box-shadow:var(--ombre);
border-left:3px solid var(--surligneur);
}
.cadeau span{font-size:25px;display:block;line-height:1;margin-bottom:8px}
.cadeau b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.cadeau small{display:block;color:var(--texte2);font-size:14.5px;margin-top:4px;line-height:1.5}
.fiche.quotidien .pastille{background:var(--miel)}
.fiche.situation .pastille{background:var(--violet-clair)}
.scene{
background:var(--encre);color:#fff;border-radius:var(--r);padding:18px;margin-bottom:14px;
box-shadow:var(--ombre);border-left:3px solid var(--surligneur);
}
.scene h4{font-family:var(--display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#A8AEE8;margin-bottom:7px}
.scene p{font-size:16px;margin-bottom:9px}
.scene .but{font-family:var(--main);font-size:20px;color:var(--surligneur);margin-bottom:0}
.replique{
display:flex;gap:11px;margin-bottom:11px;align-items:flex-start;
}
.replique .bulle{
background:var(--fiche);border-radius:14px 14px 14px 4px;padding:11px 14px;
box-shadow:var(--ombre);max-width:86%;cursor:pointer;
}
.replique.moi{flex-direction:row-reverse}
.replique.moi .bulle{background:var(--violet-clair);border-radius:14px 14px 4px 14px}
.replique .qui{
width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
font-size:17px;background:var(--papier);
}
.replique .vo{font-weight:600;font-size:16.5px;line-height:1.35}
.replique .vf{font-size:14px;color:var(--gris);font-style:italic;margin-top:3px}
.replique .bulle::after{content:"🔊";font-size:11px;opacity:.4;margin-left:5px}
.replique .bulle.en-lecture{
box-shadow:0 0 0 3px var(--surligneur), var(--ombre);
transition:box-shadow .25s ease;
}
.muet .replique .bulle{cursor:default}
.muet .replique .bulle::after{display:none}
.commandes-dialogue{display:flex;gap:9px;margin-bottom:16px}
.commandes-dialogue button{
flex:1;background:var(--fiche);border-radius:12px;padding:12px;box-shadow:var(--ombre);
font-family:var(--display);font-weight:600;font-size:15px;
}
.commandes-dialogue button.actif{background:var(--mauve);color:#fff}
table.tab td .vf{color:var(--gris);font-style:italic}
.bloc.retenir{border-left-color:var(--vert)}
.bloc.retenir h4{color:var(--vert)}
/* ---------- premium ---------- */
.puce-neuf{
font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.06em;
color:#5B4600;background:var(--surligneur);border-radius:999px;padding:2px 8px;
white-space:nowrap;
}
.fiche-texte .puce-neuf{vertical-align:middle;margin-left:6px}
.badge-premium{
margin-left:auto;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.06em;
color:#6B4E00;background:var(--surligneur);border-radius:999px;padding:3px 9px;
}
.unite-titre .compte-unite + .badge-premium{margin-left:7px}
.fiche.premium{border-left-color:var(--surligneur);opacity:.9}
.fiche.premium .pastille{background:var(--miel)}
.fiche.premium .fiche-etat{color:#C9A227}
.paywall{padding-top:22px;text-align:center}
.paywall .sceau{
width:96px;height:96px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
font-size:44px;background:var(--surligneur);border:4px solid #fff;
box-shadow:inset 0 -6px 0 rgba(0,0,0,.12), 0 12px 26px -12px rgba(30,34,102,.7);
}
.paywall h1{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.12;margin-bottom:8px}
.paywall .argument{font-family:var(--main);font-size:21px;color:var(--gris);margin-bottom:20px;line-height:1.3}
.prix{
background:var(--encre);color:#fff;border-radius:var(--r);padding:20px;margin-bottom:16px;
box-shadow:var(--ombre);
}
.prix b{display:block;font-family:var(--display);font-weight:800;font-size:36px;line-height:1;letter-spacing:-.03em}
.prix .devise{font-size:15px;color:#B9BFEE;margin-top:5px}
.prix .par{font-family:var(--main);font-size:20px;color:var(--surligneur);margin-top:8px}
.moyens{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;text-align:left}
.diaspora{margin:14px 0;padding:16px;background:var(--papier);border-radius:12px}
.logos-diaspora{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo-partenaire{height:46px;width:auto;border-radius:6px;box-shadow:var(--ombre)}
.logo-secours{font-family:var(--display);font-weight:800;font-size:19px;color:var(--gris)}
.moyen{
background:var(--fiche);border-radius:13px;padding:13px 15px;box-shadow:var(--ombre);
display:flex;align-items:center;gap:12px;border-left:3px solid var(--vert);
}
.moyen .rond{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px;background:var(--vert-fond)}
.moyen .logo-wave{object-fit:contain;padding:5px;background:#fff}
.moyen b{display:block;font-family:var(--display);font-weight:600;font-size:16px}
.moyen small{display:block;color:var(--gris);font-size:13.5px;font-variant-numeric:tabular-nums}
.avantages{text-align:left;list-style:none;margin:0 4px 20px}
.avantages li{padding-left:28px;position:relative;margin-bottom:9px;font-size:15.5px}
.avantages li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:800;font-size:18px}
.zone-code{background:var(--fiche);border-radius:var(--r);padding:18px;box-shadow:var(--ombre);border-left:3px solid var(--mauve);margin-bottom:14px;text-align:left}
.zone-code h4{font-family:var(--display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:9px}
.zone-code .champ{margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.msg-code{font-family:var(--main);font-size:19px;margin-top:9px;line-height:1.3}
.msg-code.ok{color:var(--vert)}
.msg-code.ko{color:var(--rouge)}
.bandeau-abo{
background:var(--vert-fond);border-left:3px solid var(--vert);border-radius:12px;
padding:11px 14px;margin-bottom:16px;font-size:14px;color:#0A6E4E;
}
.bandeau-abo b{font-family:var(--display);font-size:15px;display:block}
/* ---------- calendrier de série ---------- */
.calendrier-serie{display:flex;gap:2px;margin-top:12px}
.jour-serie{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}
.jour-serie .lettre{font-size:10px;color:var(--gris);font-weight:700}
.jour-serie .point{width:16px;height:16px;flex:none;border-radius:50%;background:var(--reglure)}
.jour-serie.actif .point{background:var(--vert);box-shadow:0 2px 6px -2px rgba(10,122,85,.6)}
.jour-serie.aujourdhui .point{outline:2px solid var(--mauve);outline-offset:2px}
.jour-serie.futur .lettre{opacity:.5}
.jour-serie.futur .point{background:transparent;border:1.5px dashed var(--reglure)}
/* ---------- classement entre amis ---------- */
.ligne-classement{
display:flex;align-items:center;gap:10px;padding:9px 4px;
border-bottom:1px solid var(--reglure);font-size:15px;
}
.ligne-classement:last-child{border-bottom:none}
.ligne-classement .rang{
width:24px;height:24px;flex:none;border-radius:50%;background:var(--papier);
display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--gris);
}
.ligne-classement .pseudo{flex:1;font-weight:600}
.ligne-classement .avatar-ligne{
width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;
border:2px solid var(--fiche);box-shadow:0 2px 5px -2px rgba(30,34,102,.4);
}
.ligne-classement .score-classement{font-family:var(--display);font-weight:800;color:var(--mauve);font-variant-numeric:tabular-nums}
.ligne-classement.moi{background:var(--violet-clair);border-radius:10px;padding-left:8px;padding-right:8px}
.ligne-classement.moi .rang{background:var(--mauve);color:#fff}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:8px}
.podium .place{text-align:center;flex:1}
.podium .avatar-podium{
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:23px;margin:0 auto 5px;
border:3px solid var(--fiche);box-shadow:0 4px 10px -4px rgba(30,34,102,.5);position:relative;
}
.podium .place.or .avatar-podium{width:64px;height:64px;font-size:28px;border-color:var(--surligneur);box-shadow:0 0 0 3px rgba(255,221,60,.3), 0 6px 14px -6px rgba(30,34,102,.5)}
.podium .couronne{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:18px}
.podium .nom-podium{font-size:11.5px;font-weight:700;color:var(--texte)}
.podium .pts-podium{font-family:var(--display);font-weight:800;font-size:14px;color:var(--mauve);margin-top:1px}
.podium .barre{border-radius:9px 9px 0 0;margin-top:7px;display:flex;align-items:flex-start;justify-content:center;padding-top:7px}
.podium .barre b{font-family:var(--display);font-size:14px}
.podium .place.or .barre{height:64px;background:linear-gradient(180deg,#FFE98A,var(--surligneur));color:#8A6B00}
.podium .place.argent .barre{height:46px;background:var(--reglure);color:var(--gris)}
.podium .place.bronze .barre{height:32px;background:#F3DFC9;color:#8A5A2E}
/* ---------- aide et tarifs ---------- */
.faq{border-bottom:1px dashed var(--reglure);padding:9px 0}
.faq:last-child{border-bottom:none}
.faq summary{font-family:var(--display);font-weight:600;font-size:16px;cursor:pointer;list-style:none;padding-right:20px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-1px;color:var(--mauve);font-weight:800;font-size:19px}
.faq[open] summary::after{content:"–"}
.faq p{font-size:15px;color:var(--texte2);margin-top:7px}
.zone-texte{text-align:left;text-transform:none;letter-spacing:normal;font-family:var(--corps);font-size:16px;font-weight:400;resize:vertical}
.diag{
font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;color:var(--texte2);
background:var(--papier);border-radius:10px;padding:11px;white-space:pre-wrap;word-break:break-word;
}
.tarifs{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px}
.tarif{background:var(--fiche);border-radius:13px;padding:12px;box-shadow:var(--ombre);text-align:center;border:2px solid transparent}
.tarif.choisi{border-color:var(--mauve);background:var(--violet-clair)}
.tarif.choisi::after{
content:"✓";position:absolute;top:6px;right:9px;
font-size:13px;font-weight:800;color:var(--mauve);
}
.tarif{position:relative}
.tarif b{display:block;font-family:var(--display);font-weight:800;font-size:16px}
.tarif span{display:block;font-family:var(--display);font-weight:800;font-size:19px;color:var(--mauve);margin-top:2px}
.tarif small{display:block;font-size:12px;color:var(--gris);margin-top:2px}
button.tarif{cursor:pointer;transition:transform .1s ease}
button.tarif:active{transform:scale(.97)}
button.tarif small{color:var(--gris);font-size:12px}
.code-produit{
font-family:ui-monospace,monospace;font-size:22px;font-weight:700;letter-spacing:.06em;
color:var(--texte);background:var(--papier);border-radius:12px;padding:14px;text-align:center;
word-break:break-all;margin-bottom:10px;
}
a.gros-bouton{display:block;text-align:center;text-decoration:none}
/* ---------- audio ---------- */
.en{cursor:pointer;border-bottom:1px solid rgba(91,63,217,.45)}
.en::after{content:"\a0🗣️";font-size:.7em;margin-left:2px;opacity:.65;vertical-align:middle}
.en:active{opacity:.6}
.idee .en{color:var(--surligneur);border-bottom-color:rgba(255,221,60,.5)}
table.tab td .en{border-bottom:none}
table.tab td .en::after{font-size:.6em}
.en.sonne{background:var(--surligneur);border-radius:5px;box-shadow:0 0 0 3px var(--surligneur)}
.muet .en{cursor:default;border-bottom:none}
.muet .en::after{display:none}
.lecteur{
display:flex;align-items:center;gap:14px;background:var(--fiche);border-radius:var(--r);
padding:16px;box-shadow:var(--ombre);margin-bottom:18px;border-left:3px solid var(--mauve);
}
.btn-play{
width:62px;height:62px;flex:none;border-radius:50%;background:var(--mauve);color:#fff;
font-size:24px;box-shadow:0 4px 0 #4530AE;display:grid;place-items:center;
}
.btn-play:active{transform:translateY(3px);box-shadow:0 1px 0 #4530AE}
.btn-lent{font-family:var(--main);font-size:20px;color:var(--mauve);text-align:left;line-height:1.2}
.btn-son{
background:rgba(255,255,255,.75);border-radius:10px;padding:6px 12px;font-size:14px;
font-weight:700;box-shadow:var(--ombre);margin-top:7px;
}
/* Le panneau de correction recouvre l'énoncé s'il est trop haut :
on resserre tout ce qu'il contient. */
.retour-bas .gros-bouton{padding:13px;margin-top:8px}
.retour-bas .entendu{font-size:14px;margin-bottom:5px}
.retour-bas .mots-dits{font-size:17px;line-height:1.5;margin-bottom:5px}
.retour-bas .conseil, .retour-bas .rappel{font-size:14px}
.sans-son{font-size:14px;color:var(--gris);font-style:italic}
.video{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;background:#0B0D2B}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jauge.bascule{cursor:pointer;border:none}
/* =======================================================================
GRAND ÉCRAN
Un rail horizontal collé en bas d'un écran de 1920 pixels n'a pas de
sens : la barre devient une colonne à gauche, et le contenu se cale
dans l'espace restant au lieu de flotter au milieu du vide.
======================================================================= */
@media (min-width:900px){
.barre-onglets{
top:0;bottom:0;right:auto;width:238px;
border-top:none;border-right:1px solid var(--reglure);
box-shadow:none;padding-bottom:0;padding-top:env(safe-area-inset-top, 0px);
}
.onglets{flex-direction:column;align-items:stretch;padding:26px 14px;gap:6px;max-width:none}
.onglet{
flex:none;flex-direction:row;justify-content:flex-start;align-items:center;
gap:12px;padding:12px 14px;border-radius:12px;
border-top:none;border-left:3px solid transparent;font-size:14.5px;
}
.onglet svg{width:21px;height:21px}
.onglet span{min-height:0;text-align:left}
.onglet.actif{background:var(--violet-clair);border-top-color:transparent;border-left-color:var(--mauve)}
/* Les écrans sans colonne, une leçon par exemple, restent centrés. */
.appli{max-width:620px}
/* Ceux qui l'ont se décalent à droite d'elle, puis se centrent dans ce
qui reste. Le :has permet de faire la différence sans toucher au JS. */
.appli:has(.barre-onglets){
max-width:720px;
margin-left:calc(238px + max(28px, (100vw - 238px - 720px) / 2));
margin-right:28px;
padding-bottom:48px;
}
/* L'en-tête cesse d'être un bandeau coupé pour devenir une carte. */
.entete{margin:20px 0;border-radius:18px}
/* Deux colonnes de leçons au lieu d'une liste qui s'étire.
Uniquement pour une unité : une étape contient des unités entières,
qui doivent rester empilées sur toute la largeur. */
.unite:not(.etape).ouverte > .unite-corps{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.unite:not(.etape) > .unite-corps > .unite-resume{grid-column:1 / -1;margin-bottom:2px}
.unite:not(.etape) > .unite-corps > .fiche{margin-bottom:0}
.etape.ouverte > .unite-corps{display:block}
.barre-nav{margin:0;border-radius:0 0 14px 14px;padding-left:0;padding-right:0}
.retour-bas{left:238px}
.retour-bas .interieur{max-width:720px}
.scores{max-width:520px;margin-left:auto;margin-right:auto}
.profil-carte{max-width:520px;margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* =======================================================================
PAGE DE PRÉSENTATION
Tous les sélecteurs sont préfixés par .site pour ne jamais interférer
avec l'application, qui vit dans .appli juste à côté.
======================================================================= */
.site{display:block}
.site.masque{display:none}
.appli.actif{display:block}
.site a{color:inherit}
.site .enveloppe{max-width:1060px;margin:0 auto;padding:0 22px}
.site section{padding:74px 0}
.site .barre{position:sticky;top:0;z-index:50;background:rgba(241,244,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--reglure)}
.site .barre .enveloppe{display:flex;align-items:center;justify-content:space-between;padding-top:calc(14px + env(safe-area-inset-top, 0px));padding-bottom:14px}
.site .marque{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.03em}
.site .marque span{color:#D9A400}
.site .bouton{
display:inline-block;background:var(--mauve);color:#fff;text-decoration:none;
font-family:var(--display);font-weight:800;font-size:16px;padding:13px 22px;
border-radius:13px;box-shadow:0 4px 0 #4530AE;transition:transform .1s ease;
}
.site .bouton:active{transform:translateY(3px);box-shadow:0 1px 0 #4530AE}
.site .bouton.grand{font-size:18px;padding:17px 30px}
.site .bouton.creux{background:#fff;color:var(--texte);box-shadow:var(--ombre)}
.site .hero{padding-top:64px;padding-bottom:46px}
.site .hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.site .oeil{font-family:var(--display);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--mauve);margin-bottom:14px}
.site h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,5.4vw,60px);line-height:1.02;letter-spacing:-.035em;margin-bottom:18px}
.site h1 em{font-style:normal;background:linear-gradient(transparent 60%, var(--surligneur) 60%);padding:0 4px}
.site .chapeau{font-size:19px;color:var(--texte2);max-width:34em;margin-bottom:26px}
.site .actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.site .mention{font-family:var(--main);font-size:19px;color:var(--gris)}
.site .correction-carte{background:var(--fiche);border-radius:20px;padding:28px 26px 24px;box-shadow:var(--ombre);border-left:4px solid var(--marge)}
.site .correction-carte h4{font-family:var(--display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin-bottom:16px}
.site .phrase{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:600;line-height:1.3;letter-spacing:-.015em}
.site .phrase.fausse{color:var(--rouge);margin-bottom:6px;position:relative;display:inline-block}
.site .phrase.fausse::after{content:"";position:absolute;left:-2px;top:52%;height:3px;width:0;background:var(--rouge);border-radius:2px;animation:barrer .7s .6s ease-out forwards}
@keyframes barrer{to{width:calc(100% + 4px)}}
.site .phrase.juste{color:var(--vert);margin-top:14px}
.site .flechette{font-family:var(--main);font-size:24px;color:var(--gris);margin:4px 0}
.site .annotation{font-family:var(--main);font-size:21px;line-height:1.3;color:var(--rouge);background:var(--rouge-fond);border-radius:12px;padding:12px 14px;margin-top:20px;transform:rotate(-.6deg)}
.site .annotation::before{content:"✎ ";opacity:.6}
.site .chiffres{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.site .chiffre{flex:1;min-width:128px;background:var(--fiche);border-radius:15px;padding:16px 18px;box-shadow:var(--ombre)}
.site .chiffre b{display:block;font-family:var(--display);font-weight:800;font-size:31px;line-height:1;letter-spacing:-.02em}
.site .chiffre small{display:block;font-size:12.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-top:5px}
.site h2{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.6vw,40px);letter-spacing:-.03em;line-height:1.08;margin-bottom:12px}
.site .intro-section{font-size:18px;color:var(--texte2);max-width:44em;margin-bottom:38px}
.site .cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.site .carte{background:var(--fiche);border-radius:18px;padding:24px;box-shadow:var(--ombre);border-left:4px solid var(--marge)}
.site .carte .icone{font-size:29px;line-height:1;margin-bottom:13px;display:block}
.site .carte h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em;margin-bottom:8px;line-height:1.2}
.site .carte p{font-size:15.5px;color:var(--texte2)}
.site .carte .exemple{margin-top:14px;padding-top:14px;border-top:1px dashed var(--reglure);font-family:var(--main);font-size:19px;line-height:1.35;color:var(--encre2)}
.site .sombre{background:var(--encre);color:#fff;border-radius:28px;padding:56px 42px}
.site .sombre h2{color:#fff}
.site .sombre .intro-section{color:#B9BFEE}
.site .programme{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;margin-top:8px}
.site .ligne-u{display:flex;align-items:baseline;gap:13px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.site .num-u{font-family:var(--display);font-weight:800;font-size:12px;color:var(--texte);background:var(--surligneur);border-radius:5px;padding:2px 7px;flex:none}
.site .ligne-u b{font-family:var(--display);font-weight:600;font-size:17px}
.site .ligne-u small{display:block;color:#A8AEE8;font-size:13.5px;font-weight:400;margin-top:1px}
.site .note-sombre{font-family:var(--main);font-size:21px;color:var(--surligneur);margin-top:26px}
.site .duo{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.site .avatars{display:flex;gap:14px;flex-wrap:wrap}
.site .tete{width:88px;height:88px;border-radius:27px;display:grid;place-items:center;font-size:42px;border:3px solid #fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.1), 0 10px 22px -12px rgba(30,34,102,.8)}
.site .tete + .tete{margin-left:-26px}
.site .liste-plus{list-style:none;margin-top:20px}
.site .liste-plus li{padding-left:30px;position:relative;margin-bottom:11px;font-size:16.5px}
.site .liste-plus li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:800;font-size:19px}
.site .final{text-align:center}
.site .final h2{max-width:16em;margin:0 auto 12px}
.site .boite-mail{background:var(--fiche);border-radius:20px;padding:28px;max-width:520px;margin:32px auto 0;box-shadow:var(--ombre);border-left:4px solid var(--surligneur)}
.site .boite-mail h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:6px}
.site .boite-mail p{font-size:15px;color:var(--gris);margin-bottom:18px}
.site .magasins{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.site .badge{display:flex;align-items:center;gap:9px;background:var(--reglure);border-radius:12px;padding:11px 17px;font-size:14px;font-weight:700;color:var(--texte2)}
.site .badge span{font-size:19px}
.site footer{border-top:1px solid var(--reglure);padding:30px 0 44px;font-size:14px;color:var(--gris)}
.site footer .copyright{margin-top:14px;font-size:12.5px;opacity:.75}
.site footer .enveloppe{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.lien-pied{font-size:12.5px;color:var(--gris);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
.site section{padding:52px 0}
.site .hero-grille,.site .duo{grid-template-columns:1fr;gap:34px}
.site .cartes,.site .programme{grid-template-columns:1fr}
.site .sombre{padding:40px 24px;border-radius:22px}
.site .tete{width:70px;height:70px;font-size:33px;border-radius:22px}
}
/* =======================================================================
MODE SOMBRE
Suit le réglage du téléphone. Les surfaces s'assombrissent, le texte
s'éclaircit, et les couleurs de sens sont remontées en luminosité pour
rester lisibles sur fond foncé.
======================================================================= */
@media (prefers-color-scheme: dark){
:root{
--encre:#0C0E24;
--texte:#E7EAFF;
--texte2:#AEB5E4;
--encre2:#A9B0EE;
--papier:#14162F;
--fiche:#1E2143;
--reglure:#2A2E55;
--marge:#C4707A;
--surligneur:#FFD84D;
--vert:#3FCE9C;
--vert-fond:#173C33;
--rouge:#FF7B7B;
--rouge-fond:#3E1F24;
--mauve:#9B87FF;
--gris:#9AA0CC;
--violet-clair:#2B2757;
--miel:#3A3316;
--miel-texte:#E8D68F;
--ombre:0 2px 0 rgba(0,0,0,.30), 0 12px 28px -16px rgba(0,0,0,.8);
}
body{background-color:var(--papier)}
.fiche, .bloc, .carnet, .zone-code, .vignette, .scene-dessin, .cadeau, .score, .apercu, .tarif, .moyen, .carte-test{
border-color:transparent;
}
.entete{background:#080A1C}
/* Le fond ligné devient presque invisible : en sombre, il rayait l'écran. */
body{background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px)}
.idee, .scene, .prix, .sombre{background:#080A1C}
/* Le violet clair reste pour le texte ; les boutons reprennent un violet
soutenu, sinon le blanc dessus devient illisible. */
.gros-bouton, .site .bouton, .btn-micro, .btn-play, .option.choisie{background:#5B3FD9}
.option.choisie{color:#fff;border-color:#8B78FF}
.gros-bouton{box-shadow:0 4px 0 #3A2A9E}
.gros-bouton.vert{box-shadow:0 4px 0 #0E6B4F}
.gros-bouton.rouge{box-shadow:0 4px 0 #8E3A3A}
.gros-bouton.pale{background:var(--fiche);color:var(--texte)}
.btn-micro{box-shadow:0 5px 0 #3A2A9E}
.btn-play{box-shadow:0 4px 0 #3A2A9E}
.champ{background:var(--papier);color:var(--texte)}
.selecteur{background-color:var(--violet-clair);border-color:var(--mauve)}
.diag{background:var(--papier)}
.code-produit{background:var(--papier)}
.site .barre{background:rgba(20,22,47,.92)}
.site .bouton.creux{background:var(--fiche);color:var(--texte)}
.site .badge{background:var(--reglure);color:var(--texte2)}
.option{border-color:transparent}
.mot, .zone-reponse{background:var(--fiche)}
.zone-reponse .mot{background:var(--violet-clair)}
.mot.pris{background:var(--reglure)}
.unite-titre:active{background:rgba(255,255,255,.06)}
.btn-son{background:var(--fiche);color:var(--texte)}
.avatar, .tete, .gommette{border-color:var(--fiche)}
/* Fonds et textes qui étaient restés figés en clair. */
.piege{background:#2E2338}
.bandeau-abo{color:var(--vert)}
.carte-test .pastille{background:rgba(255,216,77,.16)}
.gros-bouton[disabled]{background:#333863;color:#A8AEDC;box-shadow:0 4px 0 #23264A}
.btn-micro[disabled]{background:#333863;color:#A8AEDC;box-shadow:0 5px 0 #23264A}
/* Sur fond jaune, le texte doit rester foncé. */
.site .num-u{color:#1A1400}
.badge-premium{color:#1A1400}
/* Le surlignage devient translucide : un jaune plein sous un texte
clair ne se lit plus. */
.surligne{background:linear-gradient(transparent 58%, rgba(255,216,77,.28) 58%)}
.site h1 em{background:linear-gradient(transparent 58%, rgba(255,216,77,.28) 58%)}
.en.sonne{background:rgba(255,216,77,.25);box-shadow:0 0 0 3px rgba(255,216,77,.25)}
/* Corrections de contraste propres au thème sombre. */
.panne{color:var(--rouge)}
.unite-num{background:#4A32B8}
.compte-unite{color:var(--texte2)}
}