:root{
  --fond:#EAF3FC;--surface:#FFFFFF;--surface2:#D6E7F7;--encre:#1E2C4D;--encre2:#5E6E8C;
  --ligne:rgba(30,44,77,.16);--pousse:#3FA34D;--pousse-f:#2E7F3A;--pousse-s:rgba(63,163,77,.16);
  --ciel:#7EC4F2;--ciel-f:#3F8FCB;--ciel-s:rgba(126,196,242,.28);--terre:#C65D45;--terre-s:rgba(198,93,69,.14);
  --or:#E0A93E;--blanc:#FFFFFF;--yt:#E62117;
  --display:"Bricolage Grotesque",Georgia,serif;--body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:22px;--bord:3px;--levre:5px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --fond:#12233A;--surface:#1B3050;--surface2:#24405F;--encre:#F3EEE2;--encre2:#B7C3D6;
  --ligne:rgba(243,238,226,.18);--pousse:#6BCB77;--pousse-f:#3FA34D;--pousse-s:rgba(107,203,119,.18);
  --ciel:#7EC4F2;--ciel-f:#A7DBFF;--ciel-s:rgba(126,196,242,.16);--terre:#E07A62;--terre-s:rgba(224,122,98,.16);--blanc:#1B3050}}
:root[data-theme="dark"]{color-scheme:dark;
  --fond:#12233A;--surface:#1B3050;--surface2:#24405F;--encre:#F3EEE2;--encre2:#B7C3D6;
  --ligne:rgba(243,238,226,.18);--pousse:#6BCB77;--pousse-f:#3FA34D;--pousse-s:rgba(107,203,119,.18);
  --ciel:#7EC4F2;--ciel-f:#A7DBFF;--ciel-s:rgba(126,196,242,.16);--terre:#E07A62;--terre-s:rgba(224,122,98,.16);--blanc:#1B3050}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--body);font-size:17px;line-height:1.5;
  padding-block:0 120px;overflow-x:hidden;transition:background .3s,color .3s}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(34px,8vw,56px)}h2{font-size:clamp(26px,5.5vw,38px)}h3{font-size:clamp(19px,4.5vw,24px)}
p{margin:0}a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{width:100%;max-width:720px;margin:0 auto;padding-inline:16px}
.wide{max-width:1080px}
.eyebrow{font-family:var(--body);font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pousse-f)}
[data-theme="dark"] .eyebrow{color:var(--pousse)}
.muted{color:var(--encre2)}
/* Case de BD : le contenant signature, repris de la Vignette des vidéos */
.case{background:var(--surface);border:var(--bord) solid var(--encre);border-radius:var(--r);box-shadow:0 var(--levre) 0 var(--encre);padding:20px}
.case.penchee{transform:rotate(-1.2deg)}
.case.fendue{border-style:dashed}
/* Boutons à lèvre dure */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:16px;
  border:var(--bord) solid var(--encre);background:var(--surface);font-weight:900;font-size:16px;text-decoration:none;
  box-shadow:0 4px 0 var(--encre);transition:transform .12s,box-shadow .12s;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--encre)}
