/* ============================================================
   Mesrevisions.be — Charte graphique unifiee (orange & vert)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  /* ---- L'ORANGE, VERSION CLAIRE (2026) ---------------------------
     Même famille de couleur qu'avant, nettement moins saturée : les
     fonds tirent vers le blanc cassé et les aplats vifs ont disparu.
     Deux valeurs ont été choisies au contraste, pas à l'œil :
       --o-600 porte du texte blanc sur les boutons — 4,9 de contraste,
       au-dessus du seuil de 4,5 ; l'ancien #f2661d plafonnait à 3,1 et
       ne passait pas.
       --muted porte le texte secondaire — 5,1 sur blanc.
     Changer une de ces deux-là sans refaire le calcul rend des pans
     entiers du site pénibles à lire. */
  --o-900:#5a2a12;--o-800:#8c421a;--o-700:#a8501d;--o-600:#b9531a;--o-500:#d9772f;--o-400:#eda372;--o-300:#f6c6a3;--o-200:#fadfcb;--o-100:#fdeee2;--o-50:#fef8f3;--o-25:#fffcfa;
  /* ---- LE VERT, SECONDE COULEUR DE LA CHARTE --------------------
     Il n'est plus réservé aux validations : une section sur deux repose
     désormais sur --g-100. --g-700 est la seule nuance qui porte du
     texte — 6,2 sur blanc, 6,2 en blanc dessus. --g-600 tombe à 4,25 et
     ne passe pas le seuil de 4,5 : décoratif seulement. */
  --g-900:#10352a;--g-800:#17543f;--g-700:#1d6e52;--g-600:#2c8a68;--g-500:#57ad8e;--g-400:#8cc9b2;--g-300:#bbe2d2;--g-200:#dcf0e7;--g-100:#eef8f3;--g-50:#f5fbf8;
  /* Deux bleus, et ce n'est pas un caprice : --blue sert de filet, où
     seule la visibilité compte ; --blue-fonce porte du texte blanc, et
     doit donc passer 4,5 de contraste — il est à 5,8. L'ancien #3b82c4
     plafonnait à 4,1 et ne passait pas. */
  --ink:#3a2c24;--muted:#7c6a5f;--danger:#c0473f;--blue:#5b82ab;--blue-fonce:#40688f;
  --shadow-sm:0 1px 3px rgba(90,42,18,.05);--shadow-md:0 6px 18px rgba(90,42,18,.06);
  --font-head:'Baloo 2',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
  --nav-h:64px;
}
*{box-sizing:border-box}

/* ============================================================
   TAILLE D'AFFICHAGE DU SITE
   ------------------------------------------------------------
   Tout le site est rendu à 90 % de sa taille naturelle, comme si
   le navigateur était réglé à 90 %. Une seule valeur à changer
   ici, et elle vaut pour les 374 pages.

   « zoom » plutôt que « font-size:90% » : font-size ne réduirait
   que ce qui est exprimé en rem, et laisserait les marges, les
   images et les épaisseurs de trait à leur taille — le texte
   rétrécirait dans une mise en page restée grande.

   « zoom » plutôt que « transform:scale() » : transform ne
   recalcule pas la place occupée, ce qui laisse une bande vide à
   droite et fausse le défilement.

   La barre de navigation fixe et le bandeau cookies, tous deux en
   position:fixed, occupent bien toute la largeur — vérifié. Un
   navigateur trop ancien pour « zoom » ignore la règle et affiche
   le site à 100 % : rien ne casse.
   ============================================================ */
html{zoom:.9}
/* Sur téléphone et petite tablette, le site est rendu à sa taille
   naturelle (100 %). Le zoom à 90 % convient aux grands écrans mais
   rapetissait tout sur mobile et cassait le format d'affichage. */
