/* MUSEDUC : feuille de style (extraite de museduc7.html le 24 sept. 2026) */
  :root{
    /* ===== Charte « Ruban & Médaille » (thème clair) =====
       accentA bleu marine #1e3a63 · accentB or #F2C94C · accentLight #3d6ba3
       Identité cérémonielle : bannières en ruban, cartes-tickets, médaillons. */
    --accent-a:#1e3a63; --accent-b:#F2C94C; --accent-c:#3d6ba3;
    --maestro-blue:#1e3a63; --maestro-dark:#16233a; --maestro-gold:#F2C94C; --maestro-light:#3d6ba3;
    /* texte */
    --encre:#16233a; --encre-doux:#7c8ea5; --papier:#eaf3fb; --papier-fonce:#d7e6f4;
    /* accent principal (variable "laiton" conservée pour compat) = bleu marine */
    --laiton:#1e3a63; --laiton-clair:#3d6ba3; --juste:#1a9c6b; --juste-fond:rgba(26,156,107,.10);
    --faux:#dc2626; --faux-fond:rgba(220,38,38,.08);
    /* « hairline » : bordure fine teintée accent, signature du design */
    --ligne:rgba(30,58,99,.16);
    --valide:#2374b0; --valide-2:#1a5688; --valide-fond:rgba(242,201,76,.12);
    /* accent secondaire doré (scores, médailles, rubans) */
    --or:#F2C94C; --or-clair:#F6DC8A;
    /* Or LISIBLE, reserve au texte et aux icones sur fond clair : l'or vif
       n'offre que 1,74 de contraste sur blanc. Meme teinte (39 deg), meme
       saturation, luminosite abaissee jusqu'a 4,63 : conforme AA.
       Sur les fonds bleus ou sombres, il reprend sa version vive (voir plus bas). */
    --or-texte:#8E6D0B;
    /* surfaces : cartes blanches sur fond bleu très clair + halos radiaux */
    --surface:#ffffff; --surface-2:rgba(242,201,76,.09);
    --teinte-douce:rgba(242,201,76,.12);   /* softTint : pilules, badges, pistes */
    --fond-app:#eaf3fb;
    --halo-or:rgba(242,201,76,.12); --halo-bleu:rgba(30,58,99,.07);
    /* Bleu des BANDEAUX et du dégradé. Volontairement plus clair que --laiton,
       qui reste le bleu des TEXTES et des accents : le marine d'origine était
       trop sombre en aplat. Contraste avec le blanc : 5,0 (seuil AA = 4,5). */
    --bandeau:#2374b0;
    /* dégradé signature bleu -> or */
    --degrade:linear-gradient(135deg,#2374b0,#1e3a63);
    --degrade-90:linear-gradient(90deg,#2374b0,#1e3a63);
    /* motif « brocart » : pointillés dorés en damier, identique sur tous les
       fonds bleus pleins (bannière d'accueil, en-têtes de leçon, cartes…).
       S'utilise en tête d'un raccourci background : background:var(--brocart),var(--bandeau); */
    --brocart:
      radial-gradient(circle at 20% 30%, rgba(242,201,76,.12) 0 3px, transparent 4px) 0 0/26px 26px,
      radial-gradient(circle at 70% 70%, rgba(242,201,76,.1) 0 3px, transparent 4px) 0 0/26px 26px;
    /* sidebar claire : fond blanc, item actif en bleu marine plein */
    --menu-h:#ffffff; --menu-b:#ffffff; --menu-txt:#16233a; --menu-txt-doux:#7c8ea5;
    /* ombres teintées accent */
    --ombre:0 12px 34px rgba(30,58,99,.10); --ombre-douce:0 2px 12px rgba(30,58,99,.06);
    --ombre-forte:0 22px 55px rgba(30,58,99,.16); --ombre-bouton:0 10px 28px rgba(30,58,99,.30);
    /* rayons : cartes 16-20px, pilules pleinement arrondies */
    --rayon:20px; --rayon-s:16px; --rayon-xs:12px; --rayon-pill:999px;
    --halo:0 0 0 3px rgba(30,58,99,.35); /* focus */
    --police:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
    --police-titre:"Baloo 2","Inter",system-ui,sans-serif;
    --t-rapide:.18s ease; --t-moyen:.22s cubic-bezier(.34,1.3,.64,1);
  }
  /* Thème sombre : même identité, bleu marine profond
     Le handoff ne spécifie que l'aperçu du toggle ; on décline la palette
     en conservant l'or comme accent et le marine comme base. */
  [data-theme="dark"]{
    --accent-a:#4d7cb5; --accent-b:#FDD457; --accent-c:#7ba3d0;
    --maestro-blue:#4d7cb5; --maestro-dark:#0a1220; --maestro-gold:#FDD457; --maestro-light:#7ba3d0;
    --encre:#e8f0fa; --encre-doux:#93a9c4; --papier:#14243c; --papier-fonce:#1c3352;
    --laiton:#4d7cb5; --laiton-clair:#7ba3d0; --juste:#3fc48f; --juste-fond:rgba(63,196,143,.14);
    --faux:#f4756b; --faux-fond:rgba(244,117,107,.14);
    --ligne:rgba(123,163,208,.22);
    --valide:#3e8fd0; --valide-2:#1f5c90; --valide-fond:rgba(242,201,76,.14);
    --or:#FDD457; --or-clair:#FEE59A;
    --or-texte:#FDD457;   /* en theme sombre, les fonds sont sombres */
    --surface:#132741; --surface-2:rgba(242,201,76,.08);
    --teinte-douce:rgba(242,201,76,.14);
    --fond-app:#0a1220;
    --halo-or:rgba(242,201,76,.10); --halo-bleu:rgba(77,124,181,.09);
    --bandeau:#2a6da3;
    --degrade:linear-gradient(135deg,#2a6da3,#F2C94C);
    --degrade-90:linear-gradient(90deg,#2a6da3,#F2C94C);
    --menu-h:#0f1e33; --menu-b:#0f1e33; --menu-txt:#e8f0fa; --menu-txt-doux:#93a9c4;
    --ombre:0 14px 42px rgba(0,0,0,.52); --ombre-douce:0 3px 16px rgba(0,0,0,.38);
    --ombre-forte:0 22px 60px rgba(0,0,0,.62); --ombre-bouton:0 10px 28px rgba(0,0,0,.45);
    --halo:0 0 0 3px rgba(77,124,181,.45);
  }
  /* lisibilité de quelques accents en mode sombre */
  [data-theme="dark"] .schema-voix .sv-h,[data-theme="dark"] .schema-voix .sv-leg span:last-child{color:#8fb4e6;}
  [data-theme="dark"] .schema-voix .sv-f{color:#e69ab8;}
  [data-theme="dark"] .lecon table.gr th{background:var(--papier-fonce);}
  [data-theme="dark"] .seg button.on,[data-theme="dark"] .cat-btn.actif{color:#fff;}
  *{box-sizing:border-box;}
  /* Surfaces a fond bleu ou sombre : l'or y est parfaitement lisible, on
     restaure donc sa version vive. Les descendants heritent de la variable,
     donc aucune regle individuelle n'a besoin d'etre touchee. */
  .barre,.ruban-titre,.lecon-entete,.prog-grade,.defi-jour-carte,.don-tete,
  .vn-accueil,.vn-scene,.vn-verdict,.arb-onglet.on,.sc-tete,.ce-yt-btn,
  .score-bandeau{--or-texte:var(--or-clair);}
  html,body{margin:0;padding:0;height:100%;}
  /* Fond : bleu très clair + deux halos radiaux (or en haut à gauche, bleu à droite) */
  body{font-family:var(--police);
    background:
      radial-gradient(circle at 8% -6%, var(--halo-or), transparent 40%),
      radial-gradient(circle at 100% 10%, var(--halo-bleu), transparent 40%),
      var(--fond-app);
    background-attachment:fixed;
    color:var(--encre);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;
    transition:background .3s ease,color .3s ease;}
  h1,h2,h3,.logo{font-family:var(--police-titre);}
  /* accessibilité : focus visible élégant au clavier */
  :focus-visible{outline:none;box-shadow:var(--halo);border-radius:var(--rayon-xs);}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}
  /* MENU */
  /* Sidebar claire : fond blanc, hairline à droite, item actif en bleu marine plein */
  aside{width:284px;flex-shrink:0;background:var(--menu-b);color:var(--menu-txt);
    padding:22px 16px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;
    border-right:1px solid var(--ligne);box-shadow:none;}
  aside::-webkit-scrollbar{width:8px;}
  aside::-webkit-scrollbar-thumb{background:rgba(30,58,99,.22);border-radius:8px;}
  aside::-webkit-scrollbar-thumb:hover{background:rgba(30,58,99,.4);}
  .logo{font-size:1.42rem;font-weight:700;margin:0 0 14px 4px;letter-spacing:-.5px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .logo{font-size:1.5rem;font-weight:800;margin:2px 0 16px;letter-spacing:.5px;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
  /* animation de retour au clic sur le logo / MUSEDUC */
  @keyframes logoPop{0%{transform:scale(1);}28%{transform:scale(.9) rotate(-3deg);}62%{transform:scale(1.09) rotate(2deg);}100%{transform:scale(1) rotate(0);}}
  .logo-badge{width:118px;height:118px;object-fit:cover;border-radius:50%;
    border:3px double var(--or);background:#fff;
    box-shadow:0 6px 20px rgba(30,58,99,.16),0 0 0 1px rgba(242,201,76,.35);
    transition:transform .15s ease;}
  .logo:hover .logo-badge{transform:scale(1.04);}
  .logo.logo-anime .logo-badge,.logo.logo-anime .logo-mot{animation:logoPop .5s cubic-bezier(.34,1.4,.6,1);}
  .logo-mot{font-family:var(--police-titre);font-weight:800;line-height:1;letter-spacing:.5px;font-size:1.75rem;display:inline-block;}
  .logo-mot .mus{color:var(--bandeau);}
  .logo-mot .educ{color:var(--or);text-shadow:0 1px 1px rgba(30,58,99,.18);}
  .logo .note{display:none;}
  .logo-sign{font-family:var(--police);font-size:.62rem;font-weight:600;text-transform:uppercase;
    color:var(--menu-txt-doux);letter-spacing:.8px;margin:0;}
  /* Accordéons du menu (niveaux, évaluation) */
  .accordeon{width:100%;text-align:left;border:none;background:transparent;color:var(--menu-txt);
    padding:11px 11px;border-radius:10px;font-size:.84rem;cursor:pointer;display:flex;align-items:center;gap:9px;
    font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:inherit;
    transition:background .15s;margin-top:3px;}
  .accordeon{color:var(--menu-txt-doux);border-radius:12px;}
  .accordeon:hover{background:var(--teinte-douce);color:var(--encre);}
  .accordeon .acc-fleche{display:inline-block;transition:transform .18s;color:var(--or);font-size:.8rem;width:14px;}
  .accordeon.ouvert .acc-fleche{transform:rotate(90deg);}
  .accordeon .acc-lib{flex:1;}
  .accordeon .acc-compte{font-size:.6rem;background:var(--teinte-douce);color:var(--laiton);border-radius:20px;padding:2px 7px;font-weight:700;}
  /* groupe ouvert / entrée directe active : bleu marine plein, texte blanc */
  .accordeon.ouvert{background:var(--laiton);color:#fff;}
  .accordeon.ouvert .acc-fleche{color:var(--or);}
  .accordeon.ouvert .acc-compte{background:rgba(255,255,255,.2);color:#fff;}
  .acc-corps{padding-left:6px;margin:2px 0 6px;border-left:2px solid var(--ligne);}
  /* Bouton retour (barre supérieure) */
  .btn-retour{background:var(--surface-2);border:1px solid var(--ligne);color:var(--encre);
    border-radius:9px;padding:5px 13px;font-size:.84rem;font-weight:600;cursor:pointer;
    margin-bottom:8px;font-family:inherit;transition:background .15s,transform .08s;}
  .btn-retour:hover{background:var(--papier-fonce);}
  .btn-retour:active{transform:scale(.97);}
  .sous-titre{font-size:.68rem;color:var(--menu-txt-doux);margin:0 0 14px 4px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;}
  .signature-v{display:inline-block;margin-top:4px;font-size:.72rem;opacity:.8;}
  .signature{margin-top:22px;padding-top:12px;border-top:1px solid var(--ligne);
    font-size:.74rem;color:var(--menu-txt-doux);text-align:center;}
  .signature b{color:var(--laiton);}
  .groupe-titre{font-size:.68rem;text-transform:uppercase;letter-spacing:1.3px;
    color:var(--laiton-clair);margin:14px 4px 5px;font-weight:700;}
  .compo-accueil{max-width:860px;margin:0 auto;}
  .compo-epoque{margin-bottom:26px;}
  .compo-epoque-titre{font-size:1.05rem;margin:0 0 12px;padding-bottom:6px;
    border-bottom:2px solid var(--ligne);color:var(--encre);}
  .compo-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
  /* Prof : « Mes classes » regroupées par niveau, en grille */
  .mc-groupe{margin:0 0 22px;}
  .mc-groupe-tete{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-bottom:6px;
    border-bottom:2px solid var(--ligne);}
  .mc-pastille{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
  .mc-groupe-nom{font-family:var(--police-titre,inherit);font-weight:700;font-size:1.12rem;color:var(--encre);}
  .mc-groupe-nb{font-size:.82rem;color:var(--encre-doux);}
  .mc-couleur{margin-left:auto;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
    color:var(--encre-doux);font-size:.82rem;}
  .mc-couleur input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--ligne);
    border-radius:6px;background:none;cursor:pointer;}
  .mc-carte{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--ligne);
    border-radius:14px;overflow:hidden;box-shadow:var(--ombre-douce);
    transition:transform .12s,box-shadow .12s;}
  .mc-carte:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(40,40,90,.14);}
  .mc-ouvrir{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px 12px;
    background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;width:100%;}
  .mc-nom{font-weight:700;font-size:1.05rem;color:var(--encre);line-height:1.25;}
  .mc-barre{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--ligne);
    background:var(--surface-2,#faf8f3);}
  .mc-mini{flex-shrink:0;width:32px;height:32px;border:1px solid var(--ligne);border-radius:8px;
    background:var(--surface);color:var(--encre-doux);cursor:pointer;font-size:1rem;
    display:inline-flex;align-items:center;justify-content:center;font-family:inherit;}
  .mc-mini:hover{color:var(--laiton);border-color:var(--laiton);}
  /* Mes classes : bascule cartes / tableau, indicateurs sur chaque carte */
  .mc-vues{display:flex;width:max-content;margin:0 auto 6px;}
  /* Questions ratées */
  .eq-pop{max-width:640px;text-align:left;position:relative;}
  .eq-sous{margin:0 0 12px;color:var(--encre-doux);font-size:.84rem;}
  .eq-liste{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow:auto;padding-right:4px;}
  .eq-l{border:1px solid var(--ligne);border-radius:12px;padding:10px 12px;}
  .eq-tete{display:flex;align-items:baseline;gap:10px;}
  .eq-pct{font-family:var(--police-titre);font-weight:800;font-size:1.1rem;min-width:46px;font-variant-numeric:tabular-nums;}
  .eq-txt{flex:1;min-width:0;font-size:.9rem;color:var(--encre);}
  .eq-n{font-size:.78rem;color:var(--encre-doux);font-variant-numeric:tabular-nums;}
  .eq-barre{height:5px;border-radius:3px;background:var(--teinte-douce);margin:6px 0 0 56px;overflow:hidden;}
  .eq-barre span{display:block;height:100%;border-radius:3px;}
  .eq-fautes{display:flex;flex-direction:column;gap:2px;margin:6px 0 0 56px;font-size:.8rem;color:var(--encre-doux);}
  .eq-btn{margin-top:12px;}
  .rd-lien{margin:0 0 14px;font-size:.86rem;color:var(--encre-doux);text-align:center;}
  /* Œil des champs mot de passe */
  .mdp-champ{position:relative;display:block;width:100%;}
  /* Paliers F · I · D (profil élève et fiche du professeur) */
  .pl-pastilles{display:inline-flex;gap:4px;flex-wrap:wrap;}
  .pl-p{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;font-size:.72rem;font-weight:700;
    font-family:var(--police-titre);line-height:1.4;border:1px solid transparent;white-space:nowrap;}
  .pl-p i{font-size:.8rem;color:inherit!important;text-shadow:none!important;}
  .pl-p.ok{background:var(--juste-fond);color:var(--juste);border-color:rgba(26,156,107,.35);}
  .pl-p.cours{background:rgba(242,201,76,.22);color:var(--or-texte);border-color:rgba(242,201,76,.6);}
  .pl-p.non{background:transparent;color:var(--encre-doux);border-color:var(--ligne);}
  .pl-tps{font-size:.78rem;color:var(--encre-doux);white-space:nowrap;}
  .pl-tps i{color:inherit!important;text-shadow:none!important;}
  .pf-theme-niv{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
  .pl-resume{margin:0 0 10px;font-size:.88rem;color:var(--encre-doux);}
  .pl-liste{display:flex;flex-direction:column;gap:6px;}
  .pl-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto 150px 70px;align-items:center;gap:10px;
    padding:8px 12px;border:1px solid var(--ligne);border-radius:12px;background:var(--surface);}
  .pl-nom{font-weight:600;min-width:0;}
  .pl-etat{font-size:.82rem;color:var(--encre-doux);}
  .pl-etat.ok{color:var(--juste);font-weight:700;}
  @media(max-width:640px){.pl-ligne{grid-template-columns:1fr auto;}.pl-ligne .pl-etat,.pl-ligne .pl-tps{grid-column:auto;}}
  /* Suivi des cours de collège (fiche du professeur) */
  .cc-suivi{border:1px solid var(--ligne);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--surface);}
  .cc-suivi-t{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px;}
  .cc-suivi-d{margin:6px 0 0;font-size:.82rem;color:var(--encre-doux);}
  .cc-jalons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .cc-jalon{display:inline-flex;flex-direction:column;align-items:center;min-width:42px;padding:4px 6px;border-radius:10px;
    background:var(--teinte-douce);font-family:var(--police-titre);font-weight:800;color:var(--laiton);font-size:.9rem;line-height:1.1;}
  .cc-jalon small{font-family:Inter,sans-serif;font-weight:500;font-size:.66rem;color:var(--encre-doux);}
  .app-btn[hidden]{display:none!important;}
  .cl-tout-note{margin:0 0 10px;text-align:center;color:var(--encre-doux);font-size:.88rem;}
  .mdp-champ>input{width:100%;box-sizing:border-box;padding-right:46px!important;}
  .mdp-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;
    background:transparent;color:var(--encre-doux);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;}
  .mdp-oeil:hover{background:var(--teinte-douce);color:var(--laiton);}
  .mdp-oeil i{color:inherit!important;text-shadow:none!important;}
  /* Avis de nouvelle version */
  .maj-bandeau{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9500;
    display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:10px 12px 10px 16px;border-radius:14px;
    background:var(--laiton);color:#fff;box-shadow:0 12px 30px rgba(15,27,46,.3);font-size:.9rem;}
  .maj-bandeau i.ph-fill{color:var(--or)!important;}
  .maj-bandeau button{border:0;border-radius:10px;padding:8px 14px;background:var(--or);color:var(--encre);font-family:var(--police-titre);font-weight:700;cursor:pointer;}
  .maj-bandeau .maj-x{background:transparent;color:#fff;padding:6px;}
  body.avec-nav-bas .maj-bandeau{bottom:calc(78px + env(safe-area-inset-bottom,0px));}
  /* Positionnement par compétences */
  .lsu-bloc{margin-bottom:14px;}
  .lsu-aide{margin:0 0 10px;font-size:.84rem;color:var(--encre-doux);line-height:1.5;}
  .lsu-t th.gb-eval{width:150px;min-width:150px;max-width:150px;white-space:normal;}
  .lsu-t .gb-col-sous{white-space:normal;line-height:1.3;}
  .lsu-t td{text-align:center;}
  .lsu-num{display:block;font-family:var(--police-titre);font-weight:800;color:var(--laiton);}
  .lsu-c{min-width:40px;height:34px;border-radius:10px;border:2px solid transparent;font-family:var(--police-titre);
    font-weight:800;font-size:1rem;cursor:pointer;background:var(--teinte-douce);color:var(--encre-doux);}
  .lsu-c.n1{background:rgba(198,40,40,.14);color:var(--faux);}
  .lsu-c.n2{background:rgba(242,160,40,.20);color:var(--or-texte);}
  .lsu-c.n3{background:rgba(35,116,176,.16);color:var(--bandeau);}
  .lsu-c.n4{background:rgba(26,156,107,.18);color:var(--juste);}
  .lsu-c.auto{opacity:.6;border-style:dashed;border-color:currentColor;}
  /* Paramètres : espace et chant */
  .st-jauge{height:12px;border-radius:999px;background:var(--teinte-douce);overflow:hidden;margin:6px 0 6px;}
  .st-jauge span{display:block;height:100%;border-radius:999px;}
  .st-total{margin:0 0 12px;font-size:.92rem;color:var(--encre-doux);}
  .st-t{font-family:var(--police-titre);font-size:1rem;color:var(--laiton);margin:18px 0 8px;}
  .st-arch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;}
  .st-arch select{padding:7px 10px;border:1px solid var(--ligne);border-radius:10px;font-family:inherit;background:var(--surface);color:var(--encre);}
  .st-arch span{color:var(--encre-doux);}
  .st-arch .action{margin:0 0 0 auto;}
  .mc-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.8rem;color:var(--encre-doux);margin-top:4px;}
  .mc-stats b{font-family:var(--police-titre);font-size:.95rem;}
  .mc-alerte{color:var(--or-texte);font-weight:700;}
  .mc-der{width:100%;font-size:.74rem;}
  .mc-creer{max-width:560px;margin:22px auto 0;}
  .mc-creer-l{display:flex;gap:8px;flex-wrap:wrap;}
  .mc-creer-l input{flex:1 1 220px;min-width:0;}
  .mc-creer-l .action{margin:0;}
  .mc-pied{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
    margin-top:22px;padding-top:12px;border-top:1px solid var(--ligne);color:var(--encre-doux);font-size:.88rem;}
  .mc-sel{flex:1;min-width:0;height:32px;border:1px solid var(--ligne);border-radius:8px;
    background:var(--surface);color:var(--encre);font-family:inherit;font-size:.82rem;padding:0 6px;cursor:pointer;}
  .compo-carte{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:14px 16px;
    cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s,border-color .12s;
    box-shadow:var(--ombre-douce);font-family:inherit;}
  .compo-carte:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(40,40,90,.14);
    border-color:var(--laiton,#b8860b);}
  .compo-ic{font-size:1.7rem;line-height:1;margin-bottom:4px;}
  .compo-portrait{width:100%;height:130px;object-fit:cover;object-position:center 20%;border-radius:10px;margin-bottom:8px;display:block;background:#e9e6df;}
  .compo-nom{font-weight:700;font-size:1rem;color:var(--encre);line-height:1.2;}
  .compo-dates{font-size:.82rem;color:var(--encre-doux);}
  .compo-pays{font-size:.74rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.4px;}
  /* portrait en tête de biographie */
  .bio-portrait{display:flex;gap:16px;align-items:center;background:var(--surface-2,#faf8f3);border:1px solid var(--ligne);border-radius:14px;padding:12px 16px;margin-bottom:14px;}
  .bio-portrait img{width:118px;height:150px;object-fit:cover;object-position:center 18%;border-radius:10px;flex-shrink:0;background:#e9e6df;}
  .bio-portrait-info{font-size:1rem;color:var(--encre);line-height:1.55;}
  .bio-portrait-info .bpi-nom{font-family:var(--police-titre);font-weight:700;font-size:1.15rem;color:var(--laiton);}
  @media(max-width:520px){.bio-portrait{flex-direction:column;text-align:center;}}
  .cat-btn{width:100%;text-align:left;border:none;background:transparent;color:var(--menu-txt);
    padding:9px 11px;border-radius:10px;font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:9px;
    transition:background .15s,transform .08s;}
  .cat-btn{color:var(--menu-txt-doux);border-radius:12px;font-weight:500;}
  .cat-btn:hover{background:var(--teinte-douce);color:var(--encre);}
  .cat-btn:active{transform:scale(.98);}
  .cat-btn.actif{background:var(--laiton);color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(30,58,99,.28);}
  .cat-btn .ic{width:22px;text-align:center;font-size:1rem;color:var(--or);text-shadow:0 1px 1px rgba(30,58,99,.22);}
  .cat-btn.actif .ic{color:var(--or-clair);}
  .cat-btn .lib{flex:1;line-height:1.15;display:flex;flex-direction:column;}
  .cat-theme{font-size:.62rem;color:var(--menu-txt-doux);font-weight:500;margin-top:2px;}
  .cat-btn.actif .cat-theme{color:rgba(255,255,255,.82);}
  .niveau{font-size:.6rem;background:var(--teinte-douce);color:var(--laiton);border-radius:20px;padding:2px 6px;font-weight:600;}
  .cat-btn.actif .niveau{background:rgba(255,255,255,.25);color:#fff;}
  .score-mini{font-size:.6rem;color:var(--or-texte);margin-left:2px;font-weight:700;}
  /* MAIN */
  main{flex:1;padding:26px 36px 70px;overflow-y:auto;}
  .reglages{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:var(--surface);
    border:1px solid var(--ligne);border-radius:var(--rayon);padding:12px 18px;margin-bottom:20px;box-shadow:var(--ombre-douce);}
  .reglages .grp{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--encre-doux);}
  .reglages label{font-weight:600;color:var(--encre);}
  /* Chips de difficulté : pilules, actif = dégradé bleu -> or */
  .seg{display:inline-flex;gap:10px;flex-wrap:wrap;border:none;border-radius:0;overflow:visible;}
  .seg button{border:1px solid var(--ligne);background:var(--surface);padding:8px 18px;cursor:pointer;
    font-size:.85rem;color:var(--encre-doux);border-radius:var(--rayon-pill);
    font-family:inherit;font-weight:700;transition:all .15s ease;}
  .seg button:hover{border-color:rgba(30,58,99,.5);color:var(--encre);}
  .seg button.on{background:var(--degrade);color:#fff;font-weight:700;border-color:transparent;}
  /* Difficultés colorées : vert=facile, jaune=intermédiaire, rouge=difficile (mêmes teintes que les pastilles) */
  #segDiff button[data-d="1"]{color:var(--juste);font-weight:700;}
  #segDiff button[data-d="2"]{color:#a97a12;font-weight:700;}
  #segDiff button[data-d="3"]{color:var(--faux);font-weight:700;}
  #segDiff button[data-d="1"].on{background:var(--juste);color:#fff;border-color:transparent;}
  #segDiff button[data-d="2"].on{background:var(--or);color:#3a2c00;border-color:transparent;}
  #segDiff button[data-d="3"].on{background:var(--faux);color:#fff;border-color:transparent;}
  [data-theme="dark"] #segDiff button[data-d="2"]{color:var(--or-texte);}
  [data-theme="dark"] #segDiff button[data-d="2"].on{color:#3a2c00;}
  #segDiff button.verrou{opacity:.5;cursor:not-allowed;background:var(--surface-2,#eee);color:var(--encre-doux)!important;border-style:dashed;}
  #segDiff button.verrou.on{background:var(--surface-2,#eee)!important;}
  .prog-niv{font-size:.82rem;color:var(--encre-doux);margin-top:6px;line-height:1.4;max-width:420px;}
  .prog-niv b{color:var(--encre);}
  .rc-bloc{border:1px solid var(--ligne);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--surface-2,#faf8f3);}
  .rc-bloc .rc-sous{font-weight:800;color:var(--encre);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
  .rc-bloc label{font-size:.9rem;color:var(--encre);}
  .rc-note{font-size:.78rem;color:var(--encre-doux);margin-top:6px;line-height:1.4;}
  /* Icônes Phosphor dorées partout (comme les étoiles du logo).
     Les pastilles de statut 🟢🟡🔴 gardent leur couleur (style inline prioritaire). */
  i.ph,i.ph-bold,i.ph-fill,i.ph-duotone,i.ph-thin,i.ph-light{color:var(--or);text-shadow:0 1px 1px rgba(30,58,99,.22);}
  /* Dans les cartes « S'entraîner / Évaluation », l'icône suit la couleur
     de son médaillon/bouton (or vif sur bleu, marine sur or, blanc sur bleu),
     et non le doré-texte brun global. */
  .lcc-ic.bleu i,.lcc-ic.or i,.lcc-btn.bleu i,.lcc-btn.or i,
  .rm-cta i,.chr-dl i,.chr-suiv i,.cht-go i,.cht-mod i,.cht-sup i,.cht-cible i,.cht-piste i,.eph-h i{color:inherit;text-shadow:none;}
  .reglages select{padding:6px 10px;border:2px solid var(--ligne);border-radius:10px;background:var(--papier);font-family:inherit;font-weight:600;color:var(--encre);}
  .chk{display:flex;align-items:center;gap:6px;cursor:pointer;}
  /* En-tête d'écran = bannière en ruban (encoches latérales à 45°), même motif
     « brocart » que les autres fonds bleus pleins pour unifier le design.
     Un seul composant, donc tous les écrans en héritent. */
  .barre{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
    background:var(--brocart),var(--bandeau);
    clip-path:polygon(1.2% 0,98.8% 0,100% 50%,98.8% 100%,1.2% 100%,0 50%);
    padding:16px 42px;border-bottom:none;margin-bottom:22px;}
  .barre h1{font-size:1.7rem;margin:0;letter-spacing:-.3px;font-weight:700;color:#fff;line-height:1.2;}
  /* Or tres clair, et non --or : sur le nouveau bleu, l'or plein tombait a
     2,2 de contraste (illisible). Ce ton garde la couleur chaude et passe
     le seuil AA (4,6). */
  .barre p{margin:5px 0 0;color:#fff4d9;font-size:.9rem;max-width:620px;line-height:1.5;font-weight:600;}
  .barre .btn-retour{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;}
  .barre .btn-retour:hover{background:rgba(255,255,255,.24);}
  /* Bandeau centré : réservé à l'espace enseignant, dont les écrans (tableau de
     bord, classe, fiche d'élève) sont larges et centrés. Les écrans élèves
     gardent le titre calé à gauche, aligné sur le texte qui suit. */
  /* Titre centré sur toute la largeur du bandeau. Le bouton « Retour » est sorti
     du flux (absolu) : en flottant, il rognait la ligne et décalait le titre de
     la moitié de sa largeur. Les marges symétriques l'empêchent de passer
     dessous sans jamais décentrer. */
  .barre>div:first-child{flex:1 1 100%;text-align:center;position:relative;min-height:34px;}
  .barre .btn-retour{position:absolute;left:0;top:0;}
  .barre h1,.barre p{padding-left:96px;padding-right:96px;}
  .barre p{margin-left:auto;margin-right:auto;}
  @media(max-width:640px){
    .barre .btn-retour{position:static;display:inline-block;margin:0 0 8px;}
    .barre h1,.barre p{padding-left:0;padding-right:0;}
  }
  /* les icônes du titre restent dorées sur le marine */
  .barre h1 i.ph,.barre h1 i.ph-fill,.barre h1 i.ph-bold{color:var(--or-texte);}
  #intro:empty{margin:0;}
  /* Écran d'accueil : la bannière est rendue dans #zone, on masque celle du haut.
     ATTENTION : les leçons masquent AUSSI leur titre, mais elles ont un bouton
     « Retour » qui vit dans ce même bandeau. On n'escamote donc le bandeau que
     s'il est réellement vide : titre caché ET bouton de retour caché.
     Les deux orthographes de la propriété sont couvertes : le HTML d'origine
     porte « display:none », le DOM re-sérialise en « display: none ». */
  .barre:has(#titre[style*="display: none"]):has(#btnRetour[style*="display: none"]),
  .barre:has(#titre[style*="display: none"]):has(#btnRetour[style*="display:none"]){display:none;}
  @media(max-width:640px){.barre{padding:14px 24px;}.barre h1{font-size:1.3rem;}}
  .actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
  .actions-row{display:flex;gap:10px;}
  .actions-row .action{flex:1;min-width:0;text-align:center;}
  /* boutons : effet de pression + ondulation au clic */
  button.action{position:relative;overflow:hidden;font-family:var(--police);font-size:.88rem;padding:11px 18px;border-radius:var(--rayon-s);cursor:pointer;
    border:1.5px solid transparent;font-weight:700;transition:transform var(--t-rapide),box-shadow var(--t-rapide),background var(--t-rapide),filter var(--t-rapide);}
  button.action:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce);filter:brightness(1.03);}
  button.action:active{transform:translateY(1px) scale(.98);}
  .btn-nouv{background:var(--surface);color:var(--encre);border-color:var(--ligne);}
  .btn-nouv:hover{background:var(--surface-2);}
  /* Correction / Passer aux exercices : action positive → bleu MUSEDUC */
  .btn-corr{background:linear-gradient(135deg,var(--valide) 0%,var(--valide-2) 100%);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(31,120,194,.34);}
  .btn-corr:hover{box-shadow:0 8px 22px rgba(31,120,194,.5);}
  /* Recommencer : action « repartir » → teinte rouge douce */
  .btn-rejouer{background:var(--faux-fond);color:var(--faux);border-color:var(--faux);}
  .btn-rejouer:hover{background:var(--faux);color:#fff;}
  /* Action destructrice définitive (suppression) : rouge plein */
  .btn-danger{background:var(--faux);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(220,38,38,.26);}
  .btn-danger:hover{box-shadow:0 8px 20px rgba(220,38,38,.4);}
  .btn-danger i{color:#fff !important;}
  [data-theme="dark"] .btn-rejouer{color:#f0978a;}
  [data-theme="dark"] .btn-rejouer:hover{color:#fff;}
  /* ondulation (ripple) injectée au clic */
  .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rippleAnim .55s ease-out;pointer-events:none;}
  @keyframes rippleAnim{to{transform:scale(2.6);opacity:0;}}
  /* animations d'entrée (apparition fluide des contenus) */
  @keyframes apparait{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .anim-entree{animation:apparait .4s cubic-bezier(.22,.61,.36,1) both;}
  .anim-liste>*{animation:apparait .45s cubic-bezier(.22,.61,.36,1) both;}
  .anim-liste>*:nth-child(1){animation-delay:.02s;} .anim-liste>*:nth-child(2){animation-delay:.07s;}
  .anim-liste>*:nth-child(3){animation-delay:.12s;} .anim-liste>*:nth-child(4){animation-delay:.17s;}
  .anim-liste>*:nth-child(5){animation-delay:.22s;} .anim-liste>*:nth-child(6){animation-delay:.27s;}
  .anim-liste>*:nth-child(n+7){animation-delay:.30s;}
  .ex{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 20px;margin-bottom:15px;
    box-shadow:var(--ombre-douce);transition:box-shadow .2s,transform .2s,border-color .2s;}
  .ex:hover{box-shadow:var(--ombre);}
  .ex.bon{border-color:var(--valide);animation:popBon .4s ease;}
  .ex.mauvais{border-color:var(--faux);}
  @keyframes popBon{0%{transform:scale(1);}40%{transform:scale(1.015);}100%{transform:scale(1);}}
  .ex .num{font-family:var(--police-titre);font-weight:700;color:var(--laiton);margin-right:8px;}
  .ex .consigne{font-size:1rem;line-height:1.5;}
  .grand{font-size:1.4rem;font-weight:700;}
  .reponse-zone{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  input.rep,select.rep{font-size:1rem;padding:9px 12px;border:2px solid var(--ligne);border-radius:8px;
    background:var(--papier);color:var(--encre);font-family:inherit;}
  input.rep{width:200px;}
  select.rep{cursor:pointer;}
  /* selects natifs restants (réglages, éval) : flèche custom + style moderne */
  select.rep,.reglages select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233877A9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:34px!important;}
  /* cases à cocher modernisées */
  input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--ligne);
    border-radius:6px;background:var(--surface);cursor:pointer;position:relative;flex-shrink:0;vertical-align:middle;
    transition:background var(--t-rapide),border-color var(--t-rapide);}
  input[type=checkbox]:hover{border-color:var(--laiton-clair);}
  input[type=checkbox]:checked{background:var(--laiton);border-color:var(--laiton);}
  input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
    border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
  /* boutons radio (questions visuelles) modernisés */
  .choix input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--ligne);
    border-radius:50%;background:var(--surface);cursor:pointer;position:relative;flex-shrink:0;transition:border-color var(--t-rapide);}
  .choix label.sel input[type=radio],.choix input[type=radio]:checked{border-color:var(--laiton);}
  .choix input[type=radio]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--laiton);}
  input.rep:focus,select.rep:focus{outline:none;border-color:var(--laiton);}
  /* Boutons-réponses (remplacent les anciens menus déroulants) */
  .choix-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;}
  .choix-btns .opt{font-family:inherit;font-size:.96rem;font-weight:600;color:var(--encre);
    background:var(--surface);border:2px solid var(--ligne);border-radius:var(--rayon-s);
    padding:10px 16px;cursor:pointer;transition:transform var(--t-rapide),border-color var(--t-rapide),background var(--t-rapide),box-shadow var(--t-rapide);
    box-shadow:var(--ombre-douce);position:relative;}
  .choix-btns .opt:hover{border-color:var(--laiton-clair);transform:translateY(-2px);box-shadow:var(--ombre);}
  .choix-btns .opt:active{transform:translateY(0) scale(.97);}
  .choix-btns .opt.sel{border-color:var(--laiton);background:linear-gradient(135deg,var(--laiton),var(--valide-2));color:#fff;box-shadow:var(--ombre-bouton);}
  .choix-btns .opt.bon{border-color:var(--valide);background:linear-gradient(135deg,var(--valide),var(--valide-2));color:#fff;box-shadow:0 4px 14px rgba(31,120,194,.4);}
  .choix-btns .opt.mauvais{border-color:var(--faux);background:linear-gradient(135deg,var(--faux),#b03828);color:#fff;box-shadow:0 4px 14px rgba(207,74,60,.35);}
  .choix-btns .opt.bon::after{content:"✓";margin-left:7px;font-weight:800;}
  /* bonne réponse que l'élève n'a pas choisie : contour pointillé, pas de fond plein */
  .choix-btns .opt.bon.attendu{background:#fff;color:var(--valide);border:2px dashed var(--valide);box-shadow:none;}
  .choix-btns .opt.bon.attendu::after{content:"✓ bonne réponse";font-size:.78em;}
  .choix label.bon.attendu{outline:2px dashed var(--valide);outline-offset:2px;}
  .choix-btns .opt,.choix[data-vis] label{touch-action:manipulation;}
  /* question restée sans réponse au moment de corriger */
  .ex.sans-rep{border-color:var(--or-texte);box-shadow:0 0 0 3px rgba(212,160,23,.35);}
  .ex.sans-rep:has(.opt.sel),.ex.sans-rep:has(input:checked){box-shadow:none;}
  .choix-btns .opt.mauvais::after{content:"✗";margin-left:7px;font-weight:800;}
  .choix-btns.verrou .opt{cursor:default;}
  .choix-btns.verrou .opt:hover{transform:none;box-shadow:var(--ombre-douce);}
  .choix-btns.verrou .opt:not(.bon):not(.mauvais){opacity:.55;}
  .choix{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .choix label{border:2px solid var(--ligne);border-radius:8px;padding:8px 13px;cursor:pointer;
    background:var(--papier);font-size:.93rem;display:flex;align-items:center;gap:7px;user-select:none;transition:border-color .15s,background .15s;}
  .choix label:hover{border-color:var(--laiton-clair);}
  .choix label.sel{border-color:var(--laiton);background:var(--valide-fond);}
  .ex.bon{border-color:var(--valide);background:var(--valide-fond);}
  .ex.mauvais{border-color:var(--faux);background:var(--faux-fond);}
  input.bon,select.bon,.choix label.bon{border-color:var(--valide);background:var(--valide-fond);}
  input.mauvais,select.mauvais,.choix label.mauvais{border-color:var(--faux);background:var(--faux-fond);}
  .verdict{font-weight:700;margin-top:10px;font-size:.92rem;display:none;align-items:center;gap:8px;flex-wrap:wrap;}
  .verdict.ok{color:var(--valide);}.verdict.ko{color:var(--faux);}
  .solution{font-weight:500;color:var(--encre-doux);}.solution b{color:var(--encre);}
  .btn-son{border:2px solid var(--laiton);background:#faf3e3;color:#5a3d14;border-radius:8px;
    padding:7px 13px;cursor:pointer;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
  .btn-son:hover{background:var(--laiton-clair);}
  .btn-son.mini{padding:3px 10px;font-size:.95rem;border-radius:7px;}
  /* chronomètre affiché en permanence pendant l'exercice */
  .chrono-live{position:fixed;bottom:16px;right:16px;z-index:35;display:none;align-items:center;gap:4px;
    background:var(--encre);color:var(--papier);padding:8px 14px;border-radius:24px;font-size:.95rem;
    box-shadow:var(--ombre);font-variant-numeric:tabular-nums;}
  .chrono-live b{color:var(--laiton-clair);font-weight:700;}
  @media print{.chrono-live{display:none!important;}}
  /* mode défi */
  .btn-defi{background:linear-gradient(135deg,var(--laiton),var(--valide-2));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(31,120,194,.32);}
  .btn-defi:hover{box-shadow:0 7px 20px rgba(31,120,194,.5);}
  /* barre de temps qui se vide */
  .timebar{height:14px;border-radius:10px;background:var(--papier-fonce);overflow:hidden;margin:10px 0 18px;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);}
  .timebar > div{height:100%;width:100%;border-radius:10px;background:linear-gradient(90deg,#2f9e63,#7bd39b);transition:width .1s linear, background .3s;}
  .timebar.warn > div{background:linear-gradient(90deg,#e0a000,#f2c94c);}
  .timebar.danger > div{background:linear-gradient(90deg,#cf4a3c,#f07a6e);}
  /* exo plein écran d'un mode jeu */
  .jeu-ex{background:var(--surface);border:2px solid var(--ligne);border-radius:var(--rayon);padding:22px 20px;box-shadow:var(--ombre-douce);}
  .jeu-ex .consigne{font-size:1.15rem;line-height:1.5;margin-bottom:14px;}
  .jeu-ex .reponse-zone{margin-top:6px;}
  /* effets "tu déchires" */
  @keyframes secousse{0%,100%{transform:translate(0,0) rotate(0);}15%{transform:translate(-9px,4px) rotate(-1.4deg);}30%{transform:translate(8px,-5px) rotate(1.2deg);}45%{transform:translate(-7px,3px) rotate(-1deg);}60%{transform:translate(6px,-4px) rotate(.8deg);}75%{transform:translate(-4px,2px) rotate(-.5deg);}}
  .secousse{animation:secousse .6s cubic-bezier(.36,.07,.19,.97);}
  .hype-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:9000;}
  .hype-mot{font-family:var(--police-titre);font-weight:900;font-size:clamp(2.4rem,12vw,6rem);
    color:#fff;text-align:center;padding:.2em .5em;border-radius:18px;
    background:linear-gradient(135deg,#7b3fe4,#cf4a3c,#e8bd76);background-size:200% 200%;
    box-shadow:0 12px 50px rgba(0,0,0,.35);animation:hypeShow 2.1s ease,hypeShine 2.1s linear;text-shadow:0 3px 12px rgba(0,0,0,.3);}
  @keyframes hypePop{0%{transform:scale(.2) rotate(-12deg);opacity:0;}25%{transform:scale(1.15) rotate(3deg);opacity:1;}45%{transform:scale(.95) rotate(-2deg);}60%{transform:scale(1.05);}100%{transform:scale(1) rotate(0);opacity:0;}}
  /* version longue : apparaît, RESTE visible, puis disparaît */
  @keyframes hypeShow{0%{transform:scale(.2) rotate(-12deg);opacity:0;}12%{transform:scale(1.18) rotate(3deg);opacity:1;}20%{transform:scale(.97) rotate(-1.5deg);}26%{transform:scale(1.04);}32%{transform:scale(1) rotate(0);opacity:1;}82%{transform:scale(1) rotate(0);opacity:1;}100%{transform:scale(1.06);opacity:0;}}
  @keyframes hypeShine{to{background-position:200% 0;}}
  /* verdict flash bon/mauvais en mode jeu */
  .flash{position:fixed;inset:0;z-index:8000;pointer-events:none;opacity:0;}
  .flash.ok{background:radial-gradient(circle,rgba(31,120,194,.32),transparent 70%);animation:flashIn .5s ease;}
  .flash.ko{background:radial-gradient(circle,rgba(207,74,60,.34),transparent 70%);animation:flashIn .5s ease;}
  @keyframes flashIn{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
  /* verdict plein écran TRÈS visible pour le mode Duel (bleu = juste, rouge = faux) */
  .flash-duel{position:fixed;inset:0;z-index:9300;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;}
  .flash-duel.ok{background:radial-gradient(circle at center,rgba(31,120,194,.95),rgba(21,95,156,.85) 60%,rgba(15,70,120,.7));animation:flashDuelIn 2s cubic-bezier(.2,.7,.3,1);}
  .flash-duel.ko{background:radial-gradient(circle at center,rgba(214,64,48,.95),rgba(185,45,32,.85) 60%,rgba(150,35,25,.7));animation:flashDuelIn 2s cubic-bezier(.2,.7,.3,1);}
  .flash-duel .fd-badge{font-size:clamp(5rem,28vw,12rem);line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:fdPop .7s cubic-bezier(.2,.9,.3,1.4);}
  .flash-duel .fd-mot{position:absolute;bottom:18%;left:0;right:0;text-align:center;color:#fff;font-family:var(--police-titre);font-weight:800;font-size:clamp(1.4rem,6vw,2.4rem);text-shadow:0 2px 10px rgba(0,0,0,.35);padding:0 18px;animation:fdMot .7s ease .12s both;}
  @keyframes flashDuelIn{0%{opacity:0;}12%{opacity:1;}72%{opacity:1;}100%{opacity:0;}}
  @keyframes fdPop{0%{transform:scale(.3) rotate(-12deg);}55%{transform:scale(1.18) rotate(4deg);}100%{transform:scale(1) rotate(0);}}
  @keyframes fdMot{0%{transform:translateY(14px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
  /* fin de partie */
  .gameover{text-align:center;padding:26px 18px;}
  .gameover h2{font-family:var(--police-titre);margin:8px 0;}
  .rond{width:17px;height:17px;border-radius:50%;border:2px solid var(--ligne);background:var(--papier);transition:transform .3s,background .3s,border-color .3s;}
  .rond.gagne{background:var(--juste);border-color:var(--juste);transform:scale(1.18);}
  .rond.perdu{background:var(--faux);border-color:var(--faux);}
  .rond.nul{background:var(--laiton-clair);border-color:var(--laiton);}
  /* écran de transition entre joueurs */
  .duel-transition{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;animation:transFade .4s ease;}
  .duel-transition.j1{background:linear-gradient(135deg,#143a5c,#1f78c2);}
  .duel-transition.j2{background:linear-gradient(135deg,#9d174d,#ec4899);}
  @keyframes dtCountPop{0%{transform:scale(1.6);opacity:0;}45%{transform:scale(.93);opacity:1;}100%{transform:scale(1);}}
  @keyframes hypePop2{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.1);opacity:1;}100%{transform:scale(1);}}
  @keyframes transFade{from{opacity:0;}to{opacity:1;}}
  .duel-win{position:fixed;inset:0;z-index:9600;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;animation:transFade .5s ease;padding:20px;}
  .duel-win.j1{background:linear-gradient(135deg,#0b2237,#1f78c2);}
  .duel-win.j2{background:linear-gradient(135deg,#831843,#db2777);}
  .duel-win.nul{background:linear-gradient(135deg,#475569,#94a3b8);}
  .duel-win h1{font-family:var(--police-titre);font-weight:900;font-size:clamp(2rem,9vw,3.6rem);margin:.15em 0;}
  .duel-win button{margin-top:22px;background:#fff;color:var(--encre);border:none;border-radius:14px;padding:13px 30px;font-family:var(--police-titre);font-weight:800;font-size:1.1rem;cursor:pointer;}
  /* ---- Mode Survie : direction artistique dans le bleu du logo MUSEDUC ---- */
  .survie-screen{min-height:100vh;background:var(--brocart),var(--bandeau);
    margin:-20px -16px 0;padding:18px 16px 50px;}
  .jeu-joker{font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;border:1px solid var(--laiton);color:var(--laiton);}
  .jeu-joker.use{opacity:.45;text-decoration:line-through;border-color:var(--encre-doux);color:var(--encre-doux);}
  .survie-screen .jeu-joker{color:#ffe08a;border-color:#ffe08a;}
  .survie-screen .jeu-joker.use{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.4);}
  .survie-joker{text-align:center;padding:18px 10px;animation:hypePop .5s ease;}
  .survie-joker .sj-tete{font-family:var(--police-titre);font-weight:800;font-size:1.3rem;color:var(--laiton);}
  .survie-joker .sj-sol{margin-top:8px;color:var(--encre);}
  .survie-joker .sj-suite{margin-top:6px;color:var(--encre-doux);font-size:.9rem;}
  .survie-screen .timebar{background:rgba(255,255,255,.22);}
  .survie-screen .jeu-ex{background:rgba(255,255,255,.97);color:var(--encre);box-shadow:0 14px 50px rgba(0,0,0,.3);}
  /* ================= Duel : tir à la corde en face à face ================= */
  .dl-lobby{max-width:560px;margin:0 auto;border-radius:26px;overflow:hidden;background:var(--fond-app);box-shadow:var(--ombre-forte);}
  .dl-lobby-tete{background:var(--brocart),var(--bandeau);color:#fff;padding:18px 18px 20px;border-radius:0 0 26px 26px;}
  .dl-lobby-hero{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;margin-top:12px;}
  .dl-lobby-hero h2{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.35rem,5.5vw,1.6rem);line-height:1.05;margin:0;color:#fff;}
  .dl-lobby-hero p{font-size:.86rem;opacity:.92;margin:6px 0 0;line-height:1.4;}
  .dl-illu{position:relative;height:150px;border-radius:18px;background:rgba(255,255,255,.12);overflow:hidden;}
  .dl-illu .h{position:absolute;left:0;right:0;top:0;height:50%;background:rgba(214,51,108,.55);}
  .dl-illu .b{position:absolute;left:0;right:0;bottom:0;height:50%;background:rgba(188,220,245,.35);}
  .dl-illu .fil{position:absolute;left:calc(50% - 3px);top:10px;bottom:10px;width:6px;border-radius:4px;background:repeating-linear-gradient(180deg,#F6DC8A 0 8px,#e0b53c 8px 16px);}
  .dl-illu .ligne{position:absolute;left:12px;right:12px;height:3px;background:#fff;border-radius:2px;}
  .dl-illu .l1{top:10px;} .dl-illu .l2{bottom:10px;}
  .dl-illu .noeud{position:absolute;left:calc(50% - 14px);top:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--or);animation:dlIllu 3s ease-in-out infinite;}
  @keyframes dlIllu{0%,100%{transform:translateY(0);}30%{transform:translateY(22px);}65%{transform:translateY(-18px);}}
  .dl-lobby-corps{padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px;}
  .dl-joueurs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .dl-joueur{display:flex;flex-direction:column;background:#fff;border:2px solid;border-radius:18px;padding:10px 12px;}
  .dl-joueur.haut{border-color:#d6336c;} .dl-joueur.bas{border-color:var(--bandeau);}
  .dl-joueur span{display:flex;align-items:center;gap:4px;font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
  .dl-joueur.haut span{color:#d6336c;} .dl-joueur.bas span{color:var(--bandeau);}
  .dl-joueur input{border:none;border-bottom:2px solid var(--papier-fonce);background:none;font-family:var(--police-titre);font-weight:800;font-size:1.15rem;color:var(--encre);padding:2px 0;min-height:36px;width:100%;outline:none;}
  .dl-joueur.haut input:focus{border-bottom-color:#d6336c;} .dl-joueur.bas input:focus{border-bottom-color:var(--bandeau);}
  .dl-carte{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:12px 14px;}
  .dl-theme{display:flex;align-items:center;gap:12px;}
  .dl-mini{font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--encre-doux);}
  .dl-theme-nom{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;line-height:1.2;}
  .dl-lien{border:none;background:none;color:var(--bandeau);font-weight:700;font-size:.86rem;cursor:pointer;min-height:40px;padding:0 6px;font-family:inherit;}
  .dl-themes{margin-top:0;border:1px solid var(--ligne);}
  .dl-seg{display:flex;gap:4px;background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon-pill);padding:4px;}
  .dl-seg button{flex:1;border:none;background:none;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--encre-doux);padding:10px 0;border-radius:var(--rayon-pill);cursor:pointer;min-height:42px;}
  .dl-seg button.on{background:var(--laiton);color:#fff;font-weight:700;}
  .dl-longs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;}
  .dl-long{border:none;border-radius:12px;background:var(--fond-app);min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;color:var(--encre);}
  .dl-long b{font-family:var(--police-titre);font-weight:800;} .dl-long small{font-size:.68rem;color:var(--encre-doux);}
  .dl-long.on{background:var(--laiton);color:#fff;} .dl-long.on small{color:rgba(255,255,255,.8);}
  .dl-regle{font-size:.82rem;color:var(--encre-doux);line-height:1.45;margin:0 4px;}
  .dl-lobby .sv-cta{margin-top:4px;}
  /* partie */
  .dl-jeu{position:fixed;inset:0;z-index:9000;background:#1e3a63;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
  .dl-grille{display:grid;grid-template-columns:minmax(0,1fr) 36px;height:100%;}
  .dl-colonne{display:flex;flex-direction:column;min-width:0;height:100%;}
  .dl-moitie{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px;overflow:hidden;}
  .dl-moitie.haut{transform:rotate(180deg);background:#fdeef4;}
  .dl-moitie.bas{background:#eef6fd;}
  .dl-tete{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .dl-nom{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;}
  .dl-moitie.haut .dl-nom,.dl-moitie.haut .dl-reste{color:#d6336c;}
  .dl-moitie.bas .dl-nom,.dl-moitie.bas .dl-reste{color:var(--bandeau);}
  .dl-reste{font-size:.8rem;font-weight:700;}
  .dl-q{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:1rem;line-height:1.35;color:var(--encre);padding:4px 0;overflow:hidden;}
  .dl-q svg.portee{width:min(230px,72%);height:auto;margin:2px auto;background:#fff;border-radius:12px;}
  .dl-q .grand{font-size:1.5rem;}
  .dl-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:640px;margin:6px auto 0;}
  .dl-opts.n5,.dl-opts.n6,.dl-opts.n7,.dl-opts.n8{grid-template-columns:repeat(4,minmax(0,1fr));}
  .dl-opt{min-height:52px;border-radius:14px;background:#fff;border:2px solid var(--ligne);font-family:var(--police-titre);font-weight:800;font-size:1.02rem;color:var(--encre);cursor:pointer;padding:4px 6px;line-height:1.15;touch-action:manipulation;}
  .dl-opts.n5 .dl-opt,.dl-opts.n6 .dl-opt,.dl-opts.n7 .dl-opt,.dl-opts.n8 .dl-opt{min-height:46px;font-size:.95rem;}
  .dl-moitie.haut .dl-opt{border-color:#f6d6e2;} .dl-moitie.bas .dl-opt{border-color:#d7e6f4;}
  .dl-opt:active{transform:scale(.96);}
  .dl-opt.juste{background:var(--juste);border-color:var(--juste)!important;color:#fff;}
  .dl-opt.faux{background:var(--faux);border-color:var(--faux)!important;color:#fff;}
  .dl-moitie.secoue{animation:svSecoue .45s;}
  .dl-moitie.haut.secoue{animation:dlSecoueHaut .45s;}
  @keyframes dlSecoueHaut{0%,100%{transform:rotate(180deg);}25%{transform:rotate(180deg) translateX(-8px);}50%{transform:rotate(180deg) translateX(7px);}75%{transform:rotate(180deg) translateX(-4px);}}
  .dl-voile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:rgba(255,255,255,.82);animation:transFade .25s ease;}
  .dl-voile[hidden]{display:none;}
  .dl-voile.gagne{background:var(--brocart),var(--bandeau);color:#fff;}
  .dl-voile.perdu{background:rgba(253,238,244,.94);}
  .dl-voile.neutre{background:rgba(234,243,251,.94);}
  .dl-msg{display:flex;flex-direction:column;align-items:center;gap:4px;}
  .dl-msg i{font-size:2rem;color:var(--laiton);}
  .dl-voile.perdu .dl-msg i{color:#d6336c;}
  .dl-msg b{font-family:var(--police-titre);font-weight:800;font-size:1.4rem;color:var(--encre);}
  .dl-voile.perdu .dl-msg b{color:#d6336c;}
  .dl-msg span{font-size:.92rem;color:var(--encre-doux);}
  .dl-voile.gagne .dl-msg span{color:rgba(255,255,255,.9);}
  .dl-msg .dl-tire{font-size:3.2rem;line-height:.9;color:var(--or)!important;animation:hypePop2 .45s ease;}
  .dl-bande{flex:none;height:58px;background:var(--brocart),var(--bandeau);color:#fff;display:grid;grid-template-columns:44px minmax(0,1fr) 90px;align-items:center;gap:10px;padding:0 10px;}
  .dl-quitter{width:40px;height:40px;border-radius:12px;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .dl-bande-t{text-align:center;line-height:1.05;}
  .dl-bande-t b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.05rem;}
  .dl-bande-t span{font-size:.64rem;letter-spacing:1px;text-transform:uppercase;opacity:.8;}
  .dl-chrono{height:8px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;}
  .dl-chrono i{display:block;height:100%;width:100%;background:var(--or);border-radius:6px;}
  .dl-corde{position:relative;background:#1e3a63;}
  .dl-fil{position:absolute;left:calc(50% - 3px);top:5%;bottom:5%;width:6px;border-radius:4px;background:repeating-linear-gradient(180deg,#F6DC8A 0 8px,#e0b53c 8px 16px);}
  .dl-cran{position:absolute;left:6px;right:6px;height:2px;background:rgba(255,255,255,.28);transform:translateY(-1px);}
  .dl-cran.milieu{background:rgba(255,255,255,.6);}
  .dl-drap{position:absolute;left:4px;right:4px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--police-titre);font-weight:800;font-size:.75rem;z-index:1;}
  .dl-drap.haut{top:6px;background:#d6336c;} .dl-drap.bas{bottom:6px;background:var(--bandeau);}
  .dl-drap.gagnant{background:var(--or);color:#16233a;box-shadow:0 0 14px rgba(242,201,76,.9);}
  .dl-noeud{position:absolute;left:4px;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#fff;border:4px solid var(--or);box-shadow:0 4px 12px rgba(0,0,0,.35);transition:top .5s cubic-bezier(.34,1.3,.64,1);z-index:2;}
  .dl-noeud.tire{animation:dlTire .6s ease;}
  @keyframes dlTire{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.35);}40%{box-shadow:0 0 22px rgba(242,201,76,1);transform:scale(1.25);}}
  .dl-grille.fin .dl-noeud{box-shadow:0 0 18px rgba(242,201,76,1);}
  .dl-fin-g,.dl-fin-p{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;min-height:0;overflow:hidden;}
  .dl-fin-g{flex:1.55;background:var(--brocart),var(--bandeau);color:#fff;gap:6px;}
  .dl-fin-p{flex:1;background:#fdeef4;gap:8px;}
  .dl-fin-g.haut,.dl-fin-p.haut{transform:rotate(180deg);}
  .dl-fin-p.bas{background:#eef6fd;}
  .dl-pill{font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#16233a;background:var(--or);border-radius:var(--rayon-pill);padding:5px 14px;}
  .dl-fin-g img{height:min(120px,18vh);width:auto;}
  .dl-fin-titre{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.5rem,6vw,2.3rem);line-height:1.05;}
  .dl-fin-p .dl-fin-titre{font-size:clamp(1.25rem,5vw,1.6rem);color:#d6336c;}
  .dl-fin-p.bas .dl-fin-titre{color:var(--bandeau);}
  .dl-fin-sous{font-size:.88rem;opacity:.9;}
  .dl-fin-p .dl-fin-sous{color:var(--encre-doux);opacity:1;}
  .dl-fin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:380px;margin-top:6px;}
  .dl-fin-stats div{background:rgba(255,255,255,.14);border-radius:14px;padding:8px;}
  .dl-fin-stats b{display:block;font-family:var(--police-titre);font-weight:800;}
  .dl-fin-stats span{font-size:.72rem;opacity:.85;}
  .dl-fin-act{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%;max-width:380px;margin-top:8px;}
  .dl-fin-act button,.dl-revanche{min-height:50px;border:none;border-radius:16px;font-family:var(--police-titre);font-weight:800;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;}
  .dl-rejouer{background:var(--or);color:#16233a;}
  .dl-sortir{background:rgba(255,255,255,.18);color:#fff;}
  .dl-revanche{background:#d6336c;color:#fff;}
  .dl-fin-p.bas .dl-revanche{background:var(--bandeau);}
  @media (min-width:700px){
    .dl-moitie{padding:18px 26px;}
    .dl-q{font-size:1.2rem;}
    .dl-opt{min-height:64px;font-size:1.2rem;}
    .dl-grille{grid-template-columns:minmax(0,1fr) 46px;}
    .dl-noeud{left:7px;}
  }
  @media (max-height:640px){
    .dl-opt{min-height:42px;font-size:.92rem;}
    .dl-q svg.portee{width:min(180px,60%);}
    .dl-bande{height:50px;}
  }
  /* ================= Défis à retardement ================= */
  .df-hero h2{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.4rem,5.6vw,1.7rem);line-height:1.05;margin:12px 0 0;color:#fff;}
  .df-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;}
  .df-etapes>div{background:rgba(255,255,255,.13);border-radius:12px;padding:8px 6px;text-align:center;}
  .df-etapes b{display:block;font-family:var(--police-titre);font-weight:800;color:var(--or);}
  .df-etapes span{display:block;font-size:.72rem;line-height:1.2;opacity:.92;}
  .df-code{display:block;width:100%;margin-top:6px;height:54px;border-radius:12px;border:2px solid var(--bandeau);background:#fff;text-align:center;font-family:var(--police-titre);font-weight:800;font-size:1.6rem;letter-spacing:8px;color:var(--laiton);text-transform:uppercase;outline:none;padding:0 0 0 8px;}
  .df-code::placeholder{color:#c3cfdd;}
  .df-code:focus{box-shadow:0 0 0 4px rgba(35,116,176,.18);}
  .df-note{font-size:.8rem;color:var(--encre-doux);margin-top:6px;line-height:1.4;}
  .df-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .df-mises{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px;}
  .df-mise{min-height:52px;border:none;border-radius:12px;background:var(--fond-app);font-family:var(--police-titre);font-weight:800;font-size:1.25rem;color:var(--encre);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;}
  .df-mise small{font-size:.7rem;font-weight:700;color:var(--encre-doux);}
  .df-mise.on{background:var(--or);color:#16233a;box-shadow:0 6px 16px rgba(142,109,11,.25);}
  .df-mise.on small{color:#16233a;}
  .df-mise:disabled{opacity:.4;cursor:not-allowed;}
  .df-err{background:#fdecec;color:var(--faux);border-radius:12px;padding:10px 12px;font-size:.86rem;font-weight:600;line-height:1.4;}
  .df-bouton2{width:100%;min-height:50px;border-radius:16px;border:1px solid var(--ligne);background:#fff;color:var(--laiton);font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
  .df-bouton2:hover{background:var(--fond-app);}
  .df-av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--fond-app);color:var(--laiton);display:inline-flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:.9rem;letter-spacing:.5px;}
  .df-av.rose{background:#d6336c;color:#fff;} .df-av.vert{background:#e3f5ee;color:var(--juste);}
  .df-av.grand{width:60px;height:60px;font-size:1.2rem;}
  .df-msg-ic .df-av.grand{width:72px;height:72px;font-size:1.4rem;border:3px solid #fff;}
  .df-recu{display:flex;align-items:center;gap:14px;margin-top:14px;}
  .df-recu h2{font-family:var(--police-titre);font-weight:800;font-size:1.5rem;line-height:1.05;margin:0;color:#fff;}
  .df-recu h2 b{color:var(--or);letter-spacing:1px;}
  .df-recu p{margin:4px 0 0;font-size:.86rem;opacity:.9;}
  .df-abattre{display:flex;align-items:center;gap:12px;margin-top:14px;background:rgba(255,255,255,.14);border-radius:14px;padding:10px 14px;}
  .df-abattre>i{font-size:1.6rem;color:var(--or);}
  .df-abattre span{display:block;font-size:.72rem;opacity:.85;}
  .df-abattre b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.6rem;line-height:1;}
  .df-abattre b.petit{font-size:1.05rem;}
  .df-abattre.clair{background:#fdeef4;color:var(--encre);margin-top:10px;}
  .df-abattre.clair>i,.df-abattre.clair b{color:#d6336c;}
  .df-abattre.clair b.petit{color:var(--encre);}
  .df-abattre.clair span{color:var(--encre-doux);opacity:1;}
  .df-regles{display:flex;flex-direction:column;gap:10px;}
  .df-regles>div{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.4;}
  .df-regles i{font-size:1.25rem;color:var(--bandeau);flex:none;margin-top:1px;}
  .df-jeu{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
  .df-tete{background:var(--brocart),var(--bandeau);color:#fff;border-radius:22px;padding:12px 16px 14px;box-shadow:var(--ombre-forte);}
  .df-qnum{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;}
  .df-sec{min-width:44px;text-align:right;font-family:var(--police-titre);font-weight:800;color:var(--or);font-size:1.1rem;}
  .df-chrono{height:6px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:10px;}
  .df-chrono i{display:block;height:100%;width:100%;background:var(--or);border-radius:4px;}
  .df-pistes{display:flex;flex-direction:column;gap:24px;margin:24px 18px 8px;}
  .df-piste{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.18);}
  .df-piste>i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--or);transition:width .6s ease;}
  .df-piste.fantome>i{background:repeating-linear-gradient(90deg,rgba(255,194,214,.95) 0 8px,rgba(255,194,214,.45) 8px 14px);}
  .df-pion{position:absolute;top:50%;transform:translate(-50%,-50%);min-width:36px;height:36px;padding:0 4px;border-radius:18px;background:#fff;color:var(--bandeau);border:3px solid var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:.68rem;transition:left .6s ease;}
  .df-piste.fantome .df-pion{min-width:32px;height:32px;background:rgba(214,51,108,.65);color:#fff;border:2px dashed #ffc2d6;}
  .df-scores{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;margin-top:12px;}
  .df-scores b{font-family:var(--police-titre);font-size:1.05rem;color:var(--or-clair);}
  .df-scores span:last-child b{color:#ffc2d6;}
  .df-carte{background:#fff;border:1px solid var(--ligne);border-radius:22px;padding:16px;box-shadow:0 12px 34px rgba(30,58,99,.10);}
  .df-q{text-align:center;font-size:1.05rem;line-height:1.4;color:var(--encre);}
  .df-q svg.portee{width:min(260px,80%);height:auto;margin:6px auto 0;display:block;}
  .df-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .df-opt{min-height:58px;border-radius:16px;background:#fff;border:2px solid var(--ligne);font-family:var(--police-titre);font-weight:800;font-size:1.08rem;color:var(--encre);cursor:pointer;padding:6px 8px;line-height:1.15;transition:transform .1s;}
  .df-opt:hover:not(:disabled){border-color:var(--bandeau);}
  .df-opt:active:not(:disabled){transform:scale(.97);}
  .df-opt:disabled{cursor:default;}
  .df-opt.juste{background:var(--juste);border-color:var(--juste);color:#fff;}
  .df-opt.faux{background:var(--faux);border-color:var(--faux);color:#fff;}
  .df-indice{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;background:#fff;border:1px dashed var(--ligne);border-radius:14px;padding:10px 12px;font-size:.86rem;}
  .df-indice>i{font-size:1.15rem;color:var(--bandeau);}
  .df-indice span{flex:1;min-width:0;}
  .df-indice.rose{border-color:#d6336c;} .df-indice.rose>i{color:#d6336c;}
  .df-indice.juste{border:1px solid var(--juste);} .df-indice.juste>i{color:var(--juste);}
  .df-indice.faux{border:1px solid var(--faux);} .df-indice.faux>i{color:var(--faux);}
  .df-fant{flex-basis:100%;color:#d6336c;font-weight:600;}
  .df-fin-tete,.df-msg-tete{text-align:center;}
  .df-msg-tete{padding-top:26px;padding-bottom:24px;}
  .df-pill{font-size:.76rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;border-radius:var(--rayon-pill);padding:5px 14px;background:rgba(255,255,255,.2);color:#fff;}
  .df-pill.gagne{background:var(--or);color:#16233a;}
  .df-perso{height:100px;width:auto;margin:8px auto 0;display:block;}
  .df-fin-tete h2,.df-msg-tete h2{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.5rem,6vw,1.9rem);line-height:1.05;margin:6px 0 0;color:#fff;}
  .df-duo{display:flex;justify-content:center;gap:34px;margin-top:10px;}
  .df-duo b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.9rem;line-height:1;}
  .df-duo b.or{color:var(--or);}
  .df-duo span{font-size:.76rem;opacity:.85;}
  .df-courbe{width:100%;height:110px;display:block;margin-top:10px;}
  .df-legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;margin-top:6px;align-items:center;}
  .df-legende i{display:inline-block;width:14px;height:3px;margin-right:5px;vertical-align:middle;}
  .df-legende i.bleu{background:var(--bandeau);} .df-legende i.rose{background:#d6336c;}
  .df-devant{margin-left:auto;color:var(--encre-doux);}
  .df-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .df-stats .dl-carte{text-align:center;}
  .df-stats b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.3rem;}
  .df-stats b.juste{color:var(--juste);} .df-stats b.faux{color:var(--faux);} .df-stats b.or{color:var(--or-texte);}
  .df-stats span{font-size:.76rem;color:var(--encre-doux);}
  .df-msg-ic{display:flex;justify-content:center;font-size:2.6rem;color:var(--or);}
  .df-msg-txt{text-align:center;line-height:1.55;}
  .df-gros{font-family:var(--police-titre);font-size:2rem;color:var(--laiton);}
  .df-onglets{display:flex;gap:4px;background:rgba(255,255,255,.14);border-radius:var(--rayon-pill);padding:4px;margin-top:14px;}
  .df-onglets button{flex:1;border:none;background:none;color:#fff;font-family:inherit;font-size:.84rem;font-weight:600;min-height:40px;border-radius:var(--rayon-pill);cursor:pointer;white-space:nowrap;padding:0 4px;}
  .df-onglets button.on{background:#fff;color:var(--laiton);font-weight:700;}
  .df-onglets button b{color:var(--or);} .df-onglets button.on b{color:#d6336c;}
  .df-liste{display:flex;flex-direction:column;gap:10px;}
  .df-item{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:12px 14px;}
  .df-item.recu{border:2px solid #d6336c;}
  .dl-lobby .df-item.recu .sv-cta{margin-top:10px;height:50px;font-size:1.05rem;box-shadow:none;}
  .df-item.cliquable{cursor:pointer;} .df-item.cliquable:hover{border-color:var(--bandeau);}
  .df-item-l{display:flex;align-items:center;gap:12px;}
  .df-item-t{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;letter-spacing:.5px;}
  .df-item-s{font-size:.78rem;color:var(--encre-doux);}
  .df-etat{font-size:.76rem;font-weight:700;color:var(--encre-doux);text-align:right;max-width:40%;}
  .df-etat.juste{color:var(--juste);} .df-etat.faux{color:var(--faux);}
  .df-vide{text-align:center;color:var(--encre-doux);margin:18px 0;}
  /* ================= Survie : l'ascension ================= */
  .sv-lobby{max-width:560px;margin:0 auto;border-radius:26px;overflow:hidden;background:var(--brocart),var(--bandeau);color:#fff;padding:18px 18px 20px;box-shadow:var(--ombre-forte);}
  .sv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .sv-btn-rond{width:44px;height:44px;flex:none;border-radius:14px;border:none;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;}
  .sv-btn-rond:hover{background:rgba(255,255,255,.25);}
  .sv-label{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--or);}
  .sv-lobby .jeu-joker{color:#ffe08a;border-color:#ffe08a;}
  .sv-hero{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:end;margin-top:14px;}
  .sv-apercu{position:relative;height:230px;display:flex;flex-direction:column-reverse;gap:4px;}
  .sv-apercu span{height:13px;border-radius:5px;background:rgba(242,201,76,var(--a,.3));}
  .sv-apercu span.vide{background:none;border:1.5px dashed rgba(255,255,255,.35);}
  .sv-drapeau{position:absolute;left:50%;display:flex;align-items:center;gap:3px;font-size:.74rem;font-weight:800;color:var(--or);white-space:nowrap;transform:translate(-50%,50%);background:#16233a;border-radius:var(--rayon-pill);padding:2px 8px;box-shadow:0 4px 12px rgba(0,0,0,.25);}
  .sv-hero h2{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.05;margin:0;color:#fff;}
  .sv-hero p{font-size:.9rem;color:rgba(255,255,255,.88);margin:8px 0 0;line-height:1.45;}
  .sv-hero p b{color:var(--or-clair);}
  .sv-theme{margin-top:20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:14px;display:flex;align-items:center;gap:12px;}
  .sv-mini{font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7);}
  .sv-theme-nom{font-family:var(--police-titre);font-weight:800;font-size:1.1rem;line-height:1.2;}
  .sv-theme-rec{font-size:.8rem;color:var(--or-clair);}
  .sv-pill-btn{border:1px solid rgba(255,255,255,.45);background:none;color:#fff;border-radius:var(--rayon-pill);padding:9px 15px;font-family:inherit;font-weight:700;font-size:.84rem;cursor:pointer;white-space:nowrap;min-height:40px;}
  .sv-pill-btn:hover{background:rgba(255,255,255,.14);}
  .sv-themes{margin-top:10px;background:#fff;color:var(--encre);border-radius:16px;padding:10px;max-height:340px;overflow:auto;}
  .sv-diffs{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
  .sv-diff{display:flex;align-items:center;gap:12px;min-height:52px;border-radius:14px;padding:0 14px;background:rgba(255,255,255,.13);border:none;color:#fff;font-family:inherit;cursor:pointer;text-align:left;width:100%;}
  .sv-diff b{font-family:var(--police-titre);font-weight:800;font-size:1rem;flex:1;}
  .sv-diff span{font-size:.82rem;opacity:.85;}
  .sv-diff i{font-size:1.3rem;}
  .sv-diff:hover{background:rgba(255,255,255,.2);}
  .sv-diff.on{background:#fff;color:var(--laiton);}
  .sv-diff.on span{color:var(--encre-doux);opacity:1;}
  .sv-regle{margin:12px 2px 0;font-size:.84rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px;}
  .sv-rappel>div{color:var(--encre);}
  .sv-cta{margin-top:16px;width:100%;height:56px;border:none;border-radius:16px;background:var(--or);color:#16233a;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:8px;}
  .sv-cta:active{transform:scale(.98);}
  .sv-cta:disabled{opacity:.5;cursor:not-allowed;}
  .survie-screen.sv-jeu{padding:14px 12px 30px;}
  .sv-grille{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;max-width:760px;margin:0 auto;min-height:calc(100vh - 70px);}
  .sv-rail{background:rgba(16,40,70,.22);border-radius:20px;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .sv-tour{flex:1;width:34px;display:flex;flex-direction:column-reverse;gap:3px;min-height:260px;}
  .sv-seg{flex:1;min-height:5px;border-radius:4px;background:rgba(255,255,255,.16);position:relative;transition:background .25s,box-shadow .25s;}
  .sv-seg.lit{background:var(--or);}
  .sv-seg.lit.top{background:var(--or-clair);box-shadow:0 0 12px rgba(242,201,76,.9);}
  .sv-seg.bonus::after{content:"";position:absolute;right:-8px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--or-clair);transform:translateY(-50%);}
  .sv-seg.rec{box-shadow:0 0 0 2px var(--or);}
  .sv-seg.rec.lit{box-shadow:0 0 0 2px #fff;}
  .sv-seg.arrive{animation:svArrive .55s cubic-bezier(.34,1.56,.64,1);}
  @keyframes svArrive{0%{transform:scaleX(.3) translateY(16px);opacity:0;}60%{transform:scaleX(1.3);opacity:1;}100%{transform:none;}}
  .sv-seg.tombe{animation:svTombe .85s ease-in;}
  @keyframes svTombe{0%{transform:none;background:var(--or);opacity:1;}35%{transform:translateY(-5px) rotate(-10deg);background:#ff8a7a;}100%{transform:translate(10px,70px) rotate(35deg);opacity:0;}}
  .sv-rail-rec{font-size:.64rem;font-weight:800;color:var(--or);text-align:center;line-height:1.2;}
  .sv-principal{display:flex;flex-direction:column;min-width:0;}
  .sv-hud{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .sv-etage span{display:block;font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7);}
  .sv-etage-n{display:inline-block;font-family:var(--police-titre);font-weight:800;font-size:2.8rem;line-height:.9;color:#fff;}
  .sv-etage-n.monte{animation:svNumMonte .55s ease;}
  @keyframes svNumMonte{0%{transform:none;}35%{transform:translateY(-16px) scale(1.25);color:var(--or-clair);}100%{transform:none;}}
  .sv-etage-n.chute{animation:svNumChute .75s ease;}
  @keyframes svNumChute{0%{transform:none;}30%{transform:translateY(18px) scale(.85);color:#ffb3aa;}100%{transform:none;}}
  .sv-hud-d{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .sv-hud-info{font-size:.8rem;color:rgba(255,255,255,.85);}
  .sv-temps{display:flex;align-items:center;gap:10px;margin:10px 0 12px;}
  .sv-temps .timebar{flex:1;margin:0;height:10px;}
  .sv-secs{font-family:var(--police-titre);font-weight:800;color:var(--or);white-space:nowrap;min-width:38px;text-align:right;}
  .sv-secs.perte{animation:svPerte .8s ease;color:#ffb3aa;}
  @keyframes svPerte{0%,100%{transform:none;}30%{transform:scale(1.4);}}
  .sv-penal{margin-top:12px;text-align:center;font-size:.84rem;color:#ffe08a;}
  .sv-penal.ok{color:rgba(255,255,255,.8);}
  .survie-screen.sv-secoue .sv-grille{animation:svSecoue .5s;}
  @keyframes svSecoue{0%,100%{transform:none;}20%{transform:translate(-9px,4px);}40%{transform:translate(8px,-2px);}60%{transform:translate(-5px,2px);}80%{transform:translate(3px,0);}}
  .sv-float{position:fixed;left:50%;top:36%;font-family:var(--police-titre);font-weight:800;font-size:2.8rem;pointer-events:none;z-index:9100;text-shadow:0 4px 18px rgba(0,0,0,.35);white-space:nowrap;}
  .sv-float.plus{color:var(--or-clair);animation:svFloatUp .95s ease forwards;}
  .sv-float.moins{color:#ffb3aa;font-size:1.9rem;animation:svFloatDown 1.15s ease forwards;}
  @keyframes svFloatUp{0%{opacity:0;transform:translate(-50%,24px) scale(.6);}25%{opacity:1;transform:translate(-50%,0) scale(1.1);}100%{opacity:0;transform:translate(-50%,-80px);}}
  @keyframes svFloatDown{0%{opacity:0;transform:translate(-50%,-14px);}20%{opacity:1;}100%{opacity:0;transform:translate(-50%,90px);}}
  .sv-chute-msg{text-align:center;padding:14px 8px;animation:hypePop2 .45s ease;}
  .sv-chute-msg .t1{font-family:var(--police-titre);font-weight:800;font-size:1.35rem;color:var(--faux);}
  .sv-chute-msg .t2{margin-top:6px;color:var(--encre);}
  .sv-chute-msg .t3{margin-top:6px;color:var(--encre-doux);font-size:.9rem;}
  .survie-over.sv-fin{justify-content:flex-start;overflow-y:auto;padding:24px 18px;}
  .sv-fin-in{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;text-align:left;margin:auto;}
  .sv-fin-tete{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:end;}
  .sv-fin-pill{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#16233a;background:var(--or);border-radius:var(--rayon-pill);padding:5px 12px;}
  .sv-fin-n{display:flex;align-items:baseline;gap:8px;margin-top:10px;}
  .sv-fin-n b{font-family:var(--police-titre);font-weight:800;font-size:4.2rem;line-height:.85;color:var(--or);}
  .sv-fin-n span{opacity:.88;}
  .sv-fin-titre{font-family:var(--police-titre);font-weight:800;font-size:1.35rem;line-height:1.15;margin-top:6px;}
  .survie-over .sv-fin-tete img{height:130px;width:auto;justify-self:center;margin:0;}
  .sv-fin-raison{font-size:.88rem;opacity:.92;}
  .sv-histo{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:22px 14px 12px;}
  .sv-barres{display:flex;align-items:flex-end;gap:6px;height:110px;}
  .sv-barres span{flex:1;border-radius:5px 5px 0 0;background:rgba(255,255,255,.32);position:relative;}
  .sv-barres span.der{background:var(--or);}
  .sv-barres span i{position:absolute;top:-17px;left:0;right:0;text-align:center;font-style:normal;font-size:.72rem;font-weight:800;}
  .sv-histo-l{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;opacity:.8;margin-top:6px;}
  .sv-histo-l .or{color:var(--or);font-weight:700;opacity:1;}
  .sv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .sv-stats div{background:rgba(255,255,255,.13);border-radius:14px;padding:10px 6px;text-align:center;}
  .sv-stats b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.25rem;}
  .sv-stats span{font-size:.74rem;opacity:.82;}
  .sv-derniere{background:#fff;color:var(--encre);border-radius:14px;padding:10px 12px;font-size:.86rem;line-height:1.45;}
  .survie-over .sv-derniere .solution{color:var(--encre);}
  .survie-over .sv-derniere .solution b{color:var(--laiton);}
  .sv-fin-act{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px;margin-top:4px;}
  .survie-over .sv-fin-act button{margin:0;height:56px;padding:0 10px;border-radius:16px;font-size:1.15rem;display:flex;align-items:center;justify-content:center;gap:8px;}
  .survie-over .sv-fin-act .sv-remonter{background:var(--or);color:#16233a;}
  .survie-over .sv-fin-act .ghost{font-size:.95rem;}
  @media (max-width:420px){
    .sv-grille{grid-template-columns:50px minmax(0,1fr);gap:10px;}
    .sv-rail{padding:8px 6px 10px;}
    .sv-tour{width:26px;}
    .sv-rail .sv-btn-rond{width:40px;height:40px;}
    .sv-etage-n{font-size:2.3rem;}
    .sv-hero{grid-template-columns:70px minmax(0,1fr);gap:14px;}
    .sv-apercu{height:200px;}
  }
  .survie-intro,.survie-over{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px;animation:transFade .4s ease;
    background:var(--brocart),var(--bandeau);}
  .survie-intro .si-emoji,.survie-over .so-emoji{font-size:4rem;animation:hypePop 1s ease;}
  .survie-over .so-perso{height:150px;width:auto;margin-bottom:2px;animation:hypePop 1s ease;}
  .survie-intro h1,.survie-over h1{font-family:var(--police-titre);font-weight:900;font-size:clamp(2rem,9vw,3.4rem);margin:.1em 0;}
  .survie-intro p,.survie-over p{opacity:.92;max-width:420px;line-height:1.5;}
  .survie-over .so-score{font-family:var(--police-titre);font-weight:900;font-size:clamp(3rem,16vw,5.5rem);color:#fff;margin:.05em 0;text-shadow:0 4px 20px rgba(0,0,0,.3);}
  .survie-over .so-record{color:#7bd39b;font-weight:800;font-size:1.2rem;margin-top:4px;}
  /* la réponse affichée sur le fond violet doit rester lisible (blanc/jaune) */
  .survie-over .solution{color:#fff;}
  .survie-over .solution b{color:#ffe27a;}
  .survie-intro button,.survie-over button{margin-top:20px;background:#fff;color:#5b2a9e;border:none;border-radius:14px;
    padding:14px 34px;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.3);}
  .survie-over button.ghost{background:rgba(255,255,255,.22);color:#fff;}
  .defi-banniere{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);border:1px solid #c89bf5;color:#5b2a9e;
    border-radius:var(--rayon);padding:12px 16px;margin-bottom:16px;font-size:.92rem;}
  /* carte « Défi du jour » */
  /* Bleu marine plein + motif brocart (--menu-h/--menu-b sont blancs depuis
     « Ruban & Médaille » : un dégradé entre les deux ferait du texte blanc
     sur fond blanc). */
  .defi-jour-carte{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:var(--brocart),var(--bandeau);color:#fff;border-radius:var(--rayon);padding:16px 18px;margin:20px 0;box-shadow:var(--ombre-douce);}
  .defi-jour-carte .djc-txt{display:flex;flex-direction:column;gap:3px;min-width:200px;flex:1;}
  .defi-jour-carte .djc-txt b{font-size:1.05rem;}
  .defi-jour-carte .djc-txt span{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.4;}
  .defi-jour-carte .djc-txt b span,.defi-jour-carte .djc-txt span b{color:var(--or-texte);}
  .defi-jour-carte.fait{opacity:.92;}
  .defi-jour-carte .djc-fait{font-weight:800;color:#7bd39b;font-size:1.05rem;white-space:nowrap;}
  /* ===== MODE PROJECTION (affichage au tableau, gros caractères) ===== */
  .app-btn.on{background:var(--laiton);color:#fff;}
  .proj-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;
    background:var(--encre);color:#fff;padding:12px 22px;border-radius:30px;font-size:1rem;font-weight:600;
    box-shadow:var(--ombre);max-width:90vw;text-align:center;animation:slideDown .35s ease;}
  .proj-toast.sortie{animation:badgeOut .4s ease forwards;}
  body.projection main{padding:30px 48px 90px;}
  body.projection .barre h1{font-size:2.3rem;line-height:1.15;overflow-wrap:break-word;}
  body.projection .barre{flex-wrap:wrap;}
  body.projection .barre>div:first-child{min-width:0;flex:1 1 100%;}
  body.projection .barre p,body.projection #intro{font-size:1.25rem;max-width:none;}
  body.projection .reglages{font-size:1.15rem;gap:24px;padding:16px 24px;}
  body.projection .seg button,body.projection .reglages select{font-size:1.15rem;padding:10px 18px;}
  body.projection .ex{padding:26px 32px;margin-bottom:24px;border-width:2px;overflow:hidden;}
  body.projection .ex *{max-width:100%;}
  body.projection .ex .consigne{font-size:1.7rem;line-height:1.5;}
  body.projection .ex .num{font-size:1.9rem;}
  body.projection .grand{font-size:2.4rem;}
  body.projection .reponse-zone{margin-top:14px;}
  body.projection select.rep,body.projection input.rep{font-size:1.5rem;padding:12px 16px;border-width:2px;max-width:100%;}
  body.projection .choix-btns{gap:14px;}
  body.projection .choix-btns .opt{font-size:1.45rem;padding:14px 24px;}
  body.projection input.rep{width:auto;min-width:220px;}
  body.projection .choix{gap:12px;}
  body.projection .choix label{padding:12px 18px;font-size:1.4rem;max-width:100%;}
  body.projection .btn-son{font-size:1.4rem;padding:14px 26px;}
  body.projection .btn-son.mini{font-size:1.5rem;padding:6px 16px;}
  body.projection .choix label svg.portee{width:340px;margin:14px 0;}
  body.projection .verdict{font-size:1.4rem;}
  body.projection .verdict .solution{font-size:1.2rem;}
  body.projection button.action{font-size:1.4rem;padding:16px 30px;}
  body.projection .bas-actions{margin-top:34px;}
  body.projection .score-bandeau{font-size:1.5rem;padding:20px 28px;}
  body.projection .score-bandeau .gros{font-size:2.2rem;}
  body.projection .ex-entete img{width:auto;height:84px;}
  body.projection .ex-entete .ee-eyebrow{font-size:.95rem;}
  body.projection .ex-entete .ee-txt{font-size:1.2rem;}
  body.projection .lecon{max-width:none;}
  body.projection .lecon .carte{padding:30px 40px;}
  body.projection .lecon h2{font-size:2.3rem;}
  body.projection .lecon h3{font-size:1.7rem;}
  /* anti-débordement global du texte agrandi en projection */
  /* « word-break:break-word » autorisait une coupure N'IMPORTE OÙ : « instruments »
     devenait « instrument » + « s » à la ligne. « overflow-wrap » ne coupe que
     lorsqu'un mot ne tient vraiment pas, ce qui est le comportement voulu. */
  body.projection h1,body.projection h2,body.projection h3,body.projection .consigne,body.projection p,body.projection li{overflow-wrap:break-word;}
  body.projection .lecon p,body.projection .lecon li,body.projection .lecon .cle,body.projection .lecon .astuce{font-size:1.4rem;line-height:1.6;}
  body.projection .lecon table.gr td,body.projection .lecon table.gr th{font-size:1.35rem;padding:10px 18px;}
  /* Ne PAS imposer 90x90 : cela écrasait la mascotte en carré et la rendait
     plus petite qu'en affichage normal. On la laisse proportionnelle, en un peu
     plus grand puisque la bannière grandit aussi. */
  body.projection .lecon-entete .perso{height:clamp(150px,90%,240px);width:auto;}
  /* on agrandit aussi la portée des exercices de lecture */
  body.projection .consigne svg.portee{width:380px;margin:18px 0;}
  /* Images et schémas : ils gardaient leur taille d'origine et paraissaient
     minuscules à côté d'un texte doublé. « zoom » agrandit en RÉSERVANT la
     place, contrairement à transform:scale qui ferait se chevaucher le texte. */
  body.projection .lecon img:not(.perso),
  body.projection .lecon svg,
  body.projection .lecon .schema-voix,
  body.projection .lecon .poumon-d,
  body.projection .lecon .poumon-g,
  body.projection .ce-img,
  body.projection .ce-corps img,
  body.projection .ce-corps svg{zoom:1.55;max-width:100%;height:auto;}
  /* les schémas interactifs sont des blocs entiers : on agrandit le conteneur */
  body.projection .lecon .encart-gamme,
  body.projection .lecon figure{zoom:1.4;}
  /* « S'entraîner » et « Évaluation » restaient en taille normale */
  body.projection .lecon-cta{gap:26px;}
  body.projection .lcc{padding:26px 22px;}
  body.projection .lcc-ic{width:76px;height:76px;font-size:2rem;}
  body.projection .lcc-titre{font-size:1.7rem;}
  body.projection .lcc-desc{font-size:1.15rem;}
  body.projection .lcc-btn{font-size:1.25rem;padding:13px 22px;}
  /* éléments superflus masqués en projection */
  body.projection .signature{display:none;}
  .prog-jetons{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;}
  .prog-jetons i{width:11px;height:11px;border-radius:50%;border:2px solid var(--laiton);background:transparent;transition:background .3s,transform .3s;}
  .prog-jetons i.plein{background:var(--laiton);}
  .prog-jetons.clair i{border-color:#e7eef6;} .prog-jetons.clair i.plein{background:#F2C94C;border-color:#F2C94C;}
  .prog-jetons.grand i{width:16px;height:16px;border-width:3px;}
  .prog-jetons.grand i.plein{box-shadow:0 0 0 3px rgba(242,201,76,.25);}
  .prog-niv .pn-carte{background:var(--surface-2,#faf8f3);border:1px solid var(--ligne);border-radius:14px;padding:10px 14px;margin-top:8px;}
  .prog-niv .pn-haut{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .prog-niv .pn-lib{font-family:var(--police-titre);font-weight:800;font-size:1rem;color:var(--laiton);}
  .prog-niv .pn-compte{font-family:var(--police-titre);font-weight:800;margin-left:auto;color:var(--encre);}
  .prog-niv .pn-bas{font-size:.84rem;color:var(--encre-doux);line-height:1.45;margin-top:6px;}
  .prog-niv .pn-fait{color:var(--juste);font-weight:600;margin-top:8px;}
  .prog-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1400;max-width:min(420px,92vw);
    background:var(--surface);border:2px solid var(--laiton);border-radius:18px;padding:14px 18px;text-align:center;
    box-shadow:0 16px 44px rgba(0,0,0,.28);animation:ptEntre .4s cubic-bezier(.2,1.3,.4,1) both;cursor:pointer;}
  .prog-toast.raz{border-color:var(--faux);}
  .prog-toast .pt-tete{font-family:var(--police-titre);font-weight:800;font-size:1.1rem;color:var(--laiton);margin-bottom:8px;}
  .prog-toast.raz .pt-tete{color:var(--faux);}
  .prog-toast .pt-sous{font-size:.88rem;color:var(--encre-doux);line-height:1.45;margin-top:8px;}
  .prog-toast.sortie{animation:ptSort .35s ease forwards;}
  @keyframes ptEntre{from{opacity:0;transform:translate(-50%,26px) scale(.9);}to{opacity:1;transform:translate(-50%,0) scale(1);}}
  @keyframes ptSort{to{opacity:0;transform:translate(-50%,20px) scale(.95);}}
  @media(max-width:560px){ .prog-toast{left:12px;right:12px;transform:none;max-width:none;}
    @keyframes ptEntre{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
    @keyframes ptSort{to{opacity:0;transform:translateY(20px);}} }
  .score-bandeau{display:none;position:sticky;top:12px;z-index:5;margin-bottom:18px;border-radius:var(--rayon);
    padding:14px 22px;font-weight:600;background:rgba(17,30,45,.72);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
    border:1px solid rgba(255,255,255,.12);color:#eef4fa;
    align-items:center;justify-content:space-between;gap:14px;box-shadow:0 12px 40px rgba(17,30,45,.28);animation:slideDown .4s ease;}
  .score-bandeau.visible{display:flex;}
  .score-bandeau .gros{font-family:var(--police-titre);font-size:1.5rem;color:var(--or-texte);}
  @keyframes slideDown{from{transform:translateY(-12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  /* ----- Fenêtre de bienvenue (1er lancement) ----- */
  /* ---------- Pop-up d'accueil (2 portes + Maestro) ---------- */
  /* ---------- Outil de vote de classe ---------- */
  .vt-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 18px;
    margin-bottom:12px;box-shadow:var(--ombre-douce);}
  .vt-haut{display:flex;gap:12px;align-items:flex-start;}
  .vt-titre{font-family:var(--police-titre);font-weight:700;font-size:1.08rem;color:var(--laiton);line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .vt-q{color:var(--encre-doux);font-size:.9rem;margin-top:2px;}
  .vt-meta{font-size:.8rem;color:var(--encre-doux);margin-top:6px;}
  .vt-ouvert{color:var(--juste);font-weight:700;} .vt-ferme{color:var(--faux);font-weight:700;}
  .vt-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:13px;padding-top:12px;border-top:1px solid var(--ligne);}
  .vt-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--police-titre);font-weight:700;font-size:.88rem;
    background:var(--or);color:#111E2D;border:none;border-radius:12px;padding:9px 15px;cursor:pointer;box-shadow:var(--ombre-douce);}
  .vt-go:hover{filter:brightness(1.05);}
  .vt-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);color:var(--encre);border:1px solid var(--ligne);
    border-radius:12px;padding:9px 13px;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:600;}
  .vt-btn:hover{background:var(--surface-2);}
  .vt-sup{margin-left:auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--ligne);background:var(--surface);
    color:var(--encre-doux);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
  .vt-sup:hover{color:var(--faux);border-color:var(--faux);}
  /* éditeur */
  .vt-l{display:block;font-size:.86rem;font-weight:700;color:var(--encre);}
  .vt-in{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--ligne);border-radius:10px;font-family:inherit;
    font-size:.95rem;background:var(--surface);color:var(--encre);box-sizing:border-box;}
  .vt-coche{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.9rem;color:var(--encre);}
  .vt-opt{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
  .vt-opt-img{width:46px;height:46px;flex:none;border-radius:11px;border:1px dashed var(--ligne);background:var(--surface-2);
    color:var(--encre-doux);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;font-size:1.15rem;}
  .vt-opt-img.a{border-style:solid;border-color:var(--or);}
  .vt-opt-img img{width:100%;height:100%;object-fit:cover;}
  .vt-opt-x{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--ligne);background:var(--surface);
    color:var(--encre-doux);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
  .vt-opt-x:hover{color:var(--faux);border-color:var(--faux);}
  /* projection en direct */
  .vt-board-q{font-family:var(--police-titre);font-weight:800;color:var(--laiton);text-align:center;line-height:1.15;
    font-size:clamp(1.4rem,3.2vw,2.3rem);margin:6px 0 22px;}
  .vt-barres{display:flex;flex-direction:column;gap:16px;}
  .vt-barre{background:var(--surface);border:1px solid var(--ligne);border-radius:16px;padding:13px 16px;box-shadow:var(--ombre-douce);}
  .vt-barre.gagne{border-color:var(--or);box-shadow:0 0 0 2px rgba(242,201,76,.4),var(--ombre-douce);}
  .vt-barre-tete{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
  .vt-barre-img{width:40px;height:40px;flex:none;border-radius:9px;object-fit:cover;}
  .vt-barre-lbl{flex:1;min-width:0;font-family:var(--police-titre);font-weight:700;font-size:1.05rem;color:var(--encre);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .vt-barre.gagne .vt-barre-lbl{color:var(--or-texte);}
  .vt-barre-n{font-family:var(--police-titre);font-weight:800;font-size:1.1rem;color:var(--laiton);}
  .vt-barre-piste{height:24px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
  .vt-barre-plein{height:100%;width:0;background:var(--degrade);border-radius:999px;transition:width .55s cubic-bezier(.34,1.1,.6,1);}
  .vt-barre.gagne .vt-barre-plein{background:linear-gradient(90deg,var(--or-clair),var(--or));}
  .vt-board-pied{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:24px;}
  .vt-total{font-family:var(--police-titre);font-weight:700;color:var(--encre-doux);font-size:1rem;}
  /* élève : liste + vote */
  .vt-carte-el{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);
    border:1px solid var(--ligne);border-radius:16px;padding:15px 18px;margin-bottom:11px;cursor:pointer;
    box-shadow:var(--ombre-douce);font-family:inherit;color:var(--encre);}
  .vt-carte-el:hover{border-color:var(--or);}
  .vt-carte-el .vt-titre{white-space:normal;}
  .vt-carte-el>i{margin-left:auto;color:var(--encre-doux);font-size:1.2rem;flex:none;}
  .vt-el-q{font-family:var(--police-titre);font-weight:800;color:var(--laiton);text-align:center;font-size:1.4rem;
    line-height:1.2;margin:4px 0 18px;}
  .vt-el-opts{display:flex;flex-direction:column;gap:12px;}
  .vt-el-opt{display:flex;align-items:center;gap:13px;text-align:left;background:var(--surface);border:2px solid var(--ligne);
    border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;color:var(--encre);min-height:60px;
    transition:border-color .15s ease,transform .1s ease;}
  .vt-el-opt:hover{border-color:var(--bandeau);} .vt-el-opt:active{transform:scale(.99);}
  .vt-el-opt.sel{border-color:var(--or);background:var(--teinte-douce);}
  .vt-el-opt[disabled]{cursor:default;opacity:.65;}
  .vt-el-img{width:54px;height:54px;flex:none;border-radius:12px;object-fit:cover;}
  .vt-el-ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--teinte-douce);color:var(--or-texte);
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
  .vt-el-txt{flex:1;min-width:0;font-family:var(--police-titre);font-weight:700;font-size:1.05rem;}
  .vt-el-badge{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--or-texte);flex:none;}
  /* carte d'accueil élève */
  .vt-accueil{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--or);
    border-radius:16px;padding:13px 16px;margin-bottom:20px;cursor:pointer;box-shadow:var(--ombre-douce);}
  .vt-accueil:hover{filter:brightness(1.01);box-shadow:var(--ombre);}
  .vt-accueil-ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--degrade);color:var(--or);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
  .vt-accueil b{display:block;font-family:var(--police-titre);color:var(--laiton);}
  .vt-accueil span{display:block;font-size:.85rem;color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .vt-accueil>i{margin-left:auto;color:var(--encre-doux);font-size:1.2rem;flex:none;}
  .vt-go i,.vt-accueil-ic i,.vt-el-ic i{color:inherit;text-shadow:none;}
  .tv-per-clos{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.22);color:#fff;padding:2px 9px;border-radius:999px;margin-left:6px;}
  .tv-histperiodes{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow:auto;}
  .tv-perline{display:flex;align-items:center;gap:10px;border:1px solid var(--ligne);border-radius:12px;padding:10px 12px;}
  .tv-perline.actif{border-color:var(--or);background:var(--teinte-douce);}
  .tv-tuile[draggable]{cursor:grab;} .tv-tuile[draggable]:active{cursor:grabbing;}
  .tv-appel{align-items:center;text-align:center;}
  .tv-appel-st{font-family:var(--police-titre);font-weight:800;font-size:1.5rem;line-height:1;}
  .tv-appel-lbl{font-size:.68rem;color:var(--encre-doux);}
  .tv-legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-2px 0 12px;font-size:.78rem;color:var(--encre-doux);}
  .tv-legende span{display:inline-flex;align-items:center;gap:6px;}
  .tv-legende i{width:11px;height:11px;border-radius:3px;display:inline-block;}
  .tv-datel{font-size:.85rem;color:var(--encre-doux);display:inline-flex;align-items:center;gap:6px;}
  .tv-datel input{padding:6px 8px;border:1px solid var(--ligne);border-radius:8px;font-family:inherit;background:var(--surface);color:var(--encre);}
  .tv-recap{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow:auto;}
  .tv-recap-l{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;border:1px solid var(--ligne);border-radius:10px;font-size:.9rem;}
  .tv-recap-l span{font-weight:600;}
  .tv-appr{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow:auto;}
  .vt-btn.mini{padding:5px 10px;font-size:.8rem;}
  .tv-ct-form{display:flex;flex-direction:column;gap:8px;}
  .tv-ct-row{display:flex;gap:8px;flex-wrap:wrap;}
  .tv-ct-row .tv-ct-in{flex:1;min-width:120px;width:auto;}
  .tv-ct-in{width:100%;border:1px solid var(--ligne);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:.9rem;color:var(--encre);background:var(--surface);}
  textarea.tv-ct-in{resize:vertical;}
  .tv-ct-liste{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto;}
  .tv-ct-l{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--ligne);border-radius:12px;padding:9px 11px;}
  .tv-ct-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--teinte-douce);color:var(--bandeau);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
  .tv-ct-tete{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;}
  .tv-ct-suppr{flex:none;border:none;background:transparent;color:var(--encre-doux);cursor:pointer;padding:4px;border-radius:8px;}
  .tv-ct-suppr:hover{color:var(--faux);background:rgba(220,38,38,.1);}
  /* ---------- Travail en classe (plan + évaluation) ---------- */
  .tv-periode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--brocart),var(--degrade);
    color:#fff;border-radius:var(--rayon-s);padding:14px 18px;margin-bottom:14px;box-shadow:var(--ombre-douce);}
  .tv-per-nom{font-family:var(--police-titre);font-weight:800;font-size:1.12rem;display:flex;align-items:center;gap:8px;}
  .tv-per-nom i{color:var(--or);}
  .tv-per-date{font-size:.85rem;color:var(--or-clair);margin-top:2px;}
  .tv-per-act{display:flex;gap:8px;flex-wrap:wrap;}
  .tv-periode .vt-btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);}
  .tv-periode .vt-btn:hover{background:rgba(255,255,255,.24);}
  .tv-periode .vt-btn i{color:inherit;}
  .tv-outils{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;}
  .tv-modes{display:inline-flex;background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;padding:3px;gap:3px;}
  .tv-mode{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--encre-doux);
    font-family:inherit;font-weight:700;font-size:.86rem;padding:7px 13px;border-radius:9px;cursor:pointer;}
  .tv-mode.on{background:var(--surface);color:var(--laiton);box-shadow:var(--ombre-douce);}
  .tv-tableau{text-align:center;font-family:var(--police-titre);font-weight:700;color:#fff;background:var(--laiton);
    border-radius:10px;padding:6px;margin-bottom:12px;letter-spacing:.05em;font-size:.86rem;box-shadow:var(--ombre-douce);}
  .tv-tableau i{color:var(--or);}
  .tv-plan{display:grid;gap:9px;margin-bottom:14px;}
  .tv-canvas{position:relative;width:100%;height:min(66vh,560px);margin:10px 0 14px;border:1px solid var(--ligne);border-radius:var(--rayon-s);
    background-color:var(--surface-2);
    background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(30,58,99,.045) 27px 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(30,58,99,.045) 27px 28px);
    overflow:hidden;touch-action:none;}
  .tv-canvas .tv-tableau{position:absolute;top:8px;left:50%;transform:translateX(-50%);margin:0;width:auto;padding:6px 22px;z-index:1;}
  .tv-canvas .tv-tableau.bas{top:auto;bottom:8px;}
  .tv-canvas .tv-tableau.haut{top:8px;bottom:auto;}
  .tv-rangs-l{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--encre);margin-bottom:12px;}
  .tv-rangs-l input{width:80px;padding:7px 9px;border:1px solid var(--ligne);border-radius:8px;font-family:inherit;background:var(--surface);color:var(--encre);}
  .tv-canvas .tv-tuile{position:absolute;transform:translate(-50%,-50%);margin:0;width:118px;min-height:0;}
  .tv-canvas .tv-tuile:hover{transform:translate(-50%,-50%) translateY(-1px);}
  .tv-tuile.tv-placer{cursor:grab;-webkit-user-select:none;user-select:none;}
  .tv-noter{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;}
  .tv-behbar{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0 2px;}
  .tv-beh{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne);border-radius:999px;padding:7px 13px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;background:var(--surface);color:var(--encre);transition:transform .1s ease;}
  .tv-beh:hover{transform:translateY(-1px);}
  .tv-beh.pos{border-color:rgba(26,156,107,.4);} .tv-beh.pos b{color:var(--juste);}
  .tv-beh.neg{border-color:rgba(220,38,38,.35);} .tv-beh.neg b{color:var(--faux);}
  .tv-beh.on{background:var(--laiton);color:#fff;border-color:var(--laiton);box-shadow:0 6px 16px rgba(30,58,99,.28);} .tv-beh.on b{color:#fff;}
  .tv-hint{text-align:center;font-size:.82rem;color:var(--encre-doux);margin:2px 0 8px;}
  .tv-tuile.tv-swup{box-shadow:0 -7px 0 -3px var(--juste),0 12px 26px rgba(26,156,107,.35);transform:translate(-50%,-50%) translateY(-3px);}
  .tv-tuile.tv-swdown{box-shadow:0 7px 0 -3px var(--faux),0 12px 26px rgba(220,38,38,.35);transform:translate(-50%,-50%) translateY(3px);}
  .tv-tuile.tv-flash-pos{animation:tvFlashPos .6s ease;}
  .tv-tuile.tv-flash-neg{animation:tvFlashNeg .6s ease;}
  @keyframes tvFlashPos{0%{box-shadow:0 0 0 3px var(--juste);}100%{box-shadow:var(--ombre-douce);}}
  @keyframes tvFlashNeg{0%{box-shadow:0 0 0 3px var(--faux);}100%{box-shadow:var(--ombre-douce);}}
  .tv-tuile.tv-placer.drag{cursor:grabbing;box-shadow:0 14px 30px rgba(30,58,99,.3);opacity:.96;}
  .tv-tuile-x{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);
    background:var(--faux);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.66rem;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.22);}
  .tv-formes{display:flex;flex-direction:column;gap:8px;}
  .tv-forme{display:flex;align-items:center;gap:13px;text-align:left;border:1px solid var(--ligne);border-radius:12px;padding:11px 13px;background:var(--surface);cursor:pointer;font-family:inherit;color:var(--encre);}
  .tv-forme:hover{border-color:var(--bandeau);background:var(--teinte-douce);}
  .tv-forme i{font-size:1.5rem;color:var(--bandeau);flex:none;}
  .tv-forme span{display:flex;flex-direction:column;gap:2px;}
  .tv-forme small{color:var(--encre-doux);font-size:.8rem;}
  .tv-vide{min-height:64px;border:1.5px dashed var(--ligne);border-radius:12px;background:transparent;}
  .tv-vide[onclick]{cursor:pointer;} .tv-vide[onclick]:hover{border-color:var(--bandeau);background:var(--surface-2);}
  .tv-tuile{min-height:64px;border:1px solid var(--ligne);border-radius:12px;background:var(--surface);cursor:pointer;
    padding:8px 9px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--ombre-douce);
    transition:transform .1s ease,border-color .15s ease;overflow:hidden;}
  .tv-tuile:hover{border-color:var(--or);transform:translateY(-1px);}
  .tv-tuile-nom{font-weight:700;font-size:.86rem;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;}
  .tv-tuile-note{font-family:var(--police-titre);font-weight:800;font-size:1.2rem;line-height:1;}
  .tv-tuile-dern{font-size:.68rem;color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
  .tv-file{background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:12px 14px;box-shadow:var(--ombre-douce);}
  .tv-file-t{font-size:.8rem;font-weight:700;color:var(--encre-doux);margin-bottom:8px;}
  .tv-file-l{display:flex;flex-wrap:wrap;gap:8px;}
  .tv-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--ligne);
    border-radius:999px;padding:6px 12px;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--encre);cursor:pointer;}
  .tv-chip:hover{border-color:var(--bandeau);} .tv-chip.on{border-color:var(--or);background:var(--teinte-douce);}
  .tv-chip-n{font-family:var(--police-titre);font-weight:800;}
  /* popup comportements */
  .tv-comp-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  @media(max-width:480px){ .tv-comp-grille{grid-template-columns:1fr;} }
  .tv-comp{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--ligne);border-radius:13px;
    padding:11px 13px;background:var(--surface);cursor:pointer;font-family:inherit;color:var(--encre);}
  .tv-comp i{font-size:1.2rem;flex:none;}
  .tv-comp span{flex:1;min-width:0;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tv-comp b{font-family:var(--police-titre);font-weight:800;}
  .tv-comp.pos{border-color:rgba(26,156,107,.4);} .tv-comp.pos i,.tv-comp.pos b{color:var(--juste);}
  .tv-comp.pos:hover{background:var(--juste-fond);}
  .tv-comp.neg{border-color:rgba(220,38,38,.35);} .tv-comp.neg i,.tv-comp.neg b{color:var(--faux);}
  .tv-comp.neg:hover{background:var(--faux-fond);}
  .tv-histo{margin-top:14px;border-top:1px solid var(--ligne);padding-top:10px;}
  .tv-histo-t{font-size:.75rem;font-weight:700;color:var(--encre-doux);margin-bottom:6px;}
  .tv-histo-l{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;padding:3px 0;color:var(--encre);}
  .tv-histo-l b{font-family:var(--police-titre);}
  /* réglages comportements */
  .tv-cset{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
  .tv-cset i{font-size:1.2rem;flex:none;width:24px;text-align:center;}
  .tv-cset .vt-in{margin-top:0;}
  /* retour élève */
  .tv-fb-l{display:flex;flex-direction:column;gap:8px;}
  .tv-fb{display:flex;align-items:center;gap:11px;background:var(--surface-2);border-radius:12px;padding:9px 12px;}
  .tv-fb-ic{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;}
  .tv-fb-ic.pos{background:var(--juste);} .tv-fb-ic.neg{background:var(--faux);}
  .tv-fb-txt{flex:1;min-width:0;font-weight:600;font-size:.9rem;color:var(--encre);}
  .tv-fb-txt small{display:block;font-weight:400;font-size:.75rem;color:var(--encre-doux);}
  .tv-fb b{font-family:var(--police-titre);}
  .bv2-carte{position:relative;width:100%;max-width:404px;background:var(--surface);border-radius:24px;
    overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);display:flex;flex-direction:column;text-align:left;
    animation:logoPop .45s cubic-bezier(.34,1.4,.6,1);}
  .bv2-banner{background:var(--brocart),var(--degrade);padding:22px 26px;text-align:center;}
  .bv2-wm{font-family:var(--police-titre);font-weight:800;font-size:1.95rem;letter-spacing:-.01em;line-height:1;}
  .bv2-body{padding:22px 24px 20px;display:flex;flex-direction:column;gap:15px;}
  .bv2-greet{display:flex;align-items:center;gap:14px;}
  .bv2-maestro{width:88px;height:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(30,58,99,.18));}
  .bv2-h2{font-family:var(--police-titre);font-weight:800;font-size:1.5rem;margin:0 0 4px;color:var(--laiton);}
  .bv2-p{margin:0;color:var(--encre-doux);font-size:.92rem;line-height:1.45;}
  .bv2-p b{color:var(--laiton);}
  .bv2-choix{display:flex;flex-direction:column;gap:11px;}
  .bv2-opt{cursor:pointer;display:flex;align-items:center;gap:13px;border-radius:16px;padding:14px 16px;
    font-family:inherit;text-align:left;transition:transform .12s ease,filter .12s ease;}
  .bv2-opt:hover{filter:brightness(1.03);} .bv2-opt:active{transform:scale(.985);}
  .bv2-ic{flex:none;display:inline-flex;color:inherit;}
  .bv2-txt{display:flex;flex-direction:column;min-width:0;}
  .bv2-txt b{font-family:var(--police-titre);font-size:1.05rem;line-height:1.15;}
  .bv2-txt span{font-size:.8rem;opacity:.82;font-weight:500;}
  .bv2-or{background:var(--or);color:#16233a;border:none;box-shadow:0 8px 20px rgba(242,201,76,.4);}
  .bv2-bleu{background:var(--surface);color:var(--laiton);border:1.5px solid var(--bandeau);}
  .bv2-ligne{background:var(--surface);color:var(--encre);border:1.5px solid var(--ligne);}
  .bv2-retour{align-self:flex-start;background:none;border:none;color:var(--encre-doux);font-family:inherit;
    font-size:.86rem;font-weight:600;cursor:pointer;padding:4px 2px;display:inline-flex;align-items:center;gap:5px;}
  .bv2-retour:hover{color:var(--bandeau);} .bv2-retour i{color:inherit;}
  .bv2-rgpd{display:flex;align-items:flex-start;gap:7px;color:var(--encre-doux);font-size:.78rem;line-height:1.4;}
  .bv2-rgpd svg{flex:none;margin-top:2px;}
  .bienvenue-overlay{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:18px;
    background:radial-gradient(120% 120% at 50% 0%,rgba(56,119,169,.55),rgba(17,30,45,.72));
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:fadeIn .3s ease;overflow-y:auto;}
  @keyframes bvLogoIn{from{transform:scale(.4) rotate(-12deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
  /* ----- Célébration 10/10 ----- */
  .celebr-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:rgba(27,33,56,.55);backdrop-filter:blur(3px);animation:fadeIn .25s ease;}
  .celebr-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;}
  .celebr-actions .action{margin:0;}
  .celebr-carte{background:#fff;border-radius:24px;padding:30px 34px 26px;max-width:340px;text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.35);animation:popIn .5s cubic-bezier(.34,1.56,.64,1);position:relative;}
  .celebr-carte img{width:130px;height:130px;border-radius:50%;animation:bounceAv 1.1s ease infinite;}
  .celebr-carte h3{font-family:var(--police-titre);font-size:1.6rem;margin:10px 0 4px;color:var(--laiton);}
  .celebr-carte p{margin:0 0 16px;color:var(--encre-doux);}
  .celebr-carte .score20{font-family:var(--police-titre);font-size:2.4rem;color:var(--laiton);font-weight:700;}
  /* résultat de fin d'exercice : personnage à gauche, texte à droite */
  .resultat-haut{display:flex;align-items:center;gap:18px;text-align:left;}
  .resultat-haut img{width:auto;height:150px;border-radius:0;flex-shrink:0;animation:hypePop 1s ease;}
  .resultat-haut h3{margin:0 0 4px;}
  .resultat-haut p{margin:0 0 8px;}
  @media (max-width:420px){.resultat-haut{flex-direction:column;text-align:center;gap:6px;}}
  @keyframes popIn{0%{transform:scale(.6);opacity:0;}100%{transform:scale(1);opacity:1;}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes bounceAv{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  .confetti{position:fixed;top:-12px;width:11px;height:14px;z-index:61;pointer-events:none;border-radius:2px;
    animation:confFall linear forwards;}
  @keyframes confFall{to{transform:translateY(104vh) rotate(720deg);opacity:.9;}}
  svg.portee{display:block;width:230px;height:auto;max-width:100%;}
  /* ----- Page d'accueil (héros motivant) ----- */
  .accueil{max-width:760px;margin:0 auto;}
  .hero{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,#1f78c2 0%,#143a5c 55%,#0b2237 100%);
    color:#fff;border-radius:24px;padding:30px 32px;box-shadow:var(--ombre);position:relative;overflow:hidden;}
  .hero::after{content:"♪ ♫ ♩ ♬";position:absolute;right:-6px;top:6px;font-size:2.4rem;color:rgba(232,189,118,.18);letter-spacing:10px;}
  @keyframes profIn{from{transform:translateY(10px) scale(.9);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
  .hero h2{font-family:var(--police-titre);font-size:1.9rem;margin:0 0 8px;line-height:1.1;color:#fff;}
  .hero p{margin:0;color:#dbe7f5;font-size:.96rem;line-height:1.55;}
  .hero .accent{color:var(--or-clair);}
  .hero p b{color:#fff;}
  .accueil h3{font-family:var(--police-titre);font-size:1.15rem;margin:24px 0 10px;}
  .accueil ol.accueil-etapes{line-height:1.55;padding-left:0;list-style:none;display:grid;gap:10px;}
  .accueil ol.accueil-etapes li{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--ligne);
    border-radius:14px;padding:14px 16px;box-shadow:var(--ombre-douce);transition:transform .15s,box-shadow .15s;}
  .accueil ol.accueil-etapes li:hover{transform:translateY(-2px);box-shadow:var(--ombre);}
  .accueil ol.accueil-etapes .et-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--laiton);color:#fff;
    font-family:var(--police-titre);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem;}
  .accueil ol.accueil-etapes .et-txt{flex:1;font-size:.92rem;line-height:1.5;}
  .accueil .badge{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--ligne);
    border-radius:20px;padding:5px 12px;font-size:.82rem;margin:4px 5px 4px 0;font-weight:600;box-shadow:var(--ombre-douce);}
  .accueil .cta-debut{margin-top:22px;text-align:center;}
  .accueil .cta-note{color:var(--encre-doux);font-size:.88rem;margin-top:14px;line-height:1.5;}
  /* bande de stats de l'accueil */
  .accueil-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 6px;}
  .stat-tuile{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 12px;text-align:center;box-shadow:var(--ombre-douce);transition:transform var(--t-moyen),box-shadow var(--t-moyen);}
  .stat-tuile:hover{transform:translateY(-3px);box-shadow:var(--ombre);}
  .stat-ic{font-size:1.5rem;line-height:1;}
  .stat-val{font-family:var(--police-titre);font-weight:800;font-size:1.7rem;color:var(--laiton);margin:4px 0 1px;}
  .stat-lib{font-size:.74rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
  @media(max-width:620px){.accueil-stats{grid-template-columns:repeat(2,1fr);}}
  /* cartes de parcours */
  .parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0;}
  .pcarte{position:relative;border-radius:var(--rayon);padding:20px 18px;color:#fff;overflow:hidden;box-shadow:var(--ombre);min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;}
  .pcarte h4{font-family:var(--police-titre);font-size:1.15rem;margin:0 0 4px;}
  .pcarte p{margin:0;font-size:.84rem;line-height:1.45;opacity:.92;}
  .pcarte.p-apprendre{background:linear-gradient(140deg,#2f9bdf,#1f5fa0);}
  .pcarte.p-entrainer{background:linear-gradient(140deg,#e0a44e,#a9742a);}
  .pcarte.p-defier{background:linear-gradient(140deg,#143a5c,#0b2237);}
  @media(max-width:620px){.parcours{grid-template-columns:1fr;}}
  /* ----- Mode évaluation ----- */
  .eval-topbar{display:flex;justify-content:space-between;align-items:center;
    background:linear-gradient(135deg,#143a5c,#0b2237);color:var(--papier);padding:12px 18px;border-radius:var(--rayon);font-size:1rem;}
  .eval-chrono{font-family:var(--police-titre);font-weight:700;font-size:1.2rem;color:var(--laiton-clair);}
  .eval-progress{height:8px;background:var(--papier-fonce);border-radius:6px;margin-top:10px;overflow:hidden;}
  .eval-progress>div{height:100%;background:var(--laiton);transition:width .2s;}
  .eval-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
  .eval-warn{color:var(--encre-doux);font-size:.82rem;margin-top:14px;text-align:center;}
  /* ----- Tableau de bord ----- */
  /* Tableau de suivi : en-tête discret en petites capitales, hairlines, pas de bandeau sombre */
  .dash-table{width:100%;border-collapse:collapse;margin-top:14px;background:var(--surface);
    border:1px solid var(--ligne);border-radius:var(--rayon-s);overflow:hidden;font-size:.88rem;}
  .dash-table th{background:transparent;color:var(--encre-doux);padding:14px 12px;text-align:left;
    font-size:.72rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;
    border-bottom:1px solid var(--ligne);}
  .dash-table td{padding:11px 12px;border-top:1px solid var(--ligne);}
  .dash-table tr.invalide td{background:var(--faux-fond);}
  .dash-table tr.moi td{background:var(--valide-fond);font-weight:700;}
  .dash-table tbody tr:hover td{background:var(--surface-2);}
  /* en-têtes de colonnes triables */
  .dash-table th.tri-col{cursor:pointer;user-select:none;white-space:nowrap;transition:color var(--t-rapide);}
  .dash-table th.tri-col:hover{color:var(--laiton);}
  .dash-table th.tri-col.actif{color:var(--laiton);}
  /* ----- Carnet de notes (gradebook, façon Pronote) ----- */
  .gradebook .gb-gen{background:#fdf8ea;text-align:center;white-space:nowrap;
    padding:8px 12px;border-left:1px solid rgba(242,201,76,.5);}
  .gradebook thead .gb-gen{cursor:pointer;font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;color:var(--laiton);}
  .gradebook tbody .gb-gen b{font-family:var(--police-titre);font-size:1.08rem;color:var(--laiton);}
  .gradebook thead .gb-gen{border-bottom:2px solid rgba(30,58,99,.18);}
  .gradebook .gb-gen-d{display:block;font-size:.72rem;color:var(--or-texte);margin-top:1px;}
  /* note bonus qui ne fait pas monter la moyenne : visible, mais mise de côté */
  .gradebook .gb-inutile{color:var(--encre-doux)!important;font-weight:600;}
  .gb-avis{margin:0 0 8px;padding:9px 14px;border-radius:var(--rayon-pill);background:var(--teinte-douce);
    color:var(--encre);font-size:.85rem;}
  /* ce qu'il reste à faire, sur une ligne */
  .gb-alertes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 14px;}
  .gb-alerte{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--rayon-pill);
    border:1px solid var(--ligne);background:var(--surface);color:var(--encre-doux);font-family:inherit;
    font-size:.85rem;line-height:1.2;}
  button.gb-alerte{cursor:pointer;}
  button.gb-alerte:hover{border-color:var(--laiton);color:var(--encre);}
  .gb-alerte b{color:var(--encre);font-size:.95rem;}
  .gb-alerte.rouge{border-color:rgba(220,38,38,.4);color:var(--faux);} .gb-alerte.rouge b{color:var(--faux);}
  .gb-alerte.or{border-color:var(--or);color:var(--or-texte);} .gb-alerte.or b{color:var(--or-texte);}
  .gb-alerte.calme{background:transparent;border-style:dashed;}
  /* blocs dépliables (carnet bonus, aide) */
  .gb-bloc{margin-top:14px;border:1px solid var(--ligne);border-radius:var(--rayon-s);background:var(--surface);}
  .gb-bloc>summary{display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer;
    font-family:var(--police-titre);font-weight:700;font-size:1rem;color:var(--laiton);list-style:none;
    white-space:nowrap;}
  .gb-bloc>summary::-webkit-details-marker{display:none;}
  .gb-bloc>summary::after{content:"";width:9px;height:9px;margin-left:12px;border-right:2px solid var(--encre-doux);
    border-bottom:2px solid var(--encre-doux);transform:rotate(45deg);transition:transform var(--t-rapide);}
  .gb-bloc[open]>summary::after{transform:rotate(-135deg);}
  .gb-bloc>summary span{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:.84rem;color:var(--encre-doux);
    white-space:normal;}
  .gb-bloc>summary .gb-rouge{color:var(--faux);font-weight:700;}
  .gb-bloc .gb-wrap{margin-top:0;border:0;box-shadow:none;border-radius:0;}
  .gb-bloc>summary i.ph-fill{color:var(--or-texte);}
  .gb-bloc-c{padding:0 16px 16px;}
  /* à l'étroit, le résumé et le bouton passent sous le titre plutôt que de
     repousser le chevron à la ligne suivante */
  @media(max-width:700px){.gb-bloc>summary{flex-wrap:wrap;}.gb-sp{flex-basis:100%;height:0;}}
  .gb-aide .gb-bloc-c p{margin:0 0 10px;font-size:.87rem;line-height:1.55;color:var(--encre-doux);}
  .gb-aide .gb-bloc-c p b{color:var(--encre);}
  .ev-rech{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--rayon-pill);
    background:var(--surface);border:1px solid var(--ligne);color:var(--encre-doux);}
  .ev-rech:focus-within{border-color:var(--laiton);color:var(--laiton);}
  .ev-rech input{border:0;outline:0;background:transparent;font-family:inherit;font-size:.92rem;color:var(--encre);width:190px;}
  .sr-seul{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .gradebook .gb-col-sous{display:block;font-weight:500;font-size:.7rem;color:var(--encre-doux);margin-top:2px;}
  .ev-barre .ev-onglets button{border-radius:var(--rayon-pill);}
  .gb-titre{display:flex;align-items:center;gap:9px;margin:22px 0 10px;font-family:var(--police-titre);
    font-weight:700;font-size:1.05rem;color:var(--laiton);}
  .gb-titre i.ph,.gb-titre i.ph-fill{color:var(--laiton);}
  .gb-titre.or,.gb-titre.or i.ph-fill{color:var(--or-texte);}
  .gb-titre span{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:.82rem;color:var(--encre-doux);}
  .gb-wrap{overflow:auto;max-height:76vh;border:1px solid var(--ligne);border-radius:var(--rayon-s);
    margin-top:10px;background:var(--surface);box-shadow:var(--ombre-douce);}
  table.gradebook{border-collapse:separate;border-spacing:0;width:auto;background:var(--surface);font-size:.92rem;}
  table.gradebook th,table.gradebook td{border-bottom:1px solid rgba(30,58,99,.10);
    padding:9px 12px;text-align:center;white-space:nowrap;}
  /* en-tête : petites capitales espacées, deux lignes possibles, collant en haut */
  table.gradebook thead th{position:sticky;top:0;z-index:3;background:var(--surface);color:var(--laiton);
    font-weight:700;vertical-align:bottom;cursor:pointer;user-select:none;
    border-bottom:2px solid rgba(30,58,99,.18);}
  table.gradebook thead th:hover{color:var(--or-texte);}
  table.gradebook thead th.gb-actif{color:var(--or-texte);}
  /* colonne Nom collante à gauche : le nom porte la couleur de sa moyenne */
  table.gradebook .gb-nom{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;
    min-width:150px;color:var(--encre);}
  table.gradebook thead th.gb-nom{z-index:5;font-size:.74rem;letter-spacing:.7px;text-transform:uppercase;color:var(--encre-doux);}
  /* titres d'évaluations À L'HORIZONTALE, sur deux ou trois lignes, avec la date
     et le coefficient en dessous : c'est ce qui rend le carnet lisible d'un coup. */
  table.gradebook th.gb-eval{width:96px;min-width:96px;max-width:96px;padding:8px 6px;vertical-align:bottom;}
  table.gradebook th.gb-eval .gb-rot{display:block;}
  table.gradebook th.gb-eval .gb-rot>span{display:block;white-space:normal;font-weight:600;font-size:.8rem;line-height:1.25;}
  /* moyenne, note bonus : une pastille colorée, comme sur les cartes de l'élève */
  table.gradebook thead th.gb-moy,table.gradebook thead th.gb-bonus{font-size:.74rem;letter-spacing:.7px;text-transform:uppercase;}
  table.gradebook td.gb-moy,table.gradebook td.gb-bonus{background:#fbfdff;}
  table.gradebook td.gb-moy>b,table.gradebook td.gb-bonus>b{display:inline-flex;justify-content:center;min-width:58px;
    padding:6px 10px;border-radius:10px;font-family:var(--police-titre);font-size:1rem;}
  table.gradebook td.gb-moy>b,table.gradebook td.gb-bonus>b{background:var(--teinte-douce);}
  table.gradebook td.gb-bonus>b.gb-inutile{background:var(--teinte-douce);}
  /* case sélectionnée / en édition (grille type tableur) */
  table.gradebook td.gb-cell{cursor:cell;}
  table.gradebook td.gb-cell:focus{outline:3px solid var(--laiton);outline-offset:-3px;background:var(--valide-fond,rgba(26,156,107,.16));}
  table.gradebook td.gb-cell input.gb-in{width:46px;text-align:center;font:inherit;border:1px solid var(--laiton);border-radius:6px;padding:3px;}
  /* une colonne sur deux très légèrement teintée, sans quadrillage */
  table.gradebook td.gb-b,table.gradebook thead th.gb-b{background:rgba(56,119,169,.045);}
  /* survol : la ligne s'éclaire, la case survolée un peu plus */
  table.gradebook tbody tr:hover td,table.gradebook tbody tr:hover td.gb-nom{background:#f4f8fd;}
  table.gradebook tbody tr:hover td.gb-gen{background:#faf3df;}
  table.gradebook tbody td.gb-cell:hover{background:var(--teinte-douce)!important;}
  /* ligne « moyenne de classe » collée en bas */
  table.gradebook tr.gb-classe td{position:sticky;bottom:0;z-index:2;background:var(--bandeau);color:#fff;font-weight:700;}
  table.gradebook tr.gb-classe td.gb-nom{background:var(--bandeau);color:#fff;z-index:3;}
  table.gradebook tr.gb-classe td.gb-moy>b,table.gradebook tr.gb-classe td.gb-bonus>b{background:rgba(255,255,255,.18);color:#fff!important;}
  table.gradebook tr.gb-classe td.gb-gen{background:var(--bandeau);}
  table.gradebook tr.gb-classe td.gb-gen b{color:#fff;}
  /* ----- Leçons ----- */
  .lecon{max-width:740px;}
  .lecon .carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px 26px;margin-bottom:16px;line-height:1.65;box-shadow:var(--ombre-douce);}
  /* ================= En-tête de leçon « Ticket Cérémonie » =================
     Bandeau-ticket marine à fleur des bords de la carte (les marges négatives
     compensent le padding de .lecon .carte, 22px 26px), motif « brocart » en
     pointillés dorés, reflet qui balaie en boucle, titre serif doré centré.
     La mascotte est en position absolute : hors flux, elle ne peut donc
     jamais décaler le centrage du titre. */
  .lecon-entete{position:relative;overflow:hidden;display:flex;align-items:center;
    justify-content:center;gap:16px;
    margin:-22px -26px 20px;padding:34px 46px 58px;
    background:var(--brocart),var(--bandeau);
    border-radius:19px 19px 0 0;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),50% 100%,0 calc(100% - 22px));}
  .lecon-entete::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
    animation:rmShine var(--rm-shine,5.5s) ease-in-out infinite;}
  [data-energie="discret"] .lecon-entete::after{animation:none;}
  /* mascotte : hors flux (absolute), déborde légèrement en bas, jamais gênante */
  .lecon-entete .perso{position:absolute;z-index:1;left:22px;bottom:-6px;
    height:clamp(115px,88%,195px);width:auto;border-radius:0;box-shadow:none;}
  .lecon h2{font-family:var(--police-titre);color:var(--encre);margin:0;font-size:1.5rem;}
  /* Titre : serif italique doré clair, centré, décoratif (non cliquable)
     volontairement différent du reste de l'UI (Baloo 2 / Inter) pour marquer
     l'ouverture cérémonielle de la leçon. Le max-width (pas un padding) dégage
     la mascotte tout en gardant le titre réellement centré ; défini ICI (avant
     les media queries qui suivent) pour que leur propre valeur l'emporte en cascade. */
  .lecon-entete h2{position:relative;z-index:1;font-family:Georgia,'Times New Roman',serif;
    font-weight:700;font-style:italic;font-size:2.15rem;line-height:1.25;color:#fde3a6;
    margin:0;text-align:center;cursor:default;max-width:300px;
    transition:transform .25s ease,text-shadow .25s ease;}
  .lecon-entete h2:hover{transform:scale(1.03);text-shadow:0 0 20px rgba(240,198,116,.6);}
  body.projection .lecon-entete h2{font-size:3rem;}
  @media(max-width:640px){
    .lecon-entete{margin:-22px -26px 16px;padding:24px 22px 46px;}
    /* mascotte réduite sur mobile : la nouvelle image est plus large (elle
       tient le livre à côté d'elle, pas juste en hauteur) : une hauteur plus
       modeste laisse au titre une largeur de colonne lisible. */
    .lecon-entete .perso{height:clamp(64px,74%,86px);left:10px;bottom:-4px;}
    /* le titre reste VRAIMENT centré (aucun padding asymétrique) : c'est un
       max-width étroit qui l'empêche d'atteindre la colonne de la mascotte,
       quel que soit son nombre de lignes. */
    .lecon-entete h2{max-width:150px;font-size:1.28rem;}
  }
  .lecon h3{font-family:var(--police-titre);color:var(--laiton);margin:18px 0 6px;font-size:1.12rem;}
  .lecon p{margin:8px 0;}
  .lecon ul{margin:8px 0;padding-left:22px;line-height:1.7;}
  .lecon .cle{background:var(--juste-fond);border-left:4px solid var(--juste);padding:11px 15px;border-radius:0 10px 10px 0;margin:12px 0;}
  /* ---- Bloc d'actions de fin de leçon : deux cartes-tickets « médaillon » ---- */
  .lecon-cta{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:560px){.lecon-cta{grid-template-columns:1fr;}}
  .lcc{background:var(--teinte-douce);border:1px solid var(--ligne);
    border-radius:0 0 16px 16px;clip-path:polygon(0 16px,50% 0,100% 16px,100% 100%,0 100%);
    padding:30px 20px 20px;text-align:center;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;}
  .lcc:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(30,58,99,.18);}
  .lcc-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;color:#fff;font-size:1.4rem;margin:0 auto 8px;
    box-shadow:var(--ombre-douce);}
  .lcc-ic.bleu{background:var(--bandeau);color:var(--or);border:3px double var(--or);}
  .lcc-ic.or{background:var(--or);color:var(--laiton);border:3px double var(--laiton);}
  .lcc-ic.gris{background:var(--surface-2,#eee);color:var(--encre-doux);border:3px double var(--ligne);}
  .lcc.lcc-off{opacity:.72;}
  .lcc.lcc-off:hover{transform:none;box-shadow:none;}
  .lcc-btn.gris{background:var(--surface-2,#e6e6e6);color:var(--encre-doux);box-shadow:none;cursor:not-allowed;border:1px solid var(--ligne);}
  .lcc-btn.gris:hover{transform:none;filter:none;}
  .lcc-titre{font-family:var(--police-titre);font-weight:700;color:var(--encre);margin-bottom:2px;}
  .lcc-desc{font-size:.82rem;color:var(--encre-doux);margin-bottom:14px;}
  .lcc-btn{width:100%;padding:12px;border:none;border-radius:var(--rayon-s);color:#fff;
    font-weight:700;font-family:inherit;cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
  .lcc-btn:hover{transform:translateY(-3px);filter:brightness(1.08);}
  .lcc-btn:active{transform:translateY(1px) scale(.97);}
  .lcc-btn.bleu{background:var(--bandeau);box-shadow:0 6px 16px rgba(30,58,99,.28);}
  .lcc-btn.bleu:hover{box-shadow:0 10px 24px rgba(30,58,99,.5);}
  .lcc-btn.or{background:var(--or);color:#111E2D;box-shadow:0 6px 16px rgba(30,58,99,.24);}
  .lcc-btn.or:hover{box-shadow:0 10px 24px rgba(242,201,76,.55);}
  /* personnages : fin liseré clair + ombre douce pour bien les détacher de tout fond */
  .perso{filter:drop-shadow(1px 0 0 rgba(255,255,255,.92)) drop-shadow(-1px 0 0 rgba(255,255,255,.92)) drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 -1px 0 rgba(255,255,255,.92)) drop-shadow(0 10px 16px rgba(0,0,0,.42));}
  /* ---- Simulateur « Comment fonctionne la voix » (leçon 6e) ---- */
  .vocal-sim{background:linear-gradient(160deg,#eef5fc,#dbeafe);border:1px solid var(--ligne);border-radius:16px;padding:14px 14px 16px;margin:12px 0;}
  .vocal-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:6px;}
  .vocal-controls button{font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;border:2px solid var(--laiton);
    background:#fff;color:var(--laiton);border-radius:var(--rayon-pill);padding:9px 18px;transition:background .15s,color .15s,transform .08s;}
  .vocal-controls button:hover{background:#eaf3fb;}
  .vocal-controls button.on{background:var(--laiton);color:#fff;box-shadow:0 3px 10px rgba(31,120,194,.35);}
  .vocal-controls button:active{transform:scale(.97);}
  .vocal-sim svg{display:block;width:100%;height:auto;max-width:580px;margin:4px auto 0;}
  .vocal-legende{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:6px 0 2px;font-size:.8rem;color:var(--encre-doux);}
  .vocal-legende span{display:inline-flex;align-items:center;gap:5px;}
  .vocal-legende i{width:12px;height:12px;border-radius:3px;display:inline-block;}
  .vocal-explication{background:#fff;border-radius:12px;padding:10px 14px;margin-top:8px;font-size:.95rem;line-height:1.5;border-left:4px solid var(--laiton);}
  .vocal-sim .txt-resp,.vocal-sim .txt-son{display:none;}
  .vocal-sim.mode-respiration .txt-resp{display:block;}
  .vocal-sim.mode-son .txt-son{display:block;}
  /* éléments animés du schéma */
  .vocal-sim .poumon-g,.vocal-sim .poumon-d{transform-box:fill-box;transform-origin:50% 12%;}
  .vocal-sim .onde-son>*,.vocal-sim .flux>*,.vocal-sim .resp-in>*,.vocal-sim .resp-out>*{opacity:0;}
  /* RESPIRATION : le diaphragme descend/monte, les poumons gonflent, cordes écartées */
  .vocal-sim.mode-respiration .diaphragme{animation:av-dia 4.2s ease-in-out infinite;}
  .vocal-sim.mode-respiration .poumon-g,.vocal-sim.mode-respiration .poumon-d{animation:av-poumon 4.2s ease-in-out infinite;}
  .vocal-sim.mode-respiration .corde-g{transform:translateX(-11px);}
  .vocal-sim.mode-respiration .corde-d{transform:translateX(11px);}
  /* air qui entre (1re moitié = inspire) puis qui sort par la bouche (2e moitié = expire) */
  .vocal-sim.mode-respiration .resp-in .ri1{animation:av-respin 4.2s ease-in-out infinite;}
  .vocal-sim.mode-respiration .resp-in .ri2{animation:av-respin 4.2s ease-in-out .4s infinite;}
  .vocal-sim.mode-respiration .resp-out .ro1{animation:av-respout 4.2s ease-in-out infinite;}
  .vocal-sim.mode-respiration .resp-out .ro2{animation:av-respout 4.2s ease-in-out .3s infinite;}
  @keyframes av-dia{0%,100%{transform:translateY(-2px);}50%{transform:translateY(16px);}}
  @keyframes av-poumon{0%,100%{transform:scale(.9);}50%{transform:scale(1.06);}}
  @keyframes av-respin{0%{opacity:0;transform:translateY(-4px);}8%{opacity:.85;}40%{opacity:.85;transform:translateY(86px);}48%,100%{opacity:0;transform:translateY(86px);}}
  @keyframes av-respout{0%,50%{opacity:0;transform:translateY(0);}58%{opacity:.9;}100%{opacity:0;transform:translateY(-20px);}}
  /* ÉMISSION D'UN SON : le diaphragme REMONTE et comprime les poumons -> l'air chassé monte
     au larynx et fait vibrer les cordes (le tout synchronisé sur un même cycle de 2,6 s) */
  .vocal-sim.mode-son .diaphragme{animation:av-dia-son 2.6s ease-in-out infinite;}
  .vocal-sim.mode-son .poumon-g,.vocal-sim.mode-son .poumon-d{animation:av-poumon-son 2.6s ease-in-out infinite;}
  .vocal-sim.mode-son .corde-g{transform:translateX(-2px);animation:av-vibg .11s linear infinite;}
  .vocal-sim.mode-son .corde-d{transform:translateX(2px);animation:av-vibd .11s linear infinite;}
  .vocal-sim.mode-son .onde-son .o1{animation:av-onde 1.5s ease-out infinite;}
  .vocal-sim.mode-son .onde-son .o2{animation:av-onde 1.5s ease-out .5s infinite;}
  .vocal-sim.mode-son .onde-son .o3{animation:av-onde 1.5s ease-out 1s infinite;}
  .vocal-sim.mode-son .flux .f1{animation:av-flux 2.6s ease-in infinite;}
  .vocal-sim.mode-son .flux .f2{animation:av-flux 2.6s ease-in .35s infinite;}
  .vocal-sim.mode-son .flux .f3{animation:av-flux 2.6s ease-in .7s infinite;}
  @keyframes av-dia-son{0%,100%{transform:translateY(4px);}50%{transform:translateY(-9px);}}
  @keyframes av-poumon-son{0%,100%{transform:scale(1);}50%{transform:scale(.84);}}
  @keyframes av-vibg{0%,100%{transform:translateX(-2px);}50%{transform:translateX(-5px);}}
  @keyframes av-vibd{0%,100%{transform:translateX(2px);}50%{transform:translateX(5px);}}
  @keyframes av-onde{0%{opacity:0;transform:translateX(6px);}25%{opacity:.85;}100%{opacity:0;transform:translateX(-20px);}}
  @keyframes av-flux{0%{opacity:0;transform:translateY(14px);}12%{opacity:.95;}55%{opacity:.95;transform:translateY(-38px);}70%,100%{opacity:0;transform:translateY(-46px);}}
  /* ---- Schémas interactifs « Comment ça marche ? » (leçon enregistrement) ---- */
  .enr-sim{background:linear-gradient(160deg,#eef5fc,#dbeafe);border:1px solid var(--ligne);border-radius:16px;padding:14px;margin:12px 0;}
  .enr-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
  .enr-controls button{font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;border:2px solid var(--laiton);background:var(--surface);color:var(--laiton);border-radius:var(--rayon-pill);padding:6px 12px;transition:background .15s,color .15s;}
  .enr-controls button:hover{background:#eaf3fb;}
  .enr-controls button.on{background:var(--laiton);color:#fff;box-shadow:0 3px 10px rgba(31,120,194,.32);}
  .enr-stage{background:var(--surface);border-radius:12px;padding:10px 10px 4px;}
  .enr-sim svg{display:block;width:100%;height:auto;max-width:440px;margin:0 auto;}
  .enr-exp{margin:6px auto 6px;max-width:540px;font-size:.92rem;line-height:1.5;color:var(--encre);text-align:center;}
  .enr-exp b{color:var(--laiton);}
  .enr-device{display:none;}
  .enr-sim.app-mic .enr-device.mic,.enr-sim.app-phonauto .enr-device.phonauto,.enr-sim.app-phono .enr-device.phono,.enr-sim.app-gramo .enr-device.gramo,.enr-sim.app-bande .enr-device.bande,.enr-sim.app-vinyle .enr-device.vinyle,.enr-sim.app-cd .enr-device.cd,.enr-sim.app-num .enr-device.num{display:block;}
  /* explorateur de l'écriture musicale (leçon « Histoire de l'écriture ») */
  .nota-vue{display:none;}
  .enr-sim.app-neumes .nota-vue.neumes,.enr-sim.app-carree .nota-vue.carree,.enr-sim.app-mesnoire .nota-vue.mesnoire,.enr-sim.app-mesblanche .nota-vue.mesblanche,.enr-sim.app-moderne .nota-vue.moderne{display:block;}
  .enr-sim .spin{transform-box:fill-box;transform-origin:center;animation:enr-rot 3.6s linear infinite;}
  .enr-sim .spin-fast{transform-box:fill-box;transform-origin:center;animation:enr-rot 1.6s linear infinite;}
  .enr-sim .spin-rev{transform-box:fill-box;transform-origin:center;animation:enr-rot-rev 3.6s linear infinite;}
  .enr-sim .coil{transform-box:fill-box;animation:enr-osc .34s ease-in-out infinite;}
  .enr-sim .vibr{transform-box:fill-box;animation:enr-need .12s linear infinite;}
  .enr-sim .flow{stroke-dasharray:7 5;animation:enr-flow 1s linear infinite;}
  .enr-sim .wave{transform-box:fill-box;transform-origin:left center;}
  .enr-sim .wave.w1{animation:enr-wave 1.6s ease-out infinite;}
  .enr-sim .wave.w2{animation:enr-wave 1.6s ease-out .53s infinite;}
  .enr-sim .wave.w3{animation:enr-wave 1.6s ease-out 1.06s infinite;}
  .enr-sim .tape{animation:enr-scrollx 1.3s linear infinite;}
  .enr-sim .laser{transform-box:fill-box;animation:enr-laser 2.6s ease-in-out infinite;}
  .enr-sim .bits{animation:enr-bits 1.5s linear infinite;}
  @keyframes enr-rot{to{transform:rotate(360deg);}}
  @keyframes enr-rot-rev{to{transform:rotate(-360deg);}}
  @keyframes enr-osc{0%,100%{transform:translateX(-3px);}50%{transform:translateX(4px);}}
  @keyframes enr-need{0%,100%{transform:translateY(-1.5px);}50%{transform:translateY(1.5px);}}
  @keyframes enr-flow{to{stroke-dashoffset:-48;}}
  @keyframes enr-wave{0%{opacity:0;transform:scaleX(.4);}30%{opacity:.85;}100%{opacity:0;transform:scaleX(1.5);}}
  @keyframes enr-scrollx{to{transform:translateX(-44px);}}
  @keyframes enr-laser{0%,100%{transform:translateX(-34px);}50%{transform:translateX(34px);}}
  @keyframes enr-bits{to{transform:translateX(-66px);}}
  @media (prefers-reduced-motion:reduce){.enr-sim .spin,.enr-sim .spin-fast,.enr-sim .vibr,.enr-sim .flow,.enr-sim .tape,.enr-sim .laser,.enr-sim .bits,.enr-sim .wave{animation:none!important;}}
  /* ---- Schémas interactifs de l'oreille (leçon « Protéger son ouïe ») ---- */
  .oreille-sim{background:linear-gradient(160deg,#eef5fc,#dbeafe);border:1px solid var(--ligne);border-radius:16px;padding:14px;margin:12px 0;}
  .oreille-controls,.cils-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
  .oreille-controls button,.cils-controls button{font-family:inherit;font-weight:700;font-size:.84rem;cursor:pointer;border:2px solid var(--laiton);background:var(--surface);color:var(--laiton);border-radius:var(--rayon-pill);padding:6px 13px;transition:background .15s,color .15s;}
  .oreille-controls button.on,.cils-controls button.on{background:var(--laiton);color:#fff;box-shadow:0 3px 10px rgba(31,120,194,.3);}
  .oreille-stage{background:var(--surface);border-radius:12px;padding:10px;}
  .oreille-sim svg{display:block;width:100%;height:auto;max-width:480px;margin:0 auto;}
  .oreille-exp{margin:8px auto 4px;max-width:540px;font-size:.92rem;line-height:1.5;color:var(--encre);text-align:center;}
  .oreille-exp b{color:var(--laiton);}
  .oreille-vue{display:none;}
  .oreille-sim.mode-chaine .oreille-vue.chaine,.oreille-sim.mode-cils .oreille-vue.cils{display:block;}
  /* chaîne auditive : vibrations */
  .oreille-sim .or-son>*{opacity:0;}
  .oreille-sim.mode-chaine .or-son .s1{animation:or-son 1.4s ease-out infinite;}
  .oreille-sim.mode-chaine .or-son .s2{animation:or-son 1.4s ease-out .45s infinite;}
  .oreille-sim.mode-chaine .or-son .s3{animation:or-son 1.4s ease-out .9s infinite;}
  .oreille-sim .tymp-mart,.oreille-sim .incus-etr{transform-box:fill-box;}
  .oreille-sim.mode-chaine .tymp-mart{animation:or-vamart .55s ease-in-out infinite;}
  .oreille-sim.mode-chaine .incus-etr{animation:or-vaetr .55s ease-in-out infinite;}
  .oreille-sim.mode-chaine .liquide{stroke-dasharray:5 7;animation:or-liq 1s linear infinite;}
  @keyframes or-son{0%{opacity:0;transform:translateX(-12px);}30%{opacity:.85;}100%{opacity:0;transform:translateX(34px);}}
  /* le tympan/marteau bougent peu, l'enclume/étrier AMPLIFIENT (mouvement bien plus grand) */
  @keyframes or-vamart{0%,100%{transform:translateX(0);}50%{transform:translateX(2px);}}
  @keyframes or-vaetr{0%,100%{transform:translateX(0);}50%{transform:translateX(5.5px);}}
  @keyframes or-liq{to{stroke-dashoffset:-46;}}
  /* cellules ciliées : le liquide les fait pencher (volume normal) ou les arrache (trop fort) */
  .cils-box .cil-grp{transform-box:fill-box;transform-origin:50% 100%;}
  .cils-box.niveau-normal .blast,.cils-box.niveau-normal .cils-msg-fort{display:none;}
  .cils-box.niveau-fort .cils-msg-normal{display:none;}
  .cils-box.niveau-normal .liq-flow{animation:or-liqcil 1.6s ease-in-out infinite;}
  .cils-box.niveau-fort .liq-flow{animation:or-liqcil-fort 1.1s ease-in-out infinite;}
  .cils-box.niveau-normal .cil-grp{animation:or-cil 1.6s ease-in-out infinite;}
  .cils-box.niveau-normal .courant{animation:or-courant 1.6s ease-in-out infinite;}
  .cils-box.niveau-fort .cil-grp{animation:or-cilbreak 3.4s ease-in-out forwards;}
  .cils-box.niveau-fort .courant{animation:or-courant-fort 3.4s ease-in-out forwards;}
  .cils-box.niveau-fort .cil-grp.g1{animation-delay:.1s;}
  .cils-box.niveau-fort .cil-grp.g2{animation-delay:.5s;}
  .cils-box.niveau-fort .cil-grp.g3{animation-delay:.25s;}
  .cils-box.niveau-fort .cil-grp.g4{animation-delay:.65s;}
  @keyframes or-cil{0%,100%{transform:rotate(0);}45%{transform:rotate(16deg);}}
  @keyframes or-cilbreak{0%{transform:translate(0,0) rotate(0);opacity:1;}13%{transform:rotate(30deg);}26%{transform:rotate(-3deg);}40%{transform:rotate(33deg);}54%{transform:translate(0,0) rotate(8deg);opacity:1;}100%{transform:translate(30px,-84px) rotate(80deg);opacity:0;}}
  @keyframes or-liqcil{0%,100%{transform:translateX(0);}45%{transform:translateX(14px);}}
  @keyframes or-liqcil-fort{0%,100%{transform:translateX(0);}45%{transform:translateX(26px);}}
  /* courant : actif quand les cils penchent ; éteint à mi-chemin ; éteint définitivement quand ils sont arrachés */
  @keyframes or-courant{0%,100%{opacity:.13;}45%{opacity:1;}}
  @keyframes or-courant-fort{0%{opacity:.13;}13%{opacity:1;}26%{opacity:.25;}40%{opacity:1;}54%{opacity:.3;}62%,100%{opacity:0;}}
  /* bouton zoom : agrandit le schéma (défilement horizontal si besoin) */
  /* plein écran d'un schéma interactif : on agrandit le SVG et on centre */
  .oreille-sim:fullscreen,.vocal-sim:fullscreen,.enr-sim:fullscreen,
  .oreille-sim:-webkit-full-screen,.vocal-sim:-webkit-full-screen,.enr-sim:-webkit-full-screen{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:var(--fond-app);padding:24px;overflow:auto;border-radius:0;}
  .oreille-sim:fullscreen svg,.vocal-sim:fullscreen svg,.enr-sim:fullscreen svg,
  .oreille-sim:-webkit-full-screen svg,.vocal-sim:-webkit-full-screen svg,.enr-sim:-webkit-full-screen svg{
    width:auto;max-width:min(94vw,1200px);max-height:70vh;}
  .oreille-sim:fullscreen .oreille-exp,.vocal-sim:fullscreen .vocal-explication,.enr-sim:fullscreen .enr-exp,
  .oreille-sim:-webkit-full-screen .oreille-exp,.vocal-sim:-webkit-full-screen .vocal-explication,.enr-sim:-webkit-full-screen .enr-exp{
    max-width:900px;font-size:1.05rem;}
  .oreille-sim:fullscreen .oreille-stage,.enr-sim:fullscreen .enr-stage,
  .oreille-sim:-webkit-full-screen .oreille-stage,.enr-sim:-webkit-full-screen .enr-stage{width:100%;}
  @media (prefers-reduced-motion:reduce){.oreille-sim .or-son>*,.oreille-sim .tymp-mart,.oreille-sim .incus-etr,.oreille-sim .liquide,.oreille-sim .liq-flow,.cils-box .cil-grp,.cils-box .courant{animation:none!important;}}
  /* galerie d'instruments (leçon « Les instruments en images ») */
  .instr-orchestre{display:block;width:100%;max-width:600px;height:auto;margin:10px auto 4px;border-radius:12px;box-shadow:var(--ombre-douce);}
  .instr-gal-fam{font-family:var(--police-titre);font-weight:700;color:var(--laiton);margin:16px 0 8px;font-size:1.05rem;
    border-bottom:2px solid var(--ligne);padding-bottom:4px;}
  .instr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin:6px 0 4px;}
  .instr-vign{margin:0;background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;padding:8px;text-align:center;
    box-shadow:var(--ombre-douce);transition:transform .12s,box-shadow .12s;}
  .instr-vign:hover{transform:translateY(-3px);box-shadow:var(--ombre);}
  .instr-vign img{width:100%;height:80px;object-fit:contain;border-radius:8px;background:#fff;}
  .instr-vign figcaption{margin-top:6px;font-size:.82rem;font-weight:600;color:var(--encre);}
  /* galerie des mélodies célèbres (leçon « Pour aller plus loin ») */
  .mel-niv{font-family:var(--police-titre);font-weight:700;color:var(--laiton);margin:16px 0 8px;font-size:1rem;border-bottom:2px solid var(--ligne);padding-bottom:4px;}
  .mel-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:6px 0 4px;}
  .mel-carte{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;padding:8px 12px;box-shadow:var(--ombre-douce);}
  .mel-carte .btn-son.mini{flex-shrink:0;}
  .mel-carte .mel-t{font-weight:700;font-size:.9rem;line-height:1.2;color:var(--encre);flex:1;}
  .mel-carte .mel-c{font-size:.78rem;color:var(--encre-doux);white-space:nowrap;}
  /* frise « époque → compositeurs » (cours Compositeurs & repères) */
  .rc-frise{display:flex;flex-direction:column;gap:8px;margin:6px 0;}
  .rc-ep{display:flex;gap:12px;align-items:baseline;border-left:4px solid var(--laiton,#b8860b);padding:6px 0 6px 12px;background:var(--surface-2,#faf8f3);border-radius:0 10px 10px 0;}
  .rc-ep-nom{flex:0 0 130px;font-family:var(--police-titre);font-weight:700;color:var(--laiton,#b8860b);font-size:.95rem;}
  .rc-ep-list{display:flex;flex-wrap:wrap;gap:6px 14px;}
  .rc-ep-list .rc-nom{font-size:.9rem;color:var(--encre);}
  .rc-ep-list .rc-nom i{color:var(--encre-doux);font-size:.82rem;}
  @media(max-width:560px){.rc-ep{flex-direction:column;gap:4px;}.rc-ep-nom{flex:none;}}
  /* ===== Multijoueur classe : course sur la portée (solo) et orchestre en pupitres ===== */
  .jeu-host.mj-scene{max-width:1180px;text-align:left;}
  .mj-cadre{border-radius:22px;overflow:hidden;background:var(--fond-app);box-shadow:var(--ombre-forte);}
  .mj-bleu{background:var(--brocart),var(--bandeau);color:#fff;}
  .mj-sur{font-size:.78rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--or);}
  .mj-sous{font-size:.9rem;opacity:.92;margin-top:4px;}
  .mj-sous b{color:var(--or-clair);}
  .mj-lobby{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);}
  .mj-lobby-g{padding:28px 30px;display:flex;flex-direction:column;gap:14px;}
  .mj-lobby-g h2,.mj-lobby-pup h2,.mj-fin-tete h2{font-family:var(--police-titre);font-weight:800;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.05;margin:0;color:#fff;}
  .mj-lobby-pup h2{font-size:clamp(1.3rem,2.4vw,1.7rem);}
  .mj-pin{background:#fff;border-radius:22px;padding:12px 18px 8px;text-align:center;box-shadow:0 14px 30px rgba(0,0,0,.2);}
  .mj-pin small{display:block;font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--encre-doux);}
  .mj-pin b{display:block;font-family:var(--police-titre);font-weight:800;font-size:clamp(3.4rem,7vw,5.2rem);line-height:1;letter-spacing:10px;padding-left:10px;color:var(--laiton);}
  .mj-pin.petit{padding:6px 18px;flex:none;}
  .mj-pin.petit b{font-size:3.2rem;letter-spacing:6px;padding-left:6px;}
  .mj-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.95rem;}
  .mj-etapes li{display:flex;align-items:center;gap:10px;}
  .mj-etapes li span{width:28px;height:28px;flex:none;border-radius:50%;background:var(--or);color:#16233a;display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;}
  .mj-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
  .mj-chips span{background:rgba(255,255,255,.16);border-radius:var(--rayon-pill);padding:6px 12px;font-size:.82rem;font-weight:600;}
  .mj-serveur{font-size:.74rem;opacity:.85;}
  .mj-corps .mj-serveur{opacity:1;color:var(--encre-doux);text-align:center;}
  .mj-corps{padding:22px 26px;display:flex;flex-direction:column;gap:14px;min-width:0;}
  .mj-compte{display:flex;align-items:center;gap:14px;}
  .mj-compte>b{font-family:var(--police-titre);font-weight:800;font-size:3.2rem;line-height:1;color:var(--bandeau);}
  .mj-compte strong{display:block;font-family:var(--police-titre);font-size:1.25rem;}
  .mj-compte span{font-size:.84rem;color:var(--encre-doux);}
  .mj-avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:260px;overflow:auto;align-content:start;}
  .mj-av-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:7px 10px;font-weight:600;font-size:.92rem;animation:jpop .25s ease;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .mj-av-chip.nouveau{border:2px solid var(--or);}
  .mj-av-chip>span{font-size:1.15rem;}
  .mj-attente{color:var(--encre-doux);}
  .mj-scene .jeu-piments{margin:0;max-width:none;background:#fff;border:1px solid var(--ligne);}
  .mj-actions{display:flex;gap:10px;align-items:center;margin-top:auto;}
  .mj-cta{flex:1;min-height:58px;border:none;border-radius:16px;background:var(--or);color:#16233a;font-family:var(--police-titre);font-weight:800;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 26px rgba(30,58,99,.2);padding:0 22px;}
  .mj-cta:hover{filter:brightness(1.04);}
  .mj-stop{width:58px;height:58px;flex:none;border-radius:16px;background:#fff;border:1px solid var(--ligne);color:var(--faux);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .mj-lobby-pup{padding:18px 26px;display:flex;align-items:center;gap:22px;}
  .mj-nb{text-align:right;flex:none;}
  .mj-nb b{display:block;font-family:var(--police-titre);font-weight:800;font-size:2.6rem;line-height:1;color:var(--or);}
  .mj-nb span{font-size:.84rem;}
  .mj-pup-lobby{display:grid;gap:14px;}
  .mj-pup-carte{background:#fff;border:1px solid var(--ligne);border-radius:18px;overflow:hidden;min-width:0;}
  .mj-pup-tete{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:3px solid;}
  .mj-pup-tete b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;line-height:1;}
  .mj-pup-tete span{font-size:.78rem;color:var(--encre-doux);}
  .mj-pup-ic{display:inline-flex;width:28px;height:28px;flex:none;}
  .mj-pup-ic svg{width:100%;height:100%;}
  .mj-pup-avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;padding:12px;min-height:70px;}
  .mj-pup-avs span{height:46px;border-radius:12px;background:var(--fond-app);display:flex;align-items:center;justify-content:center;font-size:1.4rem;animation:jpop .25s ease;}
  .mj-pup-avs em{grid-column:1/-1;color:var(--encre-doux);font-size:.86rem;text-align:center;align-self:center;}
  .mj-note-info{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:12px 14px;font-size:.9rem;}
  .mj-note-info i{font-size:1.3rem;color:var(--bandeau);}
  /* bandeau des questions et des résultats */
  .mj-bandeau{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;background:var(--brocart),var(--bandeau);color:#fff;border-radius:18px;padding:12px 22px;margin-bottom:12px;box-shadow:var(--ombre);}
  .mj-qnum{font-family:var(--police-titre);font-weight:800;font-size:1.25rem;}
  .mj-rep{margin-left:auto;font-weight:700;}
  .mj-rep b{font-family:var(--police-titre);font-size:1.3rem;color:var(--or);}
  .mj-chrono{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--bandeau);border:4px solid var(--or);display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:1.45rem;}
  .mj-bonne{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--encre);border-radius:var(--rayon-pill);padding:5px 16px 5px 6px;font-weight:600;}
  .mj-bonne b{font-family:var(--police-titre);font-size:1.15rem;}
  .mj-forme{width:30px;height:30px;border-radius:9px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;}
  .mj-q-carte{background:#fff;border:1px solid var(--ligne);border-radius:20px;padding:14px 18px;text-align:center;}
  .mj-q-carte .jeu-question{margin:2px auto 10px;font-size:1.4rem;}
  .mj-scene .jeu-opt{padding:10px 16px;font-size:1.1rem;}
  .mj-scene .jeu-grille{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;}
  .mj-scene .jeu-progress{max-width:none;margin:10px 0 12px;}
  .mj-bas{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
  .mj-bas .mj-cta{flex:0 1 420px;}
  .mj-bas>div{margin-top:0!important;}
  .mj-scene .mj-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin:12px 0 0;}
  .mj-scene .mj-opts .jeu-reveal-opt.bon{grid-column:1/-1;transform:none;}
  /* la portée-piste */
  .mj-piste{position:relative;height:clamp(210px,30vh,290px);background:#fff;border:1px solid var(--ligne);border-radius:20px;overflow:hidden;}
  .mj-piste-lib{position:absolute;top:10px;font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--encre-doux);}
  .mj-piste-lib.dep{left:14px;} .mj-piste-lib.arr{right:14px;}
  .mj-ligne{position:absolute;left:3%;right:3%;height:2px;background:#1f2440;opacity:.5;}
  .mj-barre{position:absolute;top:16%;height:68%;width:2px;background:#1f2440;opacity:.16;}
  .mj-barre.debut{opacity:.5;}
  .mj-mesure{position:absolute;bottom:6px;transform:translateX(-50%);font-size:.72rem;font-weight:700;color:var(--encre-doux);}
  .mj-fin{position:absolute;top:16%;height:68%;width:12px;margin-left:-2px;border-left:2px solid #1f2440;border-right:5px solid #1f2440;}
  .mj-note{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid #cfdbe8;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 4px 10px rgba(30,58,99,.18);transition:left 1.1s cubic-bezier(.3,1.2,.4,1),border-color .3s,box-shadow .3s;z-index:1;}
  .mj-note.rep{border-color:var(--or);box-shadow:0 0 0 4px rgba(242,201,76,.35),0 4px 10px rgba(30,58,99,.18);}
  .mj-note.avance{border-color:var(--juste);z-index:2;}
  .mj-note.tete{z-index:3;}
  .mj-note em{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-3px);background:var(--or);color:#16233a;border-radius:var(--rayon-pill);padding:1px 8px;font-style:normal;font-size:.66rem;font-weight:800;white-space:nowrap;}
  .mj-trace{position:absolute;height:0;border-top:3px dashed var(--juste);margin-top:-1px;opacity:0;animation:mjTrace .6s ease .9s forwards;}
  @keyframes mjTrace{to{opacity:.8;}}
  .mj-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;}
  .mj-info{border-radius:16px;padding:10px 14px;line-height:1.35;}
  .mj-info small{display:block;font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
  .mj-info b{font-family:var(--police-titre);font-size:1.15rem;}
  .mj-info.or{background:#fff8e1;} .mj-info.or small{color:var(--or-texte);}
  .mj-info.vert{background:#e3f5ee;} .mj-info.vert small{color:#11694a;}
  .mj-info.blanc{background:#fff;border:1px solid var(--ligne);} .mj-info.blanc small{color:var(--encre-doux);}
  /* pupitres : réponses reçues et colonnes */
  .mj-rep-pup{display:grid;gap:10px;}
  .mj-rep-carte{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid;border-radius:16px;padding:10px 12px;}
  .mj-jauge{height:8px;border-radius:5px;background:var(--fond-app);overflow:hidden;margin-top:5px;}
  .mj-jauge i{display:block;height:100%;transition:width .4s;}
  .mj-rep-n{font-family:var(--police-titre);font-weight:800;font-size:1.2rem;}
  .mj-res-pup{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;}
  .mj-cadre-blanc{background:#fff;border:1px solid var(--ligne);border-radius:20px;padding:14px 18px 12px;}
  .mj-cote{display:flex;flex-direction:column;gap:10px;}
  .mj-barres{display:grid;gap:18px;height:clamp(260px,40vh,360px);}
  .mj-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
  .mj-past{border-radius:var(--rayon-pill);padding:2px 10px;font-size:.74rem;font-weight:800;white-space:nowrap;}
  .mj-past.or{background:var(--or);color:#16233a;}
  .mj-col-score{font-family:var(--police-titre);font-weight:800;font-size:1.4rem;line-height:1;}
  .mj-col-zone{flex:1;width:100%;display:flex;align-items:flex-end;}
  .mj-col-barre{position:relative;width:100%;border-radius:14px 14px 6px 6px;box-shadow:inset 0 -40px 0 rgba(0,0,0,.08);transition:height 1s cubic-bezier(.3,1.1,.4,1);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;min-height:44px;}
  .mj-couronne{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--or);color:#16233a;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.2);}
  .mj-col-nom{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;}
  /* palmarès des pupitres */
  .mj-fin-tete{padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .mj-fin-ic{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.2);}
  .mj-fin-ic .mj-pup-ic{width:40px;height:40px;}
  .mj-palmares{display:flex;flex-direction:column;gap:10px;}
  .mj-palm{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid;border-radius:18px;padding:12px 16px;}
  .mj-palm-rang{width:40px;height:40px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;}
  .mj-palm b{display:block;font-family:var(--police-titre);font-size:1.25rem;line-height:1.1;}
  .mj-palm span{font-size:.86rem;color:var(--encre-doux);}
  .mj-palm-score{font-family:var(--police-titre);font-weight:800;font-size:1.5rem!important;color:var(--encre)!important;}
  /* téléphone */
  .mj-j-pup{display:flex;align-items:center;gap:12px;border-radius:18px;padding:10px 14px;margin-bottom:10px;text-align:left;}
  .mj-j-pup small{display:block;font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.85;}
  .mj-j-pup b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.35rem;line-height:1;}
  .mj-j-rang{font-family:var(--police-titre);font-weight:800;font-size:1.4rem;background:rgba(255,255,255,.3);border-radius:12px;padding:2px 10px;}
  .mj-j-course{display:flex;align-items:center;gap:10px;background:var(--brocart),var(--bandeau);color:#fff;border-radius:16px;padding:8px 12px;margin-bottom:10px;}
  .mj-j-course small{white-space:nowrap;font-weight:700;}
  .mj-mini{position:relative;flex:1;height:40px;}
  .mj-mini i{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.4);}
  .mj-mini span{position:absolute;top:50%;transform:translate(0,-50%);width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--or);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:left 1s ease;}
  .mj-mini em{position:absolute;top:50%;border-top:3px dashed var(--or);}
  .mj-j-course.grand{flex-direction:column;align-items:stretch;margin:12px 0 0;padding:12px 14px;text-align:center;}
  .mj-j-course.grand .jeu-monrang{color:#fff;margin-top:4px;}
  .mj-mini.grand{height:56px;}
  .mj-mini.grand span{width:38px;height:38px;font-size:1.2rem;}
  .mj-j-txt{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;}
  .mj-j-equipe{margin-top:12px;background:#fff;border:2px solid;border-radius:16px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;}
  .mj-j-eq-tete{display:flex;align-items:center;gap:10px;font-size:1rem;}
  .mj-j-eq-tete b{font-family:var(--police-titre);font-size:1.25rem;}
  .mj-j-eq-l{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;}
  .mj-j-points{display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:5px;}
  .mj-j-points i{height:22px;border-radius:7px;background:#dbe3ec;}
  .mj-j-points i.ok{background:var(--juste);}
  .mj-j-entraide{background:var(--or);color:#16233a;border-radius:10px;padding:6px 10px;font-weight:700;font-size:.86rem;}
  .mj-j-petit{font-size:.8rem;color:var(--encre-doux);}
  @media (max-width:820px){
    .mj-lobby{grid-template-columns:1fr;}
    .mj-lobby-pup{flex-wrap:wrap;}
    .mj-res-pup{grid-template-columns:1fr;}
    .mj-trio{grid-template-columns:1fr;}
    .mj-pup-lobby,.mj-rep-pup{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .mj-scene .jeu-grille,.mj-scene .mj-opts{grid-template-columns:1fr;}
    .mj-note{width:30px;height:30px;font-size:.9rem;}
  }
  .mj-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px;}
  .mj-mode{display:flex;flex-direction:column;gap:4px;text-align:left;border:2px solid var(--ligne);background:var(--surface);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;color:var(--encre);}
  .mj-mode b{font-family:var(--police-titre);font-size:1.05rem;display:flex;align-items:center;gap:6px;}
  .mj-mode span{font-size:.82rem;color:var(--encre-doux);line-height:1.35;}
  .mj-mode.on{border-color:var(--bandeau);background:var(--teinte-douce,#eaf3fb);box-shadow:0 0 0 3px rgba(35,116,176,.15);}
  @media (max-width:560px){ .mj-modes{grid-template-columns:1fr;} }
  /* ===== Mode classe en direct (quiz multi-appareils) ===== */
  .jeu-host{max-width:860px;margin:0 auto;text-align:center;}
  .jeu-serveur{font-family:monospace;font-size:.72rem;opacity:.85;background:rgba(0,0,0,.12);padding:2px 8px;border-radius:8px;}
  @keyframes jpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
  .jeu-barre-haut{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;margin-bottom:12px;color:var(--encre);}
  .jeu-chrono{background:var(--encre);color:var(--papier);border-radius:50%;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;}
  .jeu-question{font-size:1.6rem;font-weight:700;color:var(--encre);line-height:1.35;margin:8px auto 18px;max-width:760px;}
  .jeu-grille{display:grid;grid-template-columns:1fr;gap:10px;max-width:680px;margin:0 auto;}
  .jeu-opt{display:flex;align-items:center;gap:12px;background:var(--c);color:#fff;border:none;border-radius:14px;padding:16px 18px;font-size:1.15rem;font-weight:700;text-align:left;font-family:inherit;line-height:1.25;box-shadow:0 4px 0 rgba(0,0,0,.18);}
  .jeu-opt .jeu-forme{font-size:1.4rem;}
  .jeu-opt.cliquable{cursor:pointer;transition:transform .1s,filter .1s;}
  .jeu-opt.cliquable:hover{filter:brightness(1.08);transform:translateY(-2px);}
  .jeu-opt.cliquable:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18);}
  .jeu-opt.pale{opacity:.4;}
  .jeu-opt.bon{outline:4px solid #1e7d34;transform:scale(1.03);}
  .jeu-progress{height:12px;background:var(--ligne);border-radius:8px;overflow:hidden;margin:16px auto 0;max-width:760px;}
  .jeu-progress>div{height:100%;background:linear-gradient(90deg,var(--valide),var(--laiton));transition:width .4s linear;}
  .jeu-classement{max-width:520px;margin:10px auto 0;text-align:left;}
  .jeu-rang{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--ligne);}
  .jeu-rang-nom{flex:1;font-weight:600;}
  .jeu-rang-score{font-weight:800;color:var(--laiton);min-width:52px;text-align:right;}
  .jeu-mentions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px auto 6px;max-width:760px;}
  .jeu-mention{background:var(--surface-2,#faf8f3);border:1px solid var(--ligne);border-radius:14px;padding:12px 16px;min-width:150px;text-align:center;box-shadow:var(--ombre-douce);}
  .jeu-mention-ic{font-size:1.9rem;}
  .jeu-mention-titre{font-weight:700;color:var(--laiton);font-size:.9rem;}
  .jeu-mention-nom{font-weight:700;margin-top:2px;}
  .jeu-mention-info{font-size:.8rem;color:var(--encre-doux);}
  .jeu-mes-mentions{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
  .jeu-mention.gagnee{background:var(--juste-fond);border-color:var(--juste);font-size:1.05rem;}
  /* --- juice : compte à rebours, bonus, avatars, flèches, confettis --- */
  .jeu-compte{text-align:center;padding:30px 10px;}
  .jeu-compte.joueur{padding:44px 10px;}
  .jeu-compte-lib{font-size:1.1rem;color:var(--encre-doux);font-weight:600;}
  .jeu-compte-num{font-size:6rem;font-weight:800;color:var(--laiton);font-family:var(--police-titre);line-height:1;display:inline-block;}
  .jeu-compte-num.pop{animation:jcount .45s ease;}
  .jeu-compte-aide{font-size:1rem;color:var(--encre-doux);}
  @keyframes jcount{0%{transform:scale(1.3)}60%{transform:scale(.95)}100%{transform:scale(1)}}
  /* réponses en lignes : entrée, sélection (grossit/estompe) */
  .jeu-opt.entre{animation:joptin .32s ease backwards;}
  @keyframes joptin{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
  .jeu-opt.choisi{animation:jchoisi .4s ease;outline:4px solid #fff;box-shadow:0 0 0 4px var(--c),0 8px 20px rgba(0,0,0,.28);transform:scale(1.03);position:relative;z-index:2;}
  .jeu-opt.choisi::after{content:"✓";margin-left:auto;font-size:1.5rem;font-weight:900;}
  @keyframes jchoisi{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1.03)}}
  .jeu-opt.estompe{opacity:.32;transform:scale(.93);filter:grayscale(.5);transition:all .3s;}
  .jeu-forme.grand.rebond{animation:jrebond .6s ease;}
  @keyframes jrebond{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
  .jeu-joueur-msg.envoye{border-color:var(--laiton);}
  /* correction (écran prof) : bonne réponse en grand vert, mauvaises rétrécies grises */
  .jeu-reveal-opts{display:flex;flex-direction:column;gap:8px;max-width:680px;margin:6px auto 12px;}
  .jeu-reveal-opt{display:flex;align-items:center;gap:12px;border-radius:12px;padding:10px 16px;font-weight:700;transition:all .35s;}
  .jeu-reveal-opt .jro-txt{flex:1;text-align:left;}
  .jeu-reveal-opt .jro-count{font-size:.85em;opacity:.85;font-weight:800;white-space:nowrap;}
  .jeu-reveal-opt.bon{background:linear-gradient(90deg,#2a9d5c,#1e7d34);color:#fff;font-size:1.3rem;padding:18px 20px;box-shadow:0 6px 18px rgba(30,125,52,.45);transform:scale(1.02);animation:jgrow .45s ease;}
  .jeu-reveal-opt.bon .jeu-forme{font-size:1.7rem;}
  .jeu-reveal-opt.bon .jro-check{font-size:1.6rem;font-weight:900;}
  .jeu-reveal-opt.mauvais{background:var(--surface-2,#eeeae2);color:#9aa0a6;font-size:.85rem;opacity:.6;padding:6px 16px;}
  @keyframes jgrow{0%{transform:scale(.9);opacity:.5}60%{transform:scale(1.06)}100%{transform:scale(1.02);opacity:1}}
  /* cérémonie finale */
  .cache{display:none!important;}
  .apparait{animation:japparait .55s cubic-bezier(.2,1.3,.4,1) both;}
  @keyframes japparait{0%{opacity:0;transform:translateY(24px) scale(.7)}100%{opacity:1;transform:translateY(0) scale(1)}}
  .jeu-mentions-titre{width:100%;text-align:center;font-family:var(--police-titre);font-weight:700;color:var(--laiton);font-size:1.1rem;}
  .jeu-podium.ceremonie{min-height:200px;align-items:flex-end;}
  .jeu-podium.ceremonie .p1{transform:scale(1.18);z-index:3;box-shadow:0 10px 30px rgba(184,134,11,.4);}
  .jeu-podium.ceremonie .p1 .jeu-podium-medaille{font-size:3rem;}
  .jeu-podium.ceremonie .p1 .jeu-podium-ava{font-size:2.6rem;}
  /* options "piment" du prof + arrêt + réflexe + vote */
  .jeu-piments{margin:16px auto 4px;max-width:700px;background:var(--surface-2,#faf8f3);border:1px dashed var(--laiton);border-radius:14px;padding:10px 12px;}
  .jeu-piments-titre{font-size:.82rem;color:var(--encre-doux);font-weight:600;margin-bottom:8px;}
  .jeu-piments-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .jeu-piment{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface);border:2px solid var(--ligne);border-radius:12px;padding:8px 10px;cursor:pointer;font-family:inherit;min-width:78px;transition:transform .1s,border-color .1s;}
  .jeu-piment:hover:not(:disabled){transform:translateY(-2px);border-color:var(--laiton);}
  .jeu-piment .jp-ic{font-size:1.5rem;line-height:1;}
  .jeu-piment .jp-nom{font-size:.72rem;font-weight:700;color:var(--encre);}
  .jeu-piment.arme{border-color:var(--juste);background:var(--juste-fond);box-shadow:0 0 0 2px var(--juste);}
  .jeu-piment.used,.jeu-piment:disabled{opacity:.38;cursor:default;filter:grayscale(.7);}
  .jeu-stop{background:transparent;border:1px solid var(--faux);color:var(--faux);border-radius:10px;padding:7px 16px;font-family:inherit;font-weight:600;cursor:pointer;font-size:.85rem;}
  .jeu-stop:hover{background:var(--faux-fond);}
  .jeu-prog-aide{text-align:center;color:var(--encre-doux);font-weight:600;margin:10px 0;}
  .jeu-prog-opt{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--c);color:#fff;border-radius:16px;padding:26px;font-size:1.6rem;font-weight:800;max-width:540px;margin:0 auto;box-shadow:0 6px 0 rgba(0,0,0,.18);animation:japparait .3s ease;}
  .jeu-opt.prog{justify-content:center;font-size:1.35rem;padding:24px;animation:japparait .25s ease;}
  .jeu-vote-aide{text-align:center;color:var(--encre);font-weight:600;margin:8px 0 12px;}
  .jeu-vote-tally{display:flex;justify-content:center;gap:30px;margin:10px 0;}
  .jvt{display:flex;flex-direction:column;align-items:center;background:var(--surface-2,#faf8f3);border-radius:14px;padding:14px 24px;min-width:110px;}
  .jvt span{font-size:2.4rem;font-weight:800;line-height:1;}
  .jvt.garder{color:#2a9d5c;}.jvt.changer{color:#e74c3c;}
  .jvt small{color:var(--encre-doux);font-weight:600;margin-top:4px;}
  .jeu-bonus-banner{background:linear-gradient(90deg,#E9BE3C,#e67322);color:#fff;font-weight:800;border-radius:12px;padding:10px 16px;margin:0 auto 12px;max-width:620px;text-align:center;animation:jpulse 1s ease infinite;}
  .jeu-bonus-banner.petit{font-size:.9rem;padding:8px 12px;}
  .jeu-bonus-tag{background:#e67322;color:#fff;border-radius:8px;padding:1px 8px;font-weight:800;font-size:.85em;white-space:nowrap;}
  @keyframes jpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
  .jeu-avatar-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
  .jeu-avatar-picker button{font-size:1.5rem;line-height:1;background:var(--surface-2,#faf8f3);border:2px solid var(--ligne);border-radius:12px;padding:4px 7px;cursor:pointer;transition:transform .1s;font-family:inherit;}
  .jeu-avatar-picker button:hover{transform:scale(1.12);}
  .jeu-avatar-picker button.sel{border-color:var(--laiton);background:var(--valide-fond);transform:scale(1.12);}
  .jeu-podium-ava{font-size:2rem;line-height:1;}
  .jeu-joueur-ava{font-size:3rem;margin:10px 0;}
  .jeu-joueur-ava-inline{font-size:1.5rem;}
  .jeu-joueur-msg.mega{border-color:#e67322;background:linear-gradient(135deg,#fff2d6,#ffe1c2);}
  .jeu-joueur-msg.mega .jeu-reveal-icone{animation:jshake .5s ease infinite;}
  @keyframes jshake{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
  .jeu-final,.jeu-joueur-msg{position:relative;overflow:hidden;}
  .jeu-final>*:not(.jeu-confettis),.jeu-joueur-msg>*:not(.jeu-confettis){position:relative;z-index:1;}
  .jeu-confettis{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
  .jeu-confettis span{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:jconf linear forwards;}
  @keyframes jconf{to{transform:translateY(140vh) rotate(620deg);}}
  /* cérémonie sur les téléphones : 3e, puis 2e, puis 1er */
  .mj-podtel{max-width:440px;margin:0 auto 14px;text-align:center}
  .mj-podtel-t{font-family:var(--police-titre);font-weight:800;font-size:1.25rem;color:var(--laiton);margin-bottom:8px}
  .mj-podtel-marches{display:flex;align-items:flex-end;justify-content:center;gap:8px}
  .mj-podtel-p{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 34px;border-radius:14px 14px 0 0;background:var(--surface-2);border:1px solid var(--ligne);opacity:0;animation:podTelMonte .7s cubic-bezier(.2,1.3,.4,1) forwards}
  .mj-podtel-p.p1{padding-bottom:64px;background:linear-gradient(180deg,#fff3c4,var(--surface-2));border-color:var(--or)}
  .mj-podtel-p.p2{padding-bottom:46px}
  .mj-podtel-p.moi{box-shadow:0 0 0 3px var(--or)}
  .mj-podtel-ava{font-size:1.9rem;line-height:1}
  .mj-podtel-p b{font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mj-podtel-pts{font-size:.78rem;color:var(--encre-doux)}
  .mj-podtel-rang{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--laiton);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
  .mj-podtel-p.p1 .mj-podtel-rang{background:var(--or);color:#16233a}
  .mj-podtel-apres{opacity:0;animation:podTelMonte .6s ease 3.8s forwards}
  @keyframes podTelMonte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .jeu-podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:18px auto;}
  .jeu-podium-p{background:var(--surface-2,#faf8f3);border:1px solid var(--ligne);border-radius:14px 14px 0 0;padding:14px 16px;min-width:120px;}
  .jeu-podium-p.p1{padding-bottom:60px;order:2;background:linear-gradient(180deg,#fff6d6,#faf8f3);}
  .jeu-podium-p.p2{padding-bottom:38px;order:1;}
  .jeu-podium-p.p3{padding-bottom:22px;order:3;}
  .jeu-podium-medaille{font-size:2.2rem;}
  .jeu-podium-nom{font-weight:700;}
  .jeu-podium-score{font-weight:800;color:var(--laiton);}
  /* côté élève */
  .jeu-joueur{max-width:560px;margin:0 auto;position:relative;}
  .jeu-jq-num{color:var(--encre-doux);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .jeu-jq-consigne{font-size:1.2rem;font-weight:700;color:var(--encre);line-height:1.35;margin-bottom:16px;}
  .jeu-grille.joueur{grid-template-columns:1fr;}
  .jeu-grille.joueur.rebond.lecture .jeu-opt{cursor:default;opacity:.95}
  .jeu-grille.joueur.rebond.lecture .jeu-opt[disabled]{pointer-events:none}
  .jeu-bonus-banner.jeu-eclair{background:linear-gradient(90deg,#2f6db0,#16a085)}
  .jeu-chrono.urgent{background:#e05a5a;color:#fff;animation:jeuUrgent .6s ease-in-out infinite alternate}
  @keyframes jeuUrgent{from{transform:scale(1)}to{transform:scale(1.15)}}
  .jeu-chrono.petit{width:auto;height:auto;border-radius:20px;padding:2px 12px;font-size:.95rem;}
  /* option "Rebond" · phase 1 : lecture (barre qui se vide) */
  .jeu-lecture-bar{height:8px;background:var(--ligne);border-radius:6px;overflow:hidden;margin:2px 0 12px;max-width:460px;}
  .jeu-lecture-bar>div{height:100%;width:100%;background:linear-gradient(90deg,#8e44ad,#e67322);transform-origin:left;animation-name:jlecture;animation-timing-function:linear;animation-fill-mode:forwards;}
  @keyframes jlecture{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  /* option "Rebond" · phase 2 : petites balles qui flottent lentement */
  .jeu-grille.joueur.rebond.rebond-actif{position:relative;display:block;overflow:hidden;background:var(--surface-2,#faf8f3);border-radius:14px;border:1px dashed var(--ligne);}
  .jeu-grille.joueur.rebond.rebond-actif .jeu-opt{position:absolute;margin:0;transition:none;}
  .jeu-grille.joueur.rebond.rebond-actif .jeu-opt.balle{display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.28);}
  .jeu-grille.joueur.rebond.rebond-actif .jeu-opt.balle .jeu-forme{font-size:1.8rem;}
  .jeu-grille.joueur.rebond.rebond-actif .jeu-opt.choisi,.jeu-grille.joueur.rebond.rebond-actif .jeu-opt.estompe{transition:opacity .3s,transform .3s;}
  /* option "Écran cassé" : voile noir qui flashe façon faux contact */
  .jeu-casse-overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6;border-radius:14px;}
  .jeu-joueur-msg{max-width:460px;margin:24px auto;text-align:center;background:var(--surface);border:1px solid var(--ligne);border-radius:18px;padding:26px 20px;box-shadow:var(--ombre-douce);}
  .jeu-joueur-msg h2{margin:6px 0;}
  .jeu-joueur-msg.juste{border-color:var(--juste);background:var(--juste-fond);}
  .jeu-joueur-msg.faux{border-color:var(--faux);background:var(--faux-fond);}
  .jeu-joueur-nom{margin-top:10px;font-weight:700;font-size:1.2rem;color:var(--laiton);}
  .jeu-forme.grand{font-size:3.4rem;}
  .jeu-reveal-icone{font-size:3.4rem;}
  .jeu-pts{font-size:2rem;font-weight:800;color:var(--juste);}
  .jeu-monrang{margin-top:8px;font-weight:700;font-size:1.1rem;color:var(--encre);}
  @media(max-width:520px){.jeu-question{font-size:1.25rem;}.jeu-grille{grid-template-columns:1fr;}}
  /* ================= ARBRE DE COMPÉTENCES : « Constellations » =================
     Carte de progression en zigzag façon Duolingo. Les nœuds sont des étoiles
     reliées par des segments dont la géométrie est calculée au rendu (voir
     arbreHTML) : pas de mesure du DOM, donc aucun recalcul au redimensionnement. */
  .arb{max-width:940px;margin:0 auto;}
  @keyframes arbPulse{0%,100%{box-shadow:0 0 0 4px rgba(56,119,169,.28),0 8px 20px rgba(0,0,0,.35);}
    50%{box-shadow:0 0 0 12px rgba(56,119,169,.10),0 8px 26px rgba(0,0,0,.45);}}
  /* ================= MODE HISTOIRE : Roman visuel =================
     Scène plein cadre (décor en fond), personnages détourés posés dessus,
     boîte de dialogue en bas. On avance d'une réplique au clic. À la fin d'une
     scène, un bouton lance le module d'exercice existant (aucun exo recréé). */
  .vn{max-width:940px;margin:0 auto;}
  /* Bandeau des scènes (chapitre) */
  .vn-scenes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
  .vn-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rayon-pill);
    background:var(--surface);border:1px solid var(--ligne);color:var(--encre-doux);
    font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:all var(--t-rapide);}
  .vn-chip:hover:not(.verrou){border-color:rgba(30,58,99,.5);color:var(--encre);}
  .vn-chip.on{background:var(--degrade);color:#fff;border-color:transparent;}
  .vn-chip.fait{color:var(--juste);border-color:rgba(26,156,107,.4);}
  .vn-chip.verrou{opacity:.5;cursor:not-allowed;}
  /* La scène : ratio large, décor de fond */
  .vn-scene{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--rayon) var(--rayon) 0 0;
    overflow:hidden;background:#0d1420 center/cover no-repeat;box-shadow:var(--ombre);cursor:pointer;
    user-select:none;}
  @media(max-width:560px){.vn-scene{aspect-ratio:4/5;}}
  .vn-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(6,10,18,.15) 40%,rgba(6,10,18,.82) 100%);}
  /* Personnages posés sur la scène */
  /* Enveloppe fixe (hauteur ET largeur max) + object-fit : quel que soit le
     cadrage de l'image source (gros plan, bras écartés…), le personnage tient
     dans la même boîte et garde une taille apparente cohérente. Anrage en bas. */
  .vn-perso{position:absolute;bottom:0;height:80%;width:42%;z-index:1;
    object-fit:contain;object-position:bottom center;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
    transition:opacity .3s ease,transform .3s ease,filter .3s ease;}
  .vn-perso.gauche{left:1%;} .vn-perso.droite{right:1%;transform:scaleX(-1);}
  .vn-perso.droite.actif{transform:scaleX(-1) translateY(-4px);}
  .vn-perso.gauche.actif{transform:translateY(-4px);}
  /* interlocuteur en retrait : assombri, légèrement reculé */
  .vn-perso.recul{filter:brightness(.55) drop-shadow(0 6px 14px rgba(0,0,0,.5));transform:scale(.94);}
  .vn-perso.droite.recul{transform:scaleX(-1) scale(.94);}
  /* Maestro : hologramme bleuté translucide */
  .vn-perso.hologramme{filter:drop-shadow(0 0 14px rgba(90,160,240,.8))
    saturate(.3) brightness(1.15) sepia(.4) hue-rotate(170deg);opacity:.92;}
  .vn-perso.hologramme.recul{filter:drop-shadow(0 0 10px rgba(90,160,240,.5))
    saturate(.3) brightness(.8) sepia(.4) hue-rotate(170deg);opacity:.6;}
  @keyframes vnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .vn-perso.flotte{animation:vnFloat 3.2s ease-in-out infinite;}
  [data-energie="discret"] .vn-perso.flotte{animation:none;}
  /* apparition / disparition en fondu (opacité seule → conserve le miroir de Nova à droite) */
  @keyframes vnEntre{from{opacity:0}to{opacity:1}}
  @keyframes vnSort{from{opacity:1}to{opacity:0}}
  .vn-perso.entre{animation:vnEntre .8s ease-out both;}
  .vn-perso.sort{animation:vnSort 1.1s ease-in both;pointer-events:none;}
  /* remonte une sprite trop cachée par la boîte de texte (agit sur le bas, pas le transform) */
  .vn-perso.remonte{bottom:12%;height:88%;}
  /* Maestro « grand miroir » : inversé horizontalement, agrandi, flottant, toute la scène */
  @keyframes vnFloatGM{0%,100%{transform:scaleX(-1) scale(1.15) translateY(0)}50%{transform:scaleX(-1) scale(1.15) translateY(-10px)}}
  .vn-perso.grandmiroir{transform:scaleX(-1) scale(1.15);animation:vnFloatGM 3.2s ease-in-out infinite;z-index:2;}
  [data-energie="discret"] .vn-perso.grandmiroir{animation:none;transform:scaleX(-1) scale(1.15);}
  /* Maestro flottant tourné vers la droite (miroir), même taille : pour le continuum de Haendel */
  @keyframes vnFloatMir{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-10px)}}
  .vn-perso.flottedroite{transform:scaleX(-1);animation:vnFloatMir 3.2s ease-in-out infinite;z-index:2;}
  [data-energie="discret"] .vn-perso.flottedroite{animation:none;transform:scaleX(-1);}
  /* Effets sur la scène, déclenchés par le texte (flash, téléportation…) */
  .vn-fx{position:absolute;inset:0;z-index:4;pointer-events:none;}
  .vn-fx.flash{background:#fff;animation:vnFlash 1.1s ease-out;}
  @keyframes vnFlash{0%{opacity:0}12%{opacity:1}30%{opacity:.15}45%{opacity:.9}100%{opacity:0}}
  .vn-fx.pulse{background:radial-gradient(circle,rgba(120,180,255,.5),transparent 60%);animation:vnPulse 1.4s ease-out;}
  @keyframes vnPulse{0%{opacity:0;transform:scale(.6)}40%{opacity:.9}100%{opacity:0;transform:scale(1.6)}}
  /* clignotement rouge (verrou/alerte du Chronophone) */
  .vn-fx.rouge{background:radial-gradient(circle,rgba(230,40,40,.55),transparent 65%);animation:vnRouge 1.6s ease-in-out 2;}
  @keyframes vnRouge{0%,100%{opacity:0}50%{opacity:.9}}
  [data-energie="discret"] .vn-fx{display:none;}
  /* léger tremblement de la scène pour les secousses/bourdonnements */
  @keyframes vnShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
  .vn-scene.secousse{animation:vnShake .5s ease-in-out 2;}
  [data-energie="discret"] .vn-scene.secousse{animation:none;}
  /* Fin de scène « sur l'image » : la narration continue, façon ludique */
  .vn-cta{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;
    background:linear-gradient(to bottom,rgba(6,10,18,.25),rgba(6,10,18,.72));
    animation:vnFondu .4s ease both;}
  @keyframes vnFondu{from{opacity:0}to{opacity:1}}
  .vn-cta .vc-titre{font-family:var(--police-titre);font-weight:800;color:#fff;
    font-size:clamp(1.3rem,4.5vw,2rem);text-shadow:0 3px 14px rgba(0,0,0,.7);max-width:640px;line-height:1.2;}
  .vn-cta .vc-titre.or{color:var(--or-texte);}
  .vn-cta .vc-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border:none;
    border-radius:16px;background:var(--degrade);color:#fff;font-family:var(--police-titre);
    font-weight:800;font-size:1.15rem;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);
    animation:vnBattement 1.8s ease-in-out infinite;}
  @keyframes vnBattement{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  [data-energie="discret"] .vn-cta .vc-btn{animation:none;}
  .vn-cta .vc-btn:hover{filter:brightness(1.08);}
  .vn-cta .vc-liens{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
  .vn-cta .vc-lien{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
    color:#fff;border-radius:var(--rayon-pill);padding:8px 16px;font-size:.85rem;font-weight:700;
    cursor:pointer;font-family:inherit;}
  .vn-cta .vc-lien:hover{background:rgba(255,255,255,.24);}
  /* Boîte de dialogue */
  .vn-boite{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 20px 18px;}
  .vn-nom{display:inline-block;font-family:var(--police-titre);font-weight:800;font-size:1rem;
    padding:4px 16px;border-radius:12px 12px 0 0;color:#fff;margin-bottom:-1px;position:relative;z-index:1;}
  .vn-nom.nova{background:#4a7c3a;} .vn-nom.maestro{background:#2f6db0;}
  .vn-nom.metron{background:#B8972C;} .vn-nom.decor{background:transparent;}
  .vn-nom.haydn{background:#8a5a2b;} .vn-nom.mozart{background:#6d4a9c;}
  .vn-texte{background:rgba(10,16,26,.9);border:1px solid rgba(255,255,255,.14);
    border-radius:0 14px 14px 14px;padding:16px 18px;color:#f1f5f9;font-size:1.02rem;
    line-height:1.55;min-height:78px;box-shadow:0 -2px 20px rgba(0,0,0,.4);}
  .vn-texte.narration{font-style:italic;color:#c6d4e6;border-radius:14px;}
  .vn-suite{display:block;text-align:right;color:var(--or-texte);font-size:.8rem;margin-top:6px;
    animation:vnClign 1.3s ease-in-out infinite;}
  @keyframes vnClign{0%,100%{opacity:.4}50%{opacity:1}}
  [data-energie="discret"] .vn-suite{animation:none;}
  .vn-mod{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:none;
    border-radius:14px;background:var(--degrade);color:#fff;font-family:var(--police-titre);
    font-weight:700;font-size:1rem;cursor:pointer;box-shadow:var(--ombre-bouton);
    transition:transform .18s ease,filter .18s ease;}
  .vn-mod:hover{transform:translateY(-3px);filter:brightness(1.08);}
  .vn-mod.rejouer{background:transparent;border:1px solid var(--ligne);color:var(--encre-doux);box-shadow:none;}
  /* indice « question suivante… » pendant l'enchaînement auto de l'épreuve */
  .vn-ep-hint{color:var(--or-texte);font-weight:700;font-family:var(--police-titre);
    animation:vnClign 1s ease-in-out infinite;}
  [data-energie="discret"] .vn-ep-hint{animation:none;}
  /* Carte de résumé sur l'accueil */
  /* Nova est posé sur le bas de la vignette (même principe que Mascotte Maestro de la bannière) :
     image en absolute, calée sur le bord bas, la carte réserve sa place par un padding gauche. */
  .vn-accueil{display:flex;gap:16px;align-items:center;background:var(--brocart),var(--bandeau);
    border-radius:var(--rayon);padding:18px 22px 18px 140px;cursor:pointer;color:#fff;
    position:relative;overflow:hidden;min-height:136px;
    transition:transform var(--t-rapide),box-shadow var(--t-rapide);}
  .vn-accueil:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte);}
  .vn-accueil img{position:absolute;left:12px;bottom:0;height:126px;width:auto;flex:none;
    filter:drop-shadow(1px 0 0 rgba(255,255,255,.92)) drop-shadow(-1px 0 0 rgba(255,255,255,.92)) drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 -1px 0 rgba(255,255,255,.92)) drop-shadow(0 8px 12px rgba(0,0,0,.42));}
  @media(max-width:520px){
    .vn-accueil{padding-left:104px;min-height:112px;}
    .vn-accueil img{height:104px;left:6px;}
  }
  .vn-accueil .vna-txt{flex:1;min-width:0;text-align:left;}
  .vn-accueil .vna-titre{font-family:var(--police-titre);font-weight:800;font-size:1.1rem;}
  .vn-accueil .vna-sous{color:rgba(255,255,255,.82);font-size:.86rem;margin-top:2px;}
  .vn-accueil .vna-piste{height:8px;border-radius:var(--rayon-pill);background:rgba(255,255,255,.18);
    overflow:hidden;margin-top:10px;max-width:320px;}
  .vn-accueil .vna-piste>i{display:block;height:100%;border-radius:var(--rayon-pill);
    background:linear-gradient(90deg,var(--or),#F6DC8A);transition:width .5s ease;}
  .vn-accueil .vna-fleche{font-size:1.6rem;color:var(--or-texte);flex:none;}
  /* L'ÉPREUVE : questions une par une sur le décor de la scène */
  .vn-ep{position:relative;border-radius:var(--rayon);overflow:hidden;
    background:#0d1420 center/cover no-repeat;padding:18px 16px 20px;box-shadow:var(--ombre);}
  .vn-ep::before{content:"";position:absolute;inset:0;background:rgba(8,12,20,.72);pointer-events:none;}
  .vn-ep>*{position:relative;z-index:1;}
  .vn-ep-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex-wrap:wrap;margin-bottom:12px;color:#fff;}
  .vn-ep-tete .vet-titre{font-family:var(--police-titre);font-weight:800;font-size:1rem;}
  .vn-ep-jauge{flex:1;min-width:140px;height:9px;border-radius:var(--rayon-pill);
    background:rgba(255,255,255,.16);overflow:hidden;}
  .vn-ep-jauge>i{display:block;height:100%;border-radius:var(--rayon-pill);
    background:linear-gradient(90deg,var(--juste),var(--or));transition:width .35s ease;}
  .vn-ep-score{font-weight:800;font-family:var(--police-titre);white-space:nowrap;}
  .vn-ep-score .bon{color:var(--juste-2,#7bd39b);} .vn-ep-score .seuil{color:var(--or-texte);}
  /* la carte d'exercice native (.ex) telle quelle, posée sur le décor */
  .vn-ep .ex{background:var(--surface);border-radius:var(--rayon-s);padding:18px 20px;
    box-shadow:0 8px 26px rgba(0,0,0,.4);max-width:640px;margin:0 auto;}
  .vn-ep-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
  .vn-ep-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border:none;
    border-radius:14px;background:var(--degrade);color:#fff;font-family:var(--police-titre);
    font-weight:700;font-size:1rem;cursor:pointer;box-shadow:var(--ombre-bouton);
    transition:transform .18s ease,filter .18s ease;}
  .vn-ep-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08);}
  .vn-ep-btn:disabled{opacity:.5;cursor:default;}
  /* Écran de verdict (réussi / raté) : Nova AU-DESSUS, message CENTRÉ dessous
       (Nova ne recouvre plus le texte). */
  .vn-verdict{position:relative;border-radius:var(--rayon);overflow:hidden;
    background:#0d1420 center/cover no-repeat;color:#fff;box-shadow:var(--ombre);
    padding:22px 20px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
  .vn-verdict::before{content:"";position:absolute;inset:0;pointer-events:none;}
  .vn-verdict.gagne::before{background:rgba(20,70,44,.7);}
  .vn-verdict.rate::before{background:rgba(90,25,35,.74);}
  .vn-verdict>*{position:relative;z-index:1;}
  .vn-verdict img.perso{height:180px;width:auto;border-radius:0;margin-bottom:2px;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));}
  @media(max-width:560px){.vn-verdict img.perso{height:130px;}}
  .vn-verdict .vv-titre{font-family:var(--police-titre);font-weight:800;
    font-size:clamp(1.5rem,5.5vw,2.1rem);margin-bottom:4px;}
  .vn-verdict.gagne .vv-titre{color:var(--or-texte);} .vn-verdict.rate .vv-titre{color:#ff9db0;}
  .vn-verdict .vv-texte{color:#e8f0fa;max-width:520px;margin:0 auto 14px;line-height:1.55;}
  .vn-verdict .vn-ep-actions{justify-content:center;}
  /* ===== MODE HISTOIRE IMMERSIF : plein écran, téléphone et tablette ===== */
  body.vn-immersif{overflow:hidden;}
  body.vn-immersif #zone{position:fixed;inset:0;z-index:50;margin:0;padding:0;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#05080f;}
  body.vn-immersif .app-controls,body.vn-immersif .menu-toggle{display:none!important;}
  body.vn-immersif .vn{max-width:none;margin:0;height:100%;display:flex;flex-direction:column;}
  body.vn-immersif .vn.vn-defile{height:auto;min-height:100%;}
  /* barre du haut : Quitter · titre · son */
  .vn-barre{flex:none;display:flex;align-items:center;gap:10px;position:relative;z-index:6;
    padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
    padding-top:max(8px,env(safe-area-inset-top));
    background:linear-gradient(180deg,rgba(5,8,15,.97),rgba(5,8,15,.88));border-bottom:1px solid rgba(255,255,255,.08);}
  .vn-b-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 16px;
    border-radius:var(--rayon-pill);border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;
    font-family:var(--police-titre);font-weight:700;font-size:.92rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .vn-b-btn i{font-size:1.25rem;color:#fff !important;}
  .vn-b-btn:hover{background:rgba(255,255,255,.2);}
  .vn-b-son{padding:0;width:44px;}
  .vn-b-titre{flex:1;min-width:0;text-align:center;font-family:var(--police-titre);font-weight:800;color:var(--or-clair);
    font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* chapitres et scènes débloqués : une seule ligne qui défile au doigt */
  .vn-nav{flex:none;display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;position:relative;z-index:6;
    padding:7px max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left));background:rgba(5,8,15,.72);}
  .vn-nav::-webkit-scrollbar{display:none;}
  .vn-nav .vn-chaps,.vn-nav .vn-scenes{display:flex;gap:6px;flex-wrap:nowrap;margin:0;}
  .vn-nav .vn-chaps+.vn-scenes{padding-left:10px;border-left:1px solid rgba(255,255,255,.2);}
  .vn-nav .vn-chip{flex:none;white-space:nowrap;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#dfe8f3;padding:7px 13px;font-size:.84rem;}
  .vn-nav .vn-chip.on{background:var(--or);color:#111E2D;border-color:transparent;}
  .vn-nav .vn-chip.fait{color:#8fe0b5;border-color:rgba(143,224,181,.42);}
  body.vn-immersif .vn-scene{flex:1;min-height:0;aspect-ratio:auto;border-radius:0;box-shadow:none;}
  /* plateau et emplacements des personnages : taille fixe, réglée par la hauteur */
  .vn-stage{position:absolute;inset:0;z-index:1;pointer-events:none;}
  .vn-slot{position:absolute;bottom:0;height:82%;width:42%;z-index:1;transform:translateX(-50%);}
  @supports (aspect-ratio:1/1){ .vn-slot{width:auto;aspect-ratio:1/1;} }
  .vn-slot.gauche{left:24%;} .vn-slot.droite{left:76%;}
  .vn-slot.devant{z-index:2;}
  .vn-slot>.vn-perso{position:absolute;left:0;right:0;top:auto;bottom:0;width:100%;height:100%;
    object-fit:contain;object-position:bottom center;}
  .vn-slot>.vn-perso.remonte{bottom:12%;height:88%;}
  /* fin des aventures disponibles */
  .vn-cta .vc-suite{color:#e8f0fa;text-align:center;font-size:1rem;line-height:1.5;max-width:460px;margin:0 auto 14px;
    background:rgba(5,8,15,.6);border:1px solid rgba(242,201,76,.4);border-radius:var(--rayon-s);padding:12px 16px;}
  .vn-cta .vc-suite i{color:var(--or-clair);}
  body.vn-immersif .vn-ep,body.vn-immersif .vn-verdict{border-radius:0;flex:1;}
  /* PORTRAIT (téléphone, tablette debout) : la boîte de texte passe SOUS les personnages */
  @media (orientation:portrait) and (max-width:900px){
    body.vn-immersif .vn-scene{display:flex;flex-direction:column;}
    body.vn-immersif .vn-stage{position:relative;inset:auto;flex:1;min-height:0;}
    body.vn-immersif .vn-slot{height:84%;}
    body.vn-immersif .vn-slot.gauche{left:30%;} body.vn-immersif .vn-slot.droite{left:70%;}
    body.vn-immersif .vn-boite{position:relative;flex:none;max-height:46%;overflow-y:auto;
      padding:0 10px max(12px,env(safe-area-inset-bottom));}
    body.vn-immersif .vn-texte{font-size:1rem;line-height:1.5;min-height:0;padding:12px 14px;}
    body.vn-immersif .vn-scene::after{background:linear-gradient(to bottom,rgba(6,10,18,0) 40%,rgba(6,10,18,.5) 72%,rgba(6,10,18,.92) 100%);}
    body.vn-immersif .vn-cta .vc-btn{padding:14px 26px;}
  }
  @media (max-width:380px){ .vn-b-lib{display:none;} .vn-b-btn{padding:0;width:44px;} }
  /* téléphone COUCHÉ : barres plus fines, texte compact */
  @media (orientation:landscape) and (max-height:500px){
    body.vn-immersif .vn-slot{height:90%;}
    body.vn-immersif .vn-texte{font-size:.92rem;padding:9px 14px;min-height:0;}
    body.vn-immersif .vn-boite{padding:8px 14px max(8px,env(safe-area-inset-bottom));}
    body.vn-immersif .vn-barre{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px;}
    body.vn-immersif .vn-nav{padding-top:4px;padding-bottom:4px;}
    .vn-b-btn{height:38px;min-width:38px;}
  }
  /* ================= LE CALMAR MUSICAL : « Squid Gamme » =================
     Mode à élimination : une mauvaise réponse (ou pas de réponse) et c'est fini.
     Palette dédiée (rose calmar + marine) volontairement distincte du reste. */
  :root{--sq-rose:#e94f6d; --sq-rose-fonce:#b3253f; --sq-nuit:#0f1a2b; --sq-or:#F2C94C;}
  /* conteneur de requête : ce qui compte pour la mascotte, c'est la largeur de la
     VIGNETTE, pas celle de la fenêtre : entre 760px et 1000px la barre latérale
     occupe 284px, donc une même largeur de fenêtre donne des vignettes très
     différentes selon que la barre est repliée ou non. */
  .sq{max-width:960px;margin:0 auto;text-align:center;container-type:inline-size;}
  /* Vignette biseautée vers le bas (même encoche de 22px que .ticket-forme),
     avec la mascotte incrustée à gauche exactement comme celle de l'accueil :
     posée en absolu, calée sur le bas, contour blanc + ombre portée.
     L'image passe par une variable CSS (--sq-calmar-img) posée au démarrage,
     ce qui évite de répéter la balise <img> dans chaque écran du mode.
     Retrait gauche/droite IDENTIQUE : la mascotte n'occupe que la gauche, mais
     un padding asymétrique décentrerait le contenu alors que la pointe du biseau,
     elle, reste à 50 %. Les deux doivent tomber sur le même axe. */
  .sq-scene{position:relative;background:var(--sq-nuit);
    border-radius:var(--rayon) var(--rayon) 0 0;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),50% 100%,0 calc(100% - 22px));
    padding:26px 150px 52px;overflow:hidden;color:#fff;}
  .sq-scene::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 15% 12%,rgba(233,79,109,.20),transparent 45%),
               radial-gradient(circle at 85% 88%,rgba(242,201,76,.14),transparent 45%);}
  .sq-scene::after{content:"";position:absolute;left:10px;bottom:22px;
    width:132px;height:144px;pointer-events:none;z-index:2;
    background:var(--sq-calmar-img) center bottom/contain no-repeat;
    filter:drop-shadow(1px 0 0 rgba(255,255,255,.92)) drop-shadow(-1px 0 0 rgba(255,255,255,.92))
           drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 -1px 0 rgba(255,255,255,.92))
           drop-shadow(0 10px 16px rgba(0,0,0,.42));}
  .sq-scene>*{position:relative;z-index:1;}
  /* Mascotte affichée EN CLAIR côté élève (mobile), où le calmar de fond (::after) est masqué. */
  .sq-mascotte{width:92px;height:auto;display:block;margin:0 auto 8px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
  /* Sous ~720px de vignette, les 300px de retrait symétrique ne laissent plus
     assez de place au texte : la mascotte s'efface et le contenu reprend toute
     la largeur. Requête de conteneur (pas de fenêtre) : voir .sq ci-dessus. */
  @container (max-width:720px){
    .sq-scene{padding-left:20px;padding-right:20px;}
    .sq-scene::after{display:none;}
  }
  /* repli pour les navigateurs sans requêtes de conteneur */
  @supports not (container-type:inline-size){
    @media(max-width:1000px){
      .sq-scene{padding-left:20px;padding-right:20px;}
      .sq-scene::after{display:none;}
    }
  }
  @media(max-width:640px){.sq-scene{padding:22px 16px 46px;}}
  /* Étiquette de phase (le nom du mode est déjà dans la bannière de l'écran) */
  .sq-phase{font-family:var(--police-titre);font-weight:800;font-size:.8rem;
    letter-spacing:3px;text-transform:uppercase;color:var(--sq-rose);margin-bottom:14px;}
  /* Grille des joueurs (carrés avec le code) */
  .sq-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
    gap:12px;margin:18px auto 6px;max-width:840px;}
  /* sur téléphone : carrés plus petits, sinon une classe de 25 défile sans fin */
  @media(max-width:560px){
    .sq-grille{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
    .sq-j .sqj-code{font-size:.78rem;}
    .sq-j .sqj-etat{font-size:.54rem;}
    .sq-j.mort::after{font-size:2rem;}
  }
  .sq-j{position:relative;aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;font-family:var(--police-titre);
    background:linear-gradient(160deg,#1d3350,#16283e);border:2px solid rgba(255,255,255,.14);
    color:#fff;overflow:hidden;transition:transform .35s ease,opacity .35s ease,filter .35s ease;}
  .sq-j .sqj-code{font-weight:800;font-size:1rem;letter-spacing:1px;word-break:break-all;padding:0 4px;}
  .sq-j .sqj-etat{font-size:.62rem;text-transform:uppercase;letter-spacing:1.4px;opacity:.75;}
  .sq-j.moi{border-color:var(--sq-or);box-shadow:0 0 0 3px rgba(242,201,76,.28);}
  .sq-j.repondu{border-color:var(--juste);}
  .sq-pouvoir{margin:18px auto 0;max-width:460px;background:rgba(233,79,109,.14);border:1px solid var(--sq-rose);border-radius:14px;padding:14px;text-align:center;animation:hypePop .5s ease;}
  .sqp-titre{font-family:var(--police-titre);font-weight:800;color:var(--sq-rose);font-size:1.05rem;}
  .sqp-cibles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 8px;}
  .sqp-btn{font-family:inherit;font-weight:800;letter-spacing:1px;padding:8px 16px;border-radius:999px;border:1px solid var(--sq-rose);background:#fff;color:var(--sq-rose-fonce);cursor:pointer;}
  .sqp-btn:hover{background:var(--sq-rose);color:#fff;}
  .sqp-note{font-size:.8rem;color:rgba(255,255,255,.85);}
  .sq-j.repondu .sqj-etat{color:var(--juste);opacity:1;}
  /* entrée en cascade */
  .sq-j.entre{animation:sqPop .4s cubic-bezier(.34,1.56,.64,1) both;}
  @keyframes sqPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
  /* élimination : carte éteinte + croix rouge VIVE, puis chute.
     Le grisé porte sur le contenu (code/état) et non sur la carte entière :
     un filter:grayscale sur .sq-j désaturerait aussi la croix ::after. */
  .sq-j.mort{background:linear-gradient(160deg,#242a34,#1b202a);border-color:rgba(255,255,255,.08);}
  .sq-j.mort .sqj-code,.sq-j.mort .sqj-etat{filter:grayscale(1);opacity:.45;}
  .sq-j.mort::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:3rem;font-weight:900;color:var(--sq-rose);
    text-shadow:0 2px 12px rgba(0,0,0,.75);animation:sqCroix .45s cubic-bezier(.34,1.56,.64,1) both;}
  @keyframes sqCroix{from{transform:scale(2.4) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  .sq-j.tombe{animation:sqTombe .75s cubic-bezier(.5,0,.9,.5) forwards;}
  @keyframes sqTombe{to{transform:translateY(220px) rotate(14deg);opacity:0;}}
  /* Titres plein écran (suspense) */
  /* Écrans « moment » (LE JEU VA COMMENCER, la bonne réponse était…, vainqueur).
     On ne touche QUE le padding vertical : écraser le raccourci `padding` ramenait
     le retrait latéral à 14px et le texte passait sous la mascotte dès que la
     fenêtre se réduisait. Le retrait gauche/droite de .sq-scene doit être conservé. */
  .sq-titre-plein{padding-top:34px;padding-bottom:56px;}
  .sq-slam{font-family:var(--police-titre);font-weight:800;line-height:1.1;
    font-size:clamp(1.6rem,6vw,3.2rem);color:#fff;animation:sqSlam .55s cubic-bezier(.2,1.4,.4,1) both;}
  @keyframes sqSlam{0%{transform:scale(2.6);opacity:0;letter-spacing:14px}
    60%{transform:scale(.94);opacity:1;letter-spacing:1px}100%{transform:scale(1);letter-spacing:normal}}
  .sq-slam.rose{color:var(--sq-rose);}
  .sq-slam.or{color:var(--sq-or);}
  .sq-sous{margin-top:10px;color:#c6d4e6;font-size:.95rem;}
  /* battement de coeur pendant l'attente */
  .sq-battement{animation:sqBat 1.1s ease-in-out infinite;}
  @keyframes sqBat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  [data-energie="discret"] .sq-battement{animation:none;}
  /* Chrono */
  .sq-chrono{margin:14px auto 4px;max-width:420px;}
  .sq-chrono-num{font-family:var(--police-titre);font-weight:800;font-size:2.6rem;color:var(--sq-or);line-height:1;}
  .sq-chrono-num.urgent{color:var(--sq-rose);animation:sqBat .45s ease-in-out infinite;}
  .sq-piste{height:10px;border-radius:var(--rayon-pill);background:rgba(255,255,255,.14);
    overflow:hidden;margin-top:8px;}
  .sq-piste>i{display:block;height:100%;border-radius:var(--rayon-pill);
    background:linear-gradient(90deg,var(--juste),var(--sq-or),var(--sq-rose));transition:width .25s linear;}
  /* Verdict plein écran (rouge = éliminé, vert = survivant) */
  .sq-verdict{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:24px;
    animation:sqFondu .3s ease both;}
  .sq-verdict.mort{background:rgba(179,37,63,.86);}
  .sq-verdict.vif{background:rgba(26,156,107,.86);}
  @keyframes sqFondu{from{opacity:0}to{opacity:1}}
  .sq-verdict .sqv-txt{font-family:var(--police-titre);font-weight:800;color:#fff;
    font-size:clamp(1.8rem,7vw,3.4rem);line-height:1.15;animation:sqSlam .5s cubic-bezier(.2,1.4,.4,1) both;}
  .sq-verdict .sqv-sous{color:rgba(255,255,255,.9);margin-top:12px;font-size:1rem;}
  /* Réponses du joueur */
  .sq-reps{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px;margin:16px auto 0;}
  @media(max-width:520px){.sq-reps{grid-template-columns:1fr;}}
  /* Biseaux latéraux (mêmes encoches à 45° que la bannière de titre) : ça donne
     au bouton une pointe de flèche des deux côtés, plus tranchant que le rectangle.
     Pas de bordure : un clip-path la couperait le long des diagonales, laissant
     des arêtes nues : on joue donc sur des aplats de couleur. */
  .sq-rep{padding:16px 26px;border:none;
    clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
    background:rgba(255,255,255,.10);color:#fff;font-weight:700;font-size:1.02rem;
    font-family:inherit;cursor:pointer;transition:all var(--t-rapide);line-height:1.3;}
  .sq-rep:hover:not(:disabled){background:rgba(255,255,255,.22);transform:translateY(-2px) scale(1.02);}
  .sq-rep:active:not(:disabled){transform:translateY(1px) scale(.98);}
  .sq-rep:disabled{cursor:default;}
  .sq-rep.choisi{background:linear-gradient(135deg,var(--sq-or),#B8972C);color:#2a1f06;}
  .sq-rep.bon{background:linear-gradient(135deg,var(--juste),#127952);}
  .sq-rep.mauvais{background:linear-gradient(135deg,var(--sq-rose),var(--sq-rose-fonce));}
  /* Spectateur (éliminé qui regarde) */
  .sq-spectateur{background:rgba(233,79,109,.14);border:1px solid rgba(233,79,109,.4);
    border-radius:var(--rayon-pill);padding:7px 16px;display:inline-flex;align-items:center;gap:8px;
    font-size:.82rem;font-weight:700;color:var(--sq-rose);margin-bottom:12px;}
  /* Vainqueur */
  .sq-vainqueur{font-family:var(--police-titre);font-weight:800;
    font-size:clamp(2rem,9vw,4rem);letter-spacing:4px;color:var(--sq-or);
    text-shadow:0 0 26px rgba(242,201,76,.5);animation:sqSlam .6s cubic-bezier(.2,1.4,.4,1) both;}
  .sq-compteur{font-size:.9rem;color:#c6d4e6;margin-top:6px;}
  .sq-compteur b{color:#fff;}
  /* ===== Calmar Musical : écrans du tableau (Squid Gamme, symphonie des bougies) ===== */
  .sq.sq-large{max-width:1180px;}
  .sq-scene.sqa{padding:20px 26px 48px;text-align:left;}
  .sq-scene.sqa::after{display:none;}
  .sqa-tete{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px;}
  .sqa-mascotte{width:64px;height:auto;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
  .sqa-titre{flex:1;min-width:220px;}
  .sqa-titre .sq-phase{margin-bottom:2px;}
  .sqa-titre>b{display:block;font-family:var(--police-titre);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.1;color:#fff;}
  .sqa-stat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:16px;padding:8px 14px;}
  .sqa-stat>b{font-family:var(--police-titre);font-weight:800;font-size:2rem;line-height:1;color:var(--sq-or);}
  .sqa-stat span{font-size:.78rem;line-height:1.25;color:#dfe7f1;}
  .sqa-stat em{font-style:normal;font-weight:800;color:var(--sq-rose);}
  .sqa-stat.or{background:rgba(242,201,76,.12);border:1px solid rgba(242,201,76,.45);}
  .sqa-stat.rose{background:rgba(233,79,109,.16);border:1px solid var(--sq-rose);}
  .sqa-stat.rose>b{color:var(--sq-rose);}
  .sqa-pin{background:#fff;border-radius:16px;padding:4px 16px;text-align:center;}
  .sqa-pin small{display:block;font-size:.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--encre-doux);}
  .sqa-pin b{display:block;font-family:var(--police-titre);font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:6px;padding-left:6px;color:var(--sq-nuit);}
  .sqa-rep{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;}
  .sqa-chrono{width:54px;height:54px;border-radius:50%;border:4px solid var(--sq-or);display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:1.5rem;color:#fff;}
  .sqa-chrono.urgent{border-color:var(--sq-rose);color:var(--sq-rose);animation:sqBat .45s ease-in-out infinite;}
  .sqa-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start;}
  .sqa-q .jeu-question{font-size:1.35rem;margin:4px 0 10px;text-align:left;}
  .sqa-q .sq-reps{margin:8px 0 0;max-width:none;}
  .sqa-q .sq-piste{margin-top:12px;}
  .sqa-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;align-content:start;}
  .sqa-grille .sq-j{aspect-ratio:auto;height:62px;}
  .sq-j.fige{opacity:.3;}
  .sq-scene svg.portee{background:#fff;border-radius:12px;padding:2px 6px;}
  .sqa-q.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px 18px;align-items:center;}
  .sqa-q.duo .sq-piste{grid-column:1/-1;}
  @media (max-width:820px){ .sqa-q.duo{grid-template-columns:1fr;} }
  .sq-j.fige::after{animation:none;font-size:1.6rem;}
  .sq-scene.sqa .sq-grille{max-width:none;}
  .sqa-bilan{display:flex;gap:10px;flex-wrap:wrap;}
  .sqa-encarts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px;}
  .sqa-encart{border-radius:14px;padding:10px 14px;font-size:.92rem;line-height:1.4;}
  .sqa-encart small{display:block;font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;}
  .sqa-encart.or{background:rgba(242,201,76,.12);border:1px solid rgba(242,201,76,.45);} .sqa-encart.or small{color:var(--sq-or);}
  .sqa-encart.rose{background:rgba(233,79,109,.14);border:1px solid rgba(233,79,109,.45);} .sqa-encart.rose small{color:var(--sq-rose);}
  .sqa-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px;}
  .sqa-cta{min-height:56px;padding:0 30px;border:none;border-radius:16px;background:var(--sq-or);color:#16233a;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 10px 26px rgba(0,0,0,.3);}
  .sqa-actions .jeu-stop{border-color:rgba(255,255,255,.4);color:#fff;}
  .sq-jeux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--fond-app,#eaf3fb);border-radius:var(--rayon-pill);padding:4px;}
  .sq-jeux button{border:none;background:none;min-height:44px;border-radius:var(--rayon-pill);font-family:inherit;font-weight:600;font-size:.9rem;color:var(--encre-doux);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
  .sq-jeux button.on{background:var(--sq-nuit);color:#fff;font-weight:700;}
  /* bougies */
  .sqb-rangee{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:16px 8px;align-items:end;background:rgba(0,0,0,.25);border-radius:20px;padding:18px 16px 12px;margin-top:14px;border-bottom:10px solid #4a3818;}
  .sqb-rangee.petite{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:12px 4px;padding:14px 10px 10px;}
  .sqb-b{display:flex;flex-direction:column;align-items:center;min-width:0;}
  .sqb-flamme{position:relative;width:22px;height:30px;}
  .sqb-flamme svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s,transform .6s;transform-origin:50% 100%;}
  .sqb-flamme .s{opacity:0;}
  .sqb-b.allume .f{filter:drop-shadow(0 0 8px rgba(242,201,76,.7));animation:sqbVacille 1.7s ease-in-out infinite;}
  .sqb-b.repondu .f{filter:drop-shadow(0 0 16px rgba(242,201,76,1)) drop-shadow(0 0 4px #fff);transform:scale(1.2);}
  .sqb-b.eteinte .f{opacity:0;}
  .sqb-b.souffle .f{opacity:0;transform:scaleY(.2);}
  .sqb-b.souffle .s{animation:sqbFumee 2.2s ease forwards;}
  .sqb-b.rallume .f{animation:sqbRallume .9s cubic-bezier(.2,1.4,.4,1) both,sqbVacille 1.7s ease-in-out .9s infinite;filter:drop-shadow(0 0 18px rgba(242,201,76,1));}
  .sqb-meche{width:3px;height:5px;background:#3a2c14;}
  .sqb-cire{width:22px;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#fff4d9,#f1dcaa);transition:background .6s;}
  .sqb-b.eteinte .sqb-cire,.sqb-b.souffle .sqb-cire{background:linear-gradient(90deg,#5a6270,#3e4552);}
  .sqb-code{font-family:var(--police-titre);font-size:.66rem;font-weight:700;letter-spacing:.5px;margin-top:4px;color:#fff;white-space:nowrap;}
  .sqb-b.eteinte .sqb-code,.sqb-b.souffle .sqb-code{opacity:.4;}
  .sqb-b.moi .sqb-code{color:var(--sq-or);opacity:1;}
  @keyframes sqbVacille{0%,100%{transform:scaleY(1) rotate(-2deg);}50%{transform:scaleY(1.08) rotate(2deg);}}
  @keyframes sqbFumee{0%{opacity:0;transform:translateY(4px);}30%{opacity:1;}100%{opacity:0;transform:translateY(-14px);}}
  @keyframes sqbRallume{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
  .sqb-legende{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:.78rem;color:#c6d4e6;}
  .sqb-moi{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.25);border-radius:16px;padding:10px 14px;margin:0 auto 12px;max-width:420px;text-align:left;}
  .sqb-moi .sqb-code{display:none;}
  .sqb-moi b{display:block;font-family:var(--police-titre);font-size:1.1rem;}
  .sqb-moi span{font-size:.82rem;color:#c6d4e6;}
  .sqb-choeur{background:rgba(233,79,109,.14);border:1px solid var(--sq-rose);border-radius:14px;padding:10px 14px;margin:0 auto 12px;max-width:460px;text-align:left;font-size:.86rem;line-height:1.4;}
  .sqb-choeur b{display:block;font-family:var(--police-titre);color:var(--sq-rose);font-size:1rem;}
  .sq-verdict.rallume{background:rgba(142,109,11,.9);}
  .sq-verdict .sqv-ic{font-size:4.2rem;line-height:1;color:#fff;margin-bottom:6px;animation:sqvIc .6s cubic-bezier(.2,1.5,.4,1) both;}
  .sq-verdict .sqv-ic svg{margin:0 auto;}
  @keyframes sqvIc{from{transform:scale(.2) rotate(-12deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
  .sq-verdict .sqv-mise{display:block;margin-bottom:6px;}
  .sq-verdict .sqv-pts{font-family:var(--police-titre);font-weight:800;font-size:3rem;color:#fff;
    text-shadow:0 4px 18px rgba(0,0,0,.4);animation:sqvPts 1.8s ease-out forwards;}
  @keyframes sqvPts{0%{opacity:0;transform:translateY(20px) scale(.6);}25%{opacity:1;transform:translateY(0) scale(1.1);}
    60%{opacity:1;transform:translateY(-10px) scale(1);}100%{opacity:0;transform:translateY(-90px) scale(.8);}}
  .sq-verdict .sqv-compteur{margin-top:14px;background:rgba(255,255,255,.18);border-radius:var(--rayon-pill);padding:8px 20px;color:#fff;font-size:1rem;}
  .sq-verdict .sqv-compteur b{font-family:var(--police-titre);font-size:1.5rem;}
  /* réservoir de la cagnotte (tableau) */
  .sq-tank{display:flex;align-items:center;gap:10px;background:rgba(242,201,76,.12);border:1px solid rgba(242,201,76,.5);border-radius:16px;padding:8px 14px;}
  .sq-tank-verre{position:relative;width:34px;height:52px;border:3px solid var(--sq-or);border-radius:8px 8px 12px 12px;overflow:hidden;background:rgba(255,255,255,.08);flex:none;}
  .sq-tank-verre i{position:absolute;left:0;right:0;bottom:0;display:block;background:linear-gradient(180deg,#ffe9a3,var(--sq-or));transition:height .9s cubic-bezier(.3,1.1,.4,1);}
  .sq-tank-verre i::after{content:"";position:absolute;left:0;right:0;top:-4px;height:8px;border-radius:50%;background:#fff6d6;opacity:.85;}
  .sq-tank-txt b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.9rem;line-height:1;color:var(--sq-or);}
  .sq-tank-txt span{font-size:.76rem;color:#dfe7f1;}
  .sq-tank.plouf{animation:sqTank .7s cubic-bezier(.2,1.4,.4,1);}
  @keyframes sqTank{0%{transform:scale(1);}35%{transform:scale(1.08);}100%{transform:scale(1);}}
  .sq-piece{position:fixed;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6,var(--sq-or) 60%,#b8972c);
    box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:1600;pointer-events:none;transform:translate(0,0);transition:transform 1.1s cubic-bezier(.4,0,.5,1),opacity 1.1s ease;}
  .sq-piece.ecran{transition:none;animation:sqPieceFuite 2.2s ease-out forwards;}
  .sq-piece.ecran.gain{animation:sqPieceGain 2.2s ease-out forwards;}
  @keyframes sqPieceFuite{0%{opacity:0;transform:translateY(0) scale(.6);}15%{opacity:1;transform:translateY(-10px) scale(1);}
    100%{opacity:0;transform:translateY(-70vh) translateX(40px) scale(.5) rotate(180deg);}}
  @keyframes sqPieceGain{0%{opacity:0;transform:translateY(-60vh) scale(.5);}20%{opacity:1;}
    100%{opacity:0;transform:translateY(0) scale(1) rotate(200deg);}}
  [data-energie="discret"] .sq-piece{display:none;}
  /* barres d'arrêt (tableau) */
  .sqa-bas,.mj-stop-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .jeu-stop.fin{border-color:var(--sq-or);color:var(--sq-or);}
  .jeu-stop.fin:hover{background:rgba(242,201,76,.16);}
  .sqa-bas .jeu-stop{border-color:rgba(255,255,255,.45);color:#fff;}
  .sqa-bas .jeu-stop.fin{border-color:var(--sq-or);color:var(--sq-or);}
  .sqa-degressif{display:block;font-size:.72rem;font-weight:600;color:#c6d4e6;}
  [data-energie="discret"] .sqb-b .f{animation:none!important;}
  @media (max-width:820px){ .sqa-corps{grid-template-columns:1fr;} }
  .lecon .astuce{background:#faf3e3;border-left:4px solid var(--laiton);padding:11px 15px;border-radius:0 10px 10px 0;margin:12px 0;color:#3a2c14;}
  /* mode nuit : les encarts beige/blancs codés en dur redeviennent lisibles */
  [data-theme="dark"] .lecon .astuce{background:var(--surface-2);color:var(--encre);}
  [data-theme="dark"] .btn-son{background:var(--papier-fonce);color:var(--encre);}
  [data-theme="dark"] .vocal-explication{background:var(--surface-2);color:var(--encre);}
  .lecon table.gr{border-collapse:collapse;margin:10px 0;font-size:.95rem;display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .lecon table.gr td,.lecon table.gr th{border:1px solid var(--ligne);padding:6px 12px;text-align:center;white-space:nowrap;}
  .lecon table.gr th{background:var(--papier-fonce);}
  /* leçon « modulations » : écoutes, portées, clavier */
  .lecon .mod-ecoute{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;}
  .lecon .mod-ecoute .btn-son{margin:0;}
  .lecon .mod-fig{margin:10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;text-align:center;}
  .lecon .mod-fig svg.mod-portee{background:#fff;border-radius:10px;border:1px solid var(--ligne);width:100%;min-width:280px;height:auto;display:inline-block;}
  .lecon .mod-fig svg.mod-clavier{width:100%;max-width:440px;height:auto;display:inline-block;}
  .lecon table.gr.mod-epoques td{white-space:normal;text-align:left;vertical-align:top;min-width:120px;}
  .lecon table.gr.mod-epoques td:first-child{min-width:110px;}
  /* piano des modulations */
  .pm{border:1px solid var(--ligne);border-radius:14px;padding:12px;background:var(--surface-2);margin:12px 0;}
  .pm-barre{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .pm-ton{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.92rem;}
  .pm-ton select{padding:7px 10px;border:1px solid var(--ligne);border-radius:9px;font-family:inherit;font-size:.92rem;background:var(--surface);color:var(--encre);min-height:38px;}
  .pm-arm{font-size:.86rem;color:var(--encre-doux);font-weight:600;}
  .pm-clavier{position:relative;height:170px;user-select:none;-webkit-user-select:none;touch-action:none;margin:0 auto;max-width:640px;}
  .pm-t{position:absolute;top:0;margin:0;padding:0;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;
    font-family:var(--police);line-height:1.1;box-shadow:none;min-height:0;-webkit-tap-highlight-color:transparent;touch-action:none;transition:background .08s;}
  .pm-b{height:100%;background:#fff;border:1px solid #1f2440;border-radius:0 0 8px 8px;z-index:1;padding-bottom:7px;color:#44506a;}
  .pm-n{height:60%;background:#1f2440;border:1px solid #0d1322;border-radius:0 0 6px 6px;z-index:2;padding-bottom:5px;color:#fff;}
  .pm-b.gamme{background:#dcebf8;} .pm-b.tonique{background:#a9cdee;}
  .pm-n.gamme{background:#2374b0;border-color:#174f79;} .pm-n.tonique{background:#174f79;}
  .pm-t.on,.pm-b.on,.pm-n.on{background:var(--or)!important;color:#1f2440;}
  .pm-deg{font-size:.66rem;font-weight:800;color:var(--bandeau);min-height:.8em;}
  .pm-n .pm-deg{color:#fff;}
  .pm-nom{font-size:.66rem;font-weight:600;white-space:nowrap;}
  .pm-affiche{text-align:center;margin:10px 0 4px;font-size:.95rem;min-height:1.4em;}
  .pm-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px;}
  .pm-actions .btn-son{margin:0;}
  .pm-melo{border-top:1px dashed var(--ligne);margin-top:12px;padding-top:10px;}
  .pm-melo-t{font-size:.92rem;}
  .pm-notes{margin:8px 0 2px;font-size:.95rem;line-height:2;min-height:2em;}
  .pm-note{display:inline-block;padding:0 7px;border-radius:999px;background:var(--surface);border:1px solid var(--ligne);margin:0 2px 2px 0;}
  .pm-note.alt{background:var(--faux-fond);border-color:var(--faux);color:var(--faux);font-weight:700;}
  @media (max-width:560px){
    .pm{padding:10px 6px;margin-left:-12px;margin-right:-12px;border-radius:12px;}
    .pm-clavier{height:150px;}
    .pm-n .pm-nom{display:none;}
    .pm-nom,.pm-deg{font-size:.56rem;}
  }
  /* en-tête de la zone d'exercices, avec l'avatar "Exercice" */
  .ex-entete{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .ex-entete img{width:auto;height:62px;border-radius:0;}
  .ex-entete .ee-eyebrow{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#b3502f;display:block;}
  .ex-entete .ee-txt{font-size:.9rem;color:var(--encre-doux);}
  /* schéma des voix (SATB) */
  .schema-voix{max-width:460px;margin:14px auto;border:1px solid var(--ligne);border-radius:12px;padding:14px 18px;background:var(--papier);}
  .schema-voix .sv-ligne{text-align:center;}
  .schema-voix .sv-fl{color:var(--laiton);font-weight:700;font-size:.85rem;letter-spacing:1px;}
  .schema-voix .sv-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:7px 0;}
  .schema-voix .sv-f{text-align:right;font-weight:600;color:#8a4d6e;}
  .schema-voix .sv-h{text-align:left;font-weight:600;color:#3a5a8a;}
  .schema-voix .sv-sep{font-size:.78rem;color:var(--encre-doux);white-space:nowrap;}
  .schema-voix .sv-leg{display:flex;justify-content:space-between;border-top:1px dashed var(--ligne);margin-top:8px;padding-top:8px;font-size:.85rem;}
  .schema-voix .sv-leg span:first-child{color:#8a4d6e;}
  .schema-voix .sv-leg span:last-child{color:#3a5a8a;}
  /* bouton menu (visible seulement sur téléphone) */
  .menu-toggle{display:none;position:fixed;top:12px;left:12px;z-index:30;
    background:var(--encre);color:var(--papier);border:none;border-radius:10px;
    width:46px;height:46px;font-size:1.5rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  /* barre d'app : boutons plein écran + fermer, en haut à droite */
  .app-controls{position:fixed;top:10px;right:12px;z-index:40;display:flex;gap:6px;}
  .app-btn{width:38px;height:38px;border:1px solid rgba(255,255,255,.35);border-radius:11px;cursor:pointer;font-size:1.05rem;
    background:rgba(255,255,255,.62);color:var(--encre);box-shadow:0 4px 16px rgba(17,30,45,.12);
    -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
    display:flex;align-items:center;justify-content:center;transition:transform .14s ease,background .15s,box-shadow .15s;}
  .app-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(17,30,45,.18);}
  .app-btn:active{transform:scale(.92);}
  [data-theme="dark"] .app-btn{background:rgba(21,38,58,.6);border-color:rgba(145,179,208,.28);color:var(--encre);}
  [data-theme="dark"] .app-btn:hover{background:rgba(28,50,80,.8);}
  .app-close:hover{background:var(--faux);color:#fff;}
  @media print{.app-controls{display:none!important;}}
  .overlay{display:none;position:fixed;inset:0;background:rgba(22,35,58,.5);z-index:18;}
  /* ================= Identité « Ruban & Médaille » =================
     Bannières en ruban, cartes-tickets, médaillons de progression.
     Toutes les animations en boucle passent par --energie (voir .energie-*). */
  @keyframes rmFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes rmShine{0%{transform:translateX(-140%) rotate(18deg)}100%{transform:translateX(240%) rotate(18deg)}}
  @keyframes rmSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  @keyframes rmPulseGlow{0%,100%{opacity:.35}50%{opacity:.7}}
  @keyframes rmCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @keyframes rmFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes rmPopCorrect{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
  @keyframes rmShakeWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
  /* Réglage « Énergie » : discret / standard / maximal (posé sur <html>) */
  :root{--rm-shine:3.2s; --rm-cta:none; --rm-orb:rmPulseGlow 6s ease-in-out infinite; --rm-stagger:75ms;}
  [data-energie="discret"]{--rm-shine:0s; --rm-cta:none; --rm-orb:none; --rm-stagger:0ms;}
  [data-energie="maximal"]{--rm-shine:1.6s; --rm-cta:rmCtaPulse 1.6s ease-in-out infinite; --rm-orb:rmPulseGlow 3s ease-in-out infinite; --rm-stagger:45ms;}
  /* Bannière de titre : hexagone à encoches latérales, motif brocart */
  .ruban-titre{background:var(--brocart),var(--bandeau);
    clip-path:polygon(1.2% 0,98.8% 0,100% 50%,98.8% 100%,1.2% 100%,0 50%);
    padding:16px 42px;display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;margin-bottom:16px;}
  .ruban-titre h1,.ruban-titre .rt-titre{font-family:var(--police-titre);font-size:1.7rem;font-weight:700;
    margin:0;letter-spacing:-.3px;color:#fff;line-height:1.2;}
  /* texte courant sur fond bleu : l'or plein tombe a 2,9, l'or tres pale passe a 4,6 */
  .ruban-titre .rt-sous{margin:0;color:#fff4d9;font-size:.9rem;font-weight:600;}
  @media(max-width:640px){.ruban-titre{padding:14px 26px;}.ruban-titre h1,.ruban-titre .rt-titre{font-size:1.3rem;}}
  /* ---------- En-tête d'accueil (carte à deux cercles) ----------
     Carte claire à bandeau bleu : à gauche le médaillon (anneau conique =
     progression) d'où Maestro dépasse, sa bulle de bande dessinée et les
     raccourcis ; à droite un panneau de deux cercles chiffrés. Remplace
     l'ancien ruban-maestro, dont la mascotte était coupée sur téléphone. */
  .ac-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    box-shadow:var(--ombre);overflow:hidden;margin-bottom:16px;
    container-type:inline-size;container-name:ac;}
  .ac-bandeau{background:var(--brocart),var(--bandeau);color:#fff;
    padding:12px 26px;display:flex;align-items:center;gap:14px;}
  .ac-bandeau .ac-lab{font-family:var(--police-titre);font-size:.72rem;font-weight:800;
    letter-spacing:1.6px;text-transform:uppercase;color:var(--or-clair);}
  .ac-pastille{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);border-radius:var(--rayon-pill);padding:5px 14px;
    font-size:.82rem;font-weight:600;color:#fff;font-family:inherit;}
  button.ac-pastille{cursor:pointer;}
  button.ac-pastille b{color:var(--or-clair);font-size:1rem;}
  #kpConnectesCard.pres-actif{border-color:#bff0d6;box-shadow:0 0 0 2px rgba(103,224,163,.28);}
  #kpConnectesCard.pres-actif b{color:#bff0d6;}
  .ac-corps{padding:20px 26px 22px;display:grid;grid-template-columns:minmax(0,1fr) 400px;
    gap:24px;align-items:center;}
  .ac-gauche{display:flex;flex-direction:column;gap:14px;min-width:0;}
  .ac-ligne{display:flex;align-items:flex-start;gap:14px;}
  /* médaillon : l'anneau porte la progression, Maestro se pose devant et déborde */
  .ac-med{flex-shrink:0;position:relative;width:132px;height:132px;border-radius:50%;
    background:conic-gradient(var(--or) 0 calc(var(--ac-pct,0) * 1%),var(--papier-fonce) 0 100%);}
  .ac-med::before{content:"";position:absolute;inset:10px;border-radius:50%;
    background:radial-gradient(circle at 50% 35%,var(--papier),var(--papier-fonce));}
  .ac-med img{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
    height:126px;width:auto;z-index:2;}
  .ac-med-lab{z-index:3;position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
    background:var(--laiton);color:var(--or);font-family:var(--police-titre);font-size:.8rem;
    font-weight:800;padding:4px 13px;border-radius:var(--rayon-pill);white-space:nowrap;}
  .ac-bulle{position:relative;background:var(--surface);border:2px solid var(--ligne);
    border-radius:22px;padding:14px 18px;flex-grow:1;min-width:0;box-shadow:var(--ombre-douce);}
  .ac-bulle::before{content:"";position:absolute;left:-18px;top:28px;width:0;height:0;
    border-top:13px solid transparent;border-bottom:13px solid transparent;
    border-right:17px solid var(--ligne);}
  .ac-bulle::after{content:"";position:absolute;left:-14px;top:30px;width:0;height:0;
    border-top:11px solid transparent;border-bottom:11px solid transparent;
    border-right:15px solid var(--surface);z-index:1;}
  .ac-bulle .ac-titre{font-family:var(--police-titre);font-size:1.45rem;font-weight:700;
    color:var(--laiton);line-height:1.1;}
  .ac-bulle .ac-txt{margin:5px 0 0;font-size:.92rem;line-height:1.55;color:var(--encre-doux);}
  .ac-bulle .ac-txt b{color:var(--encre);}
  .ac-bulle .ac-txt i.ph{color:var(--or-texte);}
  .ac-actions{display:flex;gap:10px;flex-wrap:wrap;padding-left:146px;}
  .ac-cta{display:inline-flex;align-items:center;gap:10px;background:var(--or);color:var(--encre);
    border:0;font-family:var(--police-titre);font-size:1rem;font-weight:800;padding:13px 20px;
    border-radius:15px;box-shadow:0 8px 20px rgba(142,109,11,.28);cursor:pointer;}
  .ac-cta2{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);font-family:inherit;
    font-size:.88rem;font-weight:700;padding:12px 18px;border-radius:15px;cursor:pointer;}
  .ac-cta:hover,.ac-cta2:hover{transform:translateY(-2px);}
  /* l'icône suivait la règle générale « icône dorée » : or sur or, invisible */
  .ac-cta i{color:var(--encre)!important;text-shadow:none;}
  .ac-cta,.ac-cta2{transition:transform var(--t-rapide);}
  /* panneau des deux cercles */
  .ac-panneau{background:var(--papier);border-radius:var(--rayon-s);padding:16px 18px;
    display:flex;gap:22px;align-items:center;justify-content:center;}
  .ac-bloc{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;color:inherit;}
  .ac-cercle{position:relative;width:132px;height:132px;border-radius:50%;margin:0 auto;
    background:conic-gradient(var(--ac-coul,var(--bandeau)) 0 calc(var(--ac-pct,0) * 1%),var(--papier-fonce) 0 100%);
    display:flex;align-items:center;justify-content:center;}
  .ac-cercle-in{width:106px;height:106px;border-radius:50%;background:var(--surface);
    display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .ac-val{font-family:var(--police-titre);font-size:1.85rem;font-weight:800;line-height:1;color:var(--encre);}
  .ac-val-s{font-size:1.05rem;color:var(--encre-doux);}
  .ac-lib{font-size:.68rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--encre-doux);}
  .ac-leg{font-size:.78rem;color:var(--encre-doux);margin-top:8px;text-align:center;line-height:1.35;}
  .ac-leg b{color:var(--laiton);}
  @container ac (max-width:1000px){
    .ac-corps{grid-template-columns:1fr;}
  }
  @container ac (max-width:640px){
    .ac-bandeau{padding:11px 16px;}
    .ac-corps{padding:16px;gap:16px;}
    .ac-ligne{gap:12px;}
    .ac-med{width:104px;height:104px;}
    .ac-med::before{inset:8px;}
    .ac-med img{height:98px;}
    .ac-med-lab{font-size:.72rem;padding:3px 11px;bottom:-9px;}
    .ac-bulle{padding:12px 14px;}
    .ac-bulle .ac-titre{font-size:1.18rem;}
    .ac-bulle .ac-txt{font-size:.8rem;line-height:1.42;}
    .ac-panneau{gap:14px;padding:14px;}
    .ac-cercle{width:104px;height:104px;}
    .ac-cercle-in{width:86px;height:86px;}
    .ac-val{font-size:1.5rem;}
    .ac-val-s{font-size:.88rem;}
    .ac-lib{font-size:.56rem;letter-spacing:.7px;}
    .ac-leg{font-size:.72rem;}
    .ac-cta,.ac-cta2{flex:1 1 auto;justify-content:center;}
    .ac-actions{padding-left:0;}
  }
  /* Médaillon : cercle à bordure double, anneau conique = progression */
  .medaillon{width:104px;height:104px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border:3px double var(--or);}
  .medaillon>.md-coeur{width:82px;height:82px;border-radius:50%;background:var(--surface);
    display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .medaillon .md-val{font-family:var(--police-titre);font-weight:700;font-size:1.3rem;color:var(--encre);line-height:1;}
  .medaillon .md-lib{font-size:.6rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:1px;}
  /* Rubans suspendus (petite queue en V qui se balance) */
  .rubans{display:flex;gap:3px;justify-content:center;margin-top:-2px;}
  .ruban-q{width:12px;height:20px;transform-origin:top center;
    clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
    animation:rmSwing 2.8s ease-in-out infinite;}
  .ruban-q.or{background:var(--or);}
  .ruban-q.bleu{background:var(--laiton);animation-delay:.3s;}
  [data-energie="discret"] .ruban-q{animation:none;}
  /* Barre de progression à reflet */
  .rm-piste{height:12px;border-radius:var(--rayon-pill);background:var(--teinte-douce);overflow:hidden;}
  .rm-piste>i{display:block;height:100%;border-radius:var(--rayon-pill);
    background:var(--degrade-90);position:relative;overflow:hidden;transition:width .5s ease;}
  .rm-piste>i::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
    animation:rmShine var(--rm-shine) ease-in-out infinite;}
  [data-energie="discret"] .rm-piste>i::after{animation:none;}
  /* Carte-ticket : coin bas coupé en pointe */
  .ticket{background:var(--surface);border:1px solid var(--ligne);
    border-radius:14px 14px 0 0;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);
    padding:22px 18px 34px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;
    font-family:inherit;text-align:center;width:100%;display:block;}
  .ticket:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(30,58,99,.18);}
  /* Carte générique de la refonte */
  .rm-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:22px 24px;}
  .rm-carte-titre{font-family:var(--police-titre);font-weight:700;margin-bottom:16px;
    display:flex;align-items:center;gap:8px;color:var(--encre);}
  /* étiquette de section en petites capitales espacées */
  .rm-sur-titre{font-size:.75rem;text-transform:uppercase;letter-spacing:1.2px;
    color:var(--encre-doux);font-weight:700;margin-bottom:14px;}
  /* Vignette centrée : titre, contenu et bouton alignés au centre */
  .rm-carte-centre{text-align:center;}
  .rm-carte-centre .rm-carte-titre{justify-content:center;}
  .rm-carte-centre .rm-badges{justify-content:center;}
  .rm-carte-centre .rm-cta{margin-left:auto;margin-right:auto;}
  .rm-grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .rm-grille-2{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;}
  @media(max-width:860px){.rm-grille-3,.rm-grille-2{grid-template-columns:1fr;}}
  #kpConnectesCard.pres-actif{border-color:var(--juste);box-shadow:0 0 0 2px var(--valide-fond,rgba(47,158,99,.25));}
  #kpConnectesCard.pres-actif .kp-val{color:var(--juste);}
  /* Chips de difficulté */
  .rm-chips{display:flex;gap:10px;flex-wrap:wrap;}
  .rm-chip{padding:8px 18px;border-radius:var(--rayon-pill);cursor:pointer;font-weight:700;
    font-size:.85rem;background:var(--surface);color:var(--encre-doux);
    border:1px solid var(--ligne);transition:all .15s ease;font-family:inherit;}
  .rm-chip.on{background:var(--degrade);color:#fff;border-color:transparent;}
  /* Bouton d'action principal (dégradé bleu -> or) */
  /* Bouton d'action principal : aplat d'or, texte marine.
     L'or vers le bleu se disputait deux teintes sur la meme surface, et le
     texte blanc y devenait illisible des qu'il atteignait la partie doree
     (1,74 de contraste, seuil : 4,5). En aplat avec du texte marine, le
     meme or tient 10,6. L'or reste ce qu'il est dans la charte : la couleur
     de la recompense, reservee a l'action principale. */
  .rm-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--police-titre);
    font-weight:700;font-size:1.02rem;background:var(--or);border:none;border-radius:14px;
    padding:14px 28px;cursor:pointer;color:#111E2D;box-shadow:var(--ombre-bouton);
    animation:var(--rm-cta);}
  .rm-cta:hover{filter:brightness(1.06);}
  /* Podium à médailles */
  .rm-podium{display:flex;align-items:flex-end;gap:22px;justify-content:center;}
  .rm-podium .pd-med{width:64px;height:64px;border-radius:50%;background:var(--surface);
    display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
    font-family:var(--police-titre);font-weight:700;font-size:.85rem;color:var(--encre);}
  .rm-podium .pd-barre{border-radius:12px 12px 0 0;margin:0 auto;position:relative;overflow:hidden;
    display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
    font-family:var(--police-titre);font-weight:800;color:rgba(255,255,255,.85);}
  .rm-podium .pd-barre::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);
    animation:rmShine var(--rm-shine) ease-in-out infinite;}
  [data-energie="discret"] .rm-podium .pd-barre::after{animation:none;}
  .rm-podium .pd-pts{font-size:.8rem;color:var(--encre-doux);margin-top:8px;}
  /* Badges : puces cerclées, pas de fond plein */
  .rm-badges{display:flex;flex-wrap:wrap;gap:12px;}
  .rm-badge{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;background:var(--surface);border:2px solid var(--or);
    color:var(--or-texte);font-size:1.2rem;}
  /* Tableaux (classement, espace prof) */
  .rm-tab{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);overflow:hidden;}
  .rm-tab-tete,.rm-tab-ligne{display:grid;padding:13px 22px;align-items:center;}
  .rm-tab-tete{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;
    color:var(--encre-doux);font-weight:700;border-bottom:1px solid var(--ligne);}
  .rm-tab-ligne{font-size:.88rem;border-bottom:1px solid var(--ligne);}
  .rm-tab-ligne:last-child{border-bottom:none;}
  .rm-tab-ligne.top{background:rgba(242,201,76,.05);}
  /* Cartes KPI (espace prof) */
  /* ---------- Mode séance : présentation au tableau ----------
     Tout est dimensionné en em multipliés par --sc-zoom : un seul réglage
     agrandit ou réduit l'ensemble depuis le fond de la salle. */
  body.seance-ouverte{overflow:hidden;}
  /* Le fond doit être OPAQUE : sans cela on lit le cours par transparence, et le
     plein écran s'affiche sur le noir que le navigateur pose derrière l'élément.
     Le token est --fond-app (il n'existe pas de --fond), et on reprend les deux
     halos du corps de page pour rester dans la charte. */
  .seance{position:fixed;inset:0;z-index:9500;--sc-zoom:1;
    background:
      radial-gradient(circle at 8% -6%, var(--halo-or), transparent 40%),
      radial-gradient(circle at 100% 10%, var(--halo-bleu), transparent 40%),
      var(--fond-app);
    color:var(--encre);display:flex;flex-direction:column;
    font-size:calc(1rem * var(--sc-zoom));animation:scIn .2s ease;}
  /* En plein écran, l'élément devient la racine de l'affichage : il doit porter
     lui-même son fond, sinon le navigateur peint du noir. */
  .seance:fullscreen,.seance:-webkit-full-screen{
    background:
      radial-gradient(circle at 8% -6%, var(--halo-or), transparent 40%),
      radial-gradient(circle at 100% 10%, var(--halo-bleu), transparent 40%),
      var(--fond-app);
    width:100%;height:100%;}
  .seance::backdrop{background:var(--fond-app);}
  @keyframes scIn{from{opacity:0}to{opacity:1}}
  .sc-tete{display:flex;align-items:center;gap:16px;padding:14px 26px;
    background:var(--brocart),var(--bandeau);color:#fff;flex:none;}
  .sc-titre{flex:1;min-width:0;font-family:var(--police-titre);font-weight:800;
    font-size:1.5em;line-height:1.2;overflow-wrap:break-word;}
  .sc-outils{display:flex;gap:8px;align-items:center;flex:none;}
  .sc-horloge{font-family:var(--police-titre);font-weight:700;font-size:1.05em;
    color:var(--or-texte);margin-right:6px;}
  .sc-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
    border-radius:10px;width:38px;height:38px;font-size:1.05rem;cursor:pointer;display:flex;
    align-items:center;justify-content:center;}
  .sc-btn:hover{background:rgba(255,255,255,.3);}
  .sc-btn i{color:#fff !important;}
  .sc-corps{flex:1;overflow-y:auto;padding:30px 40px;}
  .sc-page{max-width:1400px;margin:0 auto;font-size:1.55em;line-height:1.55;}
  .sc-page p,.sc-page li{font-size:1em;line-height:1.55;margin:0 0 .7em;}
  .sc-page img{max-width:100%;height:auto;display:block;margin:.6em auto;}
  .sc-page ul,.sc-page ol{padding-left:1.4em;}
  .sc-page .astuce,.sc-page .cle{font-size:.95em;padding:14px 18px;}
  .sc-page svg{max-width:100%;height:auto;}
  .sc-q{font-family:var(--police-titre);font-weight:800;font-size:1.15em;
    margin-bottom:.7em;line-height:1.35;}
  .sc-opts{padding-left:1.5em;} .sc-opts li{margin:.35em 0;}
  .sc-tab{border-collapse:collapse;width:100%;font-size:.92em;}
  .sc-tab th,.sc-tab td{border:2px solid var(--ligne);padding:.45em .7em;text-align:left;}
  .sc-tab th{background:var(--teinte-douce);text-align:center;}
  .sc-paires>div{margin:.4em 0;}
  .sc-ordre{padding-left:1.5em;} .sc-ordre li{margin:.4em 0;}
  .sc-ordre.melange{list-style:"• ";}
  .sc-etiq{display:flex;flex-wrap:wrap;gap:10px;margin:.6em 0;}
  .sc-etiq span{background:var(--teinte-douce);border:2px solid var(--ligne);
    border-radius:var(--rayon-pill);padding:.25em .8em;font-weight:700;}
  .sc-trou{display:inline-block;min-width:2.4em;border-bottom:3px solid var(--laiton);
    text-align:center;color:var(--encre-doux);}
  .sc-cases{display:flex;gap:6px;flex-wrap:wrap;margin:.6em 0;}
  .sc-cases span{width:1.5em;height:1.9em;border:3px solid var(--ligne);border-radius:6px;}
  .sc-aide{margin-top:.7em;font-size:.88em;color:var(--encre-doux);}
  .sc-mot{letter-spacing:.12em;font-weight:800;color:var(--laiton);}
  .sc-sol{margin-top:1em;border-left:6px solid var(--juste);background:var(--juste-fond);
    border-radius:12px;padding:.8em 1.1em;animation:scSol .25s ease;}
  @keyframes scSol{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .sc-rep{font-size:1.05em;}
  .sc-expl{margin-top:.6em;font-size:.9em;color:var(--encre-doux);}
  .sc-pied{display:flex;align-items:center;gap:16px;padding:12px 26px;flex:none;
    border-top:1px solid var(--ligne);background:var(--surface);}
  .sc-milieu{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
  .sc-compteur{font-size:.85rem;color:var(--encre-doux);font-weight:700;}
  .sc-nav{background:var(--surface);border:2px solid var(--ligne);border-radius:var(--rayon-pill);
    padding:11px 22px;font-family:var(--police-titre);font-weight:700;font-size:1rem;
    color:var(--encre);cursor:pointer;flex:none;}
  .sc-nav:hover:not(:disabled){border-color:var(--laiton);}
  .sc-nav:disabled{opacity:.35;cursor:default;}
  .sc-reveler{background:var(--degrade);color:#fff;border:none;border-radius:var(--rayon-pill);
    padding:11px 26px;font-family:var(--police-titre);font-weight:800;font-size:1rem;cursor:pointer;}
  .sc-reveler i{color:#fff !important;}
  .sc-piste{height:5px;background:var(--ligne);flex:none;}
  .sc-piste i{display:block;height:100%;background:var(--degrade);transition:width .2s ease;}
  .seance-cta{border-color:var(--laiton) !important;}
  @media(max-width:760px){
    .sc-corps{padding:18px;} .sc-page{font-size:1.15em;}
    .sc-tete{padding:10px 14px;} .sc-titre{font-size:1.15em;}
    .sc-pied{padding:10px 12px;gap:8px;} .sc-nav{padding:9px 12px;font-size:.9rem;}
    .sc-reveler{padding:9px 14px;font-size:.9rem;}
    .sc-horloge{display:none;}
  }
  /* Fenêtre du vocabulaire donné en devoir : l'élève voit les mots exacts. */
  /* ---------- Profil élève : mes notes ---------- */
  .pn-moy{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--or);
    border-radius:14px;padding:12px 16px;margin-bottom:12px;}
  .pn-moy .v{font-family:var(--police-titre);font-weight:800;font-size:1.5rem;line-height:1;}
  .pn-liste{display:flex;flex-direction:column;gap:8px;}
  .pn-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--ligne);
    border-radius:14px;padding:10px 14px;}
  .pn-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1rem;}
  .pn-ic.eval{background:rgba(37,99,235,.10);color:#2563eb;}
  .pn-ic.chant{background:var(--teinte-douce);color:var(--or-texte);}
  .pn-txt{flex-grow:1;min-width:0;}
  .pn-txt b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pn-txt span{font-size:.78rem;color:var(--encre-doux);}
  .pn-note{font-weight:800;font-size:.9rem;padding:4px 12px;border-radius:999px;white-space:nowrap;}
  /* ---------- Chant : note fixee a la main ---------- */
  .chr-note-man{margin-top:12px;}
  .chr-note-man>label{display:block;font-size:.82rem;font-weight:700;color:var(--encre-doux);margin-bottom:5px;}
  .chr-note-man>label span{font-weight:500;}
  .chr-note-man-in{display:flex;align-items:center;gap:8px;}
  .chr-note-man-in input{width:96px;padding:8px 10px;border:1px solid var(--ligne);border-radius:10px;
    font-family:inherit;font-size:1rem;font-weight:700;background:var(--surface);color:var(--encre);}
  .chr-note-man-u{font-size:.9rem;color:var(--encre-doux);font-weight:600;}
  .chr-note-man-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--ligne);background:var(--surface);
    color:var(--encre-doux);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
  .chr-note-man-x:hover{background:var(--surface-2);color:var(--encre);}
  /* ---------- Chant : tuiles des morceaux (côté prof) ---------- */
  .cht-place{text-align:center;color:var(--encre-doux);font-size:.85rem;margin:-6px 0 16px;}
  .cht-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;}
  @media(max-width:640px){.cht-grille{grid-template-columns:1fr;}}
  .cht{position:relative;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    box-shadow:var(--ombre-douce);display:flex;flex-direction:column;overflow:hidden;
    transition:transform .18s var(--t-moyen),box-shadow .18s ease,opacity .15s ease;}
  .cht:hover{transform:translateY(-4px);box-shadow:var(--ombre);}
  .cht.cht-drag{opacity:.45;transform:scale(.98);box-shadow:none;}
  .cht.cht-over{outline:3px dashed var(--or);outline-offset:3px;transform:none;}
  .cht-tete{position:relative;display:flex;align-items:center;min-height:82px;padding:14px 16px;cursor:grab;
    background:var(--brocart),var(--degrade);}
  .cht-tete:active{cursor:grabbing;}
  .cht-sup{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;border:none;
    background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;font-size:1rem;z-index:2;transition:background .14s ease,transform .12s ease;}
  .cht-sup:hover{background:var(--faux);transform:scale(1.07);}
  .cht-eq{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:14px;
    background:rgba(18,32,58,.35);border:1px solid rgba(242,201,76,.45);display:flex;align-items:flex-end;
    justify-content:center;gap:3px;padding:12px 0 11px;}
  .cht-eq span{width:5px;border-radius:3px;background:linear-gradient(var(--or-clair),var(--or));
    transform-origin:bottom;animation:chEq 1.1s ease-in-out infinite;}
  .cht-eq span:nth-child(1){height:11px;animation-delay:0s;}
  .cht-eq span:nth-child(2){height:22px;animation-delay:-.35s;}
  .cht-eq span:nth-child(3){height:15px;animation-delay:-.7s;}
  .cht-eq span:nth-child(4){height:24px;animation-delay:-.15s;}
  @keyframes chEq{0%,100%{transform:scaleY(.30);}50%{transform:scaleY(1);}}
  .cht-idc{flex:1;min-width:0;text-align:center;padding:0 52px;}
  .cht-titre{font-family:var(--police-titre);font-weight:700;font-size:1.28rem;color:#fff;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cht-artiste{font-size:.92rem;color:var(--or-clair);font-weight:600;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cht-corps{padding:15px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:10px;flex-grow:1;}
  .cht-cible{display:inline-flex;align-items:center;gap:6px;background:var(--teinte-douce);color:var(--or-texte);
    font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px;max-width:100%;}
  .cht-cible span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cht-pistes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  .cht-piste{display:inline-flex;align-items:center;gap:7px;background:var(--teinte-douce);border-radius:999px;
    padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--laiton);}
  .cht-piste.manque{background:transparent;border:1px dashed var(--faux);color:var(--faux);font-weight:600;}
  .cht-piste .pt{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;
    justify-content:center;color:#fff;font-size:.62rem;}
  .cht-piste .pt.yt{background:var(--faux);} .cht-piste .pt.ok{background:var(--juste);}
  .cht-pied{display:flex;gap:9px;padding:0 18px 16px;}
  .cht-go{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--or);
    color:#111E2D;border:none;border-radius:14px;padding:11px 14px;font-family:var(--police-titre);font-weight:700;
    font-size:.9rem;cursor:pointer;box-shadow:var(--ombre-douce);}
  .cht-go:hover{filter:brightness(1.05);}
  .cht-mod{width:46px;flex:none;border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);
    border-radius:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;}
  .cht-mod:hover{background:var(--surface-2);}
    /* ---------- Éphéméride musicale (accueils) ---------- */
  .eph{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--ligne);
    border-radius:var(--rayon-s);padding:13px 18px;margin-bottom:22px;box-shadow:var(--ombre-douce);}
  .eph-cal{flex:none;width:54px;border-radius:12px;overflow:hidden;text-align:center;border:1px solid var(--ligne);}
  .eph-cal .m{background:var(--degrade);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.05em;
    padding:3px 0;font-family:var(--police-titre);}
  .eph-cal .j{font-family:var(--police-titre);font-weight:800;font-size:1.5rem;color:var(--laiton);
    padding:2px 0 4px;background:var(--surface);line-height:1;}
  .eph-txt{flex:1;min-width:0;}
  .eph-h{font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--or-texte);
    display:flex;align-items:center;gap:6px;margin-bottom:3px;}
  .eph-b{font-size:.92rem;color:var(--encre);line-height:1.45;}
  .eph-b b{color:var(--laiton);}
  .eph{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
  .eph:hover{border-color:var(--or);box-shadow:var(--ombre);}
  .eph:focus-visible{outline:2px solid var(--laiton);outline-offset:2px;}
  .eph-plus{color:var(--encre-doux);font-size:1.1rem;flex:none;align-self:center;}
  .eph-modal-tete{display:flex;gap:13px;align-items:center;margin:2px 40px 15px 0;}
  .eph-modal-ic{width:48px;height:48px;flex:none;border-radius:14px;background:var(--degrade);color:var(--or);
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;}
  .eph-modal-nom{font-family:var(--police-titre);font-weight:800;font-size:1.22rem;color:var(--laiton);line-height:1.2;}
  .eph-modal-sous{font-size:.85rem;color:var(--encre-doux);font-weight:600;margin-top:2px;}
  .eph-modal-corps p{font-size:.95rem;line-height:1.55;color:var(--encre);margin:0 0 12px;}
  .eph-oeuvres{margin-top:4px;}
  .eph-oeuvres-t{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--or-texte);margin-bottom:8px;}
  .eph-chips{display:flex;gap:7px;flex-wrap:wrap;}
  .eph-chip{background:var(--teinte-douce);color:var(--laiton);font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;}
  .eph-modal-date{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);font-size:.83rem;
    color:var(--encre-doux);display:flex;align-items:center;gap:7px;}
  /* ---------- Chant : écran écouter/noter côte à côte ---------- */
  .chr-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
  .chr-sel{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--ligne);
    border-radius:999px;padding:7px 8px 7px 16px;box-shadow:var(--ombre-douce);}
  .chr-sel span{font-size:.78rem;color:var(--encre-doux);font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
  .chr-sel select{border:none;background:rgba(30,58,99,.06);border-radius:999px;padding:6px 14px;
    font-family:inherit;font-size:.95rem;font-weight:700;color:var(--encre);}
  .chr-stats{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--ligne);
    border-radius:999px;padding:9px 20px;box-shadow:var(--ombre-douce);}
  .chr-stats div{display:flex;align-items:baseline;gap:5px;}
  .chr-stats b{font-family:var(--police-titre);font-size:1.05rem;font-weight:800;}
  .chr-stats span{font-size:.78rem;color:var(--encre-doux);font-weight:600;}
  .chr-stats i{width:1px;height:18px;background:var(--ligne);display:block;}
  .chr-dl{display:inline-flex;align-items:center;gap:8px;font-family:var(--police-titre);font-weight:700;
    font-size:.9rem;background:var(--or);color:#111E2D;border:none;border-radius:12px;padding:10px 18px;
    cursor:pointer;box-shadow:var(--ombre-bouton);}
  .chr-dl:hover{filter:brightness(1.05);}
  .chr-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start;}
  @media(max-width:820px){.chr-wrap{grid-template-columns:1fr;}}
  .chr-liste{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    box-shadow:var(--ombre-douce);overflow:hidden;}
  .chr-liste-tete{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
    border-bottom:1px solid var(--ligne);font-weight:700;font-size:.95rem;}
  .chr-hint{font-size:.72rem;color:var(--encre-doux);font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
  .chr-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;
    border-top:1px solid var(--ligne);padding:11px 16px;cursor:pointer;font-family:inherit;
    transition:background var(--t-rapide);}
  .chr-liste-tete + .chr-row{border-top:none;}
  .chr-row:hover{background:var(--surface-2);}
  .chr-row.on{background:var(--teinte-douce);box-shadow:inset 3px 0 0 var(--or);}
  .chr-row.vide{opacity:.6;cursor:default;}
  .chr-ava{width:34px;height:34px;border-radius:11px;background:var(--laiton);color:var(--or);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;flex:none;}
  .chr-ava.off{background:rgba(30,58,99,.06);color:var(--encre-doux);}
  .chr-ava.g{width:44px;height:44px;border-radius:13px;font-size:.98rem;}
  .chr-id{flex-grow:1;min-width:0;}
  .chr-id b{display:block;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chr-id span{font-size:.76rem;color:var(--encre-doux);}
  .chr-note{font-weight:800;font-size:.8rem;padding:3px 10px;border-radius:999px;white-space:nowrap;}
  .chr-atn{font-size:.74rem;font-weight:700;color:var(--or-texte);background:var(--teinte-douce);
    padding:3px 9px;border-radius:999px;white-space:nowrap;}
  .chr-panel{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    box-shadow:var(--ombre);overflow:hidden;min-height:320px;}
  .chr-vide-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    padding:60px 30px;text-align:center;color:var(--encre-doux);}
  .chr-vide-msg i{font-size:2.2rem;}
  .chr-vide-msg p{margin:0;max-width:280px;}
  .chr-p-tete{display:flex;align-items:center;gap:13px;padding:16px 20px;border-bottom:1px solid var(--ligne);}
  .chr-mot{margin:14px 20px 0;padding:12px 14px;border-radius:12px;background:var(--teinte-douce);
    border-left:3px solid var(--or);}
  .chr-mot-t{font-size:.74rem;color:var(--or-texte);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
  .chr-mot>div:last-child{font-size:.92rem;line-height:1.5;}
  .chr-lect{padding:16px 20px;border-bottom:1px solid var(--ligne);}
  .chr-lect-att{font-size:.86rem;color:var(--encre-doux);}
  .chr-player audio{width:100%;}
  .chr-pc{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;}
  .chr-vit{font-size:.82rem;color:var(--encre-doux);}
  .chr-vit select{padding:6px 8px;border:1px solid var(--ligne);border-radius:9px;font-family:inherit;
    background:var(--surface);color:var(--encre);margin-left:4px;}
  .chr-note-bloc{padding:16px 20px;}
  .chr-note-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .chr-note-aff b{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;padding:4px 13px;border-radius:999px;}
  #chGrille .ch-hdr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:end;margin-bottom:8px;}
  #chGrille .ch-hdr-niv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
  #chGrille .ch-hdr-niv span{text-align:center;font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.3px;line-height:1.2;}
  #chGrille .ch-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:6px;}
  #chGrille .ch-lbl{font-size:.86rem;font-weight:600;}
  #chGrille .ch-niv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
  #chGrille .ch-niv-b{padding:9px 4px;font-family:var(--police-titre);font-size:1rem;font-weight:700;border-radius:10px;}
  @media(max-width:560px){
    #chGrille .ch-hdr,#chGrille .ch-row{grid-template-columns:1fr;gap:4px;}
    #chGrille .ch-hdr span:first-child{display:none;}
  }
  .chr-comm-l{display:block;font-size:.84rem;color:var(--encre-doux);font-weight:600;margin-top:14px;}
  .chr-comm-l textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--ligne);border-radius:12px;
    font-family:inherit;font-size:.93rem;background:var(--surface);color:var(--encre);resize:vertical;box-sizing:border-box;}
  .chr-grp{margin-top:14px;padding:12px 14px;border:1px solid var(--ligne);border-radius:14px;background:var(--surface-2);}
  .chr-grp-hd{font-size:.9rem;margin-bottom:9px;}
  .chr-chip{display:inline-flex;align-items:center;gap:6px;background:var(--laiton);color:#fff;border-radius:999px;
    padding:5px 6px 5px 13px;font-size:.85rem;font-weight:600;margin:0 6px 6px 0;}
  .chr-chip button{background:rgba(255,255,255,.22);border:none;color:#fff;width:20px;height:20px;border-radius:50%;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;}
  .chr-chip-add{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--ligne);background:var(--surface);
    color:var(--encre);border-radius:999px;padding:6px 14px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;}
  .chr-choix-l{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;}
  .chr-choix{display:flex;align-items:center;gap:9px;border:1px solid var(--ligne);background:var(--surface);
    border-radius:11px;padding:9px 13px;font-family:inherit;font-size:.92rem;cursor:pointer;text-align:left;}
  .chr-choix.on{border-color:var(--or);background:var(--teinte-douce);font-weight:700;}
  .chr-choix[disabled]{opacity:.4;cursor:not-allowed;}
  .chr-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:0 20px 18px;}
  .chr-suiv{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--encre);
    border:1px solid var(--ligne);border-radius:14px;padding:13px 20px;cursor:pointer;
    font-family:var(--police-titre);font-size:.95rem;font-weight:700;}
  .chr-suiv:hover{background:var(--surface-2);}
  .chr-vider{display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--faux);
    border:1px solid var(--faux-fond);border-radius:12px;padding:9px 16px;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:600;}
  /* ---------- Chant : vignette de l'élève ----------
     Une ligne de titre, une ligne de boutons, une ligne d'état. Rien d'autre.
     La version précédente empilait icône, titre, artiste, consigne, badge,
     deux blocs de piste, un dépliant de paroles puis un bloc de rendu : on ne
     savait plus où regarder. */
  .ch-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:16px 18px;margin-bottom:12px;box-shadow:var(--ombre);}
  .ch-carte.vise{box-shadow:0 0 0 2px var(--or),var(--ombre);}
  .ch-l1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .ch-t{font-weight:800;font-size:1.06rem;line-height:1.3;}
  .ch-a{color:var(--encre-doux);font-size:.9rem;}
  .ch-consigne{color:var(--encre-doux);font-size:.88rem;margin-top:3px;}
  .ch-rangee{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;}
  .ch-b{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
    border:1px solid var(--ligne);background:var(--surface);color:var(--encre);
    font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:transform .08s;}
  .ch-b:hover{transform:translateY(-1px);}
  .ch-b.fort{background:var(--or);border-color:var(--or);color:#111E2D;font-weight:800;}
  .ch-b.sobre{color:var(--encre-doux);}
  .ch-note{margin-left:auto;font-weight:800;font-size:1rem;padding:4px 12px;border-radius:999px;white-space:nowrap;}
  .ch-etat{font-size:.86rem;color:var(--encre-doux);margin-top:10px;}
  .ch-comm{margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.04);
    font-size:.92rem;line-height:1.5;}
  .ch-paroles{white-space:pre-wrap;line-height:1.6;margin-top:10px;font-size:.95rem;
    border-left:3px solid var(--ligne);padding-left:12px;}
  .ch-zone{margin-top:10px;}
  .ch-coche{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
    border:1px solid var(--ligne);background:var(--surface);font-size:.88rem;cursor:pointer;}
  .ch-coche:has(input:checked){border-color:var(--or);background:rgba(242,201,76,.14);font-weight:600;}
  /* croix de fermeture, toujours présente sur la fenêtre d'enregistrement */
  .ch-croix{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--ligne);background:var(--surface);color:var(--encre-doux);
    font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .ch-croix:hover{color:var(--faux);border-color:var(--faux);}
  /* ---------- Chant : niveaux de notation, pastille de rendu ---------- */
  .ch-niv{display:flex;gap:6px;flex-wrap:wrap;}
  .ch-niv-b{flex:1;min-width:96px;padding:7px 6px;border:1px solid var(--ligne);border-radius:9px;
    background:var(--surface);color:var(--encre-doux);font-family:inherit;font-size:.82rem;
    font-weight:600;cursor:pointer;transition:transform .08s;}
  .ch-niv-b:hover{transform:translateY(-1px);}
  .ch-niv-b.on{font-weight:800;}
  .voc-pop-fond{position:fixed;inset:0;background:rgba(10,18,32,.62);display:flex;align-items:center;
    justify-content:center;padding:18px;z-index:9000;animation:vpFond .18s ease;}
  @keyframes vpFond{from{opacity:0}to{opacity:1}}
  .voc-pop{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:22px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--ombre);
    animation:vpBoite .22s cubic-bezier(.2,.9,.3,1.2);}
  @keyframes vpBoite{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
  .voc-pop-mots{display:flex;flex-wrap:wrap;gap:7px;}
  .voc-pop-mot{background:var(--teinte-douce);border:1px solid var(--ligne);border-radius:var(--rayon-pill);
    padding:5px 12px;font-size:.9rem;font-weight:600;}
  /* Onglets des évaluations : par évaluation / par élève. */
  /* Bandeau-ruban de la page Évaluations (refonte « Option A ») */
  .ev-riban{display:flex;align-items:center;gap:16px;background:var(--degrade);border-radius:var(--rayon);padding:18px 24px;box-shadow:var(--ombre-forte);position:relative;overflow:hidden;margin-bottom:16px;}
  .ev-riban::before{content:"";position:absolute;inset:0;background:var(--brocart);opacity:.7;pointer-events:none;}
  .riban-retour{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--rayon-pill);padding:7px 13px 7px 9px;font-family:var(--police-titre);font-weight:700;font-size:.85rem;cursor:pointer;transition:background var(--t-rapide);}
  .riban-retour:hover{background:rgba(255,255,255,.26);}
  /* Boîtes de dialogue de la charte (remplacent confirm/prompt natifs) */
  .dlg-voile{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,27,46,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:dlgFondu .15s ease;}
  .dlg{width:100%;max-width:460px;box-sizing:border-box;background:var(--surface);color:var(--encre);border-radius:var(--rayon);box-shadow:0 24px 60px rgba(15,27,46,.35);padding:26px 26px 20px;text-align:center;animation:dlgMonte .18s ease;}
  .dlg-ic{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--fond-app);color:var(--laiton);}
  .dlg.dlg-danger .dlg-ic{background:var(--faux-fond);color:var(--faux);}
  .dlg-ic i{color:inherit !important;}
  .dlg-titre{font-family:var(--police-titre);font-size:1.16rem;font-weight:700;color:var(--laiton);margin:0 0 8px;line-height:1.3;}
  .dlg.dlg-danger .dlg-titre{color:var(--encre);}
  .dlg-corps{text-align:left;max-height:48vh;overflow:auto;margin-top:4px;}
  .dlg-corps p{margin:0 0 10px;font-size:.92rem;line-height:1.55;color:var(--encre-doux);white-space:pre-line;}
  .dlg-champ{width:100%;box-sizing:border-box;margin:10px 0 2px;padding:11px 14px;border:1.5px solid var(--ligne);border-radius:var(--rayon-xs);font-family:inherit;font-size:1rem;background:var(--surface);color:var(--encre);}
  .dlg-champ:focus{outline:none;border-color:var(--laiton-clair);box-shadow:0 0 0 3px rgba(61,107,163,.18);}
  .pres-recents{margin:6px 0 4px;padding-left:20px;line-height:1.8;font-size:.9rem;}
  .dlg-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .dlg-actions>button{margin:0;}
  @keyframes dlgFondu{from{opacity:0}to{opacity:1}}
  @keyframes dlgMonte{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  [data-energie="discret"] .dlg,[data-energie="discret"] .dlg-voile{animation:none;}
  /* Focus au clavier toujours visible (certains styles le retiraient). La souris,
     elle, ne déclenche pas :focus-visible sur un bouton : rien ne change au clic. */
  :is(button,a,summary,[tabindex],[role="button"]):focus-visible{outline:3px solid var(--or)!important;outline-offset:2px!important;}
  .ev-rib-ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none;position:relative;color:var(--or-clair);}
  .ev-rib-txt{flex:1;min-width:0;position:relative;}
  .ev-rib-titre{font-family:var(--police-titre);font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1;}
  .ev-rib-sous{color:rgba(255,255,255,.82);font-size:.9rem;margin-top:3px;}
  .ev-rib-nav{display:flex;align-items:flex-end;gap:14px;position:relative;flex-wrap:wrap;justify-content:flex-end;}
  .ev-rib-g{display:flex;flex-direction:column;gap:3px;}
  .ev-rib-lab{font-size:.68rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--or-clair);}
  .ev-rib-l{display:flex;align-items:center;gap:6px;}
  .ev-rib-fl{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
  .ev-rib-fl:disabled{opacity:.4;cursor:default;}
  .ev-rib-fl:hover:not(:disabled){background:rgba(255,255,255,.26);}
  /* champs du ruban : translucides sur le marine, comme sur la maquette */
  .ev-rib-sel,.ev-rib-cl{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);border-radius:12px;
    min-height:40px;padding:8px 12px;font-family:inherit;font-weight:600;color:#fff;cursor:pointer;font-size:.95rem;max-width:230px;}
  .ev-rib-sel:hover{background:rgba(255,255,255,.26);}
  .ev-rib-sel option{color:var(--encre);background:#fff;}
  @media(max-width:640px){.ev-riban{flex-wrap:wrap;}.ev-rib-nav{width:100%;justify-content:center;}}
  /* Paramètres : panneau latéral (menu de rubriques + panneau actif) */
  .pm-md{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start;max-width:1100px;margin:0 auto;}
  .pm-nav{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:10px;box-shadow:var(--ombre-douce);position:sticky;top:16px;}
  .pm-nav-it{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--rayon-xs);cursor:pointer;color:var(--encre);font-family:var(--police-titre);font-weight:700;font-size:.93rem;margin-bottom:2px;border:none;background:transparent;width:100%;text-align:left;}
  .pm-nav-it i{color:var(--laiton-clair);flex:none;font-size:1.15rem;}
  .pm-nav-it:hover{background:var(--fond-app);}
  .pm-nav-it.on{background:var(--laiton);color:#fff;}
  .pm-nav-it.on i{color:#fff !important;}
  .pm-nav-it.dang{color:var(--faux);} .pm-nav-it.dang i{color:var(--faux);}
  .pm-nav-it.dang.on{background:var(--faux);color:#fff;} .pm-nav-it.dang.on i{color:#fff !important;}
  .pm-nav-sep{height:1px;background:var(--ligne);margin:8px 6px;}
  .pm-panneau{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px 28px;box-shadow:var(--ombre-douce);}
  .pm-p-tete{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
  .pm-p-ic{width:42px;height:42px;border-radius:13px;background:var(--fond-app);color:var(--laiton-clair);display:flex;align-items:center;justify-content:center;flex:none;font-size:1.3rem;}
  .pm-p-tete h2{font-family:var(--police-titre);font-size:1.3rem;font-weight:800;margin:0;color:var(--laiton);}
  .pm-p-aide{color:var(--encre-doux);font-size:.88rem;margin:2px 0 22px;line-height:1.5;}
  .pm-ligne{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--ligne);flex-wrap:wrap;}
  .pm-ligne:first-of-type{border-top:none;padding-top:0;}
  .pm-ligne-l{display:flex;flex-direction:column;gap:2px;}
  .pm-ligne-l b{font-weight:600;font-size:.96rem;color:var(--encre);}
  .pm-ligne-l span{color:var(--encre-doux);font-size:.82rem;}
  @media(max-width:760px){.pm-md{grid-template-columns:1fr;}.pm-nav{position:static;display:flex;flex-wrap:wrap;gap:6px;}.pm-nav-it{width:auto;}.pm-nav-sep{display:none;}}
  /* Onglets : contrôle segmenté centré */
  .ev-onglets-c{text-align:center;margin-bottom:16px;}
  .ev-onglets{display:inline-flex;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-pill);padding:5px;gap:3px;box-shadow:var(--ombre-douce);flex-wrap:wrap;justify-content:center;}
  .ev-onglets button{background:transparent;border:none;color:var(--encre-doux);
    border-radius:var(--rayon-pill);padding:9px 18px;font-family:var(--police-titre);font-weight:700;
    font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
  .ev-onglets button:hover{color:var(--encre);}
  .ev-onglets button.on{background:var(--laiton);color:#fff;}
  .ev-onglets button.on i{color:#fff !important;}
  /* Barre : onglets à gauche, contrôles (trimestre + libres) à droite */
  .ev-barre{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
  .ev-barre .ev-onglets-c{margin-bottom:0;text-align:left;}
  .ev-barre-d{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .ev-ctrl-sel{border:none;background:transparent;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--encre);cursor:pointer;padding:2px 4px;}
  /* Barre d'outils du carnet : titre à gauche, actions à droite */
  .ev-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 6px;}
  .ev-toolbar-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .ev-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2,#f5f0e3);border:1px solid var(--ligne);border-radius:var(--rayon-pill);padding:7px 12px;font-size:.82rem;color:var(--encre);cursor:pointer;}
  .ev-chip:hover{border-color:var(--laiton);}
  /* Bandeau d'indicateurs de la page Évaluations (charte Ruban & Médaille) */
  .ev-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1080px;margin:0 auto 18px;}
  .ev-kpi{background:var(--surface);border:1px solid var(--ligne);border-radius:16px;padding:14px 16px;box-shadow:var(--ombre-douce);text-align:center;}
  .ev-kpi-l{font-size:.78rem;color:var(--encre-doux);font-weight:600;}
  .ev-kpi-v{font-family:var(--police-titre);font-size:1.5rem;font-weight:800;color:var(--encre);margin-top:2px;line-height:1.1;}
  .ev-kpi-v span{font-size:.9rem;color:var(--encre-doux);font-weight:600;}
  .ev-kpi.or{background:linear-gradient(135deg,rgba(242,201,76,.18),rgba(242,201,76,.07));border-color:rgba(242,201,76,.5);}
  .ev-kpi.or .ev-kpi-l{color:var(--or-texte);font-weight:700;}
  .ev-kpi.or .ev-kpi-v{color:var(--or-texte);}
  @media(max-width:720px){.ev-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .ev-carnet-titre{font-family:var(--police-titre);font-size:1.05rem;font-weight:700;color:var(--encre);display:flex;align-items:center;gap:9px;justify-content:center;margin:4px 0 2px;}
  /* Les trois moyennes de la classe dans une seule carte */
  .ev-moy3{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--ligne);
    border-radius:16px;box-shadow:var(--ombre-douce);max-width:1080px;margin:0 auto 12px;overflow:hidden;}
  .ev-moy3-t{display:flex;align-items:center;padding:12px 18px;background:var(--teinte-douce);
    font-family:var(--police-titre);font-weight:700;font-size:.82rem;line-height:1.25;color:var(--laiton);flex:none;}
  .ev-moy3-i{flex:1;min-width:0;padding:10px 16px;display:flex;flex-direction:column;justify-content:center;
    gap:2px;border-left:1px solid var(--ligne);text-align:center;}
  .ev-moy3-i span{font-size:.74rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--encre-doux);}
  .ev-moy3-i b{font-family:var(--police-titre);font-size:1.45rem;font-weight:800;color:var(--encre);line-height:1.1;}
  .ev-moy3-i b span{font-size:.62em;font-weight:600;letter-spacing:0;text-transform:none;color:var(--encre-doux);}
  .ev-moy3-i b i{font-style:normal;color:var(--encre-doux);}
  .ev-moy3-i.or{background:linear-gradient(135deg,rgba(242,201,76,.18),rgba(242,201,76,.07));}
  .ev-moy3-i.or span{color:var(--or-texte);}
  @media(max-width:720px){.ev-moy3{flex-wrap:wrap;}.ev-moy3-t{width:100%;justify-content:center;}
    .ev-moy3-i{border-left:0;border-top:1px solid var(--ligne);}}
  /* bouton principal de la barre des onglets (maquette : doré) */
  .ev-btn-or{display:inline-flex;align-items:center;gap:7px;background:var(--or);color:var(--encre);border:none;
    border-radius:14px;min-height:40px;padding:9px 18px;font-family:var(--police-titre);font-weight:700;
    font-size:.9rem;cursor:pointer;box-shadow:0 6px 16px rgba(142,109,11,.24);}
  .ev-btn-or:hover{background:var(--or-clair);}
  .ev-btn-or i{color:var(--encre)!important;font-size:1.05rem;}
  .ev-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
  /* « Exporter » posé dans le titre d'un carnet */
  .gb-sp{flex:1 1 auto;}
  .gb-bloc>summary .gb-exp{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rayon-pill);
    border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);font-family:inherit;font-weight:600;
    font-size:.84rem;cursor:pointer;}
  .gb-bloc>summary .gb-exp:hover{border-color:var(--laiton);background:var(--teinte-douce);}
  .ev-pop{position:fixed;z-index:9000;min-width:250px;padding:6px;background:var(--surface);
    border:1px solid var(--ligne);border-radius:var(--rayon-s);box-shadow:var(--ombre);}
  .ev-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;
    background:transparent;color:var(--encre);font-family:inherit;font-size:.9rem;text-align:left;cursor:pointer;}
  .ev-pop button:hover{background:var(--teinte-douce);}
  .ev-pop button i{color:var(--laiton);}
  /* Correction détaillée d'une évaluation : tableau lisible d'un coup d'oeil. */
  .fe-tab th,.fe-tab td{border:1px solid var(--ligne);padding:8px 10px;text-align:left;
    vertical-align:top;font-size:.92rem;}
  .fe-tab th{background:var(--teinte-douce);font-family:var(--police-titre);font-size:.86rem;}
  .fe-tab tr.fe-ko{background:var(--faux-fond);}
  .fe-tab img,.fe-tab svg{max-width:220px;height:auto;}
  /* Croix de fermeture des vignettes de célébration : « Rester ici » occupait
     la place d'une action utile pour ne rien faire. */
  .celebr-carte{position:relative;}
  .celebr-fermer{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--ligne);background:var(--surface);color:var(--encre-doux);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;padding:0;z-index:2;}
  .celebr-fermer:hover{border-color:var(--faux);color:var(--faux);}
  .celebr-fermer i{color:inherit !important;}
  /* Note de musique rouge : un devoir attend l'élève. Elle bat doucement pour
     accrocher l'oeil sans être agressive. */
  .acc-devoir{display:inline-flex;align-items:center;gap:2px;color:#e01b1b;
    font-weight:800;font-size:.9rem;margin-left:auto;animation:accNote 1.6s ease-in-out infinite;}
  .acc-devoir i{color:#e01b1b !important;font-size:1.15rem;}
  @keyframes accNote{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
  html[data-energie="discret"] .acc-devoir{animation:none;}
  /* Accueil enseignant : actions groupées par moment de la journée. */
  /* Imprimer cours & exercices : registre des codes en tête */
  .imp-registre{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;text-align:left}
  .imp-registre>div{flex:1;min-width:240px;display:flex;flex-direction:column;gap:3px}
  .imp-registre b{font-family:var(--police-titre);color:var(--encre)}
  .imp-registre span{font-size:.86rem;color:var(--encre-doux)}
  /* Leçons : portraits illustrés (ex. les pionniers du rock) */
  .lec-portraits{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:12px 0 18px}
  .lec-portrait{margin:0;display:flex;flex-direction:column;border-radius:var(--rayon-s);overflow:hidden;background:var(--surface);border:1px solid var(--ligne);box-shadow:var(--ombre-douce)}
  .lec-portrait img{display:block;width:100%;height:auto;background:#000;aspect-ratio:1/1;object-fit:contain}
  .lec-portrait figcaption{padding:10px 12px 12px;font-size:.9rem;line-height:1.45;color:var(--encre)}
  .lec-portraits.larges img{aspect-ratio:4/3}
  @media print{.lec-portraits{grid-template-columns:repeat(3,1fr)}.lec-portrait{break-inside:avoid}}
  /* Leçons : « À écouter » et « Écoute et compare » (lecteurs YouTube) */
  .lec-ecoute{margin:12px 0 18px;padding:12px 14px 14px;border-radius:var(--rayon-s);background:var(--surface-2);border:1px solid var(--ligne)}
  .lec-ecoute-t{display:flex;align-items:center;gap:7px;font-family:var(--police-titre);font-weight:700;font-size:1.02rem;color:var(--encre)}
  .lec-ecoute-t i{font-size:1.2rem;color:var(--laiton)}
  .lec-ecoute p{margin:6px 0 0;font-size:.92rem;line-height:1.5}
  .lec-ecoute.compare{border-left:4px solid var(--or)}
  .lec-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
  .lec-compare .ce-yt{margin-top:0}
  .lec-ecoute .ce-yt-src{display:none}
  @media print{.lec-ecoute{display:none}}
  /* Leçon jeux vidéo : laboratoire du son 8 bits */
  .o8{margin:14px 0 20px;padding:14px 16px 16px;border-radius:var(--rayon-s);background:var(--surface);border:1px solid var(--ligne);box-shadow:var(--ombre-douce)}
  .o8-t{display:flex;align-items:center;gap:8px;font-family:var(--police-titre);font-weight:700;font-size:1.15rem;color:var(--encre)}
  .o8-t i{font-size:1.35rem;color:var(--laiton)}
  .o8-part{margin-top:12px;padding-top:12px;border-top:1px dashed var(--ligne)}
  .o8-part:first-of-type{border-top:0;padding-top:0}
  .o8-st{font-weight:700;color:var(--laiton);margin-bottom:4px}
  .o8-aide,.o8-desc{margin:6px 0;font-size:.92rem;line-height:1.5}
  .o8-desc{min-height:3em}
  .o8-ondes{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
  .o8-onde{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:2px solid var(--ligne);background:var(--surface-2);color:var(--encre);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;touch-action:manipulation}
  .o8-onde svg{width:26px;height:22px;color:var(--c)}
  .o8-onde:hover{border-color:var(--c)}
  .o8-onde.on{background:#16233a;color:#fff;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
  .o8-ecran{position:relative;border-radius:12px;background:#0f1a2c;border:3px solid #25324a;box-shadow:inset 0 0 24px rgba(0,0,0,.6);overflow:hidden}
  .o8-ecran canvas{display:block;width:100%;height:140px}
  .o8-etat{position:absolute;right:10px;bottom:6px;font-size:.75rem;color:rgba(255,255,255,.55)}
  .o8-regl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:6px 0}
  .o8-regl label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem}
  .o8-regl label span{font-weight:400;font-size:.8rem;color:var(--encre-doux)}
  .o8-regl input[type=range]{width:160px;accent-color:var(--laiton)}
  .o8-duty{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem}
  .o8-duty[hidden]{display:none}
  .o8-duty button{padding:4px 10px;border-radius:999px;border:1.5px solid var(--ligne);background:var(--surface-2);color:var(--encre);font:inherit;font-size:.82rem;cursor:pointer}
  .o8-duty button.on{background:var(--or);color:#25324a;border-color:var(--or)}
  .o8-jouer{display:inline-flex;align-items:center;gap:8px;margin:8px 0 12px;padding:10px 18px;border:0;border-radius:999px;background:var(--laiton);color:#fff;font:inherit;font-weight:700;cursor:pointer}
  .o8-canaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .o8-canal{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 10px 8px;border-radius:12px;border:2px solid var(--ligne);background:#16233a;color:#fff;font:inherit;text-align:left;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s;touch-action:manipulation}
  .o8-canal.on{opacity:1;border-color:var(--c)}
  .o8-haut{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
  .o8-cn{font-size:.72rem;color:rgba(255,255,255,.65)}
  .o8-type{font-size:.82rem;font-weight:600;color:#fff}
  .o8-canal b{font-size:.92rem;color:var(--c)}
  .o8-canal canvas{display:block;width:100%;height:48px;margin-top:4px}
  .o8-onoff{flex:none;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.12)}
  .o8-onoff::after{content:"coupé"}
  .o8-canal.on .o8-onoff{background:var(--c);color:#16233a}
  .o8-canal.on .o8-onoff::after{content:"allumé"}
  @media print{.o8{display:none}}
  /* Cours « La répétition » : partitions des motifs, tableau, machine à accumulation */
  .rep-motifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
  .rep-motifs.large{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .rep-motifs figure{margin:0;padding:8px 10px 6px;border-radius:var(--rayon-s);background:#fff;border:1px solid var(--ligne);box-shadow:var(--ombre-douce);display:flex;flex-direction:column;align-items:center;justify-content:space-between}
  .rep-motifs img{display:block;max-width:100%;height:auto;max-height:110px;object-fit:contain}
  .rep-motifs figcaption{margin-top:4px;font-size:.84rem;font-weight:700;color:#8a6a1f}
  .rep-partoche{background:#fff;padding:8px;box-sizing:border-box}
  .rep-marilyn{max-width:460px;margin-left:auto;margin-right:auto}
  .rep-tab-wrap{overflow-x:auto;margin:10px 0 4px}
  .rep-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;min-width:520px}
  .rep-tab th,.rep-tab td{padding:8px 10px;border-bottom:1px solid var(--ligne);text-align:left}
  .rep-tab thead th{background:#16233a;color:#fff;font-weight:700}
  .rep-tab thead th:first-child{border-radius:var(--rayon-xs) 0 0 0}
  .rep-tab thead th:last-child{border-radius:0 var(--rayon-xs) 0 0}
  .rep-tab tbody th{font-family:var(--police-titre);font-size:1.1rem;color:var(--laiton);width:3em}
  .rep-tab .rep-long{color:#2374b0;font-weight:700}
  .rep-tab .rep-bref{color:#b5651d;font-weight:700}
  .rep-tab .rep-deux{font-weight:800;color:var(--encre)}
  .rep-tab tr.rep-centre td,.rep-tab tr.rep-centre th{background:var(--teinte-douce)}
  .rep-def{display:flex;gap:12px;align-items:flex-start;margin:10px 0;padding:12px 14px;border-radius:var(--rayon-s);background:var(--surface);border:1px solid var(--ligne);border-left:5px solid var(--or);line-height:1.5}
  .rep-def>i{font-size:1.6rem;color:var(--laiton);flex:none;margin-top:2px}
  .rep-bilan{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0}
  .rep-bilan>div{padding:12px 14px;border-radius:var(--rayon-s);background:linear-gradient(135deg,#16233a,#25324a);color:#fff;box-shadow:var(--ombre-douce)}
  .rep-bilan i{font-size:1.5rem;color:var(--or)}
  .rep-bilan b{display:block;font-family:var(--police-titre);font-size:1.1rem;margin-top:4px}
  .rep-bilan span{font-size:.8rem;color:rgba(255,255,255,.7)}
  .rep-bilan p{margin:6px 0 0;font-size:.9rem;line-height:1.45}
  .rep-bilan p b{display:inline;font-family:inherit;font-size:inherit;color:var(--or)}
  .rep-accu{margin:14px 0 20px;padding:14px 16px 16px;border-radius:var(--rayon-s);background:#16233a;color:#fff;box-shadow:var(--ombre-douce)}
  .ra-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .ra-tete>i{font-size:1.6rem;color:var(--or)}
  .ra-tete b{display:block;font-family:var(--police-titre);font-size:1.15rem}
  .ra-tete span{font-size:.85rem;color:rgba(255,255,255,.7)}
  .ra-grille{display:flex;flex-direction:column;gap:6px}
  .ra-l{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,minmax(26px,48px));gap:6px;align-items:center}
  .ra-ent span{text-align:center;font-size:.75rem;color:rgba(255,255,255,.6)}
  .ra-p{border-radius:999px;padding:2px 0;transition:background .2s,color .2s}
  .ra-p.on{background:var(--or);color:#16233a!important;font-weight:800}
  .ra-m{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border-radius:10px;border:2px solid rgba(255,255,255,.15);background:#25324a;color:#fff;font:inherit;text-align:left;cursor:pointer;opacity:.6;transition:opacity .15s,border-color .15s;touch-action:manipulation}
  .ra-m.on{opacity:1;border-color:var(--c)}
  .ra-m b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#16233a;font-family:var(--police-titre);font-size:1rem}
  .ra-m span{display:flex;flex-direction:column;min-width:0;font-size:.85rem;font-weight:600;line-height:1.2}
  .ra-m small{font-size:.72rem;font-weight:400;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ra-c{height:22px;border-radius:6px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.14)}
  .ra-c.plein{background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
  .ra-c.actif{background:var(--c);box-shadow:0 0 10px var(--c)}
  .ra-etat{margin:10px 0 8px;min-height:2.6em;font-size:.88rem;color:rgba(255,255,255,.85)}
  .ra-etat b{color:var(--or)}
  .ra-btns{display:flex;flex-wrap:wrap;gap:8px}
  .rep-accu .action:not(.btn-corr){background:#25324a;color:#fff;border-color:rgba(255,255,255,.25)}
  @media (max-width:520px){ .ra-m small{display:none} .ra-l{grid-template-columns:minmax(0,1fr) repeat(5,22px);gap:4px} }
  @media print{.rep-accu{display:none}}
  /* Cours « La recréation musicale » : rôles, lettres, bulle */
  .recre-role{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:12px 14px;border-radius:var(--rayon-s);background:linear-gradient(135deg,#16233a,#25324a);color:#fff;box-shadow:var(--ombre-douce)}
  .recre-role img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--or);flex:none}
  .recre-role div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .rr-sur{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--or)}
  .recre-role b{font-family:var(--police-titre);font-size:1.35rem;line-height:1.1}
  .recre-role span:last-child{font-size:.88rem;color:rgba(255,255,255,.8)}
  .recre-lettre{position:relative;margin:12px auto 16px;max-width:620px;padding:26px 30px 22px;background:linear-gradient(rgba(255,249,232,.62),rgba(255,249,232,.62)),#e9d9b4 url("images/recre-papier.webp") center/cover;color:#2a1c08;
    font-family:"Courier New",Courier,monospace;font-size:.95rem;line-height:1.55;border-radius:4px;box-shadow:0 10px 24px rgba(40,25,5,.28),inset 0 0 40px rgba(90,60,20,.25);transform:rotate(-.4deg)}
  .recre-lettre p{margin:0 0 10px}
  .rl-tete{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}
  .rl-tete span{text-transform:none;font-weight:400;letter-spacing:0;font-style:italic;margin-top:2px}
  .rl-sig{text-align:right;font-style:italic;margin-top:14px!important}
  .recre-bulle{display:flex;align-items:flex-end;gap:10px;margin:12px 0}
  .recre-bulle img{width:74px;height:74px;object-fit:contain;flex:none}
  .recre-bulle>div{position:relative;padding:12px 16px;border-radius:16px;background:var(--surface-2);border:2px solid var(--or);font-style:italic;line-height:1.5}
  .recre-bulle>div::before{content:"";position:absolute;left:-10px;bottom:14px;border:8px solid transparent;border-right-color:var(--or)}
  .recre-bulle span{display:block;margin-top:4px;font-style:normal;font-weight:700;font-size:.85rem;color:var(--laiton)}
  @media (max-width:560px){.recre-lettre{padding:20px 18px;font-size:.88rem}.recre-role img{width:64px;height:64px}}

  /* Studio de montage (exercice « studio ») */
  .ce-pas.prof{border-style:dashed}
  .ce-pause-prof{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}
  /* ===== Cours de collège (refonte 27/09/2026, piste C) ===== */
  .ccx{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
  .ccx-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre)}
  .ccx-attente,.ccx-vide{color:var(--encre-doux);text-align:center;margin:8px 0}
  .ccx-aide{display:flex;gap:8px;align-items:center;justify-content:center;font-size:.9rem;color:var(--encre-doux);margin:4px 0 0}
  .ccx-med{width:52px;height:52px;flex:none;border-radius:50%;border:4px double var(--or);background:var(--brocart),var(--bandeau);color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:1.5rem}
  .ccx-med i.ph{color:#fff}
  .ccx-med.grand{width:74px;height:74px;font-family:var(--police-titre);font-weight:800;font-size:2rem}
  .ccx-med.gris{background:var(--surface-2);border-color:var(--ligne);color:var(--laiton)}
  .ccx-med.gris i.ph{color:var(--laiton)}
  .ccx-bar{display:inline-block;vertical-align:middle;width:80px;height:6px;margin-left:8px;border-radius:6px;background:rgba(30,58,99,.12);overflow:hidden}
  .ccx-bar i{display:block;height:6px;background:var(--bandeau)}
  /* --- élève --- */
  .ccx-onglets{display:flex;gap:8px;flex-wrap:wrap}
  .ccx-onglet{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--ligne);background:var(--surface);color:var(--laiton);font-family:var(--police-titre);font-weight:700;font-size:.95rem;cursor:pointer}
  .ccx-onglet.on{background:var(--laiton);border-color:var(--laiton);color:#fff}
  .ccx-onglet i.ph-bold{color:var(--juste)}
  .ccx-eleve{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
  .ccx-fiche{padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;position:sticky;top:12px}
  .ccx-anneau{width:130px;height:130px;border-radius:50%;padding:9px;box-sizing:border-box}
  .ccx-anneau>div{width:100%;height:100%;border-radius:50%;border:4px double var(--or);background:var(--brocart),var(--bandeau);color:#fff;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ccx-anneau b{font-family:var(--police-titre);font-size:2rem;line-height:1}
  .ccx-anneau small{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
  .ccx-fiche h2{margin:0;font-family:var(--police-titre);font-weight:800;font-size:1.55rem;line-height:1.1;color:var(--laiton)}
  .ccx-fiche p{margin:0;font-size:.9rem;color:var(--encre-doux)}
  .ccx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
  .ccx-stats span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:rgba(30,58,99,.05);font-size:.72rem;font-weight:600;color:var(--encre-doux);line-height:1.2}
  .ccx-stats span.or{background:var(--teinte-douce)}
  .ccx-stats b{font-family:var(--police-titre);font-size:1.5rem;line-height:1;color:var(--laiton)}
  .ccx-stats span.or b{color:var(--or-texte)}
  .ccx-eval{display:flex;gap:12px;align-items:center;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--ligne);text-align:left;font:inherit;color:var(--encre);background:transparent}
  .ccx-eval>i.ph{font-size:1.5rem;color:var(--encre-doux);flex:none}
  .ccx-eval span{display:flex;flex-direction:column;flex:1;min-width:0}
  .ccx-eval small{font-size:.8rem;color:var(--encre-doux)}
  button.ccx-eval.ok{border:0;background:var(--or);color:#111E2D;cursor:pointer;box-shadow:var(--ombre-bouton)}
  button.ccx-eval.ok i.ph,button.ccx-eval.ok i.ph-fill,button.ccx-eval.ok small{color:#111E2D}
  .ccx-etapes{padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px}
  .ccx-etapes-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 10px 8px}
  .ccx-etapes-t h3{margin:0;font-family:var(--police-titre);font-weight:800;font-size:1.2rem;color:var(--laiton)}
  .ccx-etapes-t span{font-size:.85rem;color:var(--encre-doux)}
  .ccx-et{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:7px 12px;border:0;border-radius:12px;background:transparent;font:inherit;color:var(--encre);text-align:left;cursor:pointer}
  .ccx-et:hover:not([disabled]){background:var(--surface-2)}
  .ccx-et[disabled]{cursor:default}
  .ccx-et .n{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:.95rem;box-sizing:border-box}
  .ccx-et.fait .n{background:var(--laiton);color:#fff}
  .ccx-et.fait .n i{color:#fff}
  .ccx-et.cour{background:var(--teinte-douce);box-shadow:inset 0 0 0 2px var(--or)}
  .ccx-et.cour .n{background:var(--or);color:#111E2D}
  .ccx-et.verrou .n,.ccx-et.prof .n{border:2px dashed rgba(30,58,99,.25);color:var(--encre-doux)}
  .ccx-et.verrou,.ccx-et.prof{color:var(--encre-doux)}
  .ccx-et-t{display:flex;flex-direction:column;min-width:0}
  .ccx-et-t b{font-family:var(--police-titre);font-weight:700;font-size:1.02rem;line-height:1.2}
  .ccx-et-t small{font-size:.78rem;color:var(--encre-doux)}
  .ccx-tag{font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
  .ccx-tag.v{background:var(--juste-fond);color:var(--juste)}
  .ccx-tag.g{background:rgba(30,58,99,.06);color:var(--encre-doux)}
  .ccx-go{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:999px;background:var(--or);color:#111E2D;font-family:var(--police-titre);font-weight:800;white-space:nowrap}
  .ccx-go i{color:#111E2D}
  /* --- enseignant : niveaux --- */
  .ccx-niveaux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .ccx-niv{display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre);font:inherit;color:var(--encre);text-align:left;cursor:pointer;transition:box-shadow var(--t-rapide),transform var(--t-rapide)}
  .ccx-niv:hover{box-shadow:0 0 0 3px var(--or),var(--ombre-forte);transform:translateY(-2px)}
  .ccx-niv-tete{display:flex;align-items:center;gap:14px}
  .ccx-niv-tete>span:last-child{display:flex;flex-direction:column}
  .ccx-niv-nom{font-family:var(--police-titre);font-weight:800;font-size:1.35rem;line-height:1.1;color:var(--laiton)}
  .ccx-niv-tete small{font-size:.85rem;color:var(--encre-doux)}
  .ccx-niv-cours{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--teinte-douce);font-size:.9rem}
  .ccx-niv-cours i.ph{color:var(--bandeau);font-size:1.2rem}
  .ccx-niv-cl{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.86rem;padding:6px 10px;border-radius:10px;background:rgba(35,116,176,.07)}
  .ccx-niv-cl b{font-family:var(--police-titre);font-size:1rem}
  .ccx-niv-cl.f{background:rgba(30,58,99,.04);color:var(--encre-doux)}
  .ccx-aller{margin-top:auto;padding-top:4px;display:flex;align-items:center;justify-content:space-between;font-family:var(--police-titre);font-weight:800;font-size:1rem;color:var(--laiton)}
  /* --- enseignant : page d'un niveau --- */
  .ccx-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ccx-sp{flex:1}
  .ccx-retour,.ccx-chip,.ccx-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ligne);background:var(--surface);color:var(--laiton);font-family:var(--police-titre);font-weight:700;font-size:.95rem;cursor:pointer}
  .ccx-chip{min-width:48px;justify-content:center;padding:0 12px;font-weight:800}
  .ccx-chip.on{background:var(--laiton);border-color:var(--laiton);color:#fff}
  .ccx-btn{height:34px;padding:0 13px;font-size:.88rem}
  .ccx-bloc{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
  .ccx-cours{padding:16px 18px 16px;display:flex;flex-direction:column;gap:14px;min-width:0}
  .ccx-cours-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .ccx-cours-nom{flex:1;min-width:180px;display:flex;flex-direction:column}
  .ccx-cours-nom b{font-family:var(--police-titre);font-weight:800;font-size:1.3rem;line-height:1.1;color:var(--laiton)}
  .ccx-cours-nom small{font-size:.84rem;color:var(--encre-doux)}
  .ccx-actions{display:flex;gap:6px;flex-wrap:wrap}
  .ccx-grille{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 104px;column-gap:10px;row-gap:10px;align-items:center}
  .ccx-g-lib{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-doux)}
  .ccx-g-nums,.ccx-cases{display:grid;gap:4px}
  .ccx-g-nums span{text-align:center;font-family:var(--police-titre);font-weight:800;font-size:.8rem;color:var(--encre-doux)}
  .ccx-g-cl{display:flex;align-items:center;gap:8px;min-width:0}
  .ccx-g-cl b{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ccx-inter{position:relative;flex:none;width:40px;height:23px;border-radius:999px;border:0;background:rgba(30,58,99,.22);cursor:pointer;padding:0}
  .ccx-inter::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left var(--t-rapide)}
  .ccx-inter.on{background:var(--juste)}
  .ccx-inter.on::after{left:20px}
  .ccx-case{height:32px;border-radius:7px;border:1.5px dashed rgba(30,58,99,.2);background:rgba(30,58,99,.05);cursor:pointer;padding:0;min-width:0}
  .ccx-case:hover:not([disabled]){border-color:var(--bandeau)}
  .ccx-case.o{background:var(--bandeau);border:0}
  .ccx-case.lim{box-shadow:0 0 0 3px var(--or)}
  .ccx-case[disabled]{cursor:not-allowed;opacity:.5}
  .ccx-pas{display:flex;align-items:center;justify-content:space-between;height:34px;border:1.5px solid var(--ligne);border-radius:999px;overflow:hidden;background:var(--surface)}
  .ccx-pas button{width:32px;height:32px;border:0;background:transparent;color:var(--laiton);font-size:1.1rem;font-weight:700;cursor:pointer}
  .ccx-pas b{font-family:var(--police-titre);font-weight:800}
  .ccx-ferme{text-align:center;font-size:.85rem;color:var(--encre-doux)}
  .ccx-cours-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--ligne);font-size:.86rem;color:var(--encre-doux)}
  .ccx-cours-pied span{flex:1;min-width:180px}
  .ccx-plus{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--or);color:#111E2D;font-family:var(--police-titre);font-weight:800;font-size:.92rem;cursor:pointer}
  .ccx-plus i{color:#111E2D}
  .ccx-ou-liste{padding:14px 12px;display:flex;flex-direction:column;gap:2px}
  .ccx-ou-liste h3{margin:0 0 6px;padding:0 6px;font-family:var(--police-titre);font-weight:800;font-size:1.05rem;color:var(--laiton)}
  .ccx-ou{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 6px;border-radius:10px;font-size:.84rem}
  .ccx-ou .n{width:24px;height:24px;border-radius:50%;background:var(--bandeau);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--police-titre);font-weight:800;font-size:.78rem}
  .ccx-ou.f{color:var(--encre-doux)}
  .ccx-ou.f .n{background:transparent;border:1.5px dashed rgba(30,58,99,.28);color:var(--encre-doux);box-sizing:border-box}
  .ccx-ou.lim{background:var(--teinte-douce)}
  .ccx-ou.lim .t{font-weight:700}
  .ccx-ou .tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
  .ccx-ou .tags i{font-style:normal;font-size:.72rem;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--laiton);color:#fff}
  .ccx-autres{padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px}
  .ccx-autres-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
  .ccx-autres-t h3{margin:0;font-family:var(--police-titre);font-weight:800;font-size:1.1rem;color:var(--laiton)}
  .ccx-autres-t span{font-size:.84rem;color:var(--encre-doux)}
  .ccx-autres-g{display:grid;column-gap:10px;row-gap:6px;align-items:center}
  .ccx-autres-g .h{font-size:.82rem;font-weight:700;color:var(--laiton);line-height:1.2}
  .ccx-autres-g b{font-family:var(--police-titre);font-weight:800}
  .ccx-ouvrir{height:34px;border-radius:10px;border:1.5px dashed var(--ligne);background:transparent;color:var(--encre-doux);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
  .ccx-ouvrir:hover{border-color:var(--bandeau);color:var(--bandeau)}
  @media (max-width:860px){
    .ccx-eleve,.ccx-bloc{grid-template-columns:minmax(0,1fr)}
    .ccx-fiche{position:static}
    .ccx-niveaux{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:560px){
    .ccx-grille{grid-template-columns:minmax(0,1fr) 96px;row-gap:6px;grid-auto-flow:row dense}
    .ccx-g-lib{display:none}
    .ccx-grille>span:nth-child(3){display:none}
    .ccx-g-nums{grid-column:1 / -1}
    .ccx-g-cl{grid-column:1;margin-top:8px}
    .ccx-pas,.ccx-ferme{grid-column:2;margin-top:8px}
    .ccx-cases{grid-column:1 / -1;gap:3px}
    .ccx-case{height:34px}
    .ccx-et{grid-template-columns:30px minmax(0,1fr);row-gap:6px}
    .ccx-et>span:last-child{grid-column:2}
  }
  .stu{margin:10px 0 4px}
  .stu-app i.ph,.stu-app i.ph-fill,.stu-missions i.ph,.stu-missions i.ph-fill{color:inherit;text-shadow:none}
  .stu-mi.cour i.ph{color:var(--laiton)}
  .stu-app{position:relative;border-radius:14px;background:#141d2e;color:#e8f0fa;border:1px solid #2c3b57;box-shadow:0 8px 22px rgba(10,20,40,.25);overflow:visible}
  .stu-menus{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid #2c3b57;background:#1b2740;border-radius:14px 14px 0 0}
  .stu-logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--or);margin-right:6px}
  .stu-sp{flex:1}
  .stu-menu{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:#e8f0fa;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
  .stu-menu:hover{background:rgba(255,255,255,.1)}
  .stu-transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px}
  .stu-tb{width:40px;height:40px;border-radius:50%;border:0;background:#2c3b57;color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
  .stu-tb.play{width:48px;height:48px;background:var(--or);color:#16233a;font-size:1.3rem}
  .stu-temps{font-family:"Courier New",monospace;font-weight:700;font-size:1rem;padding:5px 10px;border-radius:8px;background:#0b1220;color:#7ee0a4}
  .stu-info{font-size:.84rem;color:var(--or)}
  .stu-zone{position:relative;padding:0 10px 8px}
  .stu-vide{padding:26px 14px;text-align:center;color:rgba(255,255,255,.7);border:2px dashed #2c3b57;border-radius:10px;line-height:1.6}
  .stu-vide i{font-size:1.6rem;display:block;margin-bottom:4px}
  .stu-regle,.stu-piste{display:flex;align-items:stretch}
  .stu-coin,.stu-tete{flex:0 0 190px;width:190px}
  .stu-regle .stu-onde{flex:1;min-width:0;height:20px;cursor:pointer}
  .stu-regle canvas{display:block;width:100%;height:20px}
  .stu-piste{margin-top:6px;border-radius:10px;background:#1b2740;border:2px solid transparent}
  .stu-piste.choisie{border-color:var(--or);box-shadow:0 0 0 2px rgba(242,201,76,.25)}
  .stu-tete{display:flex;flex-direction:column;gap:4px;padding:7px 8px;border-right:3px solid var(--c);cursor:pointer;min-width:0}
  .stu-nom{font-weight:700;font-size:.82rem;line-height:1.25;color:var(--c)}
  .stu-badges{display:flex;flex-wrap:wrap;gap:4px}
  .stu-badges span{font-size:.7rem;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.12)}
  .stu-ctrl{display:flex;align-items:center;gap:5px}
  .stu-m{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;font-size:.74rem;cursor:pointer;flex:none}
  .stu-m.on{background:#e05a5a;border-color:#e05a5a}
  .stu-ctrl input[type=range]{flex:1;min-width:40px;width:60px;accent-color:var(--or)}
  .stu-x{border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;padding:2px;font-size:.9rem;flex:none}
  .stu-x:hover{color:#fff}
  .stu-piste .stu-onde{flex:1;min-width:0;position:relative;cursor:text;touch-action:none}
  .stu-piste canvas{display:block;width:100%;height:72px}
  .stu-piste.muette .stu-tete{opacity:.6}
  .stu-charge{margin-top:6px;padding:10px;border-radius:10px;background:#1b2740;font-size:.86rem;color:rgba(255,255,255,.75)}
  .stu-charge i{display:inline-block;animation:stuTourne 1s linear infinite}
  @keyframes stuTourne{to{transform:rotate(360deg)}}
  .stu-tl{position:absolute;top:0;bottom:8px;width:2px;background:#ff5d5d;box-shadow:0 0 6px #ff5d5d;pointer-events:none}
  .stu-bas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 12px;border-top:1px solid #2c3b57;font-size:.84rem;color:rgba(255,255,255,.8)}
  .stu-bas input{width:70px;padding:4px 6px;border-radius:6px;border:1px solid #2c3b57;background:#0b1220;color:#fff;font:inherit}
  .stu-lien{border:0;background:transparent;color:var(--or);font:inherit;text-decoration:underline;cursor:pointer}
  .stu-pop{position:absolute;z-index:30;min-width:250px;max-width:min(360px,92%);padding:8px;border-radius:12px;background:#223252;border:1px solid #3a4f78;box-shadow:0 12px 28px rgba(0,0,0,.45)}
  .stu-pop[hidden]{display:none}
  .stu-pop-t{font-weight:700;font-size:.82rem;color:var(--or);padding:4px 8px 6px}
  .stu-pop-p{margin:0 8px 8px;font-size:.85rem;line-height:1.45}
  .stu-fich{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#fff;font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
  .stu-fich:hover:not([disabled]){background:rgba(255,255,255,.1)}
  .stu-fich[disabled]{opacity:.5;cursor:default}
  .stu-fich em{margin-left:auto;font-size:.75rem;color:rgba(255,255,255,.6)}
  .stu-champ{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 8px;font-size:.88rem}
  .stu-champ input{width:80px;padding:6px 8px;border-radius:8px;border:1px solid #3a4f78;background:#0b1220;color:#fff;font:inherit}
  .stu-pop-btns{display:flex;align-items:center;gap:12px;margin:10px 8px 4px}
  .stu-ok{padding:8px 16px;border:0;border-radius:999px;background:var(--or);color:#16233a;font:inherit;font-weight:700;cursor:pointer}
  .stu-missions{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--ligne)}
  .stu-mt{display:flex;align-items:center;gap:7px;font-weight:700;margin-bottom:6px}
  .stu-mt span{margin-left:auto;font-size:.82rem;padding:2px 9px;border-radius:999px;background:var(--or);color:#25324a}
  .stu-mi{display:flex;align-items:flex-start;gap:8px;padding:5px 4px;font-size:.92rem;line-height:1.4;color:var(--encre-doux)}
  .stu-mi i{font-size:1.1rem;margin-top:1px;flex:none}
  .stu-mi.eval{color:var(--encre)}
  .stu-mi ol{margin:4px 0 2px;padding-left:20px;font-weight:400}
  .stu-mi ol li{margin:2px 0}
  .stu-mi.fait ol{display:none}
  .stu-mi span{min-width:0}
  .stu-modele{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--ligne);font-size:.92rem}
  .stu-modele audio{height:36px;max-width:100%}
  .stu-fin{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:1px solid var(--or);background:transparent;color:var(--or);font:inherit;font-size:.8rem;cursor:pointer}
  .stu-fin:hover{background:rgba(242,201,76,.15)}
  .stu-bas input.stu-temps-in{width:64px}
  .recre-bulle .rb-av{width:64px;height:64px;border-radius:50%;background:#16233a;display:flex;align-items:center;justify-content:center;font-size:2rem;flex:none;border:3px solid var(--or)}
  .stu-mi.eval b{flex:none;min-width:1.2em;color:var(--laiton)}
  .lcc-atelier{margin-top:18px}
  .stu-mi.cour{color:var(--encre);font-weight:600}
  .stu-mi.cour i{color:var(--laiton)}
  .stu-mi.fait{color:var(--juste)}
  .stu-mi.fait span{text-decoration:line-through;text-decoration-thickness:1px}
  .stu-conseil{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 11px;border-radius:10px;background:rgba(242,153,74,.14);border-left:4px solid #f2994a;font-size:.9rem;line-height:1.45;color:var(--encre)}
  .stu-conseil i.ph-fill{color:#f2994a;font-size:1.1rem;flex:none;margin-top:1px}
  .stu-mi em{font-style:normal;font-size:.8rem;padding:1px 7px;border-radius:999px;background:var(--juste-fond);color:var(--juste);margin-left:4px}
  @media (max-width:620px){
    .stu-coin,.stu-tete{flex-basis:118px;width:118px}
    .stu-nom{font-size:.74rem}
    .stu-ctrl{flex-wrap:wrap}
    .stu-ctrl input[type=range]{display:none}
    .stu-piste canvas{height:64px}
    .stu-menus .stu-sp{display:none}
  }
  @media print{.stu,.stu-missions{display:none}}
  /* Page Diplômes */
  .dip-carte.ult.on{border-color:#d4a72c;box-shadow:0 0 0 1px #d4a72c inset,var(--ombre-douce)}
  .dip-cl{font-style:normal;font-weight:600;font-size:.78rem;color:var(--encre-doux);margin-left:4px}
  .dipP-choix,.dipP-barre{text-align:left;margin-bottom:14px}
  .dipP-t{display:flex;align-items:center;gap:10px;font-family:var(--police-titre);font-weight:800;font-size:1.05rem;color:var(--encre);margin-bottom:12px}
  .dipP-t span{width:28px;height:28px;border-radius:50%;background:var(--laiton);color:var(--or);display:flex;align-items:center;justify-content:center;font-size:.95rem}
  .dipP-col{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--rayon-s);cursor:pointer;margin-bottom:14px;
    background:var(--brocart),#16284a;color:#fff;box-shadow:0 0 0 2px #d4a72c inset}
  .dipP-col.on{box-shadow:0 0 0 3px #F2C94C inset,0 8px 22px rgba(30,58,99,.25)}
  .dipP-col input{width:20px;height:20px;accent-color:#F2C94C;flex:none}
  .dipP-col span{display:flex;flex-direction:column;gap:2px}
  .dipP-col b{font-family:var(--police-titre);font-size:1.05rem;color:#F2C94C}
  .dipP-col small{font-size:.84rem;color:#dbe6f3}
  .dipP-classes{display:flex;flex-direction:column;gap:8px}
  .dipP-gr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .dipP-grn{min-width:64px;padding:7px 10px;border-radius:10px;border:1px solid var(--ligne);background:var(--fond-app);font:inherit;font-weight:800;color:var(--laiton);cursor:pointer}
  .dipP-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--ligne);background:var(--surface);font-weight:600;font-size:.9rem;cursor:pointer;color:var(--encre)}
  .dipP-chip.on{border-color:var(--laiton);background:var(--teinte-douce)}
  .dipP-chip input{accent-color:var(--laiton)}
  .dipP-racc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .dipP-barre{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;position:sticky;top:8px;z-index:6}
  .dipP-barre .dipP-t{margin:0}
  .dipP-barre .dip-tampon{margin:0}
  .dipP-barre select{padding:8px 10px;border:1px solid var(--ligne);border-radius:10px;font:inherit;background:var(--surface);color:var(--encre)}
  .dipP-imp{margin-left:auto}
  .dipP-sec{margin:0 0 14px;border:1.5px solid var(--ligne);border-radius:var(--rayon-s);background:var(--surface);padding:0 14px}
  .dipP-sec.ult{border-color:#d4a72c}
  .dipP-sec>summary{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 2px;cursor:pointer;list-style:none}
  .dipP-sec>summary::-webkit-details-marker{display:none}
  .dipP-sec>summary b{font-family:var(--police-titre);font-size:1.08rem;color:var(--encre)}
  .dipP-sec.ult>summary b{color:var(--or-texte)}
  .dipP-sec>summary span{font-size:.86rem;color:var(--encre-doux)}
  .dipP-sec[open]>summary{border-bottom:1px solid var(--ligne);margin-bottom:12px}
  .dipP-sec .dip-grille{padding-bottom:14px}
  .dipP-note{font-size:.84rem;color:var(--encre-doux);margin-top:6px}
  /* Diplômes (cartes des lauréats) */
  .dip-tete{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:6px 0 10px}
  .dip-intro{display:flex;flex-direction:column;gap:3px;max-width:620px}
  .dip-intro b{font-family:var(--police-titre);font-size:1.15rem;color:var(--encre)}
  .dip-intro span{font-size:.86rem;color:var(--encre-doux)}
  .dip-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .dip-date{font-size:.86rem;color:var(--encre-doux);display:flex;align-items:center;gap:6px}
  .dip-date input{padding:8px 10px;border:1px solid var(--ligne);border-radius:10px;font:inherit;background:var(--surface);color:var(--encre)}
  .dip-tampon,.dip-alerte{font-size:.88rem;color:var(--encre);margin:0 0 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .dip-alerte{display:block;background:var(--surface-2);border:1px solid var(--or);border-radius:12px;padding:9px 12px}
  .dip-lien{background:none;border:none;padding:0;color:var(--valide);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
  .dip-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
  .dip-carte{background:var(--surface);border:1.5px solid var(--ligne);border-radius:var(--rayon-s);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
  .dip-carte.on{border-color:var(--laiton);box-shadow:var(--ombre-douce)}
  .dip-c-tete{display:flex;align-items:center;gap:10px}
  .dip-c-tete b{flex:1;font-family:var(--police-titre);font-size:1.02rem;color:var(--encre);line-height:1.2}
  .dip-ic{width:38px;height:38px;flex:none;border-radius:12px;background:var(--laiton);color:var(--or);display:flex;align-items:center;justify-content:center}
  .dip-coche{font-size:.82rem;color:var(--encre-doux);display:flex;align-items:center;gap:5px;cursor:pointer}
  .dip-gagnants{display:flex;flex-direction:column;gap:6px}
  .dip-g{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-weight:700;color:var(--encre);padding:7px 10px;border-radius:10px;background:var(--teinte-douce)}
  .dip-g small{font-weight:700;color:var(--or-texte);white-space:nowrap}
  .dip-gagnants em{font-size:.78rem;color:var(--encre-doux)}
  .dip-suiv{font-size:.8rem;color:var(--encre-doux)}
  .dip-vide{margin:0;font-size:.86rem;color:var(--encre-doux)}
  .dip-reg{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
  .dip-reg-champs{flex:1;min-width:240px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .dip-champ{display:flex;flex-direction:column;gap:4px;width:100%;font-size:.84rem;font-weight:600;color:var(--encre-doux)}
  .dip-champ input{width:100%;box-sizing:border-box}
  .dip-reg-apercu{flex:none;width:190px;height:190px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fbf8ef}
  .dip-reg-apercu svg{transform:rotate(-11deg);opacity:.9}
  /* Paramètres > Sauvegarde */
  .sauv-bloc{padding:16px 0;border-top:1px solid var(--ligne);}
  .sauv-bloc h3{margin:0 0 8px;font-size:1.02rem;}
  .sauv-bloc p{margin:0 0 10px;font-size:.9rem;line-height:1.5;}
  .pm-nav-alerte{width:9px;height:9px;border-radius:50%;background:var(--faux);margin-left:auto;flex:none;box-shadow:0 0 0 2px var(--surface,#fff);}
  .tri-liste{display:flex;flex-direction:column;gap:8px;}
  .tri-l{display:grid;grid-template-columns:1fr 140px 140px 32px;gap:8px;align-items:center;}
  @media(max-width:560px){ .tri-l{grid-template-columns:1fr 1fr;} .tri-l .tri-nom{grid-column:1/-1;} }
  .prof-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;margin-bottom:26px;}
  .prof-act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    background:var(--surface);border:1px solid var(--ligne);border-top:3px solid var(--laiton);
    border-radius:var(--rayon-s);padding:14px 16px;cursor:pointer;text-align:left;
    font-family:var(--police);box-shadow:var(--ombre-douce);
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide);}
  .prof-act:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);border-color:var(--laiton);}
  .prof-act>i{font-size:1.5rem;color:var(--laiton);margin-bottom:4px;}
  .prof-act b{font-family:var(--police-titre);font-size:1rem;color:var(--encre);}
  .prof-act span{font-size:.82rem;color:var(--encre-doux);line-height:1.35;}
  .ap-panel{min-width:0;}
  .ap-panel .prof-actions{margin-bottom:0;}
  .ap-panel-t{display:flex;align-items:center;gap:9px;font-family:var(--police-titre);font-size:1.15rem;font-weight:700;color:var(--laiton);margin:0 2px 14px;}
  .ap-panel-t i{color:var(--laiton-clair);}
  /* Onglets de rubriques (horizontaux) : plus de second menu à gauche */
  .ap-tabs{display:flex;justify-content:center;margin:22px 0 18px;}
  /* Écran d'impression (recueil) */
  .imp-opts{display:flex;flex-direction:column;gap:10px;font-size:.92rem;}
  .imp-opts label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .imp-groupe{margin:0 0 8px;border:1px solid var(--ligne);border-radius:var(--rayon-xs);overflow:hidden;background:var(--surface);}
  .imp-groupe-t{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;font-family:var(--police-titre);font-weight:700;color:var(--laiton);font-size:.95rem;background:var(--fond-app);}
  .imp-groupe-t::-webkit-details-marker{display:none;}
  .imp-groupe-t::after{content:"\25be";margin-left:auto;color:var(--encre-doux);transition:transform var(--t-rapide);}
  details.imp-groupe[open] .imp-groupe-t::after{transform:rotate(180deg);}
  .imp-grp-chk{display:inline-flex;align-items:center;}
  .imp-grp-nom{flex:0 1 auto;}
  .imp-grp-compte{font-family:var(--police);font-weight:700;font-size:.72rem;color:var(--encre-doux);background:var(--surface);border-radius:var(--rayon-pill);padding:2px 8px;margin-left:2px;}
  .imp-groupe-corps{padding:8px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px;}
  .imp-lecon{display:flex;align-items:center;gap:8px;font-size:.9rem;padding:6px 8px;border-radius:8px;cursor:pointer;}
  .imp-lecon:hover{background:var(--fond-app);}
  .imp-lecon input{flex:none;}
  /* Élèves et codes : actions regroupées (une seule action principale) */
  .rs-barre{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start;margin:0 0 18px;}
  .rs-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:8px 10px;box-shadow:var(--ombre-douce);}
  .rs-lib{font-family:var(--police-titre);font-weight:700;font-size:.78rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.06em;margin:0 4px 0 2px;}
  .rs-plus{flex-basis:100%;text-align:center;}
  .rs-plus>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:.85rem;color:var(--encre-doux);padding:4px 10px;border-radius:var(--rayon-pill);}
  .rs-plus>summary::-webkit-details-marker{display:none;}
  .rs-plus>summary:hover{background:var(--fond-app);color:var(--laiton);}
  .rs-plus-corps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px;}
  .rs-vide{max-width:620px;margin:10px auto 0;text-align:center;background:var(--surface);border:1px dashed var(--ligne);border-radius:var(--rayon);padding:26px 24px;}
  .rs-vide-ic{font-size:2.4rem;color:var(--laiton-clair);}
  .rs-vide h3{font-family:var(--police-titre);color:var(--laiton);margin:6px 0 8px;}
  .rs-vide p{color:var(--encre-doux);font-size:.92rem;line-height:1.55;margin:0 0 14px;}
  .rs-vide-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;}
  .rs-vide .rs-vide-note{font-size:.8rem;margin:0;}
  /* Bloc dépliable « Comment ça marche ? » (accueil élève) */
  .ap-aide{margin:26px 0 0;border:1px solid var(--ligne);border-radius:var(--rayon-s);background:var(--surface);box-shadow:var(--ombre-douce);}
  .ap-aide>summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--police-titre);font-weight:700;font-size:1.1rem;color:var(--laiton);display:flex;align-items:center;gap:9px;}
  .ap-aide>summary::-webkit-details-marker{display:none;}
  .ap-aide>summary::after{content:"\25be";margin-left:auto;color:var(--encre-doux);transition:transform var(--t-rapide);}
  .ap-aide[open]>summary::after{transform:rotate(180deg);}
  .ap-aide>summary>i{color:var(--laiton-clair);}
  .ap-aide>ol{padding:0 18px 18px;}
  @media(max-width:820px){.ap-panel .prof-actions{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}}
  /* Donner un travail : formulaire à gauche, destinataires à droite. */
  .dv-colonnes{display:grid;grid-template-columns:1fr 240px;gap:18px;align-items:start;}
  @media(max-width:760px){.dv-colonnes{grid-template-columns:1fr;}}
  .dv-eleves{border:1px solid var(--ligne);border-radius:12px;padding:12px;background:var(--surface-2);}
  .dv-eleves-liste{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
  .dv-eleve{display:flex;align-items:center;gap:7px;font-size:.88rem;padding:3px 5px;
    border-radius:7px;cursor:pointer;min-width:0;}
  .dv-eleve:hover{background:var(--teinte-douce);}
  .dv-eleve input{flex:none;}
  .dv-eleve span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Choix des mots par le professeur */
  .dv-voc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;
    max-height:230px;overflow-y:auto;border:1px solid var(--ligne);border-radius:10px;padding:8px;}
  .dv-voc-mot{display:flex;align-items:center;gap:6px;font-size:.88rem;padding:3px 5px;
    border-radius:7px;cursor:pointer;min-width:0;}
  .dv-voc-mot:hover{background:var(--teinte-douce);}
  .dv-voc-mot input{flex:none;}
  .rm-kpi{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:20px;text-align:center;}
  .rm-kpi .kp-lib{color:var(--encre-doux);font-size:.78rem;margin-bottom:6px;}
  .rm-kpi .kp-val{font-family:var(--police-titre);font-weight:700;font-size:1.8rem;color:var(--encre);}
  /* Interrupteur (paramètres) */
  .rm-switch{width:44px;height:24px;border-radius:var(--rayon-pill);background:#c7d2e0;
    cursor:pointer;padding:3px;transition:background var(--t-rapide);border:none;flex:none;}
  .rm-switch.on{background:var(--laiton);}
  .rm-switch>span{display:block;width:18px;height:18px;border-radius:50%;background:#fff;
    transition:transform var(--t-rapide);}
  .rm-switch.on>span{transform:translateX(20px);}
  /* Zone danger */
  .rm-danger{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.35);
    border-radius:var(--rayon-s);padding:22px;}
  .rm-danger h3{font-family:var(--police-titre);font-weight:700;margin:0 0 8px;color:var(--faux);}
  /* Apparition en cascade */
  .rm-cascade>*{animation:rmFadeUp .55s cubic-bezier(.19,1,.22,1) both;}
  [data-energie="discret"] .rm-cascade>*{animation:none;}
  .rm-cascade>*:nth-child(1){animation-delay:calc(var(--rm-stagger)*0);}
  .rm-cascade>*:nth-child(2){animation-delay:calc(var(--rm-stagger)*1);}
  .rm-cascade>*:nth-child(3){animation-delay:calc(var(--rm-stagger)*2);}
  .rm-cascade>*:nth-child(4){animation-delay:calc(var(--rm-stagger)*3);}
  .rm-cascade>*:nth-child(5){animation-delay:calc(var(--rm-stagger)*4);}
  .rm-cascade>*:nth-child(6){animation-delay:calc(var(--rm-stagger)*5);}
  /* ============ Cours interactif « Histoire de l'enregistrement » ============ */
  .ce-cours{max-width:760px;}
  /* fil des étapes */
  .ce-fil{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:12px;}
  .ce-pas{width:29px;height:29px;border-radius:50%;border:1px solid var(--ligne);background:var(--surface);
    color:var(--encre-doux);font-family:var(--police-titre);font-weight:700;font-size:.78rem;cursor:pointer;
    transition:all var(--t-rapide);}
  .ce-pas:hover{border-color:var(--laiton);color:var(--laiton);}
  .ce-pas.fait{background:var(--juste-fond);border-color:var(--juste);color:var(--juste);}
  .ce-pas.on{background:var(--degrade);border-color:transparent;color:#fff;transform:scale(1.14);box-shadow:0 3px 10px rgba(30,58,99,.34);}
  .ce-pas.verrou{opacity:.42;cursor:not-allowed;background:var(--surface-2);}
  .ce-pas.verrou:hover{border-color:var(--ligne);color:var(--encre-doux);}
  .ce-pas.verrou i{font-size:.66rem;}
  /* bandeau « il te reste N exercices » */
  .ce-verrou{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:var(--rayon-s);
    background:#FEF8E6;border:1px solid #F2C94C;color:#8E6D0B;font-size:.92rem;margin-bottom:12px;}
  .ce-verrou i{font-size:1.25rem;color:#F2C94C;flex:none;}
  .ce-verrou.ouvert{background:var(--juste-fond);border-color:var(--juste);color:var(--juste);}
  .ce-verrou.ouvert i{color:var(--juste);}
  [data-theme="dark"] .ce-verrou{background:#3a2f14;border-color:var(--or-texte);color:var(--or-texte);}
  [data-theme="dark"] .ce-verrou i{color:var(--or-texte);}
  .ce-nav .action[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;}
  .ce-jauge{height:6px;border-radius:var(--rayon-pill);background:var(--papier-fonce);overflow:hidden;margin-bottom:18px;}
  .ce-jauge i{display:block;height:100%;border-radius:var(--rayon-pill);background:linear-gradient(90deg,var(--laiton),var(--or));transition:width .45s ease;}
  /* en-tête d'étape */
  .ce-tete{margin-bottom:14px;}
  /* Bandeau d'étape collé en haut de l'écran pendant le défilement */
  .ce-fixe{position:sticky;top:8px;z-index:8;display:flex;align-items:center;gap:14px;margin:0 0 14px;
    padding:10px 16px 10px 12px;border-radius:16px;background:var(--laiton);color:#fff;
    box-shadow:0 10px 26px rgba(15,27,46,.28);}
  .ce-fixe-num{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;min-width:66px;
    padding:4px 8px;border-radius:12px;background:var(--or);color:var(--encre);line-height:1;}
  .ce-fixe-num b{font-family:var(--police-titre);font-size:1.9rem;font-weight:800;line-height:1;}
  .ce-fixe-num small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
  .ce-fixe-mil{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
  .ce-fixe-t{font-family:var(--police-titre);font-weight:700;font-size:1.05rem;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ce-fixe-t i{color:var(--or-clair)!important;}
  .ce-fixe-jauge{height:6px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;}
  .ce-fixe-jauge i{display:block;height:100%;border-radius:999px;background:var(--or);}
  .ce-fixe-reste{flex:none;font-size:.82rem;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);white-space:nowrap;}
  .ce-fixe-reste.ok,.ce-fixe-reste:has(.ph-check-circle){background:rgba(26,156,107,.9);}
  .ce-fixe-reste i{color:inherit!important;text-shadow:none!important;}
  @media (max-width:760px), (max-width:1100px) and (orientation:portrait) and (pointer:coarse), (max-height:500px) and (max-width:1000px) and (pointer:coarse){
    /* la marge haute de la page (sous la barre du téléphone) compte déjà dans le collage */
    .ce-fixe{top:6px;gap:10px;padding:8px 10px;}
    .ce-fixe-num{min-width:54px;}
    .ce-fixe-num b{font-size:1.6rem;}
    .ce-fixe-t{font-size:.95rem;}
    .ce-fixe-reste{font-size:.74rem;padding:5px 8px;}
  }
  @media (max-width:420px){ .ce-fixe-reste{display:none;} }
  .ce-tete .ce-num{font-size:.74rem;text-transform:uppercase;letter-spacing:1.4px;color:var(--encre-doux);font-weight:700;}
  .ce-tete h2{font-family:var(--police-titre);font-size:1.45rem;margin:3px 0 0;color:var(--laiton);line-height:1.25;}
  .ce-tete h2 i{color:var(--or-texte);}
  /* corps de cours */
  .ce-corps{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:20px 22px;
    box-shadow:var(--ombre-douce);margin-bottom:18px;line-height:1.65;}
  .ce-corps p{margin:0 0 11px;}
  .ce-corps p:last-child{margin-bottom:0;}
  .ce-liste{margin:0 0 11px;padding-left:20px;}
  .ce-liste li{margin-bottom:6px;}
  .ce-img{display:block;width:100%;height:auto;border-radius:var(--rayon-s);margin:0 0 14px;box-shadow:var(--ombre-douce);}
  .ce-img.petite{max-width:330px;margin-left:auto;margin-right:auto;}
  .ce-note{background:var(--teinte-douce);border-left:4px solid var(--or);border-radius:0 var(--rayon-xs) var(--rayon-xs) 0;
    padding:11px 15px;margin:13px 0 0;font-size:.92rem;line-height:1.6;}
  .ce-note.important{border-left-color:var(--laiton);background:var(--valide-fond);}
  .ce-fiche h4{font-family:var(--police-titre);color:var(--laiton);margin:16px 0 7px;font-size:1.02rem;}
  .ce-fiche h4:first-child{margin-top:0;}
  /* blocs propres au cours « audition » */
  .ce-duo,.ce-trio{display:grid;gap:12px;margin:14px 0 0;}
  .ce-duo{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .ce-trio{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .ce-duo figure,.ce-trio figure{margin:0;}
  .ce-duo img,.ce-trio img{width:100%;height:auto;border-radius:var(--rayon-s);box-shadow:var(--ombre-douce);
    border:1px solid var(--ligne);background:#fff;}
  .ce-duo figcaption,.ce-trio figcaption{text-align:center;font-size:.84rem;font-weight:700;color:var(--laiton);margin-top:5px;}
  .ce-legende{text-align:center;font-size:.85rem;color:var(--encre-doux);margin-top:-6px;}
  .ce-fiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px;}
  .ce-fiches .cf{border:1px solid var(--ligne);border-left:3px solid var(--laiton);border-radius:var(--rayon-xs);
    padding:10px 13px;background:var(--surface-2);}
  .ce-fiches .cf b{display:block;color:var(--laiton);font-family:var(--police-titre);margin-bottom:3px;}
  .ce-fiches .cf span{font-size:.86rem;line-height:1.5;}
  .ce-code{display:flex;flex-direction:column;gap:9px;align-items:center;margin-top:14px;}
  .ce-code .cc-bloc{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
  .ce-code .cc-bloc span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--rayon-xs);background:var(--laiton);color:#fff;font-family:var(--police-titre);font-weight:800;font-size:.9rem;}
  .ce-cit{border-left:4px solid var(--or);background:var(--teinte-douce);padding:11px 16px;margin:12px 0;
    font-style:italic;border-radius:0 var(--rayon-xs) var(--rayon-xs) 0;}
  .ce-oreille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:11px;margin-top:14px;}
  .ce-oreille .co-z{border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:11px 14px;background:var(--surface-2);}
  .ce-oreille .co-z b{display:block;color:var(--laiton);font-family:var(--police-titre);font-size:.9rem;margin-bottom:6px;
    text-transform:uppercase;letter-spacing:.5px;}
  .ce-oreille .co-z span{display:block;font-size:.85rem;line-height:1.5;margin-bottom:6px;}
  .ce-oreille .co-z em{color:var(--faux);font-style:normal;font-size:.82rem;}
  /* lecteur YouTube */
  .ce-yt{margin:14px 0 0;min-width:0;}
  .ce-yt-btn{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
    background:var(--brocart),var(--bandeau);color:#fff;border:none;border-radius:var(--rayon-s);padding:13px 17px;
    font-family:var(--police);box-shadow:var(--ombre-douce);transition:transform var(--t-rapide),box-shadow var(--t-rapide);}
  .ce-yt-btn:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte);}
  .ce-yt-play{width:36px;height:36px;border-radius:50%;background:var(--or);color:#25324a;display:flex;align-items:center;
    justify-content:center;font-size:1.1rem;flex:none;}
  .ce-yt-lib{flex:1;min-width:0;font-weight:600;font-size:.93rem;line-height:1.35;}
  /* flex:0 1 auto (et non "none") : le label peut se rétrécir et passer à la ligne
     plutôt que déborder du bouton quand la carte est étroite (grille 2 colonnes). */
  .ce-yt-src{flex:0 1 auto;min-width:0;max-width:100%;text-align:right;
    font-size:.68rem;text-transform:uppercase;letter-spacing:1px;opacity:.7;}
  .ce-yt-secours{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:.82rem;
    color:var(--encre-doux);text-decoration:none;}
  .ce-yt-secours:hover{color:var(--laiton);text-decoration:underline;}
  .ce-yt-bloque{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--rayon-s);background:rgba(224,90,90,.1);border-left:4px solid #e05a5a;font-size:.92rem;line-height:1.5}
  .ce-yt-bloque i.ph-fill{color:#e05a5a;font-size:1.3rem;flex:none}
  .ce-yt-cadre{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--rayon-s);overflow:hidden;box-shadow:var(--ombre);}
  /* grille d'écoute sur une fiche compositeur : 2 colonnes dès que la place le permet */
  .compo-yt-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px;}
  .compo-yt-grille .ce-yt{margin-top:0;}
  /* le titre de section dit déjà « à écouter » : l'étiquette « YouTube » de chaque
     carte est redondante ici, on l'enlève pour laisser toute la place au titre. */
  .compo-yt-grille .ce-yt-src{display:none;}
  .ce-yt-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  /* schéma des pistes (bouncing) */
  .ce-pistes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
  .ce-magneto{flex:1 1 210px;min-width:190px;border:1px solid var(--ligne);border-radius:var(--rayon-s);overflow:hidden;background:var(--surface-2);}
  .ce-magneto .cm-t{background:var(--laiton);color:#fff;font-family:var(--police-titre);font-size:.76rem;
    text-transform:uppercase;letter-spacing:1px;padding:7px 11px;text-align:center;}
  .ce-magneto .cm-p{display:flex;align-items:center;gap:9px;padding:7px 11px;font-size:.86rem;border-bottom:1px solid var(--ligne);}
  .ce-magneto .cm-p:last-child{border-bottom:none;}
  .ce-magneto .cm-p span{width:20px;height:20px;border-radius:50%;background:var(--laiton);color:#fff;font-size:.72rem;
    font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
  .ce-magneto .cm-p.libre{color:var(--encre-doux);font-style:italic;background:var(--juste-fond);}
  .ce-magneto .cm-p.libre span{background:var(--juste);}
  .ce-fleche{font-size:1.7rem;color:var(--or-texte);flex:none;}
  /* ---- exercices ---- */
  .ce-ex{background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--or);
    border-radius:var(--rayon-s);padding:17px 19px;margin-bottom:16px;box-shadow:var(--ombre-douce);}
  .ce-ex-tete{font-family:var(--police-titre);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:1.2px;
    color:var(--or-texte);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
  .ce-q{font-weight:600;margin:0 0 11px;line-height:1.55;}
  .ce-consigne{margin:0 0 11px;color:var(--encre-doux);font-size:.9rem;line-height:1.55;}
  .ce-aide{background:var(--teinte-douce);border-radius:var(--rayon-xs);padding:8px 12px;font-size:.86rem;margin-bottom:11px;}
  .ce-aide i{color:var(--or-texte);}
  .ce-actions{margin-top:13px;}
  /* qcm */
  .ce-opts{display:flex;flex-direction:column;gap:8px;}
  .ce-opt{text-align:left;padding:12px 15px;border-radius:var(--rayon-s);border:2px solid var(--ligne);
    background:var(--surface);color:var(--encre);cursor:pointer;font-size:.95rem;font-family:var(--police);line-height:1.45;
    transition:all var(--t-rapide);}
  .ce-opt:hover{border-color:var(--laiton);background:var(--valide-fond);}
  .ce-opt.sel{border-color:var(--laiton);background:var(--valide-fond);font-weight:600;}
  .ce-opt.juste{border-color:var(--juste);background:var(--juste-fond);color:var(--juste);font-weight:700;}
  .ce-opt.faux{border-color:var(--faux);background:var(--faux-fond);color:var(--faux);}
  /* mot à écrire, une lettre par case (comme sur la fiche papier) */
  .ce-lettres{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
  .ce-lettre{width:38px;height:46px;text-align:center;border:2px solid var(--ligne);border-radius:var(--rayon-xs);
    background:var(--surface);color:var(--encre);font-family:var(--police-titre);font-size:1.25rem;font-weight:800;
    text-transform:uppercase;padding:0;transition:all var(--t-rapide);}
  .ce-lettre:focus{outline:none;border-color:var(--laiton);box-shadow:0 0 0 3px var(--teinte-douce);}
  .ce-lettre.arevoir{border-color:#F2C94C;background:#FEF8E6;}
  [data-theme="dark"] .ce-lettre.arevoir{background:#3a2f14;}
  .ce-lettre.juste{border-color:var(--juste);background:var(--juste-fond);color:var(--juste);}
  .ce-lettre.faux{border-color:var(--faux);background:var(--faux-fond);color:var(--faux);}
  @media(max-width:560px){.ce-lettre{width:29px;height:38px;font-size:1rem;}}
  /* sondage : options non retenues estompées après validation */
  .ce-opt.estompe{opacity:.45;}
  .ce-opt.sel:disabled{border-color:var(--laiton);background:var(--valide-fond);}
  /* grille à cocher */
  .ce-grille{width:100%;border-collapse:collapse;font-size:.9rem;}
  .ce-grille th{padding:8px 6px;font-family:var(--police-titre);font-size:.82rem;color:var(--laiton);border-bottom:2px solid var(--ligne);}
  .ce-grille th:first-child{width:46%;}
  .ce-grille td{border-bottom:1px solid var(--ligne);padding:6px;}
  .ce-grille .cg-lib{text-align:left;line-height:1.45;}
  .ce-grille .cg-case{text-align:center;cursor:pointer;transition:background var(--t-rapide);}
  .ce-grille .cg-case i{opacity:0;color:var(--laiton);font-size:1.1rem;transition:opacity var(--t-rapide);}
  .ce-grille .cg-case:hover{background:var(--surface-2);}
  .ce-grille .cg-case:hover i{opacity:.35;}
  .ce-grille .cg-case.sel i{opacity:1;}
  .ce-grille .cg-case.juste{background:var(--juste-fond);} .ce-grille .cg-case.juste i{opacity:1;color:var(--juste);}
  .ce-grille .cg-case.faux{background:var(--faux-fond);} .ce-grille .cg-case.faux i{opacity:1;color:var(--faux);}
  /* étiquettes à placer */
  .ce-banque{display:flex;flex-wrap:wrap;gap:7px;padding:11px;background:var(--surface-2);border:1px dashed var(--ligne);
    border-radius:var(--rayon-s);margin-bottom:13px;}
  .ce-et{border:1px solid var(--laiton);background:var(--surface);color:var(--laiton);border-radius:var(--rayon-pill);
    padding:7px 14px;font-size:.87rem;cursor:grab;font-family:var(--police);font-weight:600;transition:all var(--t-rapide);
    touch-action:manipulation;}
  .ce-et:active{cursor:grabbing;}
  .ce-case.survol{border-color:var(--laiton);background:var(--valide-fond);transform:scale(1.01);}
  .ce-case.survol .cc-slot{border-style:solid;border-color:var(--laiton);color:var(--laiton);}
  /* un mot à écrire ne doit jamais être coupé en fin de ligne */
  .ce-mot{display:inline-flex;gap:6px;flex-wrap:nowrap;}
  .ce-lettres{gap:14px;}
  .ce-et:hover{background:var(--valide-fond);}
  .ce-et.prise{background:var(--laiton);color:#fff;transform:scale(1.05);box-shadow:0 3px 10px rgba(30,58,99,.3);}
  .ce-et.place{opacity:.25;pointer-events:none;text-decoration:line-through;}
  .ce-cases{display:flex;flex-direction:column;gap:8px;}
  .ce-case{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ligne);
    border-radius:var(--rayon-s);cursor:pointer;background:var(--surface);transition:all var(--t-rapide);}
  .ce-case:hover{border-color:var(--laiton);}
  .ce-case .cc-lib{flex:1 1 190px;font-size:.9rem;line-height:1.45;}
  .ce-case .cc-slot{flex:0 1 auto;min-width:120px;text-align:center;padding:5px 13px;border-radius:var(--rayon-pill);
    background:var(--surface-2);border:1px dashed var(--ligne);color:var(--encre-doux);font-size:.84rem;font-style:italic;}
  .ce-case.plein .cc-slot{background:var(--valide-fond);border:1px solid var(--laiton);color:var(--laiton);font-style:normal;font-weight:600;}
  .ce-case.juste{border-color:var(--juste);background:var(--juste-fond);}
  .ce-case.juste .cc-slot{background:var(--juste);border-color:var(--juste);color:#fff;}
  .ce-case.faux{border-color:var(--faux);background:var(--faux-fond);}
  .ce-case.faux .cc-slot{background:var(--surface);border-color:var(--faux);color:var(--faux);font-style:normal;}
  /* remise en ordre */
  .ce-ordre{display:flex;flex-direction:column;gap:8px;}
  .ce-item{display:flex;align-items:flex-start;gap:11px;text-align:left;padding:11px 14px;border-radius:var(--rayon-s);
    border:2px solid var(--ligne);background:var(--surface);color:var(--encre);cursor:pointer;font-family:var(--police);
    font-size:.92rem;line-height:1.5;transition:all var(--t-rapide);}
  .ce-item:hover{border-color:var(--laiton);}
  .ce-item .ci-n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:1px solid var(--ligne);
    color:var(--encre-doux);font-family:var(--police-titre);font-weight:800;font-size:.82rem;display:flex;align-items:center;
    justify-content:center;flex:none;}
  .ce-item.num{border-color:var(--laiton);background:var(--valide-fond);}
  .ce-item.num .ci-n{background:var(--laiton);border-color:var(--laiton);color:#fff;}
  .ce-item .ci-t{flex:1;}
  .ce-item.juste{border-color:var(--juste);background:var(--juste-fond);}
  .ce-item.juste .ci-n{background:var(--juste);border-color:var(--juste);color:#fff;}
  .ce-item.faux{border-color:var(--faux);background:var(--faux-fond);}
  .ce-item.faux .ci-n{background:var(--surface);border-color:var(--faux);color:var(--faux);font-size:.66rem;}
  .ce-item.faux .ci-n b{color:var(--juste);}
  /* calculs */
  .ce-calc{display:flex;flex-direction:column;gap:11px;}
  .ce-ch{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.93rem;line-height:1.5;}
  .ce-ch>span:first-child{flex:1 1 210px;}
  .ce-in{display:inline-flex;align-items:center;gap:7px;}
  .ce-in input{width:88px;padding:9px 12px;border:2px solid var(--ligne);border-radius:var(--rayon-xs);
    font-family:var(--police-titre);font-size:1rem;font-weight:700;text-align:center;background:var(--surface);color:var(--encre);}
  .ce-in input:focus{outline:none;border-color:var(--laiton);}
  .ce-in input.juste{border-color:var(--juste);background:var(--juste-fond);color:var(--juste);}
  .ce-in input.faux{border-color:var(--faux);background:var(--faux-fond);color:var(--faux);}
  .ce-in em{font-style:normal;color:var(--encre-doux);font-size:.85rem;}
  .ce-vrai{color:var(--juste);font-family:var(--police-titre);}
  /* réponse libre */
  .ce-libre textarea{width:100%;padding:12px 14px;border:2px solid var(--ligne);border-radius:var(--rayon-s);
    font-family:var(--police);font-size:.94rem;line-height:1.55;background:var(--surface);color:var(--encre);resize:vertical;}
  .ce-libre textarea:focus{outline:none;border-color:var(--laiton);}
  /* correction */
  .ce-corr{margin-top:12px;}
  .ce-corr:empty{display:none;}
  .ce-corr.gagne,.ce-corr.partiel,.ce-corr.manque{padding:12px 15px;border-radius:var(--rayon-s);font-size:.91rem;line-height:1.6;}
  .ce-corr.gagne{background:var(--juste-fond);border:1px solid var(--juste);}
  .ce-corr.partiel{background:var(--teinte-douce);border:1px solid var(--or);}
  .ce-corr.manque{background:var(--faux-fond);border:1px solid var(--faux);color:var(--faux);}
  .ce-corr .cc-score{font-family:var(--police-titre);font-weight:800;margin-bottom:5px;display:flex;align-items:center;gap:7px;}
  .ce-corr.gagne .cc-score{color:var(--juste);} .ce-corr.partiel .cc-score{color:#B8972C;}
  [data-theme="dark"] .ce-corr.partiel .cc-score{color:var(--or-texte);}
  .ce-corr .cc-expl{color:var(--encre);}
  /* --- correction en 2 temps : bloc « diagnostic » du 1er essai --- */
  .ce-corr.diagnostic{padding:12px 15px;border-radius:var(--rayon-s);font-size:.91rem;line-height:1.6;
    background:#FEF8E6;border:1px solid #F2C94C;}
  [data-theme="dark"] .ce-corr.diagnostic{background:#3a2f14;border-color:var(--or-texte);}
  .ce-corr.diagnostic .cc-score{color:#8E6D0B;}
  [data-theme="dark"] .ce-corr.diagnostic .cc-score{color:var(--or-texte);}
  .ce-corr .cc-relance{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(169,115,15,.35);
    font-size:.86rem;color:#8E6D0B;}
  [data-theme="dark"] .ce-corr .cc-relance{color:var(--or-texte);border-top-color:rgba(242,201,76,.3);}
  /* éléments « à revoir » : orange, sans révéler la bonne réponse */
  .ce-opt.arevoir,.ce-item.arevoir{border-color:#F2C94C!important;background:#FEF8E6!important;}
  [data-theme="dark"] .ce-opt.arevoir,[data-theme="dark"] .ce-item.arevoir{background:#3a2f14!important;}
  .ce-case.arevoir{border-color:#F2C94C;background:#FEF8E6;}
  [data-theme="dark"] .ce-case.arevoir{background:#3a2f14;}
  .ce-grille .cg-case.arevoir{background:#FEF8E6;}
  [data-theme="dark"] .ce-grille .cg-case.arevoir{background:#3a2f14;}
  .ce-in input.arevoir{border-color:#F2C94C;background:#FEF8E6;}
  [data-theme="dark"] .ce-in input.arevoir{background:#3a2f14;}
  /* ce qui est déjà juste est verrouillé pendant la 2ᵉ tentative */
  .ce-item.fige,.ce-case.ok-fige{opacity:.75;pointer-events:none;border-color:var(--juste);background:var(--juste-fond);}
  .ce-grille tbody tr.fige .cg-case.sel{background:var(--juste-fond);}
  /* bouton « voir la correction » : disponible mais visuellement déconseillé */
  .ce-actions{display:flex;gap:9px;flex-wrap:wrap;}
  button.ce-btn-corr-dir{background:transparent;border:1px dashed var(--ligne);color:var(--encre-doux);
    box-shadow:none;font-weight:500;}
  button.ce-btn-corr-dir:hover{border-color:var(--encre-doux);background:var(--surface-2);color:var(--encre);}
  button.ce-btn-corr-dir[disabled]{opacity:.45;cursor:not-allowed;}
  button.ce-btn-corr-dir[disabled]:hover{border-color:var(--ligne);background:transparent;color:var(--encre-doux);}
  /* navigation bas de page */
  .ce-nav{display:flex;gap:10px;margin-top:6px;}
  .ce-nav .action{flex:1;margin:0;justify-content:center;}
  @media(max-width:560px){
    .ce-tete h2{font-size:1.2rem;}
    .ce-corps{padding:16px 15px;}
    .ce-grille{font-size:.82rem;} .ce-grille th:first-child{width:40%;}
    .ce-case .cc-slot{flex:1 1 100%;}
  }
  /* ==== Repère de lecture : la gamme dessinée sur la portée ==== */
  .gamme-repere .gamme-vue{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);
    padding:14px 10px;margin:12px 0;overflow-x:auto;text-align:center;color:var(--encre);}
  .gamme-repere .portee-gamme{display:inline-block;vertical-align:middle;}
  .gamme-repere .gamme-astuce{background:var(--teinte-douce);border-left:4px solid var(--or);
    border-radius:0 var(--rayon-xs) var(--rayon-xs) 0;padding:10px 14px;font-size:.92rem;margin:0;}
  .gamme-repere .gamme-astuce i{color:var(--or-texte);}
  /* ================ Leçons : domaines puis vignettes ================ */
  .lec-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
  .lec-cat{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;
    padding:18px 18px 15px;border-radius:var(--rayon);border:1px solid var(--ligne);background:var(--surface);
    box-shadow:var(--ombre-douce);font-family:var(--police);position:relative;overflow:hidden;
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide);}
  .lec-cat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--degrade);}
  .lec-cat:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--laiton);}
  .lec-cat .lc-ic{font-size:1.9rem;color:var(--laiton);line-height:1;margin-bottom:2px;}
  .lec-cat .lc-nom{font-family:var(--police-titre);font-weight:800;font-size:1.05rem;line-height:1.3;color:var(--encre);}
  .lec-cat .lc-nb{font-size:.82rem;color:var(--encre-doux);}
  .lec-cat .lc-piste{display:block;width:100%;height:6px;border-radius:var(--rayon-pill);background:var(--papier-fonce);
    overflow:hidden;margin-top:8px;}
  .lec-cat .lc-piste>i{display:block;height:100%;border-radius:var(--rayon-pill);background:linear-gradient(90deg,var(--laiton),var(--or));}
  .lec-cat .lc-avance{font-size:.76rem;color:var(--encre-doux);margin-top:3px;}
  .lec-cat.compo::before{background:linear-gradient(90deg,var(--or),#B8972C);}
  .lec-cat.compo .lc-ic{color:var(--or-texte);}
  .lec-retour{margin-bottom:14px;}
  .lec-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;}
  /* vignettes centrées : icône, nom, état, alignés sur l'axe vertical */
  .lec-vig{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;
    text-align:center;cursor:pointer;padding:16px 14px;
    border-radius:var(--rayon-s);border:1px solid var(--ligne);background:var(--surface);box-shadow:var(--ombre-douce);
    font-family:var(--police);border-top:4px solid var(--ligne);
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide);}
  .lec-vig:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);}
  .lec-vig .lv-ic{font-size:1.9rem;color:var(--laiton);line-height:1;display:block;}
  .lec-vig .lv-ic img,.lec-vig .lv-ic svg{max-width:100%;height:auto;display:block;margin:0 auto;}
  .lec-vig .lv-nom{font-family:var(--police-titre);font-weight:700;font-size:.94rem;line-height:1.35;color:var(--encre);}
  .lec-vig .lv-etat{font-size:.75rem;color:var(--encre-doux);display:inline-flex;align-items:center;gap:5px;justify-content:center;}
  .lec-vig .lv-etat i{font-size:.55rem;}
  .lec-vig.neuf{border-top-color:var(--ligne);} .lec-vig.neuf .lv-etat i{color:var(--encre-doux);}
  .lec-vig.faible{border-top-color:var(--faux);} .lec-vig.faible .lv-etat i{color:var(--faux);}
  .lec-vig.moyen{border-top-color:var(--or-texte);} .lec-vig.moyen .lv-etat i{color:var(--or-texte);}
  .lec-vig.fort{border-top-color:var(--juste);} .lec-vig.fort .lv-etat i{color:var(--juste);}
  /* Leçons du professeur : gestion directe sur la vignette.
     Les outils sont des FRÈRES du bouton, jamais des enfants : un bouton dans
     un bouton est invalide, et le clic partirait sur la vignette. */
  .lec-vig-boite{position:relative;display:flex;}
  .lec-vig-boite>.lec-vig{flex:1;width:100%;}
  .lv-outils{position:absolute;top:6px;right:6px;display:flex;gap:4px;
    opacity:0;transition:opacity var(--t-rapide);}
  .lec-vig-boite:hover .lv-outils,.lec-vig-boite:focus-within .lv-outils{opacity:1;}
  /* sur écran tactile il n'y a pas de survol : on les montre en permanence */
  @media (hover:none){ .lv-outils{opacity:1;} }
  .lv-out{width:26px;height:26px;border-radius:8px;border:1px solid var(--ligne);
    background:var(--surface);color:var(--encre-doux);cursor:pointer;display:flex;
    align-items:center;justify-content:center;font-size:.85rem;padding:0;box-shadow:var(--ombre-douce);}
  .lv-out:hover{border-color:var(--laiton);color:var(--laiton);}
  .lv-out.sup:hover{border-color:var(--faux);color:var(--faux);}
  .lv-out i{color:inherit !important;}
  /* Attente d'une écriture serveur : voile bloquant. Sans lui, un serveur lent
     laissait croire que le clic n'avait rien fait, et l'action était répétée
     (un professeur a créé cinq fois la même leçon). */
  .att-fond{position:fixed;inset:0;z-index:9800;background:rgba(10,18,32,.35);
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
  .att-boite{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:20px 26px;box-shadow:var(--ombre-forte);display:flex;align-items:center;gap:14px;
    font-family:var(--police-titre);font-weight:700;max-width:80vw;}
  .att-boite i{font-size:1.5rem;color:var(--laiton);animation:attTourne 1s linear infinite;}
  @keyframes attTourne{to{transform:rotate(360deg)}}
  /* Domaine du professeur : couleur distincte pour le repérer d'un coup d'œil
     au milieu des domaines d'origine. */
  .lec-cat-perso{border-color:var(--laiton);background:var(--valide-fond);}
  .lec-cat-perso .lc-ic{color:var(--laiton);}
  .lec-cat-perso .lc-nom{color:var(--laiton);}
  /* vignette « + » : présente mais discrète, elle ne doit pas concurrencer les leçons */
  .lec-vig-neuve{border-style:dashed;border-top-style:dashed;border-top-color:var(--ligne);
    background:transparent;opacity:.62;box-shadow:none;}
  .lec-vig-neuve:hover{opacity:1;border-color:var(--laiton);border-top-color:var(--laiton);}
  .lec-vig-neuve .lv-ic{color:var(--laiton);}
  /* ================ Cours de collège ================ */
  .cc-liste{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
  .cc-boite{position:relative;}
  .cc-boite .cc-carte{width:100%;}
  .cc-pen{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--ligne);
    background:var(--surface);color:var(--encre-doux);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    font-size:1rem;z-index:2;box-shadow:var(--ombre-douce);}
  .cc-pen:hover{color:var(--laiton);border-color:var(--laiton);}
  .cc-pen2{top:52px;}
  .cc-eval{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:11px 16px;
    border-radius:var(--rayon-s);border:1px solid var(--or);background:var(--teinte-douce);color:var(--laiton);
    font-family:var(--police-titre);font-weight:700;font-size:.95rem;cursor:pointer;transition:transform var(--t-rapide);}
  .cc-eval:hover{transform:translateY(-2px);}
  .cc-eval i.ph-fill{color:var(--or-texte);}
  .cc-paliers{display:flex;flex-wrap:wrap;gap:8px;}
  .cc-pal{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--rayon-pill);
    border:1px solid var(--ligne);font-size:.82rem;font-weight:600;color:var(--encre-doux);background:var(--surface);}
  .cc-pal.fait{border-color:var(--juste);color:var(--juste);background:var(--valide-fond,rgba(47,158,99,.1));}
  .cc-pal.cours{border-color:var(--or);color:var(--laiton);background:var(--teinte-douce);}
  .bq-q{margin-bottom:12px;text-align:left;}
  .bq-num{font-weight:600;margin-bottom:8px;}
  .bq-diff{font-size:.72rem;background:var(--surface-2,#f1ede3);color:var(--encre-doux);border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap;}
  .bq-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
  .bq-opts li{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--ligne);border-radius:8px;color:var(--encre-doux);}
  .bq-opts li.bq-bon{border-color:var(--juste);background:var(--valide-fond,rgba(47,158,99,.10));color:var(--encre);font-weight:700;}
  .bq-opts li.bq-bon i{color:var(--juste);}
  .bq-expl{margin-top:8px;font-size:.85rem;color:var(--encre-doux);}
  .pres-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--ligne);
    background:var(--surface);color:var(--encre-doux);cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:700;}
  .pres-badge:hover{border-color:var(--laiton);color:var(--encre);}
  .pres-badge.pres-actif{border-color:var(--juste);color:var(--juste);background:var(--valide-fond);}
  .pres-pt{width:9px;height:9px;border-radius:50%;flex:none;background:var(--encre-doux);}
  .pres-badge.pres-actif .pres-pt{background:var(--juste);box-shadow:0 0 0 0 rgba(47,158,99,.55);animation:presPulse 1.8s infinite;}
  @keyframes presPulse{0%{box-shadow:0 0 0 0 rgba(47,158,99,.5);}70%{box-shadow:0 0 0 7px rgba(47,158,99,0);}100%{box-shadow:0 0 0 0 rgba(47,158,99,0);}}
  .pres-panel{max-width:760px;margin:0 auto 14px;background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:12px 14px;box-shadow:var(--ombre-douce);}
  .pres-liste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .pres-puce{display:inline-flex;align-items:center;gap:6px;background:var(--valide-fond);border:1px solid var(--juste);color:var(--encre);
    border-radius:999px;padding:4px 12px;font-size:.85rem;}
  .pres-puce .pres-pt{background:var(--juste);}
  .cc-carte{display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;padding:18px 20px;
    border-radius:var(--rayon);border:1px solid var(--ligne);background:var(--surface);box-shadow:var(--ombre-douce);
    font-family:var(--police);position:relative;
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide);}
  .cc-carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);border-color:var(--laiton);}
  .cc-carte .cc-ic{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-size:1.7rem;color:#fff;background:var(--degrade);box-shadow:0 4px 12px rgba(30,58,99,.3);}
  .cc-carte .cc-corps{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
  .cc-carte .cc-titre{font-family:var(--police-titre);font-weight:800;font-size:1.06rem;color:var(--encre);padding-right:44px;}
  .cc-carte .cc-res{font-size:.86rem;color:var(--encre-doux);line-height:1.45;}
  .cc-carte .cc-piste{display:block;height:7px;border-radius:var(--rayon-pill);background:var(--papier-fonce);overflow:hidden;margin-top:6px;max-width:320px;}
  .cc-carte .cc-piste>i{display:block;height:100%;border-radius:var(--rayon-pill);background:linear-gradient(90deg,var(--laiton),var(--or));}
  .cc-carte .cc-etat{font-size:.78rem;color:var(--encre-doux);}
  .cc-carte .cc-fl{font-size:1.4rem;color:var(--or-texte);flex:none;}
  @media(max-width:560px){
    .cc-carte{gap:12px;padding:15px 16px;}
    .cc-carte .cc-ic{width:44px;height:44px;font-size:1.35rem;}
    .lec-vignettes{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));}
  }
  /* ======================= Soutenir MUSEDUC (dons) ======================= */
  .don-tete{display:flex;gap:16px;align-items:center;background:var(--brocart),var(--bandeau);color:#fff;
    border-radius:var(--rayon);padding:18px 22px;margin-bottom:16px;box-shadow:var(--ombre-douce);}
  .don-tete .don-perso{height:96px;width:auto;flex:none;
    filter:drop-shadow(1px 0 0 rgba(255,255,255,.9)) drop-shadow(-1px 0 0 rgba(255,255,255,.9)) drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 8px 12px rgba(0,0,0,.4));}
  .don-tete h3{font-family:var(--police-titre);margin:0 0 5px;font-size:1.2rem;color:var(--or-texte);}
  .don-tete p{margin:0;font-size:.9rem;line-height:1.6;color:#dbe7f5;}
  .don-tete p b{color:#fff;}
  .don-txt{line-height:1.65;margin:0 0 16px;}
  .don-btns{display:flex;flex-direction:column;gap:11px;margin-bottom:18px;}
  .don-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--rayon-s);
    text-decoration:none;font-family:var(--police);border:1px solid transparent;
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),filter var(--t-rapide);}
  .don-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:var(--ombre-forte);}
  .don-btn .db-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.35rem;flex:none;background:rgba(255,255,255,.22);}
  .don-btn .db-txt{flex:1;display:flex;flex-direction:column;line-height:1.3;}
  .don-btn .db-txt b{font-family:var(--police-titre);font-size:1.02rem;}
  .don-btn .db-txt small{font-size:.82rem;opacity:.85;}
  .don-btn.paypal{background:linear-gradient(135deg,#0070ba,#003087);color:#fff;box-shadow:0 5px 16px rgba(0,112,186,.32);}
  .don-btn.cafe{background:linear-gradient(135deg,#ffdd00,#ffbb00);color:#3a2c00;box-shadow:0 5px 16px rgba(255,187,0,.34);}
  .don-btn.cafe .db-ic{background:rgba(0,0,0,.12);}
  .don-autres{margin:18px 0;padding:15px 18px;border:1px solid var(--ligne);border-radius:var(--rayon-s);background:var(--surface);}
  .don-autres h4{font-family:var(--police-titre);color:var(--laiton);margin:0 0 8px;font-size:1rem;}
  .don-autres h4 i{color:var(--or-texte);}
  /* carte discrète en bas de l'accueil */
  .don-carte{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;margin-top:24px;
    padding:14px 18px;border-radius:var(--rayon-s);border:1px dashed var(--ligne);background:var(--surface);
    color:var(--encre);font-family:var(--police);transition:all var(--t-rapide);}
  .don-carte:hover{border-color:var(--or-texte);border-style:solid;background:var(--teinte-douce);transform:translateY(-2px);}
  .don-carte .dc-ic{font-size:1.5rem;color:var(--or-texte);flex:none;}
  .don-carte .dc-txt{flex:1;display:flex;flex-direction:column;line-height:1.35;}
  .don-carte .dc-txt b{font-family:var(--police-titre);}
  .don-carte .dc-txt small{font-size:.84rem;color:var(--encre-doux);}
  .don-carte .dc-fl{color:var(--encre-doux);flex:none;}
  @media(max-width:560px){
    .don-tete{flex-direction:column;text-align:center;}
    .don-tete .don-perso{height:80px;}
  }
  /* Liste de sélection des mots */
  .voc-cat{margin-bottom:14px;background:var(--surface);border:1px solid var(--ligne);
    border-radius:var(--rayon-s);overflow:hidden;box-shadow:var(--ombre-douce);}
  .voc-cat-tete{display:flex;align-items:center;gap:10px;padding:11px 14px;
    background:var(--surface-2);border-bottom:1px solid var(--ligne);}
  .voc-cat-tete .voc-cat-nom{font-weight:700;flex:1;}
  .voc-cat-tete button{border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);
    border-radius:var(--rayon-pill);padding:4px 12px;font-size:.78rem;cursor:pointer;font-family:var(--police);}
  .voc-cat-tete button:hover{background:var(--valide-fond);}
  /* Refonte du choix des mots : barre d'outils, pastilles, accordéon, barre d'action collante */
  .voc-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
  .voc-search{flex:1 1 210px;min-width:0;padding:9px 15px;border:1px solid var(--ligne);border-radius:var(--rayon-pill);
    font-family:var(--police);font-size:.9rem;background:var(--surface);color:var(--encre);}
  .voc-search:focus{outline:none;border-color:var(--laiton);box-shadow:0 0 0 3px var(--teinte-douce);}
  .voc-tb-btn{border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);border-radius:var(--rayon-pill);
    padding:6px 13px;font-size:.8rem;cursor:pointer;font-family:var(--police);font-weight:600;}
  .voc-tb-btn:hover{background:var(--valide-fond);border-color:var(--laiton);}
  .voc-cat-tete{cursor:pointer;user-select:none;}
  .voc-cat-tete .voc-chevron{transition:transform .2s ease;color:var(--encre-doux);}
  .voc-cat.replie .voc-chevron{transform:rotate(-90deg);}
  .voc-cat.replie .voc-chips{display:none;}
  .voc-cat-cpt{font-size:.76rem;color:var(--encre-doux);font-weight:600;white-space:nowrap;}
  .voc-cat-tout{border:1px solid var(--ligne);background:var(--surface);color:var(--laiton);border-radius:var(--rayon-pill);
    padding:3px 11px;font-size:.74rem;cursor:pointer;font-family:var(--police);font-weight:600;flex:none;}
  .voc-cat-tout:hover{background:var(--valide-fond);}
  .voc-chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;}
  .voc-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ligne);background:var(--surface);
    color:var(--encre);border-radius:var(--rayon-pill);padding:6px 13px;font-size:.86rem;cursor:pointer;
    font-family:var(--police);transition:background var(--t-rapide),border-color var(--t-rapide),color var(--t-rapide);}
  .voc-chip:hover{border-color:var(--laiton);filter:brightness(1.04);}
  /* couleur de fond selon le statut Leitner : à revoir = orange, acquis = vert, neuf = bleu (quand coché) */
  .voc-chip.st-revoir{background:#fdf3dd;border-color:#F2C94C;color:#8E6D0B;}          /* à revoir, non coché : teinte orange */
  .voc-chip.st-acquis{background:var(--juste-fond);border-color:var(--juste);color:var(--juste);}  /* acquis, non coché : teinte verte */
  .voc-chip.on{background:var(--laiton);border-color:var(--laiton);color:#fff;font-weight:600;box-shadow:0 2px 7px rgba(30,58,99,.22);}
  .voc-chip.on.st-revoir{background:#e0951f;border-color:#e0951f;color:#fff;box-shadow:0 2px 7px rgba(224,149,31,.32);}  /* à revoir + coché : orange plein */
  .voc-chip.on.st-acquis{background:var(--juste);border-color:var(--juste);color:#fff;box-shadow:0 2px 7px rgba(26,156,107,.32);}  /* acquis + coché : vert plein */
  [data-theme="dark"] .voc-chip.st-revoir{background:#3a2f14;border-color:var(--or-texte);color:var(--or-texte);}
  /* étape du cycle des J affichée sur la pastille (J1, J3, J7, J15… puis ✓ quand acquis) */
  .voc-chip .vc-j{font-size:.66rem;font-weight:800;font-family:var(--police-titre);line-height:1;
    padding:2px 6px;border-radius:var(--rayon-pill);background:rgba(0,0,0,.10);flex:none;}
  .voc-chip.on .vc-j{background:rgba(255,255,255,.26);}
  .voc-chip .vc-j.ok{padding:2px 5px;}
  .voc-modes{display:flex;border:1px solid var(--ligne);border-radius:var(--rayon-pill);overflow:hidden;}
  .voc-modes button{flex:1;border:none;border-right:1px solid var(--ligne);background:var(--surface);color:var(--encre-doux);
    padding:7px 6px;cursor:pointer;font-family:var(--police);font-size:.78rem;}
  .voc-modes button:last-child{border-right:none;}
  .voc-modes button.on{background:var(--laiton);color:#fff;font-weight:600;}
  /* Tuiles-actions cliquables (à apprendre / à revoir / acquis), style aligné sur l'accueil */
  .voc-tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
  .voc-tuile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
    padding:16px 12px 13px;border-radius:var(--rayon-s);border:1px solid var(--ligne);background:var(--surface);
    box-shadow:var(--ombre-douce);cursor:pointer;position:relative;overflow:hidden;font-family:var(--police);
    transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide);}
  .voc-tuile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;}
  .voc-tuile:hover:not([disabled]){transform:translateY(-3px);box-shadow:var(--ombre-forte);}
  .voc-tuile[disabled]{opacity:.5;cursor:not-allowed;}
  .voc-tuile .vt-ic{font-size:1.45rem;line-height:1;}
  .voc-tuile .vt-n{font-size:2rem;font-family:var(--police-titre);font-weight:800;line-height:1.05;}
  .voc-tuile .vt-lib{font-size:.82rem;color:var(--encre-doux);font-weight:600;}
  .voc-tuile .vt-cta{font-size:.72rem;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:4px;}
  .voc-tuile.apprendre::before{background:var(--laiton);}
  .voc-tuile.apprendre .vt-ic,.voc-tuile.apprendre .vt-n,.voc-tuile.apprendre .vt-cta{color:var(--laiton);}
  .voc-tuile.revoir::before{background:var(--or);}
  .voc-tuile.revoir .vt-ic,.voc-tuile.revoir .vt-n,.voc-tuile.revoir .vt-cta{color:#B8972C;}
  [data-theme="dark"] .voc-tuile.revoir .vt-ic,[data-theme="dark"] .voc-tuile.revoir .vt-n,[data-theme="dark"] .voc-tuile.revoir .vt-cta{color:var(--or-texte);}
  .voc-tuile.acquis::before{background:var(--juste);}
  .voc-tuile.acquis .vt-ic,.voc-tuile.acquis .vt-n,.voc-tuile.acquis .vt-cta{color:var(--juste);}
  @media(max-width:560px){
    .voc-tuiles{grid-template-columns:1fr;}
    .voc-tuile{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;padding:13px 16px;}
    .voc-tuile .vt-n{font-size:1.6rem;} .voc-tuile .vt-cta{margin-top:0;margin-left:auto;}
  }
  /* bloc « Mes mots » : en-tête + réglage de sens + recherche */
  .voc-choix-bloc .voc-choix-tete{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .voc-choix-bloc h3{font-size:1rem;}
  .voc-choix-bloc .voc-selcount{font-weight:400;font-size:.85rem;color:var(--encre-doux);}
  .voc-choix-bloc .voc-selcount b{color:var(--laiton);font-family:var(--police-titre);}
  .voc-choix-bloc .voc-modes{flex:0 1 auto;font-size:.76rem;}
  /* mots en cours de mémorisation : pastilles dorées avec leur échéance */
  .voc-acq-grille{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 6px;}
  .voc-acq{display:inline-flex;align-items:center;gap:5px;background:var(--teinte-douce);
    border:1px solid var(--ligne);border-radius:var(--rayon-pill);padding:5px 12px;
    font-size:.9rem;font-weight:600;}
  /* pastille d'un mot acquis (écran « Mots acquis ») */
  .voc-chip.acquis-fait{background:var(--juste-fond);border-color:var(--juste);color:var(--juste);font-weight:600;cursor:default;}
  .voc-chip.acquis-fait i{font-size:.8rem;}
  /* Notification-rappel de révision sur l'accueil (cliquable) */
  .voc-rappel-notif{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
    margin-bottom:22px;padding:14px 18px;border-radius:var(--rayon-s);border:1px solid #F2C94C;
    background:linear-gradient(135deg,#FEF8E6,#fdecc4);color:#7a5410;font-family:var(--police);
    box-shadow:0 6px 18px rgba(242,201,76,.28);transition:transform var(--t-rapide),box-shadow var(--t-rapide);}
  .voc-rappel-notif:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(242,201,76,.42);}
  .voc-rappel-notif .vrn-ic{font-size:1.7rem;color:#F2C94C;flex:none;transform-origin:top center;animation:vocBell 2.6s ease-in-out infinite;}
  @keyframes vocBell{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(13deg)}93%{transform:rotate(-11deg)}97%{transform:rotate(6deg)}}
  [data-energie="discret"] .voc-rappel-notif .vrn-ic{animation:none;}
  .voc-rappel-notif .vrn-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
  .voc-rappel-notif .vrn-txt b{font-family:var(--police-titre);font-size:1rem;}
  .voc-rappel-notif .vrn-txt span{font-size:.84rem;opacity:.85;}
  .voc-rappel-notif .vrn-fleche{font-size:1.3rem;color:#F2C94C;flex:none;}
  [data-theme="dark"] .voc-rappel-notif{background:linear-gradient(135deg,#3a2f14,#2a2210);border-color:var(--or-texte);color:var(--or-texte);}
  [data-theme="dark"] .voc-rappel-notif .vrn-ic,[data-theme="dark"] .voc-rappel-notif .vrn-fleche{color:var(--or-texte);}
  /* Carte qui se retourne */
  .voc-carte{perspective:1200px;max-width:460px;margin:0 auto 16px;cursor:pointer;}
  .voc-carte-in{position:relative;width:100%;min-height:230px;transition:transform .55s cubic-bezier(.4,.2,.2,1);
    transform-style:preserve-3d;}
  .voc-carte.retournee .voc-carte-in{transform:rotateY(180deg);}
  .voc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    padding:26px 22px;border-radius:var(--rayon);box-shadow:var(--ombre);}
  .voc-face-av{background:linear-gradient(150deg,var(--maestro-blue),var(--valide-2));color:#fff;}
  .voc-face-ar{background:var(--surface);border:2px solid var(--laiton);color:var(--encre);transform:rotateY(180deg);}
  .voc-face .vf-lib{font-size:.74rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.75;margin-bottom:10px;}
  .voc-face .vf-txt{font-size:1.32rem;font-weight:700;font-family:var(--police-titre);line-height:1.35;}
  .voc-face-ar .vf-txt{font-size:1.02rem;font-weight:500;line-height:1.5;}
  .voc-face .vf-aide{position:absolute;bottom:12px;font-size:.74rem;opacity:.6;}
  /* Quiz */
  .voc-q{max-width:560px;margin:0 auto;}
  .voc-enonce{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:20px;text-align:center;margin-bottom:14px;box-shadow:var(--ombre-douce);}
  .voc-enonce .ve-lib{font-size:.74rem;text-transform:uppercase;letter-spacing:1.4px;color:var(--encre-doux);margin-bottom:8px;}
  .voc-enonce .ve-txt{font-size:1.2rem;font-weight:700;font-family:var(--police-titre);line-height:1.4;}
  .voc-choix{display:flex;flex-direction:column;gap:9px;}
  .voc-choix button{text-align:left;padding:13px 16px;border-radius:var(--rayon-s);
    border:2px solid var(--ligne);background:var(--surface);color:var(--encre);cursor:pointer;
    font-size:.96rem;font-family:var(--police);line-height:1.45;transition:all var(--t-rapide);}
  .voc-choix button:hover:not(:disabled){border-color:var(--laiton);background:var(--valide-fond);}
  .voc-choix button:disabled{cursor:default;}
  .voc-choix button.bon{border-color:var(--juste);background:var(--juste-fond);color:var(--juste);font-weight:700;}
  .voc-choix button.mauvais{border-color:var(--faux);background:var(--faux-fond);color:var(--faux);}
  .voc-jauge{height:8px;border-radius:var(--rayon-pill);background:var(--papier-fonce);overflow:hidden;margin-bottom:14px;}
  .voc-jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--maestro-blue),var(--juste));
    border-radius:var(--rayon-pill);transition:width .35s ease;}
  /* Tablette en portrait et téléphone en paysage : même coquille que le téléphone
     (menu en tiroir, barre du haut, onglets en bas) : le menu latéral de 284 px
     mangeait plus d'un tiers de l'écran et écrasait les tableaux du professeur. */
  @media (max-width:760px), (max-width:1100px) and (orientation:portrait) and (pointer:coarse), (max-height:500px) and (max-width:1000px) and (pointer:coarse){
    body{flex-direction:column;}
    .menu-toggle{display:flex;align-items:center;justify-content:center;}
    /* quand le menu est ouvert, on masque le bouton ☰ pour ne pas recouvrir le titre */
    body.menu-ouvert .menu-toggle{display:none;}
    .overlay.visible{display:block;}
    /* le menu devient un tiroir latéral coulissant, masqué par défaut */
    aside{position:fixed;top:0;left:0;height:100%;width:82%;max-width:320px;z-index:20;
      transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 14px rgba(0,0,0,.3);}
    aside.ouvert{transform:translateX(0);}
    main{padding:calc(72px + env(safe-area-inset-top)) 16px 60px;width:100%;}
  }
  /* ================= Téléphone : barre du haut + onglets du bas =================
     Élève et visiteur : 5 onglets au pouce (Accueil · Leçons · Jouer · Profil · Menu).
     Le professeur garde le tiroir ☰. Les onglets s'effacent pendant un jeu, une
     évaluation ou le Mode Histoire (plein focus, chacun a son bouton Quitter). */
  .haut-mobile,.nav-bas{display:none;}
  @media (max-width:760px), (max-width:1100px) and (orientation:portrait) and (pointer:coarse), (max-height:500px) and (max-width:1000px) and (pointer:coarse){
    .haut-mobile{display:flex;position:fixed;top:0;left:0;right:0;z-index:17;align-items:center;justify-content:center;
      height:calc(62px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
      background:rgba(234,243,251,.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
      border-bottom:1px solid var(--ligne);}
    [data-theme="dark"] .haut-mobile{background:rgba(10,18,32,.9);}
    .hm-logo{appearance:none;border:none;background:none;cursor:pointer;padding:6px 14px;-webkit-tap-highlight-color:transparent;}
    .hm-logo .logo-mot{font-family:var(--police-titre);font-weight:800;font-size:1.35rem;letter-spacing:.5px;line-height:1;}
    .menu-toggle{top:calc(8px + env(safe-area-inset-top));left:10px;width:46px;height:46px;}
    .app-controls{top:calc(12px + env(safe-area-inset-top));right:10px;}
    #btnProj,#btnFull{display:none;}
    body.avec-nav-bas .menu-toggle{display:none;}
    body.avec-nav-bas .nav-bas{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;position:fixed;left:0;right:0;bottom:0;z-index:17;
      padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--surface);
      border-top:1px solid var(--ligne);box-shadow:0 -8px 24px rgba(17,30,45,.08);}
    .nb-onglet{appearance:none;border:none;background:none;margin:0;font-family:var(--police);color:var(--encre-doux);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:4px 0;
      font-size:.75rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none;border-radius:14px;}
    .nb-ic{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:30px;
      border-radius:var(--rayon-pill);font-size:1.45rem;line-height:1;transition:background .18s ease,transform .12s ease;}
    .nb-onglet.actif{color:var(--bandeau);font-weight:800;}
    .nb-onglet.actif .nb-ic{background:rgba(242,201,76,.38);}
    [data-theme="dark"] .nb-onglet.actif{color:var(--or);}
    [data-theme="dark"] .nb-onglet.actif .nb-ic{background:rgba(242,201,76,.18);}
    .nb-onglet:active .nb-ic{transform:scale(.9);}
    .nb-pastille{position:absolute;top:-4px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
      background:var(--faux);color:#fff;font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;
      box-shadow:0 0 0 2px var(--surface);}
    body.avec-nav-bas main{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
    body.avec-nav-bas .badge-toast{bottom:calc(84px + env(safe-area-inset-bottom));}
    /* plein focus : jeux, évaluation, tiroir ouvert, Mode Histoire */
    body:has(.survie-screen,.survie-intro,.jeu-wrap,.jeu-joueur,.jeu-host,.sq-scene,.duel-scoreboard,.eval-topbar,.df-jeu) .nav-bas,
    body.menu-ouvert .nav-bas,body.vn-immersif .nav-bas{display:none;}
    body.avec-nav-bas:has(.survie-screen,.survie-intro,.jeu-wrap,.jeu-joueur,.jeu-host,.sq-scene,.duel-scoreboard,.eval-topbar,.df-jeu):not(.menu-ouvert) .menu-toggle{display:flex;}
    body.avec-nav-bas:has(.survie-screen,.survie-intro,.jeu-wrap,.jeu-joueur,.jeu-host,.sq-scene,.duel-scoreboard,.eval-topbar,.df-jeu) main{padding-bottom:60px;}
  }
  /* téléphone en paysage : la hauteur manque, pas d'onglets (le ☰ revient) */
  @media (max-height:500px) and (pointer:coarse){
    body.avec-nav-bas .nav-bas{display:none!important;}
    body.avec-nav-bas .menu-toggle{display:flex;}
    body.avec-nav-bas main{padding-bottom:40px;}
  }
  /* tablette : onglets un peu plus larges, centrés */
  @media (min-width:600px) and (max-width:1100px) and (orientation:portrait) and (pointer:coarse){
    body.avec-nav-bas .nav-bas{padding-left:max(6px,calc((100vw - 640px)/2));padding-right:max(6px,calc((100vw - 640px)/2));}
    main{padding-left:28px!important;padding-right:28px!important;}
  }
  /* ================= Vigilance (conditions de passation) ================= */
  .vg-pas{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap;font-size:.86rem;}
  .vg-n2{color:var(--faux);font-weight:800;} .vg-n1{color:var(--or-texte);} .vg-n0,.vg-ok{color:var(--juste);}
  .vg-sc{display:inline-block;min-width:24px;padding:0 6px;border-radius:var(--rayon-pill);background:currentColor;
    font-size:.72rem;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;}
  .vg-sc{color:inherit;background:rgba(0,0,0,.06);}
  .vg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;
    border-radius:9px;background:var(--faux);color:#fff;font-size:.68rem;font-weight:800;}
  .vg-zone{max-width:900px;margin:0 auto;}
  .vg-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 12px;}
  .vg-kpi{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-s);padding:10px 12px;text-align:center;}
  .vg-kpi b{display:block;font-family:var(--police-titre);font-size:1.6rem;line-height:1.1;color:var(--laiton);}
  .vg-kpi span{font-size:.76rem;color:var(--encre-doux);}
  .vg-k1 b{color:var(--or-texte);} .vg-k2 b{color:var(--faux);} .vg-kok b{color:var(--juste);}
  .vg-filtres{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;}
  .vg-filtres .ev-chip.on{background:var(--bandeau);color:#fff;border-color:var(--bandeau);}
  .vg-filtres .ev-chip.on b{color:#fff;}
  .vg-avances{font-size:.84rem;color:var(--encre-doux);text-align:center;margin:0 0 12px;line-height:2;}
  .vg-av{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--ligne);border-radius:var(--rayon-pill);padding:1px 4px 1px 10px;color:var(--encre);}
  .vg-av button{border:none;background:none;cursor:pointer;color:var(--encre-doux);padding:2px 4px;min-height:0;box-shadow:none;}
  .vg-carte{background:var(--surface);border:1px solid var(--ligne);border-left:5px solid var(--juste);border-radius:var(--rayon-s);
    padding:12px 14px;margin-bottom:10px;}
  .vg-cok{border-left-color:var(--juste);opacity:.92;}
  .vg-tete{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;}
  .vg-qui{min-width:0;} .vg-code{letter-spacing:1px;color:var(--laiton);font-weight:700;font-size:.85rem;}
  .vg-sous{font-size:.8rem;color:var(--encre-doux);margin-top:2px;overflow-wrap:anywhere;}
  .vg-note{font-family:var(--police-titre);font-size:1.5rem;font-weight:800;color:var(--laiton);white-space:nowrap;line-height:1;}
  .vg-note small{font-size:.8rem;color:var(--encre-doux);}
  .vg-jauge{height:6px;border-radius:var(--rayon-pill);background:var(--papier-fonce,rgba(0,0,0,.07));overflow:hidden;margin:10px 0 8px;}
  .vg-jauge i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--juste),var(--or) 45%,var(--faux) 80%);background-size:260px 100%;}
  .vg-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.82rem;}
  .vg-lieu{display:inline-flex;align-items:center;gap:4px;color:var(--encre-doux);}
  .vg-sig{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
  .vg-sig li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:start;font-size:.86rem;line-height:1.4;}
  .vg-sig li i{color:var(--laiton);margin-top:2px;} .vg-sig li b{color:var(--faux);font-variant-numeric:tabular-nums;}
  .vg-sig li.vg-plus{display:block;color:var(--encre-doux);font-size:.8rem;padding-left:28px;}
  .vg-sig-grand li{background:var(--surface-2);border-radius:10px;padding:8px 10px;}
  .vg-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  .vg-act .action{margin:0;}
  .vg-aide{margin:18px 0 6px;font-size:.88rem;color:var(--encre-doux);}
  .vg-aide summary{cursor:pointer;font-weight:600;color:var(--encre);padding:6px 0;}
  .vg-aide p{line-height:1.55;margin:8px 0;}
  .vg-analyse{margin-bottom:18px;}
  .vg-an-tete{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  .vg-an-score{--vg-p:0;width:92px;height:92px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(closest-side,var(--surface) 76%,transparent 77% 100%),conic-gradient(var(--vg-c) calc(var(--vg-p)*1%),var(--ligne) 0);}
  .vg-an-score b{font-family:var(--police-titre);font-size:1.9rem;line-height:1;color:var(--vg-c);}
  .vg-an-score span{font-size:.72rem;color:var(--encre-doux);}
  .vg-an-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px;}
  .vg-an-txt h3{margin:0;font-size:1.05rem;}
  .vg-an-lieu{font-size:.86rem;color:var(--encre-doux);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .vg-an-lieu select{padding:6px 8px;border:1px solid var(--ligne);border-radius:8px;font-family:inherit;background:var(--surface);color:var(--encre);min-height:36px;}
  .vg-rien{margin:12px 0 0;color:var(--juste);font-size:.9rem;}
  .vg-att{list-style:none;padding:0;margin:10px 0 0;font-size:.84rem;color:var(--juste);display:flex;flex-direction:column;gap:4px;}
  .vg-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
  .vg-comp>div{border:1px solid var(--ligne);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0;}
  .vg-comp span{font-size:.74rem;color:var(--encre-doux);text-transform:uppercase;letter-spacing:.4px;}
  .vg-comp b{font-size:1.05rem;} .vg-comp small{font-size:.78rem;color:var(--encre-doux);overflow-wrap:anywhere;}
  .vg-frise-t{margin:14px 0 6px;font-weight:700;font-size:.9rem;} .vg-frise-t small{font-weight:400;color:var(--encre-doux);}
  .vg-frise{display:flex;flex-wrap:wrap;gap:5px;}
  .vg-q{position:relative;width:40px;min-height:40px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:.72rem;line-height:1.1;border:1px solid transparent;}
  .vg-q.ok{background:var(--juste-fond);color:var(--juste);} .vg-q.ko{background:var(--faux-fond);color:var(--faux);}
  .vg-q.abs{border-color:var(--faux);box-shadow:0 0 0 1px var(--faux) inset;}
  .vg-q b{font-size:.8rem;} .vg-q small{font-size:.62rem;color:var(--encre-doux);}
  .vg-q i{position:absolute;top:-6px;right:-6px;font-size:.8rem;color:var(--faux);background:var(--surface);border-radius:50%;}
  .vg-journal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:14px;}
  .vg-j{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;font-size:.84rem;padding:6px 9px;border-radius:8px;background:var(--surface-2);}
  .vg-j i{color:var(--encre-doux);} .vg-j.al{background:var(--faux-fond);} .vg-j.al b,.vg-j.al i{color:var(--faux);}
  .vg-note-bas{font-size:.8rem;color:var(--encre-doux);margin:10px 0 0;line-height:1.5;}
  @media (max-width:640px){
    .vg-kpis{grid-template-columns:repeat(2,1fr);}
    .vg-comp{grid-template-columns:1fr;}
    .vg-act .action{flex:1 1 100%;}
  }
  /* ---- Réinitialisation : boîte à cases ---- */
  .rz-dlg{max-width:520px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;}
  .rz-sous{font-size:.9rem;color:var(--encre-doux);line-height:1.5;margin:0 0 10px;}
  .rz-liste{display:flex;flex-direction:column;gap:6px;text-align:left;}
  .rz-opt{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:9px 11px;border:1px solid var(--ligne);border-radius:10px;cursor:pointer;background:var(--surface);}
  .rz-opt:has(input:checked){border-color:var(--faux);background:var(--faux-fond);}
  .rz-opt input{width:18px;height:18px;margin-top:2px;accent-color:var(--faux);}
  .rz-opt b{display:block;font-size:.92rem;} .rz-opt small{display:block;color:var(--encre-doux);font-size:.8rem;line-height:1.4;}
  .rz-conf{font-size:.88rem;margin:14px 0 0;text-align:left;}
  .btn-danger:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4);}
  /* ================= Enseignant sur téléphone =================
     Accueil compact (tuiles sur 2 colonnes sans leur description, chiffres en 2 × 2,
     onglets sur une ligne qui défile), fiches KPI resserrées, colonne des noms du carnet
     plus étroite. */
  @media (max-width:560px){
    .ap-tabs .ev-onglets,.ev-onglets-c .ev-onglets{flex-wrap:nowrap;max-width:100%;overflow-x:auto;justify-content:flex-start;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .ap-tabs .ev-onglets::-webkit-scrollbar,.ev-onglets-c .ev-onglets::-webkit-scrollbar{display:none;}
    .ap-tabs .ev-onglets button,.ev-onglets-c .ev-onglets button{white-space:nowrap;flex:none;}
    .ap-tabs{margin:16px 0 12px;}
    .ev-rib-sous{display:none;}
    .ev-barre .ev-onglets-c{min-width:0;max-width:100%;flex:1 1 100%;}
    .ev-barre .ev-onglets{display:flex;}
    .prof-actions,.ap-panel .prof-actions{grid-template-columns:1fr 1fr;gap:10px;}
    .prof-act{padding:12px 12px 11px;min-height:92px;justify-content:flex-start;}
    .prof-act span{display:none;}
    .prof-act b{font-size:.93rem;line-height:1.25;}
    .rm-grille-3:not(:has(> :not(.rm-kpi))){grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
    .rm-grille-3:not(:has(> :not(.rm-kpi))) .rm-kpi{padding:10px 6px;}
    .rm-grille-3:not(:has(> :not(.rm-kpi))) .kp-val{font-size:1.2rem;}
    .rm-grille-3:not(:has(> :not(.rm-kpi))) .kp-lib{font-size:.7rem;}
    table.gradebook .gb-nom{min-width:104px;max-width:130px;white-space:normal;}
    table.gradebook th.gb-eval{width:78px;min-width:78px;max-width:78px;}
    table.gradebook th,table.gradebook td{padding:8px 8px;}
  }
  /* doigt : boutons secondaires de l'espace enseignant à 40 px au moins */
  @media (hover:none) and (pointer:coarse){
    .btn-retour{min-height:40px;padding-left:14px;padding-right:14px;}
    .btn-son.mini{min-height:36px;min-width:40px;}
    .ev-chip,.tv-mode,.tv-beh,.pres-badge{min-height:40px;}
    .ev-ctrl-sel{min-height:36px;}
    button.action{min-height:40px;}
  }
  /* écrans tactiles : cibles d'au moins 44 px (recommandation Apple / Google) */
  @media (hover:none) and (pointer:coarse){
    .voc-tb-btn,.voc-chip{min-height:44px;}
    .voc-cat-tout{min-height:40px;padding:6px 14px;}
    .seg button{min-height:44px;}
  }
  @media print{
    aside,.actions,.reglages,.btn-son,.score-mini{display:none!important;}
    .ex{break-inside:avoid;}
    body{background:#fff;}
    .entete-controle{display:block!important;}
  }
  .entete-controle{display:none;margin-bottom:18px;border:1px solid #000;padding:10px;font-size:.9rem;}
  .entete-controle .lg{display:inline-block;border-bottom:1px solid #000;min-width:220px;}
  .bas-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0 8px;padding-top:16px;border-top:1px dashed var(--ligne);}
  @media print{.bas-actions{display:none!important;}}
  /* ----- Profil dans le menu ----- */
  #profilMenu{margin:0 2px 14px;}
  /* Identité de connexion, juste sous « Apprentissage de la Musique » */
  .code-menu{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--teinte-douce);border:1px solid var(--ligne);border-radius:var(--rayon-pill);
    padding:8px 14px;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:700;
    letter-spacing:.6px;color:var(--encre);transition:background var(--t-rapide),transform .08s;}
  .code-menu:hover{background:rgba(242,201,76,.22);}
  .code-menu:active{transform:scale(.98);}
  /* pastilles de maîtrise */
  .pastille{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:7px;vertical-align:middle;}
  .pastille.none{background:transparent;border:1.5px solid var(--ligne);}
  .pastille.faible{background:var(--faux);}
  .pastille.moyen{background:var(--laiton-clair);}
  .pastille.fort{background:var(--juste);}
  /* toast de badge (placé en bas pour ne pas recouvrir le bandeau de note en haut) */
  .badge-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:12px;align-items:center;
    background:#fff;border-radius:16px;padding:14px 20px;box-shadow:0 14px 40px rgba(0,0,0,.3);
    border:2px solid var(--laiton);animation:badgeInBas .4s cubic-bezier(.34,1.56,.64,1);max-width:90vw;}
  .badge-toast.sortie{animation:badgeOutBas .4s ease forwards;}
  @keyframes badgeInBas{from{transform:translateX(-50%) translateY(20px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}}
  @keyframes badgeOutBas{to{transform:translateX(-50%) translateY(20px);opacity:0;}}
  .badge-toast .bt-emoji{font-size:2.2rem;}
  .badge-toast .bt-titre{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--laiton);font-weight:700;}
  .badge-toast .bt-nom{font-family:var(--police-titre);font-size:1.15rem;font-weight:700;}
  .badge-toast .bt-desc{font-size:.82rem;color:var(--encre-doux);}
  @keyframes badgeIn{from{transform:translateX(-50%) translateY(-20px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}}
  @keyframes badgeOut{to{transform:translateX(-50%) translateY(-20px);opacity:0;}}
  /* écran progression */
  .prog{max-width:780px;}
  /* ================= Mon profil (élève) : option A =================
     Ruban (médaillon, code + classe, grade, jauge, 4 chiffres), puis notes | badges,
     puis la maîtrise en onglets de domaine. */
  .pf{max-width:1120px;margin:0 auto;container:pf/inline-size;}
  .pf-ruban{border-radius:var(--rayon);overflow:hidden;background:var(--brocart),var(--bandeau);box-shadow:var(--ombre);
    padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;color:#fff;}
  .pf-id{display:flex;align-items:center;gap:22px;min-width:0;}
  .pf .medaillon{width:112px;height:112px;box-shadow:0 8px 22px rgba(0,0,0,.18);}
  .pf .medaillon>.md-coeur{width:88px;height:88px;}
  .pf .medaillon .md-val{font-size:2rem;font-weight:800;color:var(--laiton);}
  .pf-txt{min-width:0;flex:1;}
  .pf-code-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .pf-code{font-family:var(--police-titre);font-weight:800;font-size:2rem;line-height:1.05;letter-spacing:2px;color:#fff;}
  .pf-code.pf-sans{font-size:1.35rem;letter-spacing:0;}
  .pf-classe{font-family:var(--police-titre);font-weight:800;font-size:.95rem;color:#16233a;background:var(--or);border-radius:var(--rayon-pill);padding:3px 14px;}
  .pf-rejoindre{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;border-radius:var(--rayon-pill);padding:6px 14px;font-family:inherit;font-weight:700;font-size:.84rem;cursor:pointer;}
  .pf-rejoindre:hover{background:rgba(255,255,255,.24);}
  .pf-grade{font-family:var(--police-titre);font-weight:700;font-size:1.1rem;color:var(--or-clair);margin-top:4px;}
  .pf-jauge{height:10px;border-radius:8px;background:rgba(255,255,255,.18);overflow:hidden;margin:14px 0 7px;max-width:460px;}
  .pf-jauge>div{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--or),var(--or-clair));transition:width .5s;}
  .pf-next{font-size:.84rem;color:rgba(255,255,255,.85);}
  .pf-next b{color:var(--or-clair);}
  .pf-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:320px;}
  .pf-kpi{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:11px;min-width:0;}
  .pf-kpi>i{font-size:1.45rem;color:var(--or-clair);}
  .pf-kpi b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1.4rem;line-height:1;color:#fff;white-space:nowrap;}
  .pf-kpi span{font-size:.76rem;color:rgba(255,255,255,.82);}
  .pf-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:22px;align-items:start;}
  .pf-col{display:flex;flex-direction:column;gap:22px;min-width:0;}
  .pf-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px;box-shadow:var(--ombre-douce);min-width:0;}
  .pf-carte-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
  .pf-carte-t h2{margin:0;font-family:var(--police-titre);font-size:1.25rem;font-weight:800;color:var(--laiton);}
  .pf-pill{font-size:.8rem;font-weight:700;color:var(--or-texte);background:var(--teinte-douce);border-radius:var(--rayon-pill);padding:3px 10px;}
  .pf .pn-moy{margin-bottom:14px;}
  .pf .pn-moy .v{white-space:nowrap;}
  .pf-dets{display:flex;flex-direction:column;gap:10px;}
  .pf-det{border:1px solid var(--ligne);border-radius:14px;overflow:hidden;background:var(--surface);}
  .pf-det.bonus{background:rgba(242,201,76,.07);}
  .pf-det>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;}
  .pf-det>summary::-webkit-details-marker{display:none;}
  .pf-det>summary>.ph-caret-right{color:var(--laiton);font-size:1rem;transition:transform .18s;}
  .pf-det[open]>summary>.ph-caret-right{transform:rotate(90deg);}
  .pf-det-t{flex:1;min-width:0;}
  .pf-det-t b{display:block;font-family:var(--police-titre);font-weight:800;font-size:1rem;color:var(--encre);}
  .pf-det-t small{font-size:.78rem;color:var(--encre-doux);}
  .pf-det-n{font-size:.78rem;font-weight:800;color:var(--laiton);background:rgba(30,58,99,.06);border-radius:var(--rayon-pill);padding:3px 10px;white-space:nowrap;}
  .pf-det.bonus .pf-det-n{color:var(--or-texte);}
  .pf-det .pn-liste{padding:0 12px 12px;}
  .pf-vide{font-size:.85rem;color:var(--encre-doux);margin:0;padding:0 14px 14px;}
  .pf-bonus{display:flex;align-items:flex-start;gap:10px;margin-top:12px;border-radius:12px;padding:11px 14px;background:rgba(242,201,76,.16);border:1px solid var(--or);font-size:.86rem;line-height:1.45;}
  .pf-bonus>i{color:var(--or-texte);font-size:1.15rem;margin-top:1px;}
  .pf-bonus.vide{background:var(--surface-2);border-color:var(--ligne);color:var(--encre-doux);}
  .pf-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .pf-badge{border:1px solid var(--laiton);border-radius:14px;padding:12px 8px;text-align:center;background:linear-gradient(135deg,var(--surface),var(--surface-2));display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s;}
  .pf-badge:hover{transform:translateY(-3px) rotate(-2deg);}
  .pf-badge .bc-emoji{font-size:1.7rem;color:var(--laiton);line-height:1;}
  .pf-badge .bc-nom{font-size:.78rem;font-weight:600;margin:0;}
  .pf-badge.badge-cache{border-color:var(--or-texte);background:linear-gradient(135deg,#fff8ec,#f3e2c0);}
  .pf-badge.plus{border:1.5px dashed rgba(30,58,99,.25);background:none;justify-content:center;color:var(--encre-doux);}
  .pf-badge.plus:hover{transform:none;}
  .pf-badge.plus b{font-family:var(--police-titre);font-size:1.3rem;line-height:1;}
  .pf-badge.plus span{font-size:.74rem;}
  .pf-indice{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;padding:10px 12px;font-size:.84rem;line-height:1.45;}
  .pf-indice>i{color:var(--or-texte);font-size:1.1rem;margin-top:1px;}
  .pf-joker{display:flex;align-items:center;gap:14px;padding:16px 20px;}
  .pf-joker-ic{width:44px;height:44px;border-radius:12px;background:var(--laiton);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none;}
  .pf-joker b{display:block;font-family:var(--police-titre);font-weight:800;}
  .pf-joker span{font-size:.8rem;color:var(--encre-doux);}
  .pf-joker .pf-joker-n{font-size:1.6rem;color:var(--laiton);}
  #progTravail:not(:empty){margin-top:22px;}
  .pf-maitrise{margin-top:22px;}
  .pf-maitrise-t{margin-bottom:6px;}
  .pf-onglets{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--ligne);border-radius:22px;padding:4px;}
  .pf-onglets button{border:none;background:none;font-family:inherit;font-size:.84rem;font-weight:600;padding:7px 13px;border-radius:var(--rayon-pill);color:var(--encre-doux);cursor:pointer;white-space:nowrap;}
  .pf-onglets button small{font-size:.72rem;opacity:.75;}
  .pf-onglets button:hover{color:var(--encre);}
  .pf-onglets button.on{background:var(--laiton);color:#fff;font-weight:700;}
  .pf-aide{font-size:.84rem;color:var(--encre-doux);margin:6px 0 10px;}
  .pf-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px;}
  .pf-theme{display:grid;grid-template-columns:minmax(0,1fr) 140px 108px;gap:12px;align-items:center;padding:10px 8px;border:none;border-bottom:1px solid rgba(30,58,99,.08);
    background:none;border-radius:8px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;width:100%;}
  .pf-theme:hover{background:var(--fond-app);}
  .pf-theme-nom{font-size:.9rem;font-weight:600;}
  .pf-theme .pt-label{flex:none;}
  /* requêtes de conteneur : la largeur utile dépend du menu latéral, pas de l'écran */
  @container pf (max-width:860px){
    .pf-ruban{grid-template-columns:1fr;}
    .pf-kpis{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));}
    .pf-cols{grid-template-columns:1fr;}
    .pf-themes{grid-template-columns:1fr;}
  }
  @container pf (max-width:600px){
    .pf-ruban{padding:20px 16px;gap:18px;}
    .pf-id{flex-direction:column;text-align:center;gap:14px;}
    .pf-code-l{justify-content:center;}
    .pf-jauge{margin-left:auto;margin-right:auto;}
    .pf .medaillon{width:96px;height:96px;}
    .pf .medaillon>.md-coeur{width:76px;height:76px;}
    .pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
    .pf-kpi{padding:10px 11px;}
    .pf-carte{padding:16px;}
    .pf-theme{grid-template-columns:minmax(0,1fr) 70px 96px;gap:8px;padding:10px 4px;}
    .pf-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
    .pf-onglets::-webkit-scrollbar{display:none;}
  }
  /* Bandeau de grade (progression) */
  /* Carte grade : bleu marine plein + motif brocart (comme la bannière-ruban),
     pas la sidebar (--menu-h/--menu-b sont blancs depuis « Ruban & Médaille »). */
  .prog-grade{background:var(--brocart),var(--bandeau);color:#fff;border-radius:18px;
    padding:20px 18px 18px;text-align:center;box-shadow:var(--ombre-douce);margin-bottom:16px;max-width:420px;}
  .prog-grade .pg-prenom{font-family:var(--police-titre);font-weight:800;font-size:1.9rem;line-height:1.1;color:var(--or-texte);}
  .prog-grade .pg-nom{font-weight:700;font-size:1.05rem;color:var(--or-clair);margin-top:2px;}
  .prog-grade .pg-niveau{font-size:.74rem;font-weight:600;color:#fff;letter-spacing:.6px;text-transform:uppercase;opacity:.9;margin-top:3px;}
  
  .prog-prenom{display:flex;flex-direction:column;gap:6px;align-items:stretch;background:var(--surface);border:1px solid var(--ligne);border-radius:14px;padding:16px;box-shadow:var(--ombre-douce);max-width:420px;}
  .prog-prenom label{font-weight:600;font-size:.9rem;margin-top:4px;}
  .prog-prenom input{padding:9px 12px;border:2px solid var(--ligne);border-radius:10px;font-family:inherit;font-size:.95rem;transition:border-color .2s;width:100%;}
  .prog-prenom .btn-nouv{margin-top:10px;width:100%;justify-content:center;}
  .prog-titre{font-family:var(--police-titre);font-size:1.2rem;margin:26px 0 12px;}
  .badge-vide{background:var(--surface-2);border:1px dashed var(--ligne);border-radius:12px;padding:14px 16px;font-size:.9rem;color:var(--encre-doux);line-height:1.5;}
  .bc-emoji{font-size:2rem;display:block;}
  .bc-nom{font-size:.8rem;font-weight:600;margin-top:6px;display:block;}
  /* bandeau d'indice sur l'accueil (cliquable) */
  .indice-bandeau{display:flex;align-items:center;gap:12px;margin:14px 0 4px;cursor:pointer;
    background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--ligne);
    border-left:4px solid var(--or);border-radius:14px;padding:13px 16px;box-shadow:var(--ombre-douce);
    transition:transform .15s,box-shadow .15s;}
  .indice-bandeau:hover{transform:translateY(-2px);box-shadow:var(--ombre);}
  .pt-ligne{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--ligne);border-radius:10px;padding:9px 14px;cursor:pointer;transition:background .15s;}
  .pt-ligne:hover{background:var(--papier-fonce);}
  .pt-nom{flex:0 0 40%;font-size:.9rem;font-weight:500;}
  .pt-barre{flex:1;height:9px;background:var(--papier-fonce);border-radius:6px;overflow:hidden;}
  .pt-rempli{display:block;height:100%;border-radius:6px;background:var(--ligne);transition:width .4s;}
  .pt-rempli.faible{background:var(--faux);}
  .pt-rempli.moyen{background:var(--laiton-clair);}
  .pt-rempli.fort{background:var(--juste);}
  .pt-pct{flex:0 0 42px;text-align:right;font-size:.82rem;font-weight:600;color:var(--encre-doux);}
  .pt-niveau{font-family:var(--police-titre);font-weight:700;color:var(--laiton);font-size:.95rem;
    margin:14px 0 2px;padding-left:2px;border-bottom:1px solid var(--ligne);}
  .pt-niveau:first-child{margin-top:0;}
  .pt-label{flex:0 0 110px;text-align:right;font-size:.8rem;font-weight:700;}
  .pt-label.none{color:var(--encre-doux);font-weight:500;}
  .pt-label.faible{color:var(--faux);}
  .pt-label.moyen{color:#b3771f;}
  .pt-label.fort{color:var(--juste);}
  /* ---- Indicateur de compte (barre du haut) ---- */
  .accordeon-direct .acc-fleche{transform:none!important;font-size:1rem;}
  .compte-wrap{position:relative;display:inline-block;}
  #btnCompte{position:relative;}
  .compte-pastille{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;
    border:2px solid var(--menu-b);background:#e0483b;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
  .compte-pastille.on{background:#2f9e63;}
  .compte-pastille.on.alerte{background:#e08a00;}
  .cm-sync{margin-top:6px;font-size:.8rem;line-height:1.35;color:var(--encre-doux);}
  .compte-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;max-width:290px;
    background:var(--surface);border:1px solid var(--ligne);border-radius:14px;
    box-shadow:0 14px 38px rgba(0,0,0,.20);padding:10px;display:none;z-index:1200;text-align:left;}
  .compte-menu.ouvert{display:block;animation:fadeIn .16s ease;}
  .compte-menu .cm-tete{padding:4px 8px 10px;border-bottom:1px solid var(--ligne);margin-bottom:8px;}
  .compte-menu .cm-role{font-weight:700;color:var(--encre);display:flex;align-items:center;gap:7px;}
  .compte-menu .cm-detail{font-size:.82rem;color:var(--encre-doux);margin-top:4px;word-break:break-word;}
  .compte-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
    border:none;padding:9px 10px;border-radius:9px;cursor:pointer;font-family:inherit;
    font-size:.92rem;color:var(--encre);}
  .compte-menu button:hover{background:var(--fond-app);}
  /* ---- Modes de jeu ---- */
  /* Tuiles de choix (mode de jeu, façon de jouer) : grille, état actif teinté */
  .mode-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
  .mode-carte{display:block;width:100%;text-align:center;background:var(--surface);border:1px solid var(--ligne);
    border-radius:14px;padding:20px 18px;cursor:pointer;font-family:inherit;color:var(--encre);
    box-shadow:none;transition:transform var(--t-rapide),box-shadow var(--t-rapide),border-color var(--t-rapide),background var(--t-rapide);}
  .mode-carte:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,58,99,.16);border-color:rgba(30,58,99,.5);}
  .mode-carte.on{background:var(--teinte-douce);border-color:rgba(30,58,99,.5);}
  .mode-carte i{font-size:1.5rem;display:block;margin-bottom:10px;color:var(--laiton);}
  .mode-carte b{display:block;font-family:var(--police-titre);font-size:1.05rem;margin-bottom:4px;}
  .mode-carte span{display:block;color:var(--encre-doux);font-size:.85rem;line-height:1.5;}
  .sel-themes{margin-top:8px;}
  .th-grp{border:1px solid var(--ligne);border-radius:14px;margin-bottom:10px;background:var(--surface);overflow:hidden;}
  .th-grp summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none;font-family:var(--police-titre);}
  .th-grp summary::-webkit-details-marker{display:none;}
  .th-grp summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform .18s;color:var(--or-texte);}
  .th-grp[open] summary::before{transform:rotate(90deg);}
  .th-grp[open] summary{background:var(--teinte-douce);}
  /* thèmes en grille de tuiles (3 colonnes sur large écran) */
  .th-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:12px 16px 16px;}
  /* button.action a une spécificité (0,1,1) : on la dépasse avec button.th-btn */
  button.th-btn{font-size:.9rem;padding:14px 16px;margin:0;width:100%;text-align:center;
    background:var(--surface);border:1px solid var(--ligne);color:var(--encre);
    border-radius:14px;font-family:var(--police-titre);font-weight:700;box-shadow:none;
    transition:all var(--t-rapide);}
  button.th-btn:hover{background:var(--teinte-douce);border-color:rgba(30,58,99,.5);transform:translateY(-2px);}
  /* ---- Podium de la classe (accueil) ---- */
  .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;
    background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
    padding:16px 14px 0;box-shadow:var(--ombre-douce);cursor:pointer;
    transition:transform var(--t-moyen),box-shadow var(--t-moyen);}
  .podium:hover{transform:translateY(-2px);box-shadow:var(--ombre);}
  /* ---- Notification de défi ---- */
  .defi-notif{position:fixed;right:18px;bottom:18px;z-index:1500;max-width:320px;
    background:var(--surface);border:2px solid var(--laiton);border-radius:16px;
    box-shadow:0 16px 44px rgba(0,0,0,.26);padding:14px 16px;animation:fadeIn .25s ease;}
  .defi-notif .dn-tete{font-size:1.02rem;margin-bottom:6px;}
  .defi-notif .dn-tete b{color:var(--laiton);letter-spacing:1px;}
  .defi-notif .dn-corps{color:var(--encre-doux);font-size:.88rem;line-height:1.5;margin-bottom:10px;}
  .defi-notif .dn-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .defi-notif .dn-actions .action{padding:8px 14px;font-size:.9rem;}
  @media (max-width:560px){ .defi-notif{left:12px;right:12px;max-width:none;bottom:12px;} }
  /* petits écrans : le bouton n'est pas collé au bord droit, le menu déborderait.
     On l'ancre alors sur la fenêtre elle-même. */
  @media (max-width:560px){
    .compte-menu{position:fixed;top:58px;right:10px;left:auto;
      min-width:0;width:auto;max-width:calc(100vw - 20px);}
  }