/* Studio oral — Français PDF */
.fso{--encre:#1f3a93;--encre2:#162b6f;--rouge:#c0392b;--creme:#fdf6e3;--jaune:#f4c430;--vert:#2e7d32;--orange:#e67e22;
  --texte:#22293a;--doux:#5b6475;--trait:#e6dcc0;--ombre:#efe4c8;--rayon:18px;
  font-size:17px;line-height:1.55;color:var(--texte);max-width:1180px;margin:0 auto 2.5em;padding:0 16px;box-sizing:border-box}
.fso *,.fso *::before,.fso *::after{box-sizing:border-box}
.fso button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fso-ico{width:1.2em;height:1.2em;fill:currentColor;flex:none;vertical-align:-.2em}
.fso [hidden]{display:none!important}
.fso h1,.fso h2,.fso h3,.fso h4{font-family:Merriweather,Georgia,serif;color:var(--encre);margin:0}

/* ---------- Hero ---------- */
.fso-hero{position:relative;display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:center;
  background:var(--creme);border:3px solid var(--encre);border-radius:26px;padding:34px 38px;margin:8px 0 22px;overflow:hidden;
  box-shadow:8px 8px 0 var(--ombre);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(31,58,147,.09) 31px 32px),linear-gradient(90deg,transparent 54px,rgba(192,57,43,.28) 54px 56px,transparent 56px)}
.fso-sur{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 14px;background:var(--jaune);color:var(--encre2);
  border-radius:99px;font-weight:800;font-size:.82em;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-1.5deg)}