@media (max-width:820px){html{zoom:1}}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--o-50);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.01em;margin:0 0 .5em}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button{font-family:inherit}
.hidden{display:none!important}
.nav{position:sticky;top:0;z-index:80;background:rgba(254,248,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--o-100);min-height:var(--nav-h)}
.nav .wrap{max-width:1300px;margin:0 auto;min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:8px 22px;gap:10px 12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:1.22rem;color:var(--o-800)}
.brand svg{width:30px;height:30px}
.navlinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.navlink{padding:8px 13px;border-radius:10px;color:var(--o-800);font-weight:700;font-size:.88rem}
.navlink:hover{background:var(--o-100)}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--o-100);padding:6px 12px 6px 6px;border-radius:999px;font-weight:700;font-size:.83rem;color:var(--o-800)}
.user-chip .av{width:26px;height:26px;border-radius:50%;background:var(--o-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800}
/* --o-700 et non --o-600 : du blanc dessus donne 5,5 de contraste au
   lieu de 4,9, et la teinte tient aussi sur un fond vert pâle. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;padding:11px 19px;font-weight:700;font-size:.9rem;cursor:pointer;background:var(--o-700);color:#fff;transition:.15s;box-shadow:none}
.btn:hover{background:var(--o-800)}
.btn.sm{padding:7px 12px;font-size:.8rem;border-radius:9px}
.btn.xs{padding:5px 10px;font-size:.74rem;border-radius:8px}
.btn.lg{padding:14px 26px;font-size:1rem}.btn.block{width:100%}
.btn.green{background:var(--g-700);box-shadow:none}.btn.green:hover{background:var(--g-800)}
.btn.alt{background:var(--o-100);color:var(--o-700);box-shadow:none}.btn.alt:hover{background:var(--o-200)}
.btn.ghost{background:transparent;color:var(--o-800);box-shadow:none;border:1px solid var(--o-300)}.btn.ghost:hover{background:var(--o-100)}
.btn.danger{background:var(--danger)}.btn.danger:hover{background:#b8362e}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--o-100);color:var(--o-700);padding:6px 12px;border-radius:999px;font-weight:800;font-size:.76rem}
.badge.green{background:var(--g-100);color:var(--g-700)}
.mini-badge{background:var(--o-50);color:var(--o-700);padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:800;border:1px solid var(--o-200)}
.accueil{max-width:1200px;margin:0 auto;padding:38px 24px 80px}
.accueil-hero{text-align:center;margin-bottom:40px}
.accueil-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--o-900)}
.accueil-hero p{color:var(--muted);font-size:1.02rem;max-width:640px;margin:0 auto}
.chiffres{display:flex;gap:8px;flex-wrap:wrap}
.chiffres.une-ligne{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none}
.chiffres.une-ligne::-webkit-scrollbar{display:none}
.chiffres.une-ligne .mini-badge{white-space:nowrap;font-size:.63rem;padding:3px 7px;letter-spacing:-.1px}
.grille-matieres{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.carte-matiere{background:#fff;border:1px solid var(--o-200);border-radius:14px;padding:22px;box-shadow:none;transition:.2s;display:flex;flex-direction:column}
.carte-matiere:hover{box-shadow:var(--shadow-md);border-color:var(--o-300)}
.carte-matiere .ico{font-size:2rem;margin-bottom:8px}
.carte-matiere h3{color:var(--o-800);font-size:1.12rem;margin-bottom:4px}
.carte-matiere .sous{color:var(--muted);font-size:.85rem;flex:1;margin-bottom:12px}
.carte-matiere .chiffres{margin-bottom:14px}
.carte-actions{display:flex;gap:8px;flex-wrap:wrap}
.cours-shell{display:grid;grid-template-columns:2fr 1fr;height:calc(100vh - var(--nav-h));overflow:hidden}
.panneau-cours{overflow-y:auto;padding:30px 38px 90px;scrollbar-gutter:stable}
.panneau-questions{overflow-y:auto;padding:24px 22px 90px;background:#fff;border-left:2px solid var(--o-100);scrollbar-gutter:stable}
.panneau-cours::-webkit-scrollbar,.panneau-questions::-webkit-scrollbar{width:9px}
.panneau-cours::-webkit-scrollbar-thumb,.panneau-questions::-webkit-scrollbar-thumb{background:var(--o-200);border-radius:9px}
.panneau-questions::-webkit-scrollbar-thumb{background:var(--g-200)}
.cours-header{border-bottom:3px solid var(--o-600);padding-bottom:14px;margin-bottom:22px}
.cours-header h1{font-size:1.85rem;color:var(--o-900);margin-bottom:4px}
.cours-header .meta{color:var(--muted);font-size:.88rem}
.sommaire{background:var(--o-50);border:2px solid var(--o-100);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.sommaire h4{color:var(--o-800);font-size:.88rem;margin-bottom:8px}
.sommaire ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.sommaire a{display:block;padding:6px 12px;background:#fff;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--o-700);border:1px solid var(--o-200)}
.sommaire a:hover{background:var(--o-600);color:#fff;border-color:var(--o-600)}
.theme-titre{text-align:center;font-size:.92rem;color:var(--o-700);letter-spacing:1.5px;text-transform:uppercase;font-weight:800;font-family:var(--font-head);margin:34px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--o-200)}
.chapitre{background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--o-100);padding:26px 28px;margin-bottom:24px;scroll-margin-top:14px}
.chapitre>h2{font-size:1.5rem;color:var(--o-800);border-bottom:3px solid var(--o-100);padding-bottom:10px;margin-bottom:16px}
.chapitre h3{font-size:1.2rem;color:var(--g-700);margin:20px 0 8px;padding-left:10px;border-left:4px solid var(--g-500)}
.chapitre h4{font-size:1.06rem;color:var(--o-800);margin:14px 0 6px}
.chapitre ul,.chapitre ol{margin:9px 0 9px 22px}.chapitre li{margin-bottom:7px;font-size:1.04rem;line-height:1.65}
.chapitre p{font-size:1.06rem;line-height:1.72}
.definition,.propriete,.methode,.exemple,.remarque,.attention,.astuce,
.vocabulaire,.date-cle,.chiffre-cle,.portrait,.artiste,.experience,.loi{
  padding:15px 18px;margin:15px 0;border-radius:0 10px 10px 0;font-size:1.02rem;line-height:1.6}
/* ---- les encadrés du cours ----
   Huit couleurs vives sur une même page, c'était beaucoup. Les teintes
   ont été désaturées et les fonds ramenés près du blanc : la
   distinction entre une définition, une méthode et un exemple reste
   immédiate, mais la page ne clignote plus. Le filet de gauche porte la
   couleur, le fond ne fait que l'accompagner.
   Toutes les étiquettes ont été vérifiées au contraste : la plus faible
   est à 5,3 sur son fond, au-dessus du seuil de 4,5. */
.definition{background:var(--o-50);border-left:4px solid var(--o-600)}
.definition strong:first-child{color:var(--o-800);display:block;margin-bottom:4px}
.propriete{background:var(--g-50);border-left:4px solid var(--g-600)}
.propriete strong:first-child{color:var(--g-800);display:block;margin-bottom:4px}
.methode{background:#f5f8fc;border-left:4px solid var(--blue)}
.methode strong:first-child{color:#2f5a86;display:block;margin-bottom:4px}
.exemple{background:#f8f5fb;border-left:4px solid #9a7ab8}
.exemple strong:first-child{color:#5f4578;display:block;margin-bottom:4px}
.remarque{background:#fdfaf7;border-left:4px solid var(--o-300)}
.remarque strong:first-child{color:var(--o-700);display:block;margin-bottom:4px}
.attention,.loi{background:#fdf3ee;border-left:4px solid #cf6a3c}
.attention strong:first-child,.loi strong:first-child{color:#a8431a;display:block;margin-bottom:4px}
.astuce{background:var(--g-50);border-left:4px solid var(--g-500)}
.astuce strong:first-child{color:var(--g-800);display:block;margin-bottom:4px}
/* ---- Piège : erreur fréquente à éviter (ajout 19/10/2026) ---- */
.piege{background:#fdf3f2;border-left:4px solid var(--danger)}
.piege strong:first-child{color:var(--danger);display:block;margin-bottom:4px}
/* ---- enrichissement cours : bloc code, tableau de suite, figures SVG ---- */
.chapitre pre{background:#1e2430;color:#e6e9ef;border-radius:10px;padding:14px 16px;overflow:auto;font-size:.82rem;line-height:1.5;margin:12px 0}
.chapitre pre .kw{color:#c792ea}.chapitre pre .fn{color:#82aaff}.chapitre pre .co{color:#7f8c9b}.chapitre pre .st{color:#c3e88d}
.chapitre table.suite{border-collapse:collapse;margin:12px 0;font-size:.9rem}
.chapitre table.suite td,.chapitre table.suite th{border:1px solid var(--o-200);padding:6px 14px;text-align:center}
.chapitre table.suite th{background:var(--o-100);color:var(--o-800)}
.chapitre .deux-fig{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chapitre .deux-fig figure{flex:1;min-width:240px;margin:8px 0}
.chapitre figure svg{max-width:100%;height:auto;background:#fff;border:1px solid var(--o-100);border-radius:10px}
.date-cle,.chiffre-cle{background:#fdf8ed;border-left:4px solid #c9a15a}
.date-cle strong:first-child,.chiffre-cle strong:first-child{color:#7a5a1c;display:block;margin-bottom:4px}
.vocabulaire{background:#f7f6fb;border-left:4px solid #8a80bd}
.vocabulaire strong:first-child{color:#4a4180;display:block;margin-bottom:4px}
.portrait,.artiste{background:var(--g-50);border-left:4px solid var(--g-600)}
.portrait strong:first-child,.artiste strong:first-child{color:var(--g-800);display:block;margin-bottom:4px}
.experience{background:#f8f5fb;border-left:4px solid #9a7ab8}
.experience strong:first-child{color:#5f4578;display:block;margin-bottom:4px}
.source{background:#fcfaf7;border:1px solid var(--o-200);border-left:4px solid var(--o-500);border-radius:0 10px 10px 0;padding:14px 17px;margin:14px 0;font-family:Georgia,serif;font-style:italic;color:#4a3d33;font-size:.92rem}
.source strong:first-child{color:var(--o-800);font-style:normal;display:block;margin-bottom:5px;font-family:var(--font-body)}
.source .auteur{display:block;text-align:right;font-size:.8rem;color:var(--muted);margin-top:6px;font-style:normal}
.etapes{counter-reset:etape;list-style:none;margin:12px 0;padding:0}
.etapes li{counter-increment:etape;position:relative;padding:10px 14px 10px 46px;margin-bottom:8px;background:var(--g-50);border-radius:10px;border-left:4px solid var(--g-500);font-size:.9rem}
.etapes li::before{content:counter(etape);position:absolute;left:12px;top:10px;width:24px;height:24px;background:var(--g-600);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem}
.formule{background:#fff;border:1.5px dashed var(--o-300);border-radius:10px;padding:12px 16px;text-align:center;font-weight:700;color:var(--o-800);margin:14px 0;font-size:1rem;font-family:Georgia,serif}
.illustration{background:var(--o-50);border:2px solid var(--o-200);border-radius:12px;padding:14px;margin:14px 0;text-align:center}
.illustration svg{display:block;width:min(100%,405px);height:auto;max-height:329px;margin:0 auto}
.illustration img{max-width:100%;max-height:360px;width:auto;height:auto;margin:0 auto;border-radius:8px;display:block;object-fit:contain}
.illustration figcaption{margin-top:8px;font-size:.8rem;color:var(--muted);font-style:italic}
.illustration .credit-photo{display:block;margin-top:2px;font-size:.7rem;color:var(--muted);font-style:normal;opacity:.8}
.illustration .credit-photo a{color:inherit;text-decoration:underline}
.illustration .duo-photos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.illustration .duo-photos .duo-item{flex:1;min-width:150px;max-width:220px}
.illustration .duo-photos .duo-item img{width:100%;height:150px;object-fit:cover;border-radius:8px}
.illustration .duo-photos .duo-item span{display:block;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--o-800)}
.chapitre table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.86rem}
.chapitre th,.chapitre td{border:1px solid var(--o-200);padding:8px 10px;text-align:left}
.chapitre th{background:var(--o-700);color:#fff;font-weight:700;text-align:center}
.chapitre tbody tr:nth-child(even){background:var(--o-50)}
.lexique{background:var(--o-50);border-radius:12px;padding:16px 20px;margin:16px 0;border:1px solid var(--o-200)}
.lexique h4{color:var(--o-800);margin-bottom:10px}
.lexique dt{font-weight:800;color:var(--g-700);margin-top:8px;font-size:.9rem}
.lexique dd{margin-left:16px;margin-bottom:3px;font-size:.88rem}
.cours-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:2px solid var(--o-100)}
.pq-titre{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--o-800);margin-bottom:4px;display:flex;align-items:center;gap:6px;position:sticky;top:-24px;background:#fff;padding:24px 0 8px;z-index:5}
.pq-sous{color:var(--muted);font-size:.78rem;margin-bottom:14px}
.pq-item{border:2px solid var(--o-100);border-radius:12px;padding:13px 15px;margin-bottom:14px;background:var(--o-50)}
.pq-item .pq-chap{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--o-600);font-weight:800;margin-bottom:4px}
.pq-item .pq-q{font-weight:700;font-size:.86rem;color:var(--ink);margin-bottom:8px}
.pq-item .pq-toggle{width:100%;text-align:left;background:var(--o-100);border:0;padding:7px 10px;border-radius:8px;font-weight:700;font-size:.76rem;color:var(--o-700);cursor:pointer;margin-bottom:6px}
.pq-item .pq-toggle:hover{background:var(--o-200)}
.pq-item .pq-toggle.pq-toggle-methode{background:var(--blue-fonce);color:#fff}
.pq-item .pq-toggle.pq-toggle-methode:hover{background:#2c68a0}
.pq-methode{margin-top:6px;padding:0;background:#eef4fd;border-radius:10px;border:1.5px solid #c7dcf0;overflow:hidden}
.pq-methode-titre{background:var(--blue-fonce);color:#fff;font-weight:800;font-size:.75rem;padding:7px 11px;text-transform:uppercase;letter-spacing:.03em}
.pq-methode ol{counter-reset:etm;list-style:none;margin:0;padding:10px 11px}
.pq-methode li{counter-increment:etm;position:relative;padding:6px 8px 6px 30px;margin-bottom:6px;font-size:.79rem;line-height:1.45;color:#1c3d5c}
.pq-methode li::before{content:counter(etm);position:absolute;left:0;top:6px;width:19px;height:19px;background:var(--blue-fonce);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.68rem}
.pq-item .pq-rep{margin-top:8px;padding:10px 12px;background:var(--g-50);border-left:3px solid var(--g-500);border-radius:0 8px 8px 0;font-size:.83rem;color:var(--g-900)}
.pq-item .pq-rep strong{color:var(--g-700)}
.pq-vide{text-align:center;color:var(--muted);font-size:.85rem;padding:30px 10px}
.quiz-page{max-width:820px;margin:0 auto;padding:32px 24px 80px}
.quiz-page-header{text-align:center;margin-bottom:26px}
.quiz-page-header h1{color:var(--o-900);font-size:1.7rem}
.quiz-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:10px}
.quiz-tuile{background:#fff;border:2px solid var(--o-100);border-radius:14px;padding:18px;text-align:center;cursor:pointer;transition:.15s;box-shadow:var(--shadow-sm)}
.quiz-tuile:hover{border-color:var(--o-400);transform:translateY(-2px)}
.quiz-tuile.fait{border-color:var(--g-400);background:var(--g-50)}
.quiz-tuile .num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--o-700)}
.quiz-tuile .lbl{font-size:.8rem;color:var(--muted);margin:4px 0 10px}
.quiz-tuile .note-badge{display:inline-block;font-weight:800;font-size:.85rem;padding:5px 12px;border-radius:999px;background:var(--g-100);color:var(--g-700)}
.quiz-tuile .note-badge.faible{background:#fdecea;color:#9c2a22}
.quiz-tuile .note-badge.moyen{background:#fff3d6;color:#8a5a00}
.quiz-card{background:#fff;border:2px solid var(--o-100);border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.quiz-num{display:inline-flex;width:26px;height:26px;background:var(--o-600);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;margin-right:8px}
.quiz-q{font-weight:800;color:var(--o-800);margin-bottom:12px;font-size:.96rem}
.quiz-options label{display:block;padding:10px 13px;margin:6px 0;background:var(--o-50);border-radius:10px;cursor:pointer;border:2px solid transparent;font-size:.88rem;transition:.15s}
.quiz-options label:hover{background:var(--o-100)}
.quiz-options input{margin-right:8px}
.quiz-options label.correct{background:var(--g-100)!important;border-color:var(--g-500)!important}
.quiz-options label.incorrect{background:#fdecea!important;border-color:var(--danger)!important}
/* La réponse SÉLECTIONNÉE (avant de valider) ressort nettement : toute
   la ligne passe en violet plein, bien plus visible qu'un simple rond
   coché — au clic comme au toucher. La classe .choisie est posée par
   quiz.js ; « :has(input:checked) » fait la même chose sans script sur
   les navigateurs récents, par sécurité. On n'applique ce violet que
   TANT QUE la réponse n'est pas corrigée : une fois validée, le vert
   (correct) ou le rouge (incorrect) reprend la main. */
.quiz-options label.choisie:not(.correct):not(.incorrect),
.quiz-options label:has(input:checked):not(.correct):not(.incorrect){
  background:var(--o-600);
  border-color:var(--o-800);
  color:#fff;
  font-weight:700;
  box-shadow:0 6px 18px -6px rgba(124,58,237,.55)}
.quiz-options label.choisie:not(.correct):not(.incorrect):hover,
.quiz-options label:has(input:checked):not(.correct):not(.incorrect):hover{
  background:var(--o-700)}
/* La pastille du bouton radio se voit aussi sur le fond violet. */
.quiz-options label.choisie:not(.correct):not(.incorrect) input,
.quiz-options label:has(input:checked):not(.correct):not(.incorrect) input{
  accent-color:#fff}
.quiz-feedback{margin-top:8px;padding:8px 12px;border-radius:8px;font-weight:700;font-size:.82rem}
.quiz-feedback.ok{background:var(--g-100);color:var(--g-800)}
.quiz-feedback.ko{background:#fdecea;color:#9c2a22}
.quiz-submit{display:block;width:100%;max-width:380px;margin:24px auto;padding:14px 22px;background:var(--o-600);color:#fff;border:0;border-radius:12px;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(242,102,29,.28)}
.quiz-submit:hover{background:var(--o-700);transform:translateY(-1px)}
.quiz-submit:disabled{background:#b8ada4;cursor:not-allowed;transform:none}
.quiz-score{display:none;text-align:center;padding:26px;margin:22px auto;background:#fff;border-radius:16px;box-shadow:var(--shadow-md);max-width:440px}
.quiz-score h2{font-size:1.5rem;color:var(--o-800)}
.quiz-score .score-value{font-size:2.6rem;font-weight:800;color:var(--o-700);font-family:var(--font-head)}
.quiz-score .note-sur-20{font-size:1.1rem;font-weight:700;color:var(--g-700);margin-top:4px}
.quiz-score .score-bar{height:11px;background:var(--o-100);border-radius:999px;margin:14px 0;overflow:hidden}
.quiz-score .score-bar-fill{height:100%;background:var(--g-600);border-radius:999px;transition:width .7s ease}
.locked-wrap{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:60px 20px}
.locked-card{max-width:560px;width:100%;text-align:center;padding:40px 36px;background:#fff;border-radius:18px;box-shadow:var(--shadow-md)}
/* Pied clair, comme le reste du site : un aplat brun foncé en bas de
   chacune des 374 pages tirait l'œil vers le bas sans rien apporter. */
.footer{background:var(--o-50);color:var(--muted);padding:30px 24px;text-align:center;
  font-size:.82rem;border-top:1px solid var(--o-200)}
.footer a{color:var(--o-800);font-weight:600}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:5px;color:var(--o-800)}
.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--o-200);border-radius:10px;background:#fff;font-size:.92rem;margin-bottom:12px;font-family:inherit;resize:vertical}
.field textarea:focus{outline:none;border-color:var(--o-500);box-shadow:0 0 0 3px var(--o-100)}
.field input,.field select{width:100%;padding:11px 13px;border:1.5px solid var(--o-200);border-radius:10px;background:#fff;font-size:.92rem;margin-bottom:12px;font-family:inherit}
.field input:focus,.field select:focus{outline:none;border-color:var(--o-500);box-shadow:0 0 0 3px var(--o-100)}
.auth-wrap{min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-box{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:34px 32px;box-shadow:var(--shadow-md)}
.notice{padding:12px 14px;border-radius:10px;background:#fff3d6;color:#8a5a00;font-size:.85rem;font-weight:600;margin-bottom:14px}
.notice.error{background:#fdecea;color:#9c2a22}
.notice.success{background:var(--g-100);color:var(--g-800)}
.admin-shell{max-width:1200px;margin:0 auto;padding:30px 24px 70px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}
.admin-stat{background:#fff;border:2px solid var(--o-100);border-radius:14px;padding:18px;text-align:center}
.admin-stat .val{font-family:var(--font-head);font-weight:800;font-size:1.7rem;color:var(--o-700)}
.admin-stat .lbl{color:var(--muted);font-size:.8rem}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.admin-table th{background:var(--o-700);color:#fff;padding:11px 14px;text-align:left;font-size:.82rem}
.admin-table td{padding:11px 14px;border-bottom:1px solid var(--o-100);font-size:.86rem}
.admin-table tr:hover td{background:var(--o-50)}
.tag-role{padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:800}
.tag-role.eleve{background:var(--o-100);color:var(--o-700)}
.tag-role.admin{background:var(--g-100);color:var(--g-700)}
@media(max-width:980px){
  .cours-shell{grid-template-columns:1fr;height:auto;overflow:visible}
  /* La colonne du cours n'est plus un conteneur de défilement : c'est la
     PAGE qui défile. Sans cela, sur mobile, cliquer un lien du sommaire
     (#ch1…) ne déplaçait rien — le navigateur « défilait » une colonne
     qui n'avait pas de débordement. Maintenant les ancres fonctionnent. */
  .panneau-cours{overflow:visible;height:auto}
  /* On laisse de la place sous la barre fixe du haut quand on saute à un
     chapitre, pour que son titre ne passe pas dessous. */
  .chapitre{scroll-margin-top:76px}
  .panneau-questions{border-left:0;border-top:2px solid var(--o-100)}
  /* --- Anti-debordement horizontal sur mobile ---------------------------
     Un element large (tableau de numeration a 7 colonnes, bloc de code,
     formule longue) ne doit jamais elargir toute la page. On autorise les
     panneaux a retrecir sous la largeur de leur contenu (min-width:0), et
     les elements larges defilent DANS leur propre cadre. Repare l'affichage
     des cours dans l'app iOS/Android et sur le web mobile. */
  .cours-shell,.panneau-cours,.panneau-questions{min-width:0}
  .panneau-cours table,.panneau-questions table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panneau-cours pre,.panneau-cours code,.panneau-cours .formule,.chapitre pre,.chapitre code,.chapitre .formule{max-width:100%;overflow-x:auto}
  .panneau-cours,.panneau-questions,.chapitre{overflow-wrap:break-word;word-break:break-word}
  .chapitre img,.chapitre svg,.panneau-cours img,.panneau-cours svg{max-width:100%;height:auto}
  .grille-matieres{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .grille-matieres{grid-template-columns:1fr}
  .navlink{display:none}
  .panneau-cours{padding:20px 16px 60px}.chapitre{padding:18px}
  .row{flex-wrap:wrap}
  /* Cartes matières plus larges et noms longs coupés proprement. */
  .subject-card h4,.carte-matiere h3{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
  .subject-card,.carte-matiere{min-width:0}
}
@media print{
  .nav,.footer,.cours-nav,.sommaire,.panneau-questions,.barre-outils{display:none!important}
  .cours-shell{grid-template-columns:1fr;height:auto;overflow:visible;display:block}
  .panneau-cours{overflow:visible;padding:0}
  .chapitre{box-shadow:none;border:0;page-break-inside:avoid}
  .cours-page{max-width:100%;padding:0}
  .rep{display:block!important}
}

/* ---------- Fiches de revision (pages "questions-6e-*") ---------- */
.cours-page{max-width:960px;margin:0 auto;padding:34px 24px 80px}
.barre-outils{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.bloc-questions{background:#fff;border:1px solid var(--o-100);border-radius:18px;box-shadow:var(--shadow-sm);padding:28px;margin-bottom:26px}
.bloc-questions h2{font-size:1.38rem;color:var(--o-800);border-bottom:3px solid var(--o-100);padding-bottom:10px;margin-bottom:6px}
.bloc-questions .compteur{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.question-item{border:1px solid var(--o-100);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--o-50)}
.question-item .entete{display:flex;align-items:flex-start;gap:10px}
.num-q{display:inline-flex;width:28px;height:28px;background:var(--o-600);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:.84rem;flex:none;margin-top:2px}
.txt-q{font-weight:600;flex:1}
.rep{margin-top:10px;padding:12px 14px;background:var(--g-50);border-left:4px solid var(--g-500);border-radius:0 10px 10px 0;font-size:.92rem}
.rep strong{color:var(--g-700)}

/* ---------- Espace eleve et administration (moteur multi-niveaux) ---------- */
.small-muted{color:var(--muted);font-size:.85rem}
.grid{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:12px}
.card{background:#fff;border:1px solid var(--o-100);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.card.hoverable{transition:transform .2s ease,box-shadow .2s ease}.card.hoverable:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.icon-tile{width:50px;height:50px;border-radius:14px;background:var(--o-100);color:var(--o-700);display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex:none}
.icon-tile svg{width:26px;height:26px}
.icon-mini{display:inline-flex;width:18px;height:18px;vertical-align:-4px}.icon-mini svg{width:100%;height:100%}
.badge.dark{background:var(--o-700);color:#fff}.badge.green.dark{background:var(--g-600);color:#fff}
.badge.premium{background:var(--o-700);color:#fff}
/* Inscription venue de l'étranger : signalée, pas condamnée. */
.badge.etranger{background:var(--o-200);color:var(--o-900)}
.select{width:100%;padding:12px 14px;border:1.5px solid var(--o-200);border-radius:12px;background:#fff;font-weight:700;color:var(--o-800);margin-bottom:6px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2661d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.select:disabled{background-color:var(--o-50);color:var(--muted);cursor:not-allowed}
.app-shell{display:grid;grid-template-columns:270px 1fr 340px;min-height:calc(100vh - var(--nav-h))}
.app-side{padding:26px 20px;background:#fff;border-right:1px solid var(--o-100);overflow-y:auto}
.app-main{padding:32px;overflow-y:auto}
.app-chat{padding:24px;background:#fff;border-left:1px solid var(--o-100);display:flex;flex-direction:column}
.catalog-head{margin-bottom:18px}.catalog-head h2{font-size:1.4rem;color:var(--o-800);margin-bottom:4px}
.lesson-catalog-list{display:flex;flex-direction:column;gap:12px}
.lesson-catalog-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-radius:18px;border:2px solid var(--o-100);background:#fff;cursor:pointer;transition:.15s}
.lesson-catalog-card:hover{border-color:var(--o-400);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.lesson-catalog-card.done{border-color:var(--g-300);background:var(--g-50)}.lesson-catalog-card.locked{background:var(--o-50);opacity:.92}
.lesson-catalog-card .lc-title{font-weight:800;color:var(--o-800);font-size:1.02rem}.lesson-catalog-card .lc-sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.done-check{display:inline-flex;align-items:center;gap:6px;color:var(--g-700);font-weight:800;font-size:.85rem;background:var(--g-100);padding:6px 12px;border-radius:999px}
.lock-badge{display:inline-flex;align-items:center;gap:6px;color:var(--o-700);font-weight:800;font-size:.8rem;background:var(--o-100);padding:6px 12px;border-radius:999px}
.lesson-list{display:flex;flex-direction:column;gap:8px}
.lesson-btn{text-align:left;padding:12px 14px;border-radius:12px;border:1.5px solid transparent;background:var(--o-50);font-weight:700;color:var(--o-800);cursor:pointer;font-size:.92rem}
.lesson-btn:hover{background:var(--o-100)}.lesson-btn.active{background:var(--o-100);border-color:var(--o-400)}
.submenu{display:flex;flex-direction:column;gap:6px;margin:4px 0 4px 10px;padding-left:10px;border-left:2px solid var(--o-200)}
.submenu-item{text-align:left;padding:9px 12px;border-radius:10px;border:1px solid transparent;background:transparent;font-weight:600;color:var(--o-800);cursor:pointer;font-size:.85rem}
.submenu-item:hover{background:var(--o-100)}.submenu-item.active{background:var(--o-100);border-color:var(--o-400)}
.premium-teaser{text-align:center;padding:56px 30px;background:var(--o-50);border:1px solid var(--o-200)}
.premium-teaser .lock-emoji{font-size:3rem;margin-bottom:10px}
.subject-card{cursor:pointer;text-align:left;border:2px solid var(--o-100)}
.subject-card h4{margin:0 0 4px;font-size:1rem;color:var(--o-800)}.subject-card span{color:var(--muted);font-size:.8rem}
.chatlog{flex:1;overflow-y:auto;background:var(--o-50);border-radius:16px;padding:14px;margin-bottom:14px;min-height:280px}
.msg{padding:11px 14px;border-radius:14px;margin:8px 0;font-size:.92rem;max-width:92%}
.msg.user{background:var(--o-600);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.ai{background:#fff;border:1px solid var(--o-100);margin-right:auto;border-bottom-left-radius:4px}
.chat-input{display:flex;flex-direction:column;gap:10px}
.chat-input textarea{width:100%;padding:12px 14px;border:1.5px solid var(--o-200);border-radius:14px;resize:vertical;font-family:inherit}
.chat-input textarea:focus{outline:none;border-color:var(--o-500);box-shadow:0 0 0 4px var(--o-100)}
.tablewrap{overflow-x:auto;border-radius:18px}
table.users{width:100%;border-collapse:collapse;background:#fff;min-width:1080px}
table.users thead th{text-align:left;padding:14px 16px;background:var(--o-800);color:var(--o-100);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
table.users thead th:first-child{border-top-left-radius:16px}table.users thead th:last-child{border-top-right-radius:16px}
table.users td{padding:13px 16px;border-bottom:1px solid var(--o-100);font-size:.88rem;vertical-align:middle}
table.users tbody tr:hover{background:var(--o-50)}
.pill{padding:4px 10px;border-radius:999px;font-weight:800;font-size:.72rem}
.pill.trial{background:#fff1cf;color:#8a6100}.pill.active{background:var(--g-100);color:var(--g-700)}
.pill.pending{background:#e3ecfb;color:#28479c}.pill.blocked{background:#fdecea;color:#9c2a22}
.progress-chip{display:inline-flex;align-items:center;gap:6px;background:var(--g-100);color:var(--g-700);padding:4px 10px;border-radius:999px;font-weight:800;font-size:.78rem;cursor:pointer}
.progress-chip:hover{background:var(--g-200)}
.actions-cell{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
/* Quatre boutons par ligne d'élève : sans largeur minimale, ils
   s'empilent en colonne et chaque ligne du tableau double de hauteur. */
.users td.actions-cell{min-width:270px}
.drawer-overlay{position:fixed;inset:0;background:rgba(43,33,24,.45);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.drawer{background:#fff;border-radius:24px;max-width:640px;width:100%;padding:30px;box-shadow:var(--shadow-md);position:relative}
.drawer h3{color:var(--o-800);margin-bottom:4px}
.drawer-section{margin-top:18px}.drawer-section h4{font-size:.82rem;text-transform:uppercase;color:var(--g-700);letter-spacing:.04em;margin-bottom:10px}
.progress-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--o-100);font-size:.88rem}
.notif-item{padding:10px 0;border-bottom:1px solid var(--o-100);font-size:.85rem}
.notif-item .notif-status{font-weight:800;font-size:.72rem;padding:3px 8px;border-radius:999px;margin-right:8px}
.notif-status.envoye{background:var(--g-100);color:var(--g-700)}.notif-status.simule{background:#fff1cf;color:#8a6100}
.notif-status.erreur,.notif-status.sans_destinataire{background:#fdecea;color:#9c2a22}
.btn.admin-tab{opacity:.55}.btn.admin-tab.active{opacity:1}

/* ---------- Administration : recherche d'un élève ---------- */
.recherche-eleves{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.champ-recherche{position:relative;flex:1 1 320px;min-width:0;display:flex;align-items:center}
.champ-recherche .loupe{position:absolute;left:13px;font-size:.92rem;pointer-events:none;opacity:.6}
.champ-recherche input{width:100%;font:inherit;font-size:.9rem;padding:11px 38px 11px 38px;
  border:1.5px solid var(--o-200);border-radius:11px;background:#fff;color:var(--ink)}
.champ-recherche input:focus{outline:2px solid var(--o-500);outline-offset:-1px;border-color:var(--o-500)}
.champ-recherche input::-webkit-search-cancel-button{display:none}
.champ-recherche .vider{position:absolute;right:9px;width:24px;height:24px;border:0;border-radius:50%;
  background:var(--o-100);color:var(--o-700);cursor:pointer;font-size:.72rem;line-height:1}
.champ-recherche .vider:hover{background:var(--o-200)}
.recherche-eleves select{font:inherit;font-size:.86rem;padding:11px 12px;border:1.5px solid var(--o-200);
  border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}
.recherche-eleves select:focus{outline:2px solid var(--o-500);outline-offset:-1px}

/* ---------- Administration : suppression d'un compte ---------- */
.drawer-suppression{max-width:560px;border-top:4px solid var(--danger)}
.notice.notice-danger{background:#fdecea;color:#9c2a22}
.liste-suppression{list-style:none;margin:0;padding:0}
.liste-suppression li{padding:7px 0;border-bottom:1px solid var(--o-100);font-size:.86rem;color:var(--ink)}
.liste-suppression li:last-child{border-bottom:0}
.liste-suppression b{color:var(--danger);font-size:.95rem;min-width:24px;display:inline-block}
.champ-confirmation{width:100%;font:inherit;font-size:.9rem;padding:11px 13px;
  border:1.5px solid var(--o-200);border-radius:11px;background:#fff;color:var(--ink)}
.champ-confirmation:focus{outline:2px solid var(--danger);outline-offset:-1px;border-color:var(--danger)}
.erreur-suppression{color:var(--danger)!important;font-weight:700;margin-top:8px}

/* lu par les lecteurs d'écran, invisible à l'œil */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.app-side,.app-chat{border:0;border-bottom:1px solid var(--o-100)}}

/* ---------- Ancien moteur multi-niveaux : contenu des pages de cours ---------- */
/* Gabarit documente dans GUIDE-MODIFICATION.md (.partie / .encadre-* / .methode-head) */
.partie{margin:0 0 34px}
.partie-titre{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--o-800);border-bottom:3px solid var(--o-100);padding-bottom:10px;margin-bottom:16px}
.sous-titre{font-weight:800;color:var(--g-700);margin:18px 0 6px;font-size:1rem}
.label{font-weight:800;display:block;margin-bottom:5px}
.encadre-def,.encadre-prop,.encadre-exemple,.encadre-remarque,.encadre-attention,.encadre-astuce,.encadre-date,.encadre-vocab,.encadre-portrait{
  padding:16px 20px;margin:16px 0;border-radius:0 12px 12px 0}
.encadre-def{background:var(--o-50);border-left:5px solid var(--o-600)}.encadre-def .label{color:var(--o-800)}
.encadre-prop{background:var(--g-50);border-left:5px solid var(--g-600)}.encadre-prop .label{color:var(--g-800)}
.encadre-exemple{background:#eef4fd;border-left:5px solid var(--blue)}.encadre-exemple .label{color:#1c5a94}
.encadre-remarque{background:#fffaf5;border-left:5px solid var(--o-400)}.encadre-remarque .label{color:var(--o-700)}
.encadre-attention{background:#fdf0e8;border-left:5px solid #e2703a}.encadre-attention .label{color:#b4471a}
.encadre-astuce{background:var(--g-100);border-left:5px solid var(--g-500)}.encadre-astuce .label{color:var(--g-800)}
.encadre-date{background:#fff6e5;border-left:5px solid #d9a441}.encadre-date .label{color:#8a5a00}
.encadre-vocab{background:#f2f0fa;border-left:5px solid #7a6bc4}.encadre-vocab .label{color:#4a3d91}
.encadre-portrait{background:var(--g-50);border-left:5px solid var(--g-600)}.encadre-portrait .label{color:var(--g-800)}
.source-hist{background:#fcfaf7;border:1px solid var(--o-200);border-left:4px solid var(--o-500);border-radius:0 10px 10px 0;padding:16px 20px;margin:16px 0;font-family:Georgia,serif;font-style:italic;color:#4a3d33}
.source-hist .label{font-style:normal;color:var(--o-800)}
.source-hist .auteur{display:block;text-align:right;font-size:.85rem;color:var(--muted);margin-top:8px;font-style:normal}
.methode-head{background:var(--o-100);padding:12px 18px;border-radius:14px 14px 0 0;font-weight:800;color:var(--o-800);font-family:var(--font-head)}
.methode-body{padding:18px 20px;background:#fff;border:2px solid var(--o-200);border-top:0;border-radius:0 0 14px 14px;margin-bottom:18px}
.methode-enonce{background:var(--o-50);border-radius:10px;padding:14px 16px;margin-bottom:14px;font-weight:600}
.methode-correction{background:var(--g-50);border-left:4px solid var(--g-500);border-radius:0 10px 10px 0;padding:14px 16px}
.methode-correction .label{color:var(--g-700)}
.exercice{background:#fffdf5;border:2px solid var(--o-300);border-radius:14px;padding:18px 20px;margin:18px 0}
.correction-bloc{margin-top:12px;padding:14px 16px;background:var(--g-50);border-left:4px solid var(--g-500);border-radius:0 10px 10px 0;font-size:.93rem;color:var(--g-900)}

/* ---------- Page d'accueil : landing marketing ---------- */
.navlink.actif{background:var(--o-100)}
.hero-landing{background:var(--o-50)}
.hero-landing .wrap{max-width:1300px;margin:0 auto;padding:64px 24px 30px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-landing h1{font-size:clamp(2.1rem,4.2vw,3.15rem);color:var(--o-900);line-height:1.12;margin:18px 0}
.hero-landing h1 .accent{color:var(--g-600)}
.hero-landing .lead{color:var(--muted);font-size:1.08rem;max-width:520px;margin:0 0 26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.86rem}
.hero-trust b{color:var(--o-700)}
.hero-illustration svg{width:100%;height:auto;filter:drop-shadow(0 22px 46px rgba(122,46,10,.16))}
.section-landing{padding:64px 24px;max-width:1280px;margin:0 auto}
.section-landing.alt{background:#fff}
.section-landing-head{max-width:640px;margin:0 auto 36px;text-align:center}
.section-landing-head .badge{margin-bottom:14px}
.section-landing-head h2{font-size:clamp(1.55rem,3vw,2.15rem);color:var(--o-900)}
.section-landing-head p{color:var(--muted);font-size:1rem}
.filieres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.filiere-card{background:#fff;border:2px solid var(--o-100);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:12px;transition:.15s}
.filiere-card:hover{border-color:var(--o-300);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.filiere-card .emo{font-size:1.5rem;flex:none}
.filiere-card .nom{font-weight:700;color:var(--o-800);font-size:.88rem;line-height:1.3}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:0 auto}
.pricing-card{background:#fff;border:2px solid var(--o-100);border-radius:22px;padding:34px 30px;text-align:center;position:relative}
.pricing-card.featured{border-color:var(--o-500);box-shadow:var(--shadow-md)}
.pricing-card .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%)}
.pricing-card h3{color:var(--o-800);font-size:1.05rem;margin-bottom:6px}
.pricing-card .prix{font-family:var(--font-head);font-weight:800;font-size:2.3rem;color:var(--o-800);margin:8px 0}
.pricing-card .prix small{font-size:.95rem;color:var(--muted);font-weight:700}
.pricing-list{list-style:none;padding:0;margin:20px 0 24px;text-align:left;display:flex;flex-direction:column;gap:10px}
.pricing-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink)}
.pricing-list li .ok{color:var(--g-600);font-weight:800;flex:none}
.pricing-list li > span:not(.ok){display:block}
@media(max-width:980px){
  .hero-landing .wrap{grid-template-columns:1fr}
  .hero-illustration{order:-1;max-width:420px;margin:0 auto}
  .pricing-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

/* ---------- Arborescence du programme (pages/programme.html) ---------- */
.programme-shell{max-width:1200px;margin:0 auto;padding:30px 24px 80px}
.fil-ariane{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:22px}
.fil-ariane a{color:var(--o-700);font-weight:700}
.fil-ariane a:hover{text-decoration:underline}
.fil-ariane .sep{color:var(--o-300)}
.fil-ariane .actuel{color:var(--o-900);font-weight:800}
.programme-head{margin-bottom:30px}
.programme-head h1{font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--o-900);margin-bottom:6px}
.programme-head p{color:var(--muted)}
.niveau-pill{display:inline-block;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;margin-top:8px}
.niveau-pill.pret{background:var(--g-100);color:var(--g-700)}
.niveau-pill.attente{background:var(--o-100);color:var(--o-700)}
.chapitre-num{display:inline-flex;width:26px;height:26px;flex:none;background:var(--o-600);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:.76rem;margin-right:12px}

/* ---------- Verrouillage du contenu premium (essai gratuit vs illimite) ---------- */
.contenu-verrouille{position:relative;overflow:hidden}
.contenu-verrouille>*:not(.verrou-overlay){pointer-events:none;user-select:none}
.contenu-verrouille.taille-chapitre{max-height:190px}
.contenu-verrouille.taille-bloc{max-height:150px}
.contenu-verrouille.taille-cours{max-height:420px}
.verrou-overlay{position:absolute;left:0;right:0;bottom:0;top:0;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--o-50) 62%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;pointer-events:auto}
.verrou-carte{background:#fff;border:2px solid var(--o-300);border-radius:16px;padding:16px 22px;text-align:center;box-shadow:var(--shadow-md);max-width:340px}
.verrou-carte .cadenas{font-size:1.4rem}
.verrou-carte p{color:var(--o-800);font-weight:700;margin:6px 0 12px;font-size:.88rem;line-height:1.4}
.sommaire a.verrouille{opacity:.65}
.sommaire a.verrouille::after{content:" 🔒";font-size:.7em}
.quiz-tuile.verrouillee{position:relative;opacity:.72;cursor:pointer}
.quiz-tuile.verrouillee::after{content:"🔒";position:absolute;top:10px;right:12px;font-size:1rem}
.bloc-questions.contenu-verrouille .verrou-overlay{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 70%)}

/* ---------- Verrou pose par le serveur (contenu reellement absent) ---------- */
.chapitre-verrouille,.partie-verrouillee{background:var(--o-50);
  border:2px dashed var(--o-300);border-radius:16px;padding:22px 24px;margin:18px 0}
.chapitre-verrouille h2,.partie-verrouillee .partie-titre{color:var(--o-800);font-size:1.05rem;
  margin:0 0 10px;border:0;padding:0}
.verrou-serveur{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.verrou-serveur .cadenas{font-size:1.5rem}
.verrou-serveur p{color:var(--o-800);font-weight:600;font-size:.88rem;line-height:1.5;margin:0;max-width:520px}
.liste-verrouillee{list-style:none;padding:0;margin:6px 0 4px;display:flex;flex-wrap:wrap;
  gap:6px 8px;justify-content:center;max-width:640px}
.liste-verrouillee li{background:#fff;border:1px solid var(--o-200);border-radius:999px;
  padding:4px 11px;font-size:.79rem;font-weight:600;color:var(--muted)}
.liste-verrouillee li::before{content:"🔒 ";font-size:.85em}
@media(max-width:620px){.chapitre-verrouille,.partie-verrouillee{padding:16px 14px}}

/* ---- Page d'accueil promotionnelle ---- */
.bandeau-promo{background:var(--o-700);color:#fff;text-align:center;
  padding:11px 20px;font-size:.88rem;font-weight:700;display:flex;justify-content:center;align-items:center;
  gap:10px;flex-wrap:wrap}
.bandeau-promo b{font-weight:800}
.bandeau-promo a{color:#fff;text-decoration:underline;font-weight:800;white-space:nowrap}

.hero-landing .prix-accroche{display:inline-flex;align-items:baseline;gap:8px;background:var(--g-100);
  color:var(--g-800);border:1.5px solid var(--g-300);border-radius:999px;padding:7px 16px;
  font-size:.85rem;font-weight:800;margin-bottom:18px}
.hero-landing .prix-accroche b{font-size:1.05rem}
.hero-note{color:var(--muted);font-size:.82rem;margin:-8px 0 22px}

.avantages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.avantage{background:#fff;border:2px solid var(--o-100);border-radius:18px;padding:26px 24px;
  transition:.2s;box-shadow:var(--shadow-sm)}
.avantage:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--o-300)}
.avantage .ico{font-size:1.9rem;margin-bottom:10px}
.avantage h3{color:var(--o-800);font-size:1.06rem;margin-bottom:7px}
.avantage p{color:var(--muted);font-size:.9rem;margin:0}

.etapes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;
  counter-reset:etape}
.etape{position:relative;background:var(--o-50);border:2px solid var(--o-100);border-radius:18px;
  padding:30px 24px 24px}
.etape::before{counter-increment:etape;content:counter(etape);position:absolute;top:-18px;left:24px;
  width:38px;height:38px;border-radius:50%;background:var(--o-600);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;
  font-size:1.15rem;box-shadow:0 6px 16px rgba(242,102,29,.3)}
.etape h3{color:var(--o-800);font-size:1.04rem;margin-bottom:6px}
.etape p{color:var(--muted);font-size:.89rem;margin:0}

.pricing-grid.trois{grid-template-columns:repeat(3,1fr);max-width:1060px;align-items:stretch}
.pricing-grid.trois .pricing-card{display:flex;flex-direction:column}
.pricing-grid.trois .pricing-list{flex:1}
.pricing-card.vedette{border-color:var(--g-600);box-shadow:var(--shadow-md);
  background:var(--g-50)}
.pricing-card .prix-avant{font-size:1rem;color:var(--muted);text-decoration:line-through;
  font-weight:700;display:block;margin-bottom:-4px}
.pricing-card .prix-detail{color:var(--g-700);font-weight:800;font-size:.86rem;margin:-4px 0 4px}
.eco-badge{display:inline-block;background:var(--g-600);color:#fff;border-radius:999px;
  padding:4px 12px;font-size:.74rem;font-weight:800;margin-bottom:10px}
.pricing-card .sous-prix{color:var(--muted);font-size:.8rem;margin-top:12px}

.faq-liste{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:2px solid var(--o-100);border-radius:14px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:16px 20px;font-weight:800;color:var(--o-800);
  font-size:.95rem;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--o-600);font-weight:800;flex:none}
.faq-item[open] summary::after{content:'−'}
.faq-item[open] summary{border-bottom:1px solid var(--o-100)}
.faq-item .reponse{padding:14px 20px 18px;color:var(--muted);font-size:.91rem}
.faq-item .reponse p{margin:0 0 10px}
.faq-item .reponse p:last-child{margin-bottom:0}

.cta-final{background:var(--g-800);color:#fff;border-radius:24px;
  padding:52px 36px;text-align:center;max-width:900px;margin:0 auto}
.cta-final h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px;color:#fff}
.cta-final p{color:rgba(255,255,255,.9);font-size:1rem;max-width:560px;margin:0 auto 26px}
.cta-final .btn{background:#fff;color:var(--g-800);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cta-final .btn:hover{background:var(--o-50)}
.cta-final .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cta-final .btn.ghost:hover{background:rgba(255,255,255,.12)}
.cta-final .rassurance{margin-top:18px;font-size:.83rem;color:rgba(255,255,255,.8)}

@media(max-width:1000px){ .avantages-grid{grid-template-columns:1fr 1fr} }
@media(max-width:900px){
  .pricing-grid.trois{grid-template-columns:1fr;max-width:460px;display:flex;flex-direction:column}
  .pricing-grid.trois .pricing-card.vedette{order:-1;margin-top:16px}
}
@media(max-width:620px){ .avantages-grid{grid-template-columns:1fr} }

.bande-niveaux{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 34px;max-width:900px}
.pastille-niveau{display:flex;flex-direction:column;align-items:center;gap:1px;background:#fff;
  border:2px solid var(--o-100);border-radius:14px;padding:10px 20px;text-decoration:none;transition:.18s;
  min-width:118px}
.pastille-niveau:hover{border-color:var(--o-400);background:var(--o-50);transform:translateY(-2px)}
.pastille-niveau b{color:var(--o-800);font-family:var(--font-head);font-size:1rem}
.pastille-niveau span{color:var(--muted);font-size:.74rem;font-weight:700;white-space:nowrap}
@media(max-width:520px){ .pastille-niveau{min-width:96px;padding:9px 14px} }

/* ---- Panneau du tuteur ---- */
.chat-entete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.msg-sources{margin-top:10px;padding-top:9px;border-top:1px dashed var(--o-200);
  display:flex;flex-direction:column;gap:5px;font-size:.76rem}
.msg-sources > span{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:.66rem}
.msg-sources a{color:var(--o-700);font-weight:700;text-decoration:none;line-height:1.35}
.msg-sources a:hover{text-decoration:underline}
.msg.en-cours{opacity:.65;font-style:italic}
.msg.erreur{background:#fde8e6;color:#b42318}
.footer-legal{font-size:.8rem;color:var(--muted);margin:6px 0}

/* ============================================================
   Bandeau et panneau de gestion des cookies
   ============================================================ */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;gap:18px;
  align-items:center;flex-wrap:wrap;justify-content:space-between;
  /* Fond clair plutôt qu'un bloc brun foncé : c'est le seul aplat que
     tout visiteur voit, et il écrasait le bas de chaque page. */
  background:#fff;color:var(--ink);padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--o-200);box-shadow:0 -2px 12px rgba(90,42,18,.07)}
.bandeau-cookies-texte{flex:1;min-width:260px}
.bandeau-cookies-texte strong{display:block;font-size:.95rem;margin-bottom:4px;color:var(--o-900)}
.bandeau-cookies-texte p{margin:0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.bandeau-cookies-texte a{color:var(--o-800);text-decoration:underline}
.bandeau-cookies-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bandeau-cookies-actions .btn{white-space:nowrap}

.fond-cookies{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.panneau-cookies{background:#fff;border-radius:14px;max-width:660px;width:100%;
  padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.panneau-cookies h2{margin:0 0 6px;font-size:1.3rem}
.categorie-cookies{border:1px solid var(--o-200,#f0d9c4);border-radius:10px;padding:14px;margin:14px 0}
.categorie-cookies.inactive{opacity:.75;background:var(--o-50,#fdf6ef)}
.categorie-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.categorie-entete h3{margin:0;font-size:1rem}
.categorie-cookies p{margin:8px 0 0;font-size:.85rem;line-height:1.55;color:var(--muted,#6b5a4c)}
.etat-toujours{font-size:.75rem;font-weight:700;background:var(--o-100,#fbe8d6);
  color:var(--o-800,#7a3a12);border-radius:999px;padding:4px 10px;white-space:nowrap}
.interrupteur{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;cursor:pointer}
.interrupteur input{width:18px;height:18px;cursor:pointer}
.actions-cookies{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.actions-cookies .lien-politique{font-size:.8rem;margin-left:auto}

@media (max-width:640px){
  .bandeau-cookies{flex-direction:column;align-items:stretch;gap:12px;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .bandeau-cookies-actions{justify-content:stretch}
  .bandeau-cookies-actions .btn{flex:1;text-align:center}
  .actions-cookies .lien-politique{margin-left:0;width:100%}
}

.tableau-cookies{width:100%;border-collapse:collapse;font-size:.85rem}
.tableau-cookies th,.tableau-cookies td{border:1px solid var(--o-200,#f0d9c4);padding:9px 11px;text-align:left;vertical-align:top}
.tableau-cookies th{background:var(--o-50,#fdf6ef);font-weight:800}
.tableau-cookies code{font-size:.82rem;word-break:break-all}
.footer-mini{padding:18px 20px;text-align:center;font-size:.8rem}
.footer-mini p{margin:0}

/* ---- Bulle flottante « Mon espace » (téléphone uniquement) ----------
   Posée par commun.js pour un élève connecté. Masquée par défaut ; elle
   n'apparaît que sur téléphone (≤ 640 px), là où le lien « Espace élève »
   de la barre du haut est caché. En bas à DROITE, pour ne pas gêner la
   bulle Orion des pages de cours (en bas à gauche). */
#bulle-espace{display:none}
@media(max-width:640px){
  #bulle-espace{
    display:inline-flex;align-items:center;gap:8px;
    position:fixed;right:14px;bottom:14px;z-index:94;
    padding:11px 16px 11px 14px;border-radius:999px;text-decoration:none;
    background:var(--o-700);color:#fff;font-weight:800;font-size:.9rem;
    box-shadow:0 8px 22px -8px rgba(0,0,0,.45);
  }
  #bulle-espace .be-ic{font-size:1.1rem;line-height:1}
  #bulle-espace:active{transform:translateY(1px)}
}

/* ============================================================
   FORMAT TELEPHONE — grilles de cartes (placé en fin de fichier
   pour primer sur la définition de base de .grid-3/.grid-4).
   Cartes plus larges : 2 par rangée sur téléphone, 1 seule sous 360px.
   ============================================================ */
@media (max-width:640px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:360px){
  .grid-3,.grid-4{grid-template-columns:1fr!important}
}

/* ---- Champ mot de passe : œil « maintenir pour voir » ---- */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:46px;box-sizing:border-box}
.pw-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:34px;height:30px;
  display:flex;align-items:center;justify-content:center;border:none;background:transparent;
  cursor:pointer;color:var(--muted);border-radius:8px;padding:0;-webkit-user-select:none;user-select:none;touch-action:none}
.pw-eye:hover{color:var(--o-700);background:rgba(0,0,0,.05)}
.pw-eye.on{color:var(--o-700)}
.pw-eye svg{width:20px;height:20px;display:block;pointer-events:none}

/* Infographies de cours : pleine largeur, lisibles sur téléphone et PC (tap pour agrandir) */
.illustration.infographie{padding:8px}
.illustration.infographie a{display:block}
.illustration.infographie img{max-width:100%;max-height:none;width:100%;height:auto;cursor:zoom-in}


/* ===== Lightbox images enrichies (infographies) ===== */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px;z-index:99999;opacity:0;transition:opacity .18s ease;-webkit-tap-highlight-color:transparent}
.lightbox-overlay.open{opacity:1}
.lightbox-overlay img{max-width:96%;max-height:92%;width:auto;height:auto;border-radius:8px;background:#fff;box-shadow:0 12px 48px rgba(0,0,0,.55);cursor:default}
.lightbox-close{position:fixed;top:14px;right:18px;width:46px;height:46px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:#222;font-size:30px;line-height:46px;text-align:center;cursor:pointer;z-index:100000;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lightbox-close:hover{background:#fff}
body.lightbox-open{overflow:hidden}
.illustration img[src*="/assets/img/cours-primaire/"]{cursor:zoom-in}

/* ============================================================
   Défis et Progression (espace élève) — tuiles, graphe, jauges
   ============================================================ */
.prog-tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 18px}
.prog-tuile{background:#fff;border:1px solid var(--o-200);border-radius:14px;padding:16px 14px;text-align:center}
.prog-tuile .prog-ic{font-size:1.5rem;line-height:1}
.prog-val{font-family:var(--font-head);font-weight:800;font-size:1.7rem;color:var(--o-900);margin-top:6px;line-height:1}
.prog-val small{font-size:.9rem;font-weight:600;color:var(--muted)}
.prog-lbl{font-size:.74rem;color:var(--muted);margin-top:5px;font-weight:600;line-height:1.25}
.prog-tuile-score{background:var(--g-100);border-color:var(--g-300)}
.prog-tuile-score .prog-val{color:var(--g-800)}
.prog-carte{background:#fff;border:1px solid var(--trait);border-radius:16px;padding:18px 18px 16px;margin-bottom:16px}
.prog-h3{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--o-800);margin:0 0 12px}
.prog-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prog-2col .prog-carte{margin-bottom:0}
/* Graphe à barres */
.prog-chart{width:100%;height:auto;display:block}
.prog-bar{fill:var(--g-400)}
.prog-bar-actu{fill:var(--g-700)}
.prog-barval{fill:var(--g-800);font-size:11px;font-weight:800;font-family:var(--font-body)}
.prog-barlbl{fill:var(--muted);font-size:10px;font-weight:600;font-family:var(--font-body)}
/* Lignes par matière + jauges */
.prog-mat{margin:0 0 11px}
.prog-mat:last-child{margin-bottom:0}
.prog-mat-tete,.prog-defi-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.86rem;margin-bottom:5px}
.prog-mat-tete span{color:var(--ink);font-weight:600}
.prog-mat-tete b,.prog-defi-tete b{color:var(--o-800);font-weight:800;white-space:nowrap}
.prog-jauge{height:9px;background:var(--o-100);border-radius:999px;overflow:hidden}
.prog-jauge>span{display:block;height:100%;background:var(--g-600);border-radius:999px;transition:width .4s ease}
/* Défis */
.prog-defi{margin:0 0 13px}
.prog-defi:last-child{margin-bottom:0}
.prog-defi-tete span{color:var(--ink);font-weight:600}
.prog-defi-ok .prog-jauge>span{background:var(--g-700)}
.prog-defi-ok .prog-defi-tete b{color:var(--g-700)}
@media (max-width:900px){.prog-tuiles{grid-template-columns:repeat(2,1fr)}.prog-2col{grid-template-columns:1fr}}
@media (max-width:420px){.prog-val{font-size:1.45rem}}

/* ===== Essai 7 jours + apercus reserves (floutes) ===== */
.bandeau-essai{background:#0b3b2e;color:#fff;text-align:center;font-size:.86rem;padding:7px 14px}
.bandeau-essai a{color:#ffe08a;font-weight:700;text-decoration:underline}
.bonus-reserve{position:relative;margin:14px 0;border:1px solid #e5ddd0;border-radius:14px;overflow:hidden;background:#fff}
.bonus-floute{filter:blur(5px);opacity:.7;padding:18px;pointer-events:none;user-select:none;color:#555;min-height:0}
.bonus-ecran{height:92px;display:flex;align-items:center;justify-content:center;background:#0b3b2e;color:#fff;border-radius:8px;font-weight:800;font-size:1.1rem}
.bonus-voile{position:absolute;inset:0;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:flex-end;text-align:center;padding:26px 16px;background:linear-gradient(to bottom,rgba(250,247,240,0) 0%,rgba(250,247,240,.45) 38%,rgba(250,247,240,.9) 74%,rgba(250,247,240,.98) 100%)}
.bonus-txt{font-size:.92rem;color:#1f3d34;line-height:1.35}
.bonus-bloc{max-height:360px}
.bonus-floute .bonus-h{margin:14px 0 6px;color:#1f3d34;font-size:1.05rem;font-weight:700}
.bonus-floute p{margin:0 0 12px;font-size:.95rem;line-height:1.55}
.bonus-liste{list-style:none;margin:2px 0 0;padding:0;font-size:.82rem;color:#2f4a41;max-height:92px;overflow:auto;text-align:left;max-width:360px}
.bonus-liste li{padding:1px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bonus-voile .btn{text-decoration:none}

/* ------------------------------------------------------------------
   Bandeau du haut — compactage desktop (20/10/2026)
   En vue connectée/admin, #zone-utilisateur (Administration, Espace
   élève, profil, Déconnexion) était comprimé par le menu et s'empilait
   sur plusieurs lignes, ce qui faisait grandir la barre. On le force sur
   UNE seule rangée en desktop. Sous 1100px, le comportement responsive
   d'origine (repli, menu masqué sous 640px) reste inchangé.
   ------------------------------------------------------------------ */
@media (min-width:1100px){
  nav.nav .navlinks{flex-wrap:nowrap;gap:7px}
  nav.nav .navlinks>*{flex-shrink:0}
  nav.nav #zone-utilisateur{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;flex-shrink:0}
  nav.nav .navlink{white-space:nowrap;padding:7px 11px}
  nav.nav .user-chip{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
}

/* ------------------------------------------------------------------
   Bandeau du haut — version téléphone sur une seule ligne (20/10/2026)
   En vue connectée, logo + profil + Déconnexion débordaient sur 2 lignes.
   Sous 640px : on n'affiche que l'avatar (nom masqué) et on resserre le
   padding. On GARDE flex-wrap pour que la vue déconnectée (Connexion +
   Essai gratuit) puisse se replier sans débordement horizontal.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  nav.nav .wrap{padding:7px 12px}
  nav.nav .user-chip{font-size:0;gap:0;padding:6px}
  nav.nav .user-chip .av{font-size:.9rem}
  /* avatar + Déconnexion toujours sur une MÊME rangée (pas d'empilement) */
  nav.nav #zone-utilisateur{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex-shrink:0}
}

/* Fraction empilée (numérateur au-dessus du dénominateur) dans le texte des cours (21/10/2026) */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.08;margin:0 .18em;font-size:.96em}
.fr>span:first-child{border-bottom:1.6px solid currentColor;padding:0 .4em .06em}
.fr>span:last-child{padding:.06em .4em 0}


/* ===== Lightbox : encadrés SVG « À retenir » (.ex-visuel) agrandis ===== */
.ex-visuel{cursor:zoom-in}
.ex-visuel svg{cursor:zoom-in;transition:box-shadow .12s ease}
.ex-visuel:hover svg{box-shadow:0 3px 12px rgba(29,78,216,.28)}
.lightbox-overlay svg{width:min(640px,94vw);max-width:94vw;max-height:88vh;height:auto;background:#fff;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.55);padding:12px;box-sizing:border-box;cursor:default}

/* ====================================================================
   Application mobile (Capacitor) — conformité App Store 3.1.1 / Google Play
   Dans l'app iPhone (html.mr-ios) ET l'app Android (html.mr-android),
   aucun prix / offre / paiement web ne doit s'afficher. La classe est posée
   dès le chargement (script en <head>), donc rien ne clignote. Le site web
   (navigateur) n'est pas touché : la classe n'existe que dans l'app native.
   ==================================================================== */
html.mr-ios #offre,     html.mr-android #offre,
html.mr-ios #bandeau-promo, html.mr-android #bandeau-promo,
html.mr-ios #fenetre-ebook, html.mr-android #fenetre-ebook,
html.mr-ios [data-prix-web], html.mr-android [data-prix-web]{ display:none !important; }

/* --- Bulles d'abonnement (injectées par commun.js : Apple ou Google) ---
   Ce conteneur n'existe que dans l'app, donc pas besoin de le préfixer. */
.mr-abos{
  display:block; max-width:980px; margin:28px auto; padding:0 16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.mr-abos-titre{ font-size:1.5rem; font-weight:800; text-align:center; color:#2b2b2b; margin:0 0 4px; }
.mr-abos-sous{ text-align:center; color:#6a6256; font-size:.95rem; margin:0 0 20px; }
.mr-abos-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.mr-abo{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; border:2px solid #f0e6d6; border-radius:18px; padding:22px 14px 18px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s, box-shadow .15s, transform .05s;
}
.mr-abo:active{ transform:scale(.98); }
.mr-abo.best{ border-color:#E2641C; box-shadow:0 8px 22px rgba(226,100,28,.14); }
.mr-abo.occupe{ opacity:.55; pointer-events:none; }
.mr-abo-pop{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:#E2641C; color:#fff; font-size:.7rem; font-weight:700;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.mr-abo-duree{ font-size:1.05rem; font-weight:700; color:#3a2a1a; }
.mr-abo-prix{ font-size:1.5rem; font-weight:800; color:#E2641C; line-height:1.1; min-height:1.5rem; }
.mr-abo-cta{
  margin-top:4px; background:#E2641C; color:#fff; font-weight:700; font-size:.92rem;
  padding:9px 16px; border-radius:999px; width:100%; text-align:center; box-sizing:border-box;
}
.mr-abo-restore{
  display:block; margin:16px auto 0; background:none; border:1.5px solid #d9cfbe;
  color:#5a5346; font-weight:600; font-size:.9rem; padding:10px 18px; border-radius:999px; cursor:pointer;
}
.mr-abos-mention{ max-width:620px; margin:14px auto 0; color:#8a8373; font-size:.78rem; line-height:1.55; text-align:center; }
.mr-abos-mention a{ color:#b5531a; }
.mr-abos-chargement,.mr-abos-err{ grid-column:1/-1; text-align:center; color:#6a6256; padding:18px; }
.mr-abos-err{ color:#b02a2a; }

/* =====================================================================
   App (mr-ios / mr-android) — correctifs d'affichage
   ---------------------------------------------------------------------
   1) iOS — fin de l'« effet loupe » : sous iOS, un champ de saisie dont la
      police fait moins de 16 px déclenche un ZOOM automatique au focus.
      Orion met le focus dans son champ dès qu'il s'ouvre : d'où la page qui
      grossit et déborde. On force 16 px sur les champs dans l'app iPhone :
      le zoom ne se déclenche plus, l'affichage reste stable.
   2) Le défi « Mon défi » (.jx) doit TENIR dans l'écran de l'app, sous la
      barre de navigation et au-dessus des barres système (status / gestes).
      On plafonne sa hauteur à l'espace réellement visible. viewport-fit=cover
      (posé par commun.js dans l'app Android) expose env(safe-area-*).
   ===================================================================== */
html.mr-ios input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html.mr-ios textarea,
html.mr-ios select{ font-size:16px; }

@media (max-width:700px){
  html.mr-ios .jx.jx-pret,
  html.mr-android .jx.jx-pret{
    height:min(74svh,600px);
    max-height:calc(100vh  - var(--nav-h,64px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 14px);
    max-height:calc(100svh - var(--nav-h,64px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 14px);
    min-height:0;
  }
  html.mr-ios  .jx.jx-pret > .jx-scene,
  html.mr-android .jx.jx-pret > .jx-scene{ min-height:0; }
}