.btn:active,.btn.pressed{transform:translateY(4px);box-shadow:0 0 0 var(--encre)}
.btn:focus-visible,.choix:focus-visible,.tuile:focus-visible{outline:3px solid var(--ciel-f);outline-offset:3px}
.btn.vert{background:var(--pousse-f);color:#fff;border-color:var(--pousse-f);box-shadow:0 4px 0 var(--pousse-f)}
.btn.vert:hover{box-shadow:0 5px 0 var(--pousse-f)}.btn.vert:active{box-shadow:0 0 0 var(--pousse-f)}
[data-theme="dark"] .btn.vert,:root:not([data-theme="light"]) .btn.vert{color:#0F2A14}
.btn.ciel{background:var(--ciel);color:#0F2440;border-color:var(--ciel-f);box-shadow:0 4px 0 var(--ciel-f)}
.btn.encre{background:var(--encre);color:var(--fond);box-shadow:0 4px 0 var(--encre2)}
.btn.yt{background:var(--yt);color:#fff;border-color:#9E150E;box-shadow:0 4px 0 #9E150E}
.btn.mini{min-height:40px;padding:6px 14px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--encre)}
.btn.lien{border:0;box-shadow:none;background:transparent;text-decoration:underline;text-underline-offset:4px;min-height:auto;padding:6px 4px}
.btn.lien:hover,.btn.lien:active{transform:none}
/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--fond);border-bottom:var(--bord) solid var(--encre)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.logo .rond{width:40px;height:40px;border-radius:50%;background:var(--ciel);border:var(--bord) solid var(--encre);display:grid;place-items:center;overflow:hidden}
.logo .rond img{width:34px;height:34px;object-fit:cover;object-position:top}
.top nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.top nav a.nl{display:none;font-weight:800;text-decoration:none;padding:8px 10px;border-radius:10px}
.top nav a.nl:hover{background:var(--surface2)}
@media(min-width:720px){.top nav a.nl{display:inline-block}}
.icobtn{width:44px;height:44px;border-radius:12px;border:var(--bord) solid var(--encre);background:var(--surface);display:grid;place-items:center;box-shadow:0 3px 0 var(--encre)}
.icobtn:active{transform:translateY(3px);box-shadow:none}
.icobtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
main{animation:apparait .35s ease-out}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section.bloc{padding-block:34px}
.grille{display:grid;gap:14px}
.fil{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:700;color:var(--encre2);padding-block:14px 0}
.fil a{text-decoration:none}.fil a:hover{text-decoration:underline}
/* Héros accueil */
.hero{position:relative;padding-block:28px 10px;display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.hero{grid-template-columns:1.2fr .8fr}}
.hero .mot{display:inline-block;background:var(--ciel);border:var(--bord) solid var(--encre);border-radius:14px;padding:0 12px;transform:rotate(-2deg);box-shadow:0 4px 0 var(--encre);color:#0F2440}
.hero .mot.vert{background:var(--pousse);color:#fff;transform:rotate(1.5deg)}
.hero-perso{position:relative;justify-self:center;width:min(260px,60vw)}
.hero-perso img{width:100%;display:block;filter:drop-shadow(0 6px 0 rgba(30,44,77,.25))}
.bulle{position:absolute;top:-6px;left:-20px;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:18px 18px 18px 4px;padding:8px 12px;font-weight:900;font-size:15px;box-shadow:0 4px 0 var(--encre);animation:flotte 3s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-6px)}}
.perso-idle{animation:respire 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes respire{50%{transform:scaleY(1.02) scaleX(.99)}}
/* Tuiles de langue : chaque tuile est différente par nature, pas une grille de cartes identiques */
.langues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.langues{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tuile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:132px;padding:16px;border:var(--bord) solid var(--encre);border-radius:var(--r);
  background:var(--surface);box-shadow:0 5px 0 var(--encre);text-decoration:none;transition:transform .15s,box-shadow .15s;overflow:hidden}
.tuile:hover{transform:translate(0,-3px) rotate(-.6deg);box-shadow:0 8px 0 var(--encre)}
.tuile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--encre)}
.tuile .drap{font-size:34px;line-height:1;font-family:var(--display)}
.tuile .drap svg{width:44px;height:32px;border:2px solid var(--encre);border-radius:8px;display:block}
.tuile h3{font-size:22px}
.tuile .n{margin-top:auto;font-size:13px;font-weight:800;color:var(--encre2)}
.tuile.grande{grid-column:span 2;background:var(--ciel);color:#0F2440}
.tuile.grande .n{color:#2B4C6B}
.tuile .badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:var(--or);color:#3A2A05;border:2px solid var(--encre);border-radius:999px;padding:3px 8px;transform:rotate(6deg)}
.tuile.bientot{border-style:dashed;box-shadow:none;opacity:.85}
/* Quiz du jour */
.qdj{display:grid;gap:14px;grid-template-columns:1fr;align-items:center;background:var(--encre);color:var(--fond);border-radius:var(--r);padding:22px;border:var(--bord) solid var(--encre);box-shadow:0 6px 0 var(--ciel-f)}
@media(min-width:640px){.qdj{grid-template-columns:1fr auto}}
.qdj .eyebrow{color:var(--ciel)}
.qdj .serie{display:flex;gap:6px;align-items:center;font-weight:800;font-size:14px}
.qdj .serie i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--pousse)}
.qdj .serie i.off{background:transparent;border:2px solid var(--ciel)}
/* Étapes */
.etapes{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.etapes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.etape{display:flex;gap:12px;align-items:flex-start}
@media(min-width:640px){.etape{flex-direction:column}}
.etape .ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--surface);border:var(--bord) solid var(--encre);display:grid;place-items:center;box-shadow:0 4px 0 var(--encre)}
.etape .ic svg{width:24px;height:24px;stroke:var(--encre);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.etape strong{display:block;font-family:var(--display);font-size:19px}
/* Newsletter */
.nl-bloc{display:grid;gap:14px;background:var(--pousse-s);border:var(--bord) solid var(--encre);border-radius:var(--r);padding:22px;box-shadow:0 5px 0 var(--encre)}
.nl-form{display:flex;flex-wrap:wrap;gap:10px}
.nl-form input{flex:1 1 200px;min-height:52px;padding:0 16px;border-radius:14px;border:var(--bord) solid var(--encre);background:var(--surface);font:inherit;font-weight:700;color:var(--encre);box-shadow:inset 0 3px 0 var(--ligne)}
.nl-form input:focus{outline:3px solid var(--ciel-f);outline-offset:2px}
.nl-bloc small{font-size:13px;color:var(--encre2);line-height:1.4}
/* Hub langue */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;border:var(--bord) solid var(--encre);background:var(--surface);font-weight:900;font-size:14px;text-decoration:none;box-shadow:0 3px 0 var(--encre)}
.chip.on{background:var(--encre);color:var(--fond);box-shadow:0 3px 0 var(--encre2)}
.chip.classe{border-style:dashed;box-shadow:none;font-weight:800}
.theme{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;border:var(--bord) solid var(--encre);border-radius:20px;background:var(--surface);box-shadow:0 5px 0 var(--encre);text-decoration:none;transition:transform .15s,box-shadow .15s}
.theme:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--encre)}
.theme .vig{aspect-ratio:16/9;border-radius:12px;border:2px solid var(--encre);background:linear-gradient(135deg,var(--ciel) 0 50%,var(--surface2) 50%);display:grid;place-items:center;position:relative;overflow:hidden}
.theme .vig span{font-family:var(--display);font-weight:800;font-size:22px;color:#0F2440;transform:rotate(-8deg)}
.theme .vig i{position:absolute;right:6px;bottom:6px;width:22px;height:16px;border-radius:5px;background:var(--yt);display:grid;place-items:center}
.theme .vig i::after{content:"";border-left:7px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.theme h3{font-size:18px}
.theme .meta{font-size:13px;font-weight:800;color:var(--encre2);display:flex;flex-wrap:wrap;gap:8px}
.theme .meta b{color:var(--pousse-f)}
[data-theme="dark"] .theme .meta b{color:var(--pousse)}
.test-niv{background:var(--ciel);color:#0F2440;display:grid;gap:10px;grid-template-columns:1fr;align-items:center}
@media(min-width:640px){.test-niv{grid-template-columns:1fr auto}}
.test-niv .btn{border-color:#0F2440;box-shadow:0 4px 0 #0F2440;background:#fff;color:#0F2440}
.cecrl{display:flex;flex-wrap:wrap;gap:4px}
.cecrl span{flex:1 1 120px;text-align:center;font-weight:900;font-size:13px;padding:6px 0;border:2px solid #0F2440;border-radius:8px;background:rgba(255,255,255,.55)}
.cecrl span.ok{background:#0F2440;color:#fff}
/* Page quiz */
.facade{position:relative;aspect-ratio:16/9;border-radius:var(--r);border:var(--bord) solid var(--encre);box-shadow:0 6px 0 var(--encre);overflow:hidden;background:var(--encre);display:grid;place-items:center;cursor:pointer}
.facade .titre{position:absolute;left:16px;top:14px;right:70px;color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(18px,4vw,26px);line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.facade .play{width:76px;height:52px;border-radius:14px;background:var(--yt);display:grid;place-items:center;border:var(--bord) solid #fff;box-shadow:0 5px 0 #9E150E;transition:transform .15s}
.facade:hover .play{transform:scale(1.08)}
.facade .play::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:4px}
.facade .duree{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;font-weight:900;font-size:13px;padding:3px 8px;border-radius:8px}
.facade .fond{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,var(--ciel-f) 0,transparent 45%),radial-gradient(circle at 20% 80%,var(--pousse-f) 0,transparent 40%);opacity:.55}
.facade .perso{position:absolute;right:-10px;bottom:-14px;width:32%;max-width:170px;pointer-events:none}
/* Leçon */
.lecon details{border:var(--bord) solid var(--encre);border-radius:18px;background:var(--surface);box-shadow:0 4px 0 var(--encre);overflow:hidden}
.lecon summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-family:var(--display);font-weight:800;font-size:19px;min-height:56px}
.lecon summary::-webkit-details-marker{display:none}
.lecon summary .fleche{margin-left:auto;width:32px;height:32px;border-radius:10px;border:2px solid var(--encre);display:grid;place-items:center;transition:transform .2s}
.lecon summary .fleche svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}
.lecon details[open] summary .fleche{transform:rotate(180deg)}
.lecon .corps{padding:0 16px 16px;display:grid;gap:12px}
.mots{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:560px){.mots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mot-l{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface2);border:2px solid var(--ligne)}
.mot-l b{font-family:var(--display);font-size:18px}
.mot-l .fr{font-size:14px;color:var(--encre2);font-weight:700}
.mot-l .ecoute{width:36px;height:36px;border-radius:10px;border:2px solid var(--encre);background:var(--surface);display:grid;place-items:center}
.mot-l .ecoute svg{width:16px;height:16px;fill:var(--encre)}
.piege{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--terre-s);border:2px dashed var(--terre)}
.piege .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--terre);color:#fff;display:grid;place-items:center;font-weight:900}
/* Le quiz */
.quiz{position:relative;display:grid;gap:16px}
.q-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pastilles{display:flex;gap:5px;flex:1}
.pastilles i{flex:1;height:12px;border-radius:6px;background:var(--surface);border:2px solid var(--encre);transition:background .3s,transform .3s}
.pastilles i.cur{background:var(--ciel);animation:pulse 1.4s ease-in-out infinite}
.pastilles i.ok{background:var(--pousse)}
.pastilles i.ko{background:var(--terre)}
@keyframes pulse{50%{transform:scaleY(1.35)}}
.compte{font-weight:900;font-size:14px;color:var(--encre2);white-space:nowrap;font-variant-numeric:tabular-nums}
.anneau{position:relative;width:44px;height:44px;flex:none}
.anneau svg{width:44px;height:44px;transform:rotate(-90deg)}
.anneau circle{fill:none;stroke-width:5}
.anneau .fond-a{stroke:var(--ligne)}
.anneau .arc{stroke:var(--ciel-f);stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s}
.anneau.presse .arc{stroke:var(--terre)}
.anneau b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.q-scene{position:relative;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:28px;box-shadow:0 6px 0 var(--encre);padding:22px 18px 48px;display:grid;gap:18px;min-height:300px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.q-scene.penchee{transform:rotate(-1deg)}
.q-scene.secoue{animation:secoue .35s}
@keyframes secoue{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.q-scene.saute{animation:saute .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes saute{40%{transform:translateY(-10px) scale(1.01)}}
.q-mode{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--encre2);display:flex;gap:8px;align-items:center}
.q-mode i{width:10px;height:10px;border-radius:50%;background:var(--ciel)}
.q-enonce{font-family:var(--display);font-weight:800;font-size:clamp(22px,5.4vw,30px);line-height:1.12}
.q-enonce .cible{display:inline-block;background:var(--ciel);color:#0F2440;border:2px solid var(--encre);border-radius:10px;padding:0 8px;transform:rotate(-1.5deg)}
.q-enonce .trou{display:inline-block;min-width:96px;border-bottom:4px solid var(--encre);text-align:center;color:var(--ciel-f);transition:all .2s}
.choix-grille{display:grid;gap:10px;grid-template-columns:1fr}
.choix-grille.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.choix{position:relative;display:flex;align-items:center;gap:12px;text-align:left;min-height:60px;padding:10px 14px;border-radius:16px;border:var(--bord) solid var(--encre);background:var(--surface);font-weight:800;font-size:18px;
  box-shadow:0 4px 0 var(--encre);transition:transform .12s,box-shadow .12s,background .2s,opacity .3s}
.choix:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 0 var(--encre)}
.choix:active:not([disabled]){transform:translateY(4px);box-shadow:none}
.choix .forme{flex:none;width:30px;height:30px;border:var(--bord) solid var(--encre);display:grid;place-items:center;font-size:12px;font-weight:900;background:var(--surface2)}
.choix .forme.rond{border-radius:50%;background:var(--ciel)}
.choix .forme.carre{border-radius:6px;background:var(--pousse-s)}
.choix .forme.losange{transform:rotate(45deg);border-radius:5px;background:var(--or)}
.choix .forme.losange span{transform:rotate(-45deg)}
.choix .forme.triangle{border-radius:8px 8px 4px 4px;background:var(--terre-s)}
.choix.selection{background:var(--ciel-s);border-color:var(--ciel-f)}
.choix.juste{background:var(--pousse);color:#fff;border-color:var(--pousse-f);box-shadow:0 4px 0 var(--pousse-f);animation:saute .45s}
.choix.juste .forme{background:#fff;color:var(--pousse-f);border-color:var(--pousse-f)}
.choix.faux{background:var(--terre);color:#fff;border-color:#8E3E2C;box-shadow:0 4px 0 #8E3E2C;animation:secoue .35s}
.choix.eteint{opacity:.42;transform:scale(.97);box-shadow:0 2px 0 var(--encre)}
.choix[disabled]{cursor:default}
.choix .cle{margin-left:auto;font-size:11px;font-weight:900;color:var(--encre2);border:2px solid var(--ligne);border-radius:6px;padding:1px 6px}
.choix.juste .cle,.choix.faux .cle{display:none}
/* Explication et suite */
.explic{display:none;gap:10px;grid-template-columns:auto 1fr;align-items:start;padding:14px;border-radius:16px;background:var(--surface2);border:2px solid var(--ligne)}
.explic.on{display:grid;animation:apparait .3s}
.explic .verdict{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}
.explic .verdict.ok{color:var(--pousse-f)}[data-theme="dark"] .explic .verdict.ok{color:var(--pousse)}
.explic .verdict.ko{color:var(--terre)}
.explic p{font-size:15px}
.explic .minute{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:900;text-decoration:none;border:2px solid var(--encre);border-radius:8px;padding:3px 8px;background:var(--surface)}
.q-pied{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* Mascotte du coin */
.masc{position:absolute;right:-10px;bottom:-26px;width:88px;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1);z-index:2}
.masc img{width:100%;display:block;filter:drop-shadow(0 4px 0 rgba(30,44,77,.25))}
.masc.penche{transform:rotate(-10deg) translateY(-4px)}
.masc.saute{animation:masc-saute .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes masc-saute{40%{transform:translateY(-28px) rotate(6deg)}}
.masc.cache{animation:masc-cache .4s}
@keyframes masc-cache{50%{transform:translateY(8px) scale(.94)}}
@media(min-width:640px){.masc{width:116px;right:-16px;bottom:-30px}.q-scene{padding-bottom:56px}}
/* Vrai ou faux en glissement */
.swipe-zone{position:relative;min-height:190px;display:grid;place-items:center}
.carte-vf{position:absolute;width:min(100%,360px);background:var(--surface);border:var(--bord) solid var(--encre);border-radius:22px;padding:22px 18px;box-shadow:0 6px 0 var(--encre);font-family:var(--display);font-weight:800;font-size:22px;text-align:center;touch-action:pan-y;cursor:grab;user-select:none;transition:transform .25s,opacity .25s}
.carte-vf.drag{transition:none;cursor:grabbing}
.carte-vf .tag{position:absolute;top:10px;font-family:var(--body);font-size:13px;font-weight:900;letter-spacing:.1em;padding:3px 10px;border-radius:8px;border:2px solid;opacity:0;transition:opacity .15s;transform:rotate(-8deg)}
.carte-vf .tag.v{left:12px;color:var(--pousse-f);border-color:var(--pousse-f)}
.carte-vf .tag.f{right:12px;color:var(--terre);border-color:var(--terre);transform:rotate(8deg)}
.carte-vf.sortie-g{transform:translateX(-140%) rotate(-20deg);opacity:0}
.carte-vf.sortie-d{transform:translateX(140%) rotate(20deg);opacity:0}
.vf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Texte à trous : jetons */
.jetons{display:flex;flex-wrap:wrap;gap:8px}
.jeton{min-height:46px;padding:8px 14px;border-radius:12px;border:var(--bord) solid var(--encre);background:var(--or);color:#3A2A05;font-weight:900;font-size:17px;box-shadow:0 4px 0 var(--encre);transition:transform .12s,box-shadow .12s,opacity .2s}
.jeton:hover{transform:translateY(-2px)}.jeton:active{transform:translateY(4px);box-shadow:none}
.jeton.pose{opacity:.3;pointer-events:none}
.jeton.juste{background:var(--pousse-f);color:#fff;border-color:var(--pousse-f);box-shadow:0 4px 0 var(--pousse-f)}
.jeton.faux{background:var(--terre);color:#fff;border-color:var(--terre);box-shadow:0 4px 0 var(--terre);text-decoration:line-through}
/* Résultat */
.resultat{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;text-align:center;padding:26px 18px;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:28px;box-shadow:0 6px 0 var(--encre);position:relative;overflow:hidden}
.score{font-family:var(--display);font-weight:800;font-size:clamp(64px,18vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.score small{font-size:.35em;color:var(--encre2)}
.palier{display:inline-block;justify-self:center;background:var(--or);color:#3A2A05;border:var(--bord) solid var(--encre);border-radius:999px;padding:6px 16px;font-weight:900;transform:rotate(-2deg);box-shadow:0 4px 0 var(--encre)}
.grille-partage{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:20px;font-family:var(--body);line-height:1;max-width:100%}
.res-perso{width:min(200px,50vw);margin:0 auto}
.res-perso img{width:100%;display:block;filter:drop-shadow(0 6px 0 rgba(30,44,77,.25))}
.res-actions{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:520px){.res-actions{grid-template-columns:1fr 1fr}}
.sticker{position:absolute;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--pousse);color:#fff;border:3px solid #fff;outline:var(--bord) solid var(--encre);border-radius:999px;padding:6px 12px;transform:rotate(12deg);box-shadow:0 4px 0 var(--encre);animation:colle .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes colle{from{transform:rotate(30deg) scale(2.2);opacity:0}}
/* Révision : cartes à retourner */
.revision{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.revision{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flip{perspective:900px;min-height:120px;cursor:pointer}
.flip .in{position:relative;width:100%;min-height:120px;transition:transform .55s cubic-bezier(.34,1.3,.64,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .d{position:absolute;inset:0;backface-visibility:hidden;border:var(--bord) solid var(--encre);border-radius:18px;padding:14px;display:grid;place-items:center;text-align:center;box-shadow:0 4px 0 var(--encre)}
.flip .f{background:var(--terre-s);font-family:var(--display);font-weight:800;font-size:20px}
.flip .d{background:var(--pousse-s);transform:rotateY(180deg);font-size:15px}
.flip .d b{font-family:var(--display);font-size:20px;display:block}
/* Bloc prof (Preply) */
.prof{display:grid;gap:14px;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:var(--r);padding:22px;box-shadow:0 6px 0 var(--pousse-f);position:relative}
.prof .eyebrow{color:var(--terre)}
.prof ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px}
.prof .promo{display:inline-block;background:var(--or);color:#3A2A05;border:2px solid var(--encre);border-radius:10px;padding:2px 8px;font-weight:900;transform:rotate(-2deg)}
.prof small{font-size:12px;color:var(--encre2)}
/* Page Preply avis */
.verdict{display:grid;gap:12px;grid-template-columns:auto 1fr;align-items:center;background:var(--encre);color:var(--fond);border-radius:var(--r);padding:20px;border:var(--bord) solid var(--encre);box-shadow:0 6px 0 var(--or)}
.note{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;background:var(--or);color:#3A2A05;border:var(--bord) solid var(--encre);border-radius:18px;padding:10px 14px;transform:rotate(-3deg)}
.note small{font-size:18px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:2px solid var(--ligne)}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre2)}
td b{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums}
.deux-col{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:600px){.deux-col{grid-template-columns:1fr 1fr}}
.pour,.contre{border-radius:18px;padding:16px;border:var(--bord) solid var(--encre)}
.pour{background:var(--pousse-s)}.contre{background:var(--terre-s)}
.pour ul,.contre ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-size:15px}
/* Barre CTA sticky, jamais un overlay */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--encre);color:var(--fond);border-top:var(--bord) solid var(--ciel-f);transform:translateY(0);transition:transform .35s cubic-bezier(.34,1.3,.64,1)}
.cta-bar.fermee{transform:translateY(110%)}
.cta-bar .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center}
.cta-bar .p{width:44px;height:44px;border-radius:50%;background:var(--ciel);border:var(--bord) solid var(--fond);overflow:hidden;display:grid;place-items:center}
.cta-bar .p img{width:38px;height:38px;object-fit:cover;object-position:top}
.cta-bar .txt{font-size:14px;line-height:1.25;font-weight:700}
.cta-bar .txt b{font-family:var(--display);font-size:15px;display:block}
.cta-bar .btn{min-height:44px;padding:8px 14px;font-size:14px;background:var(--pousse);color:#fff;border-color:var(--pousse-f);box-shadow:0 3px 0 var(--pousse-f)}
.cta-bar .x{width:36px;height:36px;border-radius:10px;border:2px solid var(--fond);background:transparent;color:var(--fond);display:grid;place-items:center;font-weight:900}
.cta-puce{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;background:var(--pousse);border:var(--bord) solid var(--encre);box-shadow:0 4px 0 var(--encre);display:none;place-items:center;overflow:hidden;animation:colle .5s cubic-bezier(.34,1.56,.64,1)}
.cta-puce img{width:48px;height:48px;object-fit:cover;object-position:top}
.cta-puce.on{display:grid}
@media(max-width:480px){.cta-bar .txt{font-size:12px}.cta-bar .txt b{font-size:14px}.cta-bar .btn{padding:8px 12px}}
@media(max-width:400px){.cta-bar .txt span{display:none}}
/* Cookies : bandeau bas discret, hors de la barre CTA */
.cookies{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:39;max-width:520px;margin:0 auto;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:18px;padding:14px;box-shadow:0 5px 0 var(--encre);display:none;gap:8px;font-size:13px;line-height:1.35}
@media(min-width:720px){.cookies{margin:0;left:16px}}
.cookies.on{display:grid}
.cookies .btns{display:flex;gap:8px;flex-wrap:wrap}
/* Pied */
footer{border-top:var(--bord) solid var(--encre);margin-top:40px;padding-block:28px;font-size:14px;color:var(--encre2)}
footer .cols{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer a{text-decoration:none;display:block;padding:3px 0;font-weight:700}
footer a:hover{text-decoration:underline}
footer .aff{margin-top:14px;font-size:12px;line-height:1.4}
.toast{position:fixed;left:50%;top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:50;background:var(--encre);color:var(--fond);border:var(--bord) solid var(--ciel);border-radius:14px;padding:10px 16px;font-weight:800;opacity:0;pointer-events:none;transition:all .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== Compléments site (au-delà du prototype) ===== */
.mot.tourne{display:inline-block;min-width:5.2ch;text-align:center;transition:transform .22s,opacity .22s}
.mot.tourne.sort{transform:translateY(-14px) rotate(-4deg);opacity:0}
.mot.tourne.entre{animation:entre .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes entre{from{transform:translateY(16px) rotate(3deg);opacity:0}}
.ordre-ligne{min-height:56px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:14px;border:2px dashed var(--ligne);background:var(--surface2)}
.jeton.mini{min-height:36px;padding:4px 10px;font-size:15px;box-shadow:0 2px 0 var(--encre)}
.jeton.mini.juste{background:var(--pousse);color:#fff;border-color:var(--pousse-f)}
.paires{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paires-col{display:grid;gap:8px;align-content:start}
.choix.paire{min-height:52px;padding:8px 12px;font-size:16px;justify-content:center;text-align:center}
.choix.paire.juste{animation:none;opacity:.7}
.cecrl-badge{display:inline-block;background:var(--or);color:#3A2A05;border:2px solid var(--encre);border-radius:10px;padding:2px 10px;font-family:var(--display);font-size:22px}
#cecrl-res .cecrl span{border-color:var(--encre);background:var(--surface2);color:var(--encre)}
#cecrl-res .cecrl span.ok{background:var(--pousse);color:#fff;border-color:var(--pousse-f)}
.facade.ouverte{cursor:default}.facade.ouverte>*:not(iframe){display:none}
.serie-chip{display:inline-flex;align-items:center;gap:8px;justify-self:center;font-weight:900;font-size:14px;background:var(--surface2);border:2px solid var(--ligne);border-radius:999px;padding:6px 14px}
.serie-chip i{width:12px;height:12px;border-radius:50%;background:var(--pousse)}
.q-intro{display:grid;gap:14px;background:var(--surface);border:var(--bord) solid var(--encre);border-radius:28px;box-shadow:0 6px 0 var(--encre);padding:22px 18px;text-align:center}
.q-intro .chiffres{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-weight:800;color:var(--encre2);font-size:14px}
.q-intro .chiffres b{display:block;font-family:var(--display);font-size:26px;color:var(--encre)}
.contexte{font-size:15px;font-weight:700;color:var(--encre2);border-left:4px solid var(--ciel);padding-left:10px}
/* Corps éditorial (leçon, fin de page, pages légales) */
.prose{display:grid;gap:16px;max-width:680px}
.wide .prose{margin-inline:auto}
.prose h2{margin-top:18px;scroll-margin-top:80px}
.prose h3{margin-top:6px}
.prose p{font-size:17px}
.prose ul{margin:0;padding-left:22px;display:grid;gap:6px}
.prose a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--pousse)}
.prose a:hover{color:var(--pousse-f)}
.prose .callout{padding:14px 16px;border-radius:16px;border:var(--bord) solid var(--encre);background:var(--ciel-s);box-shadow:0 4px 0 var(--encre)}
.prose .callout.piege{background:var(--terre-s);border-style:dashed;box-shadow:none}
.prose .callout.astuce{background:var(--pousse-s)}
.prose .callout b{font-family:var(--display);font-size:18px;display:block;margin-bottom:4px}
.prose .tableau{overflow-x:auto;border:var(--bord) solid var(--encre);border-radius:18px;background:var(--surface);box-shadow:0 4px 0 var(--encre)}
.prose .tableau table{min-width:420px}
.prose .tableau th:first-child,.prose .tableau td:first-child{padding-left:16px}
.etapes-l{display:grid;gap:10px;counter-reset:e}
.etapes-l li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;counter-increment:e}
.etapes-l li::before{content:counter(e);width:36px;height:36px;border-radius:50%;background:var(--encre);color:var(--fond);font-family:var(--display);font-weight:800;display:grid;place-items:center}
.etapes-l li b{font-family:var(--display);font-size:18px;display:block}
.dialogue{display:grid;gap:8px}
.dialogue .rep{display:grid;gap:2px;max-width:85%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--surface);border:2px solid var(--encre)}
.dialogue .rep:nth-child(even){justify-self:end;border-radius:18px 18px 4px 18px;background:var(--ciel-s)}
.dialogue .rep b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre2)}
.dialogue .rep i{font-style:normal;font-size:14px;color:var(--encre2)}
.comparatif{display:grid;gap:8px}
.comparatif .l{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center;padding:8px 0;border-bottom:2px solid var(--ligne);font-size:15px}
.comparatif .l:first-child{font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre2)}
.faq{display:grid;gap:10px}
.faq details{border:var(--bord) solid var(--encre);border-radius:16px;background:var(--surface);box-shadow:0 4px 0 var(--encre)}
.faq summary{list-style:none;cursor:pointer;padding:14px 16px;font-family:var(--display);font-weight:800;font-size:18px;display:flex;gap:10px;align-items:center;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .r{padding:0 16px 14px;font-size:16px}
.silo{display:grid;gap:8px}
.silo a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:2px solid var(--ligne);background:var(--surface);text-decoration:none;font-weight:800}
.silo a:hover{border-color:var(--encre)}
.silo a small{margin-left:auto;font-weight:700;color:var(--encre2)}
.drapeau-l{display:inline-block;width:44px;height:32px;vertical-align:middle}
.drapeau-l svg{width:44px;height:32px;border:2px solid var(--encre);border-radius:8px;display:block}
.stat-ligne{display:flex;flex-wrap:wrap;gap:14px;font-weight:800;font-size:14px;color:var(--encre2)}
.stat-ligne b{color:var(--encre)}
.a-propos-auteur{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:14px;border-radius:18px;border:2px solid var(--ligne);background:var(--surface)}
.a-propos-auteur img{width:72px;height:72px;border-radius:50%;background:var(--ciel);border:var(--bord) solid var(--encre);object-fit:cover;object-position:top}
.capture{border:var(--bord) solid var(--encre);border-radius:18px;overflow:hidden;box-shadow:0 5px 0 var(--encre);background:var(--surface)}
.capture img{display:block;width:100%;height:auto}
.capture figcaption{padding:8px 12px;font-size:13px;font-weight:700;color:var(--encre2);border-top:2px solid var(--ligne)}
.langue-hero{display:grid;gap:16px;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.langue-hero{grid-template-columns:1fr 200px}}
.langue-hero .perso{width:min(200px,50vw);justify-self:center}
.langue-hero .perso img{width:100%;display:block;filter:drop-shadow(0 6px 0 rgba(30,44,77,.25))}
.top nav a.nl.on{background:var(--surface2)}
.drawer{display:none}

/* Figures, note globale, bouton inséré (page avis et éditoriales) */
.figure{margin:22px 0;display:grid;gap:8px;justify-items:center}
.figure.moyenne{max-width:640px;margin-inline:auto}
.figure img{width:100%;height:auto;border:3px solid var(--encre);border-radius:18px;box-shadow:0 6px 0 var(--encre);background:var(--surface)}
.figure figcaption{font-size:.86rem;color:var(--encre2);text-align:center;max-width:60ch}
.note-globale{margin:22px 0;padding:22px;border:3px solid var(--encre);border-radius:22px;background:var(--surface);box-shadow:0 8px 0 var(--encre);display:grid;gap:12px}
.note-ligne{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.note-chiffre{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--encre)}
.note-chiffre small{font-size:.4em;color:var(--encre2);margin-left:2px}
.note-etoiles{--taille:30px;position:relative;display:inline-block;width:calc(var(--taille)*5);height:var(--taille);
  background:linear-gradient(90deg,var(--or) var(--pct),color-mix(in srgb,var(--encre2) 25%,transparent) var(--pct));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.8L12 17.7 5.9 21l1.3-6.8-5-4.7 6.8-.8z'/></svg>") 0 0/var(--taille) var(--taille) repeat-x;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.8L12 17.7 5.9 21l1.3-6.8-5-4.7 6.8-.8z'/></svg>") 0 0/var(--taille) var(--taille) repeat-x}
.note-sous{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.note-sous li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:.92rem}
.note-sous li i{grid-column:1/3;height:8px;border-radius:99px;background:color-mix(in srgb,var(--encre2) 18%,transparent);position:relative;overflow:hidden}
.note-sous li i::after{content:"";position:absolute;inset:0;width:var(--pct);background:var(--pousse);border-radius:99px}
.note-sous li b{font-family:var(--display)}
.note-verdict{margin:0;font-size:1.02rem}
.cta-inline{display:grid;gap:8px;justify-items:start;margin:22px 0}
.cta-inline small{color:var(--encre2);font-size:.85rem}
.btn.ciel{background:var(--ciel-f);color:#fff}.btn.terre{background:var(--terre);color:#fff}

/* Écritures non latines : le navigateur retombe sur ses polices système si la police du site n'a pas les glyphes */
[lang="ja"]{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",var(--body)}
[lang="ar"]{font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI","Tahoma",var(--body)}
/* Tableaux sur mobile : plus de largeur minimale, police réduite, le défilement reste possible dans la carte */
@media(max-width:480px){.prose .tableau table{min-width:0;font-size:14px}.prose .tableau th,.prose .tableau td{padding:8px 8px}}

/* Pastille flottante « Le quiz » : visible seulement quand la section du quiz est hors de l'écran, sous le header, au-dessus de la barre d'appel */
.pastille-quiz{position:fixed;right:16px;top:calc(env(safe-area-inset-top,0px) + 78px);z-index:38;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--pousse-f);color:#fff;font-family:var(--display);font-weight:800;font-size:15px;text-decoration:none;border:var(--bord) solid var(--encre);box-shadow:0 4px 0 var(--encre);transition:transform .15s}
.pastille-quiz::before{content:"";width:0;height:0;border:6px solid transparent;border-top:8px solid #fff;border-bottom:0;transform:translateY(2px)}
.pastille-quiz.haut::before{border-top:0;border-bottom:8px solid #fff;transform:translateY(-2px)}
.pastille-quiz:hover{transform:translateY(-2px)}
.pastille-quiz:focus-visible{outline:3px solid var(--or);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pastille-quiz{transition:none}}