.fso-titre{font-size:clamp(1.7em,4.2vw,2.6em);line-height:1.15;font-weight:900;margin:0 0 12px!important}
.fso-titre span{color:var(--rouge);background:linear-gradient(transparent 62%,rgba(244,196,48,.55) 62% 92%,transparent 92%)}
.fso-chapeau{margin:0 0 20px;font-size:1.05em;color:#3a4256;max-width:640px}
.fso-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:640px}
.fso-stat{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2px solid var(--encre);border-radius:14px;padding:10px 6px 8px;text-align:center}
.fso-stat .fso-ico{width:26px;height:26px}
.fso-stat b{font:900 1.35em/1.1 Merriweather,Georgia,serif;color:var(--encre)}
.fso-stat span{font-size:.72em;color:var(--doux);line-height:1.2}
.fso-stat-serie .fso-ico{fill:#c9cdd6}.fso-stat-serie.fso-chaud .fso-ico{fill:#f0772f;animation:fso-flamme 1.6s ease-in-out infinite}
.fso-stat-xp .fso-ico{fill:var(--jaune);stroke:#b88d00;stroke-width:.6}
.fso-stat-badges .fso-ico{fill:var(--rouge)}
.fso-anneau{width:26px;height:26px;transform:rotate(-90deg)}
.fso-anneau circle{fill:none;stroke:#e5e8ef;stroke-width:5}
.fso-anneau .fso-anneau-p{stroke:var(--vert);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .8s ease}
@keyframes fso-flamme{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}
.fso-mascotte{margin:0;position:relative;display:flex;justify-content:center}
.fso-mascotte svg,.fso-mascotte img{width:100%;max-width:240px;height:auto;display:block;animation:fso-flotte 4s ease-in-out infinite}
.fso-bulle{position:absolute;top:2px;left:-12px;background:#fff;border:2px solid var(--encre);border-radius:16px;padding:6px 12px;
  font:700 .9em Merriweather,Georgia,serif;color:var(--rouge);transform:rotate(-6deg);box-shadow:3px 3px 0 var(--ombre)}
.fso-bulle::after{content:"";position:absolute;right:18px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--encre);border-bottom:2px solid var(--encre);transform:rotate(45deg)}
@keyframes fso-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fso-onde{animation:fso-onde 1.8s ease-in-out infinite}.fso-onde.o2{animation-delay:.3s}
@keyframes fso-onde{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- Niveaux ---------- */
.fso-niveaux{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 20px}
.fso-cycles{display:inline-flex;background:#fff;border:2px solid var(--encre);border-radius:99px;padding:4px;gap:2px}
.fso-cycles button{border:0;background:none;color:var(--encre);font-weight:800;padding:9px 20px;border-radius:99px;transition:background .2s,color .2s}
.fso-cycles button[aria-pressed="true"]{background:var(--encre);color:#fff;box-shadow:0 3px 0 var(--encre2)}
.fso-classes{display:flex;flex-wrap:wrap;gap:6px}
.fso-classes button{border:2px solid var(--trait);background:#fff;color:var(--doux);font-weight:700;font-size:.88em;padding:6px 13px;border-radius:99px;transition:all .15s}
.fso-classes button:hover{border-color:var(--encre);color:var(--encre)}
.fso-classes button[aria-pressed="true"]{background:var(--jaune);border-color:var(--jaune);color:var(--encre2)}

/* ---------- Modules ---------- */
.fso-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 28px}
.fso-module{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;
  background:#fff;border:2px solid var(--c);border-radius:var(--rayon);padding:20px 20px 18px;color:var(--texte);
  box-shadow:0 5px 0 var(--c);transition:transform .15s,box-shadow .15s;animation:fso-monte .5s calc(var(--i)*70ms) both}
.fso-module:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--c)}
.fso-module:active{transform:translateY(3px);box-shadow:0 2px 0 var(--c)}
.fso-module:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.fso-module-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--c2);color:var(--c);margin-bottom:4px}
.fso-module-ic .fso-ico{width:32px;height:32px}
.fso-module-tag{position:absolute;top:16px;right:16px;background:var(--c2);color:var(--c);font-weight:800;font-size:.72em;padding:4px 10px;border-radius:99px}
.fso-module-nom{font:900 1.2em/1.25 Merriweather,Georgia,serif;color:var(--c)}
.fso-module-txt{font-size:.92em;color:var(--doux);flex:1}
.fso-module-prog{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px}
.fso-module-prog small{font-size:.75em;color:var(--doux);white-space:nowrap}
.fso-barre{flex:1;height:8px;border-radius:9px;background:#eef0f4;overflow:hidden}
.fso-barre i{display:block;height:100%;width:0;background:var(--c);border-radius:9px;transition:width .8s ease}
.fso-module-go{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:800;color:var(--c)}
.fso-module:hover .fso-module-go .fso-ico{transform:translateX(4px)}
.fso-module-go .fso-ico{transition:transform .2s}
@keyframes fso-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Blocs (badges, réglages) ---------- */
.fso-bloc{background:#fff;border:2px solid var(--trait);border-radius:var(--rayon);padding:22px 24px;margin:0 0 20px}
.fso-bloc h3{display:flex;align-items:center;gap:10px;font-size:1.2em;margin:0 0 16px!important}
.fso-bloc h3 .fso-ico{color:var(--rouge);width:26px;height:26px}
.fso-badges{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.fso-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 6px;border-radius:14px;background:#f7f8fa;opacity:.75}
.fso-badge-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#dde1e8;color:#fff}
.fso-badge-ic .fso-ico{width:28px;height:28px}
.fso-badge b{font-size:.82em;color:var(--texte);line-height:1.2}
.fso-badge small{font-size:.7em;color:var(--doux);line-height:1.25}
.fso-badge.fso-on{opacity:1;background:#fff;box-shadow:inset 0 0 0 2px var(--c)}
.fso-badge.fso-on .fso-badge-ic{background:var(--c);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--c);animation:fso-brille 3s ease-in-out infinite}
@keyframes fso-brille{0%,100%{filter:none}50%{filter:brightness(1.15)}}
.fso-regl-grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px;align-items:end}
.fso-champ{display:flex;flex-direction:column;gap:6px;font-size:.88em;font-weight:700;color:var(--doux)}
.fso-champ select{font:inherit;font-weight:600;color:var(--texte);padding:10px 12px;border:2px solid var(--trait);border-radius:12px;background:#fff;width:100%}
.fso-interrupteur{position:relative;width:58px;height:32px;border-radius:99px;border:0;background:#cfd4de;transition:background .2s}
.fso-interrupteur i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.fso-interrupteur[aria-checked="true"]{background:var(--vert)}
.fso-interrupteur[aria-checked="true"] i{transform:translateX(26px)}
.fso-etat-micro{margin:16px 0 0;font-size:.92em;color:var(--doux);display:flex;gap:10px;align-items:baseline}
.fso-pastille{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.fso-vert{background:var(--vert)}.fso-orange{background:var(--orange)}
.fso-confid{display:flex;gap:14px;margin:16px 0 0;padding:14px 16px;background:#eef6ef;border-radius:14px;font-size:.9em;color:#2b4a2e}
.fso-confid .fso-ico{width:30px;height:30px;color:var(--vert)}
.fso-reset-p{margin:12px 0 0;text-align:right}
.fso-lien{border:0;background:none;color:var(--encre);text-decoration:underline;text-underline-offset:3px;font-weight:700;font-size:.9em;padding:4px;display:inline-flex;align-items:center;gap:6px}

/* ---------- Boutons ---------- */
.fso-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--encre);background:var(--encre);color:#fff;
  font-weight:800;padding:12px 20px;border-radius:14px;box-shadow:0 4px 0 var(--encre2);transition:transform .1s,box-shadow .1s,background .2s;line-height:1.2}
.fso-btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--encre2)}
.fso-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--encre2)}
.fso-btn:focus-visible,.fso-micro:focus-visible,.fso-item:focus-visible,.fso-choix-b:focus-visible,.fso-son:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.fso-btn-clair{background:#fff;color:var(--encre)}
.fso-btn-son{background:#2d7cc9;border-color:#2d7cc9;box-shadow:0 4px 0 #1d5a96}
.fso-btn-go{background:var(--vert);border-color:var(--vert);box-shadow:0 4px 0 #1b5e20}
.fso-btn-go:hover{box-shadow:0 5px 0 #1b5e20}.fso-btn-go:active{box-shadow:0 1px 0 #1b5e20}
.fso-btn-stop{background:var(--rouge);border-color:var(--rouge);box-shadow:0 4px 0 #8e281e}
.fso-btn-auto{background:#fff;color:var(--texte);border-color:var(--trait);box-shadow:0 4px 0 var(--trait)}
.fso-btn-auto:hover{border-color:var(--encre)}
.fso-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0 4px}
.fso-centre{text-align:center;margin:18px 0 0}

/* ---------- Scène d'un module ---------- */
.fso-scene{max-width:860px;margin:0 auto;animation:fso-monte .35s both}
.fso-entete{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.fso-fermer{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--trait);background:#fff;color:var(--doux);flex:none}
.fso-fermer:hover{border-color:var(--encre);color:var(--encre)}
.fso-fermer .fso-ico{width:24px;height:24px}
.fso-entete-txt{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.fso-entete-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--c2);color:var(--c);flex:none}
.fso-entete-ic .fso-ico{width:26px;height:26px}
.fso-entete-txt b{display:block;font:900 1.15em/1.2 Merriweather,Georgia,serif;color:var(--c)}
.fso-entete-txt small{display:block;color:var(--doux);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fso-entete-xp{display:flex;align-items:center;gap:4px;font-weight:900;color:#9a7400;background:#fff6d6;padding:6px 12px;border-radius:99px}
.fso-progression{height:14px;border-radius:99px;background:#eceff4;overflow:hidden;margin:0 0 18px}
.fso-progression i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#43a047,var(--vert));box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.35);transition:width .6s cubic-bezier(.2,.9,.3,1.2)}
.fso-carte{background:#fff;border:2px solid var(--trait);border-radius:22px;padding:26px 28px;box-shadow:0 6px 0 var(--ombre);margin:0 0 18px}
.fso-entre{animation:fso-glisse .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes fso-glisse{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.fso-consigne{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-weight:700;color:var(--doux)}
.fso-consigne .fso-ico{color:var(--encre);width:24px;height:24px}
.fso-phrase{font:700 clamp(1.3em,3.2vw,1.75em)/1.5 Merriweather,Georgia,serif;color:var(--encre2);margin:0 0 14px;text-align:center}
.fso-mot{border-radius:6px;padding:0 2px;transition:background .2s,color .2s}
.fso-mot.fso-lu{background:var(--jaune);color:var(--encre2)}
.fso-mot.fso-ok{color:var(--vert);background:#e3f2e4}
.fso-mot.fso-proche{color:#a35400;background:#fff0dc}
.fso-mot.fso-faux{color:var(--rouge);background:#fbe3e0;text-decoration:underline wavy;text-underline-offset:5px}
.fso-astuce{display:flex;gap:10px;align-items:flex-start;max-width:620px;margin:0 auto 18px;padding:10px 14px;background:#fff8dc;border-radius:12px;font-size:.92em;color:#6b5300}
.fso-astuce .fso-ico{color:#d4a106;width:22px;height:22px}
.fso-ecoute{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.fso-zone-micro{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px 0 0}
.fso-micro{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:0;background:var(--rouge);color:#fff;
  box-shadow:0 6px 0 #8e281e,0 10px 26px rgba(192,57,43,.35);transition:transform .12s,box-shadow .12s}
.fso-micro .fso-ico{width:44px;height:44px;position:relative;z-index:1}
.fso-micro:active{transform:translateY(4px);box-shadow:0 2px 0 #8e281e}
.fso-ondes i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--rouge);opacity:0}
.fso-micro.fso-ecoute-on{background:var(--vert);box-shadow:0 6px 0 #1b5e20,0 10px 26px rgba(46,125,50,.35)}
.fso-micro.fso-ecoute-on .fso-ondes i{border-color:var(--vert);animation:fso-onde-m 1.6s ease-out infinite}
.fso-micro.fso-ecoute-on .fso-ondes i:nth-child(2){animation-delay:.5s}.fso-micro.fso-ecoute-on .fso-ondes i:nth-child(3){animation-delay:1s}
@keyframes fso-onde-m{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.fso-micro-etat{margin:4px 0 0;color:var(--doux);font-size:.95em;text-align:center}
.fso-entendu{margin:0;font-style:italic;color:var(--encre);text-align:center;min-height:1.4em}
.fso-resultat{text-align:center;margin-top:18px;padding-top:18px;border-top:2px dashed var(--trait);animation:fso-monte .35s both}
.fso-res-titre{font:800 1.15em/1.4 Merriweather,Georgia,serif;color:var(--encre);margin:8px 0}
.fso-res-q{font-weight:700;margin:16px 0 8px}
.fso-auto{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.fso-legende{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px 0;font-size:.82em}
.fso-legende span{padding:2px 10px;border-radius:99px;font-weight:700}
.fso-legende .fso-ok{color:var(--vert);background:#e3f2e4}.fso-legende .fso-proche{color:#a35400;background:#fff0dc}.fso-legende .fso-faux{color:var(--rouge);background:#fbe3e0}
.fso-etoiles{display:flex;justify-content:center;gap:10px}
.fso-etoiles span{color:#e3e6ec}
.fso-etoiles .fso-ico{width:52px;height:52px}
.fso-etoiles span.fso-on{color:var(--jaune);filter:drop-shadow(0 3px 0 #c99a00)}
.fso-etoiles.fso-anim span.fso-on{animation:fso-pop .55s var(--d) cubic-bezier(.2,1.6,.4,1) both}
.fso-etoiles span:nth-child(2) .fso-ico{width:64px;height:64px;margin-top:-8px}
@keyframes fso-pop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.fso-bilan{text-align:center;padding:34px 24px}
.fso-bilan-titre{font:900 1.6em/1.3 Merriweather,Georgia,serif;color:var(--encre);margin:10px 0 18px}
.fso-bilan-chiffres{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:12px 0}
.fso-bilan-chiffres div{min-width:120px;padding:12px 16px;border-radius:16px;background:var(--creme);border:2px solid var(--trait)}
.fso-bilan-chiffres b{display:block;font:900 1.6em/1.1 Merriweather,Georgia,serif;color:var(--encre)}
.fso-bilan-chiffres span{font-size:.8em;color:var(--doux)}
.fso-charge{display:flex;justify-content:center;gap:8px;padding:60px 0}
.fso-charge span{width:14px;height:14px;border-radius:50%;background:var(--encre);animation:fso-saut 1s infinite}
.fso-charge span:nth-child(2){animation-delay:.15s;background:var(--rouge)}.fso-charge span:nth-child(3){animation-delay:.3s;background:var(--jaune)}
@keyframes fso-saut{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
.fso-vide{text-align:center;color:var(--doux);padding:30px 10px}
.fso-vide-petit{color:var(--doux);font-size:.9em;margin:6px 0}
.fso-note{font-size:.82em;color:var(--doux);margin:8px 0 0}
.fso-h4{display:flex;align-items:center;gap:8px;font-size:1.02em;margin:18px 0 10px!important}
.fso-h4 .fso-ico{color:var(--rouge)}
.fso-intro-module{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--trait);border-radius:16px;padding:14px 16px;color:var(--doux);font-size:.95em}
.fso-intro-module .fso-ico{color:var(--rouge);width:26px;height:26px}

/* ---------- Listes ---------- */
.fso-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fso-item{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:2px solid var(--trait);border-radius:16px;padding:12px 14px;color:var(--texte);transition:border-color .15s,transform .15s}
.fso-item:hover{border-color:var(--encre);transform:translateY(-2px)}
.fso-item>.fso-ico{color:var(--doux)}
.fso-item-niv{display:grid;place-items:center;min-width:46px;height:46px;border-radius:12px;background:var(--creme);border:2px solid var(--trait);font:900 .9em Merriweather,Georgia,serif;color:var(--rouge)}
.fso-item-t{flex:1;min-width:0}
.fso-item-t b{display:block;font-family:Merriweather,Georgia,serif;color:var(--encre);font-size:.98em;line-height:1.3}
.fso-item-t small{display:block;color:var(--doux);font-size:.8em;margin-top:2px}
.fso-mini-et .fso-etoiles{gap:1px}.fso-mini-et .fso-ico,.fso-mini-et span:nth-child(2) .fso-ico{width:16px;height:16px;margin:0}

/* ---------- Sons ---------- */
.fso-onglets{display:flex;gap:6px;background:#fff;border:2px solid var(--trait);border-radius:16px;padding:5px;margin:0 0 16px}
.fso-onglets button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;color:var(--doux);font-weight:800;padding:11px 8px;border-radius:12px}
.fso-onglets button[aria-selected="true"]{background:var(--encre);color:#fff}
.fso-grille-sons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.fso-son{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:18px;border:2px solid;
  background:#fff;padding:6px;transition:transform .15s,box-shadow .15s}
.fso-son b{font:900 1.7em/1 Merriweather,Georgia,serif}
.fso-son small{font-size:.78em;color:var(--doux);margin-top:4px}
.fso-fam-voyelle .fso-son{border-color:#e0533d;color:#c0392b;box-shadow:0 4px 0 #f4c4bd}
.fso-fam-son-complexe .fso-son{border-color:#8a43a8;color:#7a3196;box-shadow:0 4px 0 #dfc6ea}
.fso-fam-consonne .fso-son{border-color:#2d7cc9;color:#1f5fa0;box-shadow:0 4px 0 #c5dcf2}
.fso-son:hover{transform:translateY(-3px)}
.fso-son.fso-vu::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--vert)}
.fso-son.fso-actif{background:var(--jaune);transform:scale(1.06)}
.fso-fiche-son{display:flex;gap:20px;align-items:center;background:var(--creme);border:2px solid var(--encre);border-radius:20px;padding:18px 20px;margin:0 0 8px;animation:fso-monte .3s both}
.fso-fiche-g{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;height:110px;border-radius:22px;background:#fff;border:3px solid var(--rouge)}
.fso-fiche-g b{font:900 2.6em/1 Merriweather,Georgia,serif;color:var(--rouge)}
.fso-fiche-g span{color:var(--doux);font-weight:700}
.fso-fiche-d{flex:1;min-width:0}
.fso-fiche-ex{margin:0 0 10px;font-size:1.05em}
.fso-fiche-mots{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.fso-chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--encre);background:#fff;color:var(--encre);border-radius:99px;padding:6px 14px;font:700 1.1em Merriweather,Georgia,serif;transition:background .2s}
.fso-chip .fso-ico{width:18px;height:18px}
.fso-chip mark{background:none;color:var(--rouge);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.fso-chip.fso-lu{background:var(--jaune)}
.fso-fiche-autres{font-size:.9em;color:var(--doux);margin:0 0 4px}
.fso-jeu{text-align:center}
.fso-gros-son{display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:0;background:#2d7cc9;color:#fff;border-radius:28px;padding:20px 34px;
  box-shadow:0 6px 0 #1d5a96;font-weight:800;transition:transform .1s,box-shadow .1s}
.fso-gros-son .fso-ico{width:52px;height:52px}
.fso-gros-son:active{transform:translateY(4px);box-shadow:0 2px 0 #1d5a96}
.fso-mot-cache{font:900 1.6em Merriweather,Georgia,serif;color:var(--encre);margin:14px 0;min-height:1.4em}
.fso-choix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fso-choix-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 6px;border-radius:18px;border:2px solid var(--trait);background:#fff;box-shadow:0 4px 0 var(--trait);transition:transform .1s,border-color .15s}
.fso-choix-b b{font:900 1.9em/1 Merriweather,Georgia,serif;color:var(--encre)}
.fso-choix-b small{color:var(--doux)}
.fso-choix-b:hover:not(:disabled){border-color:var(--encre);transform:translateY(-2px)}
.fso-choix-b:disabled{cursor:default}
.fso-choix-b.fso-bon{border-color:var(--vert);background:#e3f2e4;box-shadow:0 4px 0 var(--vert);animation:fso-rebond .4s}
.fso-choix-b.fso-bon b{color:var(--vert)}
.fso-choix-b.fso-mauvais{border-color:var(--rouge);background:#fbe3e0;box-shadow:0 4px 0 var(--rouge);animation:fso-secoue .4s}
@keyframes fso-rebond{50%{transform:scale(1.08)}}
@keyframes fso-secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.fso-retour{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:20px -28px -26px;padding:16px 28px;border-radius:0 0 20px 20px;text-align:left;animation:fso-monte .3s both}
.fso-retour p{display:flex;align-items:center;gap:8px;margin:0;font-weight:800}
.fso-retour .fso-ico{width:26px;height:26px}
.fso-retour-bon{background:#dff1e0;color:#1b5e20}.fso-retour-faux{background:#fbe3e0;color:#8e281e}
.fso-retour-faux .fso-btn-go{background:var(--rouge);border-color:var(--rouge);box-shadow:0 4px 0 #8e281e}

/* ---------- Lecture ---------- */
.fso-graph-carte{padding:18px 22px}
.fso-graph-carte .fso-h4{margin-top:0!important}
.fso-graph{width:100%;height:auto;display:block}
.fso-g-grille{stroke:#eceff4;stroke-width:1}
.fso-g-axe{font-size:12px;fill:#8a92a3}
.fso-g-repere{stroke:var(--rouge);stroke-width:2;stroke-dasharray:6 6}
.fso-g-rep-t{font-size:12px;fill:var(--rouge);font-weight:700}
.fso-g-aire{fill:rgba(31,58,147,.08)}
.fso-g-ligne{fill:none;stroke:var(--encre);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.fso-g-pt{fill:#fff;stroke:var(--encre);stroke-width:3}
.fso-g-val{font-size:13px;font-weight:800;fill:var(--encre)}
.fso-texte-titre{font-size:1.35em;text-align:center;margin:0 0 14px!important}
.fso-chrono-barre{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.fso-chrono{display:flex;align-items:center;gap:6px;background:var(--creme);border:2px solid var(--trait);border-radius:99px;padding:6px 14px;font-size:.9em;color:var(--doux)}
.fso-chrono b{font:900 1.2em Merriweather,Georgia,serif;color:var(--encre);font-variant-numeric:tabular-nums}
.fso-chrono .fso-ico{color:var(--rouge)}
.fso-texte{position:relative;font:400 clamp(1.08em,2.4vw,1.25em)/1.95 Merriweather,Georgia,serif;color:var(--texte);background:var(--creme);border-radius:16px;padding:20px 24px;
  background-image:repeating-linear-gradient(transparent 0 calc(1.95em - 1px),rgba(31,58,147,.1) calc(1.95em - 1px) 1.95em);background-position:0 20px}
.fso-texte p{margin:0 0 .6em}.fso-texte p:last-of-type{margin:0}
.fso-texte .fso-mot.fso-lu{background:#cdebd0;color:#1b5e20}
.fso-texte .fso-mot.fso-saute{background:#ffe2c2;color:#a35400}
.fso-texte .fso-mot.fso-curseur{box-shadow:0 3px 0 var(--rouge);background:#fff7d1}
.fso-texte .fso-mot.fso-modele{background:#fff3c4}
.fso-texte .fso-mot.fso-modele.fso-lu{background:var(--jaune);color:var(--encre2)}
.fso-manuel .fso-texte .fso-mot{cursor:pointer}
.fso-manuel .fso-texte .fso-mot:hover{background:#e4e9f7}
.fso-decompte{position:absolute;inset:0;display:grid!important;place-items:center;background:rgba(253,246,227,.88);font:900 5em Merriweather,Georgia,serif;color:var(--rouge);border-radius:16px;animation:fso-pop .4s both}
.fso-decompte[hidden]{display:none!important}
.fso-actions-lecture{margin-top:16px}
.fso-jauge{position:relative;height:18px;border-radius:99px;background:#eceff4;margin:26px 8px 34px}
.fso-jauge i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:99px;background:linear-gradient(90deg,#4f7be8,var(--encre));transform-origin:left center;animation:fso-jauge 1.2s cubic-bezier(.2,.9,.3,1) both}
.fso-jauge::after{content:"";position:absolute;left:var(--r);top:-7px;bottom:-7px;width:3px;background:var(--rouge);border-radius:3px}
.fso-jauge-rep{position:absolute;left:var(--r);top:24px;transform:translateX(-50%);font-size:.78em;font-weight:800;color:var(--rouge);white-space:nowrap}
@keyframes fso-jauge{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Dictée ---------- */
.fso-dictee-haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px}
.fso-options{display:flex;flex-wrap:wrap;gap:14px}
.fso-case{display:inline-flex;align-items:center;gap:6px;font-size:.92em;font-weight:700;color:var(--doux);cursor:pointer}
.fso-case input{width:20px;height:20px;accent-color:var(--encre)}
.fso-segments{display:flex;justify-content:center;align-items:center;gap:18px}
.fso-rond{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid var(--encre);background:#fff;color:var(--encre);box-shadow:0 4px 0 var(--trait)}
.fso-rond .fso-ico{width:30px;height:30px}
.fso-rond:active{transform:translateY(3px);box-shadow:none}
.fso-gros-dictee{background:var(--rouge);box-shadow:0 6px 0 #8e281e;min-width:200px}
.fso-gros-dictee:active{box-shadow:0 2px 0 #8e281e}
.fso-points{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:16px 0 4px}
.fso-points i{width:12px;height:12px;border-radius:50%;background:#e3e6ec;transition:background .3s,transform .3s}
.fso-points i.fso-fait{background:var(--vert)}
.fso-points i.fso-cours{background:var(--rouge);transform:scale(1.35)}
.fso-seg-etat{text-align:center;color:var(--doux);font-size:.92em;margin:4px 0 16px}
.fso-zone-label{display:block;font-weight:800;color:var(--encre);margin:0 0 6px}
.fso-saisie{display:block;width:100%;min-height:150px;font:400 1.15em/2 Merriweather,Georgia,serif;color:var(--texte);padding:10px 16px;border:2px solid var(--trait);border-radius:14px;resize:vertical;
  background:#fffdf7 repeating-linear-gradient(transparent 0 calc(2em - 1px),rgba(31,58,147,.12) calc(2em - 1px) 2em);background-attachment:local;background-position:0 10px}
.fso-saisie:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 4px rgba(31,58,147,.12)}
.fso-correction{margin-top:22px;padding-top:20px;border-top:2px dashed var(--trait);text-align:center}
.fso-corrige{text-align:left;font:400 1.15em/2.3 Merriweather,Georgia,serif;background:var(--creme);border-radius:14px;padding:16px 20px;margin:12px 0}
.fso-faute,.fso-oubli,.fso-trop{position:relative;white-space:nowrap}
.fso-faute-ecrit{display:none}
.fso-faute-lettres{background:#fff;border-bottom:3px solid var(--rouge);padding:0 2px}
.fso-corrige ins{text-decoration:none;color:#fff;background:var(--vert);border-radius:4px;padding:0 1px}
.fso-corrige del{color:var(--rouge);text-decoration:line-through;text-decoration-thickness:2px}
.fso-oubli ins{padding:0 3px}
.fso-trop s{color:var(--rouge)}
.fso-corrige sup{font:800 .62em sans-serif;color:#fff;background:var(--rouge);border-radius:99px;padding:1px 5px;margin-left:2px;vertical-align:.9em}
.fso-l-ins{color:#fff;background:var(--vert)}.fso-l-del{color:var(--rouge);background:#fbe3e0;text-decoration:line-through}
.fso-explications{text-align:left;margin:10px 0 0;padding-left:1.6em;font-size:.95em}
.fso-explications li{margin:0 0 8px}
.fso-explications li::marker{color:var(--rouge);font-weight:900}

/* ---------- Récitation ---------- */
.fso-etapes button i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e8ebf2;color:var(--encre);font-style:normal;font-size:.85em}
.fso-etapes button[aria-selected="true"] i{background:var(--jaune);color:var(--encre2)}
.fso-poeme-tete{text-align:center;margin:0 0 12px}
.fso-poeme-tete .fso-texte-titre{margin:0 0 4px!important}
.fso-auteur{margin:0;color:var(--doux);font-size:.92em}
.fso-outils{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:0 0 16px}
.fso-outils .fso-note{flex-basis:100%;text-align:center}
.fso-paliers{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;background:#f2f3f7;border-radius:14px;padding:4px}
.fso-paliers button{border:0;background:none;padding:8px 12px;border-radius:10px;font-weight:700;color:var(--doux);font-size:.9em}
.fso-paliers button[aria-pressed="true"]{background:#fff;color:var(--encre);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.fso-poeme{font:400 clamp(1.05em,2.4vw,1.2em)/1.85 Merriweather,Georgia,serif;background:var(--creme);border-radius:16px;padding:22px 26px;width:fit-content;max-width:100%;margin:0 auto}
.fso-strophe{margin:0 0 1.1em}.fso-strophe:last-child{margin:0}
.fso-vers{margin:0;padding:0 8px;border-radius:8px;transition:background .25s;cursor:default}
.fso-vers.fso-vers-on{background:#fff3c4;box-shadow:inset 4px 0 0 var(--jaune)}
.fso-poeme-carte:not(.fso-mode-recite) .fso-vers:hover{background:rgba(255,255,255,.7)}
.fso-poeme .fso-mot.fso-cache{color:transparent;background:#e7e1cf;border-radius:5px;cursor:pointer;user-select:none}
.fso-poeme .fso-mot.fso-cache.fso-revele{color:var(--encre);background:#fff3c4}
.fso-poeme .fso-mot.fso-lu{background:#cdebd0;color:#1b5e20;animation:fso-apparait .35s both}
.fso-poeme .fso-mot.fso-saute{background:#ffe2c2;color:#a35400}
.fso-poeme .fso-mot.fso-oublie{background:#fbe3e0;color:var(--rouge)}
.fso-poeme .fso-mot.fso-indice{background:#e4e9f7;color:var(--encre)}
@keyframes fso-apparait{from{opacity:0;transform:translateY(4px)}}
.fso-zone-recite{margin:4px 0 0;width:100%}
.fso-zone-recite .fso-actions{margin-top:8px}
.fso-dp{text-align:center;font-size:.78em;color:var(--doux);margin:14px 0 0}

/* ---------- Superpositions ---------- */
.fso-confettis{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:99998}
.fso-xp-bulle{position:fixed;z-index:99999;transform:translate(-50%,0);display:flex;align-items:center;gap:4px;background:var(--jaune);color:var(--encre2);
  font:900 1em Merriweather,Georgia,serif;padding:6px 12px;border-radius:99px;box-shadow:0 4px 0 #c99a00;pointer-events:none;animation:fso-xp 1.3s ease-out forwards}
.fso-xp-bulle .fso-ico{width:18px;height:18px}
@keyframes fso-xp{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.fso-toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:10px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.fso-toast{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--encre,#1f3a93);border-radius:16px;padding:12px 16px;box-shadow:0 10px 30px rgba(20,30,60,.22);
  font-size:.95em;color:#22293a;line-height:1.35;animation:fso-toast .45s cubic-bezier(.2,1.4,.4,1) both;pointer-events:auto}
.fso-toast .fso-ico{width:26px;height:26px;color:#c0392b}
.fso-toast.fso-sort{animation:fso-toast-out .4s forwards}
.fso-toast-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;flex:none}
.fso-toast-badge .fso-ico{color:#fff}
@keyframes fso-toast{from{opacity:0;transform:translateY(30px) scale(.9)}}
@keyframes fso-toast-out{to{opacity:0;transform:translateY(20px)}}

/* ---------- Texte SEO + FAQ de la page ---------- */
.fso-seo{max-width:860px;margin:10px auto 0;padding:0 16px;font-size:1.02em;line-height:1.7;color:#22293a}
.fso-seo h2{font:900 1.5em/1.3 Merriweather,Georgia,serif;color:#1f3a93;margin:1.4em 0 .6em}
.fso-seo strong{color:#1f3a93}
.fso-faq details{background:#fff;border:2px solid #e6dcc0;border-radius:14px;margin:0 0 10px;padding:0 18px}
.fso-faq summary{cursor:pointer;font:700 1.02em/1.4 Merriweather,Georgia,serif;color:#1f3a93;padding:14px 0;list-style:none;position:relative;padding-right:30px}
.fso-faq summary::-webkit-details-marker{display:none}
.fso-faq summary::after{content:"+";position:absolute;right:0;top:10px;font:900 1.5em/1 sans-serif;color:#c0392b;transition:transform .2s}
.fso-faq details[open] summary::after{transform:rotate(45deg)}
.fso-faq details p{margin:0 0 14px}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .fso-modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fso-badges{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fso-regl-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .fso{font-size:16px;padding:0 12px}
  .fso-hero{grid-template-columns:1fr;padding:22px 18px 20px;gap:10px;border-radius:22px;background-image:repeating-linear-gradient(transparent 0 31px,rgba(31,58,147,.09) 31px 32px)}
  .fso-mascotte{order:-1;justify-content:flex-end;position:absolute;top:12px;right:10px;width:96px}
  .fso-mascotte svg,.fso-mascotte img{max-width:96px}
  .fso-bulle{display:none}
  .fso-sur{font-size:.7em;padding:5px 10px;max-width:calc(100% - 96px)}
  .fso-titre{font-size:1.65em;padding-right:80px}
  .fso-chapeau{font-size:.98em}
  .fso-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fso-stat{flex-direction:row;justify-content:flex-start;gap:8px;padding:8px 10px;text-align:left}
  .fso-stat b{font-size:1.15em}
  .fso-stat span{font-size:.7em}
  .fso-niveaux{gap:10px}
  .fso-cycles{width:100%}.fso-cycles button{flex:1;padding:9px 6px}
  .fso-modules{grid-template-columns:1fr;gap:14px}
  .fso-module{padding:16px 16px 14px;display:grid;grid-template-columns:52px 1fr;column-gap:14px;row-gap:2px}
  .fso-module-ic{grid-row:span 2;width:52px;height:52px;margin:0}
  .fso-module-nom{align-self:end}
  .fso-module-txt,.fso-module-prog,.fso-module-go{grid-column:1/-1}
  .fso-module-go{margin-top:2px}
  .fso-module-tag{top:12px;right:12px}
  .fso-bloc{padding:18px 16px}
  .fso-badges{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .fso-badge small{display:none}
  .fso-regl-grille{grid-template-columns:1fr}
  .fso-carte{padding:20px 16px;border-radius:18px}
  .fso-retour{margin:18px -16px -20px;padding:14px 16px}
  .fso-liste{grid-template-columns:1fr}
  .fso-choix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fso-fiche-son{flex-direction:column;text-align:center;padding:16px}
  .fso-fiche-mots{justify-content:center}
  .fso-texte,.fso-poeme{padding:14px 14px}
  .fso-entete-xp{padding:5px 9px;font-size:.9em}
  .fso-onglets button{font-size:.85em;padding:10px 4px}
  .fso-btn{padding:11px 16px}
  .fso-actions .fso-btn{flex:1 1 auto}
  .fso-etoiles .fso-ico{width:44px;height:44px}.fso-etoiles span:nth-child(2) .fso-ico{width:54px;height:54px}
  .fso-segments{gap:10px}.fso-gros-dictee{min-width:0;padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
  .fso *,.fso-toast,.fso-xp-bulle{animation:none!important;transition:none!important}
}
.fso-module-tag+.fso-module-nom{padding-right:78px}