/* ============================================================
   arthur-complement.css — ce que le kit visuel ARTHUR ne dessine pas.

   Le kit (design/css/tokens.css, design/css/bundle.css) est chargé tel
   quel. Ce fichier n'habille que les pièces qu'il ne couvre pas : le
   dessin du graphique, de la balance et de l'évolution, la réponse
   « ordre », le tableau de bord du projet, quelques crochets de la page
   élève, et ce que le guide d'intégration décrit sans que le kit le
   dessine (feuille d'un personnage, flèche vers le bas, noms des membres
   dans le flux…). Toutes les couleurs viennent des jetons du kit.
   ============================================================ */

/* un élément masqué le reste, même quand le kit lui donne un display */
.ae-cours [hidden], .ae-app [hidden], .ae-sommaire[hidden] { display: none !important; }

/* les séries d'un visuel : 1 primary, 2 chart-orange, 3 success, 4 danger */
:root { --serie1: var(--primary); --serie2: var(--chart-orange); --serie3: var(--success); --serie4: var(--danger); }

/* le kit se sert de --space-3, absent de ses jetons : 12 px, entre --space-2 et --space-4 */
:root { --space-3: 12px; }

/* ---------- graphique ---------- */
.ae-visuel .g-dessin { position: relative; }
.ae-visuel .g-dessin svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-sans); }
.ae-visuel .g-grille { stroke: var(--line); stroke-width: 1; }
.ae-visuel .g-axe { stroke: var(--ink-muted); stroke-width: 1.5; }
.ae-visuel .g-graduation { font-size: 11px; fill: var(--ink-muted); }
.ae-visuel .g-label { font-size: 12px; fill: var(--ink); font-weight: 600; }
.ae-visuel .g-seuil { stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ae-visuel .g-etiquette { font-size: 12px; fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--surface-raised); stroke-width: 4px; }
.ae-visuel .g-point { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 2.5; }
.ae-visuel .g-curseur { stroke: var(--ink); stroke-width: 1.5; opacity: .55; }
.ae-visuel .g-lecture { font-size: calc(14px * var(--ae-echelle, 1)); color: var(--ink-muted); min-height: 1.5em; }
/* la valeur lue de chaque courbe : une pastille de sa couleur devant (le texte reste ink) */
.ae-visuel .g-lu { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--ink); white-space: nowrap; }
.ae-visuel .g-lu i { width: 18px; height: 4px; border-radius: 2px; display: inline-block; background: currentColor; }
.ae-legende span { color: var(--ink); }

/* ---------- balance ----------
   Le dessin façon BD est celui du kit (ae-balance) ; le guide (09/10, atelier
   v177) en change le rythme et la légende : fléau et plateaux en 0,18 s sans
   rebond, sachets en 0,1 s (BAL-05) ; légende de l'étape au style BD des
   bulles : fond crème, contour encre de 2 px, coins de 14 px, ombre pleine de
   3 px, texte centré en gras ; fond rouge clair à cadre rouge pour un
   contre-exemple (BAL-04). Tous les textes sont au-dessus du dessin (BAL-03). */
.ae-balance__fleau, .ae-balance__plateau { transition: transform .18s ease-out; }
.ae-balance__objet { transition: transform .1s ease-out, opacity .1s; }
.ae-balance__objet--entre { animation-duration: .1s; }
.ae-balance__legende { background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); text-align: center; font-weight: 600; }
.ae-balance__legende[hidden] { display: none; }
.ae-balance--contre-exemple .ae-balance__legende { background: var(--danger-soft); border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .ae-balance__fleau, .ae-balance__plateau, .ae-balance__objet { transition: none; }
  .ae-balance__objet--entre, .ae-balance__tete--hop { animation: none; }
}

/* ---------- évolution ---------- */
.ae-visuel .evo-scene { display: flex; justify-content: space-around; align-items: flex-end; gap: 16px; height: 200px; padding: 0 8px; }
.ae-visuel .evo-g { flex: 1; max-width: 120px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ae-visuel .evo-piste { position: relative; width: 46px; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.ae-visuel .evo-forme { position: relative; width: 100%; background: var(--c); border-radius: 6px 6px 0 0; transition: height var(--evo-duree, .4s) ease; }
.ae-visuel .evo-valeur { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; white-space: nowrap; font: 600 14px var(--font-display); color: var(--ink); }
.ae-visuel .evo-bougie .evo-forme { width: 34px; border-radius: 4px 4px 0 0; }
.ae-visuel .evo-plante .evo-forme { width: 8px; border-radius: 4px 4px 0 0; }
.ae-visuel .evo-reservoir .evo-piste { width: 60px; border: 2px solid var(--line-strong); border-top: none; border-radius: 0 0 8px 8px; }
.ae-visuel .evo-reservoir .evo-forme { border-radius: 0; }
.ae-visuel .evo-sol { height: 3px; background: var(--line); border-radius: 2px; }
.ae-visuel .evo-noms { display: flex; justify-content: space-around; gap: 16px; text-align: center; }
.ae-visuel .evo-noms > div { flex: 1; max-width: 160px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ae-visuel .evo-noms span { color: var(--ink-muted); }
.ae-visuel .evo-expressions { font-size: 14px; text-align: center; color: var(--ink-muted); }
.ae-visuel .evo-curseur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ae-visuel .evo-curseur label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; font: 600 14px var(--font-display); }
.ae-visuel .evo-curseur input { width: 100%; accent-color: var(--primary); }
.ae-visuel .evo-badge { font: 600 13px var(--font-display); padding: 3px 10px; border-radius: var(--radius-full); background: var(--success); color: var(--on-primary); }

/* ---------- questions : champ large, ordre, tri, auto-évaluation ---------- */
.ae-champ--large input { width: 100%; max-width: 360px; }
.ae-enc .q-libre { width: 100%; padding: 10px 12px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 calc(17px * var(--ae-echelle, 1)) var(--font-sans); resize: vertical; }
.ae-enc .q-libre:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.q-ordre { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.q-ordre li { counter-increment: rang; display: flex; align-items: center; gap: 10px; }
.q-ordre li::before { content: counter(rang); min-width: 18px; text-align: center; font: 600 15px var(--font-display); color: var(--primary); }
.q-ordre-texte { flex: 1; }
.q-ordre-lettre { padding: 0 6px; border: 1.5px solid var(--line-strong); border-radius: 6px; font: 600 12px var(--font-display); color: var(--ink-muted); }
.q-ordre-fleches { display: flex; gap: 4px; }
.q-ordre-fleches button { width: 36px; height: 36px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font-size: 16px; cursor: pointer; }
.q-ordre-fleches button:disabled { opacity: .5; cursor: default; }
/* le tri en colonnes (08/10) est habillé par le kit (ae-tri) ; un rond figé ne se presse plus */
.ae-tri__case:disabled { cursor: default; }
.q-criteres { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.q-criteres label { display: flex; gap: 8px; align-items: flex-start; }
.q-correction:empty, .q-aides:empty, .q-retour:empty { display: none; }
/* le titre d'une correction du module Exercices (q_correction, q_la_reponse), comme le pli « Voir la correction » */
.ae-correction__titre { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--primary); }
.q-aides { display: flex; flex-direction: column; gap: 8px; }
/* un indice s'ouvre à la demande de l'élève (QUE-06) : son libellé, puis son texte */
/* Question finie (11/10) : « Valider » grisé, qui ne réagit plus. */
.q-valider--fini, .q-valider--fini:hover, .q-valider--fini:active { background: #D7CFC3; color: #8A7C6E; border-color: #B9AE9F; box-shadow: 0 4px 0 #B9AE9F; transform: none; cursor: default; opacity: 1; }
/* Quiz éclair validé en une fois : la phrase quiz_fin.manque à côté du bouton. */
.qcm-manque { color: var(--ink-muted); font-size: 14px; }
.qcm-manque[hidden] { display: none; }
/* les points d'une question d'épreuve : à droite du libellé « À toi de jouer » */
/* calée comme l'onglet du kit : il grandit vers le haut, son bas reste 11 px sous le haut du cadre */
.q-tete { position: absolute; bottom: calc(100% - 11px); left: -2px; display: flex; align-items: center; gap: 8px; }
.q-tete .ae-enc__onglet { position: static; }
.q-tete .ae-points { background: var(--surface-raised); }
.ae-option:disabled { cursor: default; }

/* ---------- projet ---------- */
.pj-utiles, .pj-groupe { display: flex; flex-direction: column; gap: 6px; }
/* PRJ-05 : une ligne par donnée, le libellé à gauche, la valeur à droite ;
   une valeur en morceaux (« ; ») : un morceau par ligne, d'un seul tenant */
.pj-utiles ul, .pj-groupe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pj-utiles li, .pj-groupe li { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--primary-soft); }
.pj-utiles li > b, .pj-groupe li > b { text-align: right; }
.pj-morceau { display: block; white-space: nowrap; }
ul.pj-issue-valeurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 10px; }
.pj-utiles li span, .pj-groupe li span, ul.pj-issue-valeurs li span { font-size: 13px; color: var(--ink-muted); }
.pj-groupe li.retenue { background: var(--success-soft); }
ul.pj-issue-valeurs { margin-bottom: 6px; }
/* PRJ-15 : l'issue d'un choix en carte BD (bande haute verte ou rouge
   brique), le verdict écrit en grand ; les options en boutons BD empilés */
.pj-issue { border: 2px solid var(--ink); border-top-width: 6px; border-radius: var(--radius-md); box-shadow: 3px 3px 0 var(--ink); }
.pj-issue.ae-retour-court--juste { border-top-color: var(--success); }
.pj-issue.ae-retour-court--faux { border-top-color: var(--danger); }
.pj-issue .ae-retour-court__verdict { font-size: calc(26px * var(--ae-echelle, 1)); line-height: 1.15; }
.pj-choix .ae-option { border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pj-choix .ae-option:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
/* les récits et répliques d'une mission, posés dans l'encadré (PRJ-15) */
.pj-histoire { display: flex; flex-direction: column; gap: 10px; }
ul.pj-issue-valeurs li { display: flex; flex-direction: column; }
ul.pj-issue-valeurs li b { font: 600 calc(24px * var(--ae-echelle, 1))/1.1 var(--font-display); }
.pj-reessayer { color: var(--ink-muted); }
.pj-pour { font-size: 13px; color: var(--ink-muted); font-style: italic; }
.pj-deja { color: var(--danger); }
.pj-continuer-ligne { display: flex; justify-content: flex-end; }
.pj-continuer svg { width: 18px; height: 18px; }
.pj-question-suite { display: flex; flex-direction: column; }
details.pj-replie { padding: 10px 16px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
details.pj-replie > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font: 600 15px var(--font-display); color: var(--primary); }
details.pj-replie[open] > summary { margin-bottom: 12px; }
details.pj-fait > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; }
details.pj-fait > summary::-webkit-details-marker { display: none; }
details.pj-fait > summary .pj-resume { flex: 1; font: 500 calc(17px * var(--ae-echelle, 1)) var(--font-display); }
details.pj-fait[open] > summary { margin-bottom: 8px; }
.pj-denouement .pj-bilan, .pj-denouement .pj-rejouer { align-self: flex-start; }
.pj-jauge-legende { font-size: 13px; color: var(--ink-muted); }
.pj-jauge-historique { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
/* le tableau de bord : un bandeau en bas de l'écran */
.pj-dock { position: sticky; bottom: 0; z-index: 5; background: var(--surface-raised); border: 2px solid var(--ink); border-radius: var(--radius-md); box-shadow: 3px 3px 0 var(--ink); }
.pj-dock-tete { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pj-dock-titre { font: 600 15px var(--font-display); white-space: nowrap; }
.pj-dock-compte { color: var(--ink-muted); font-weight: 500; }
.pj-dock-tete .ae-jauge { flex: 1 1 220px; padding: 6px 10px; }
.pj-dock-tete .pj-jauge-legende { display: none; }
/* ouvert : la jauge complète en tête du corps, celle de la tête se cache */
.pj-dock--jauge.ouvert .pj-dock-tete .pj-jauge { display: none; }
.pj-dock-fleche { margin-left: auto; transition: transform .2s; }
.pj-dock.ouvert .pj-dock-fleche { transform: rotate(180deg); }
.pj-dock-corps { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; max-height: 55vh; overflow: auto; border-top: 1px solid var(--line); }
.pj-dock-corps[hidden], .pj-tout[hidden], .pj-pour-mission[hidden], .pj-tout-voir[hidden], .pj-encarts[hidden] { display: none; }
.pj-encarts { display: flex; flex-direction: column; gap: 12px; }
.pj-tout { display: flex; flex-direction: column; gap: 12px; }
.pj-tout-voir { align-self: flex-start; }
.pj-rien { color: var(--ink-muted); }
/* pendant une mission, sous la jauge (guide 1.29) : « La jauge monte »,
   encart moutarde, puis « Vient d'être retenu », encadré vert */
.pj-jauge-bouge { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 2px solid #b5862a; border-radius: var(--radius-sm); background: #fbefd2; color: var(--on-accent); }
[data-theme="dark"] .pj-jauge-bouge { background: var(--accent-soft); color: var(--ink); }
.pj-jauge-bouge p { margin: 0; }
.pj-jauge-bouge__titre { font: 600 15px var(--font-display); }
.pj-jauge-bouge__fleche { font-style: normal; }
.pj-jauge-bouge__fleche--monte { color: var(--success); }
.pj-jauge-bouge__fleche--baisse { color: var(--danger); }
.pj-jauge-bouge__avant { font-size: 13px; opacity: .8; }
.pj-nouveau { padding: 8px 12px; border: 2px solid var(--success); border-radius: var(--radius-sm); background: var(--success-soft); }
.pj-groupe.pj-nouveau li.retenue { background: var(--surface-raised); }
/* la frise des phases, sous le briefing (atelier, onglet Projet) : un rond
   numéroté par phase, ✓ quand elle est faite, contour d'encre pour celle en
   cours ; sur téléphone, elle défile de côté sans élargir la page */
.pj-frise { list-style: none; margin: 0; padding: 2px 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pj-frise::-webkit-scrollbar { display: none; }
.pj-frise__pt { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--ink-muted); }
.pj-frise__pt + .pj-frise__pt::before { content: ""; flex: none; width: 12px; height: 2px; margin-right: 2px; background: var(--line); }
.pj-frise__pt i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface-raised); display: inline-grid; place-items: center; font: 600 11px var(--font-display); }
.pj-frise__pt--en-cours { color: var(--ink); font-weight: 600; }
.pj-frise__pt--en-cours i { border-color: var(--ink); }
.pj-frise__pt--fait i { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
@media (max-width: 600px) {
  .pj-dock-mot { display: none; }
  ul.pj-issue-valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- page élève : écran d'un module ---------- */
/* l'icône d'une section (1.15) : devant son titre, à la taille du titre (NAV-04) */
/* la durée en tête du module, avec son horloge (NAV-04) */
.ae-module-duree { display: inline-flex; align-items: center; gap: 5px; }
.ae-app .ae-app__lecture { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ae-app .corps-module { min-width: 0; }
.ae-app .corps-module:empty { display: none; }
.ae-app .ae-logo { cursor: pointer; }
.ae-app__fil span[role="link"], .ae-app__fil a { color: inherit; text-decoration: none; cursor: pointer; }
.ae-app__fil span[role="link"]:hover { color: var(--primary); }
.ae-modules a, .ae-entete__nav a, .ae-sommaire a { cursor: pointer; }
/* NAV-07 : l'onglet d'un module fermé suit la règle de l'étape fermée. */
.ae-modules li.verrouille a { grid-template-columns: 30px 1fr auto; color: #8A7C6E; cursor: pointer; }
.ae-modules li.verrouille a:hover { background: none; }
.ae-modules__cadenas { font-size: 15px; line-height: 1; }
.ae-modules li.verrouille .ae-modules__num { border-color: #D9CEBD; color: #8A7C6E; }
.ae-entete__nav a.verrouille { color: #8A7C6E; }
.ae-reglages-mobile { padding: 4px 0 2px; }
.ae-reglages-mobile[hidden] { display: none; }
.reprise-ae { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-ink); }
.reprise-ae[hidden] { display: none; }
.fin-module { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.fin-module[hidden] { display: none; }
.fin-module .ae-suite { cursor: pointer; font: inherit; color: var(--on-bouton-suite); text-align: left; }
.fin-module .ae-suite small { font-family: var(--font-display); }
.fin-module .ae-suite__nom { font-family: var(--font-display); }
.fin-module .fin-attente { align-self: flex-start; }
.outils-module { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }

/* le chemin du chapitre : une ligne cliquable */
.ae-accueil .ae-etape-ligne { cursor: pointer; text-decoration: none; color: var(--ink); }
.ae-accueil .ae-etape-ligne__num svg { width: 16px; height: 16px; }
/* NAV-02 (11/10) : chaque module est un bouton BD (fond crème, contour de
   2 px et ombre pleine de 4 px en encre), qui s'enfonce quand on le touche ;
   plus de barre verticale entre les modules. Fait : rond vert et coche ; à
   faire : bouton plein bleu canard, texte clair ; à venir : estompé. Le kit
   du 11/10 n'est pas livré : ce sont ses règles, écrites ici. */
.ae-accueil::before { content: none; }
.ae-accueil .ae-etape-ligne { border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); margin-bottom: 4px; transition: transform .08s ease, box-shadow .08s ease; }
.ae-accueil .ae-etape-ligne:hover { transform: none; border-color: var(--ink); }
.ae-accueil .ae-etape-ligne:not(.ae-etape-ligne--bientot):active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
/* NAV-07 : étape fermée (fond #EFE8DC, contour #D9CEBD, sans ombre, texte et
   numéro #8A7C6E, cadenas à droite) ; Exercices et Projet ouverts, flèche › à droite. */
.ae-accueil .ae-etape-ligne:has(.ae-etape-ligne__fin) { grid-template-columns: 34px minmax(0, 1fr) auto; }
.ae-etape-ligne__fin { font-size: 18px; line-height: 1; }
.ae-accueil .ae-etape-ligne--bientot { opacity: 1; background: #EFE8DC; border-color: #D9CEBD; box-shadow: none; color: #8A7C6E; }
.ae-accueil .ae-etape-ligne--bientot:hover { transform: none; border-color: #D9CEBD; }
.ae-accueil .ae-etape-ligne--bientot .ae-etape-ligne__num { background: #EFE8DC; color: #8A7C6E; border: 2px solid #D9CEBD; }
.ae-accueil .ae-etape-ligne--bientot .ae-etape-ligne__duree { color: #8A7C6E; }
.ae-accueil .ae-etape-ligne__num { box-shadow: none; }
.ae-accueil .ae-etape-ligne--encours { background: var(--primary); color: var(--on-primary); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ae-accueil .ae-etape-ligne--encours .ae-etape-ligne__num { background: var(--on-primary); color: var(--primary); }
.ae-accueil .ae-etape-ligne--encours .ae-etape-ligne__duree { color: inherit; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .ae-accueil .ae-etape-ligne { transition: none; } }

/* la banque : une liste de notion qui glisse */
.ex-rubrique-liste { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.ex-rubrique-liste[hidden] { display: none; }
.ae-exo-carte { cursor: pointer; text-decoration: none; color: var(--ink); text-align: left; font: inherit; width: auto; }
.ae-exo-carte--ferme { cursor: pointer; }
.ae-exo-carte.ex-note-parfait, .ae-exo-carte.ex-note-vert { background: var(--success-soft); }
.ae-exo-carte.ex-note-jaune { background: var(--accent-soft); }
.ae-exo-carte.ex-note-rouge { background: var(--danger-soft); }
.ex-bloc { display: flex; flex-direction: column; gap: 12px; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* « Pour toi » (06/10) : la pastille d'une carte débloquée, moutarde cerclée d'encre */
.ae-chip--pour-toi { background: var(--accent); border-color: var(--ink); color: var(--on-accent); }
/* la fin d'un exercice en trois blocs (Atelier v80) : « ✓ Point retravaillé »
   dans le résultat ; le bloc « Pour toi » à la couleur du module (bleu
   canard) ; la suite dans un bloc neutre */
.ex-point-retravaille { margin: 0; font: 600 calc(15px * var(--ae-echelle, 1)) var(--font-display); color: var(--success); }
.ex-pour-toi, .ex-suite { display: flex; flex-direction: column; gap: 10px; margin: 0 3px 3px 0; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.ex-pour-toi { border-color: var(--primary); background: var(--primary-soft); box-shadow: 3px 3px 0 var(--primary-deep); }
.ex-suite { background: var(--surface-raised); }
.ex-pour-toi p, .ex-suite p { margin: 0; }
.ex-pour-toi__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.ex-pour-toi__tete b { display: inline-flex; align-items: center; gap: 6px; font: 600 calc(17px * var(--ae-echelle, 1)) var(--font-display); color: var(--primary-ink); }
.ex-pour-toi__tete span { font-size: calc(13px * var(--ae-echelle, 1)); color: var(--ink-muted); }
.ex-pour-toi__pourquoi { font-weight: 600; }
.ex-pour-toi__reste { font-size: calc(14px * var(--ae-echelle, 1)); color: var(--ink-muted); }
.ex-suite__titre { font: 600 calc(15px * var(--ae-echelle, 1)) var(--font-display); color: var(--primary-deep); }

/* les étoiles de maîtrise (1.24) : la barre « Mes notions » est une liste
   déroulante ; sa fiche s'ouvre juste dessous, le total seul sous une grande
   étoile, et environ 22 px au-dessus des titres « Le cœur du chapitre » et
   « Pour aller plus loin » */
.ex-notions-barre__chev { flex: none; display: grid; place-items: center; }
.ex-notions-barre__chev svg { transition: transform .2s ease; }
.ae-notions-barre[aria-expanded="true"] .ex-notions-barre__chev svg { transform: rotate(180deg); }
.ex-notions-liste { padding: 0 14px 12px; background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: 14px; }
.ex-notions-liste[hidden] { display: none; }
.ex-etoiles-compte { flex-direction: column; gap: 6px; }
.ex-notions-liste .ex-notions-titre { margin: 22px 0 0; font: 600 calc(13px * var(--ae-echelle, 1)) var(--font-display); color: var(--ink-muted); }
/* sans regles.etoiles (avant 1.24) : la même liste déroulante, avec la jauge
   des notions maîtrisées dans la barre ; dans la fiche, la règle, puis par
   notion ses réussites (ou « Maîtrisée »), une jauge et ses familles */
.ex-notions-jauge { flex: 0 1 120px; margin-left: auto; min-width: 60px; }
.ex-notions-jauge .ae-barre__piste, .ex-notion-piste { display: block; height: 8px; }
.ex-notions-jauge .ae-barre__rempli, .ex-notion-piste .ae-barre__rempli { display: block; }
.ex-notions-regle { margin: 12px 0 4px; font-size: calc(14px * var(--ae-echelle, 1)); color: var(--ink-muted); }
.ex-notion-ligne .ex-notion-piste { grid-column: 1 / -1; }
.ex-notion-reussites { font-size: calc(13px * var(--ae-echelle, 1)); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* la nouvelle étoile attend d'être à l'écran pour surgir */
@media (prefers-reduced-motion: no-preference) {
  .ae-etoile-gagnee[data-etoile-nouvelle="oui"]:not(.ae-etoile-gagnee--joue) .ae-etoile-gagnee__nouvelle { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ex-notions-barre__chev svg { transition: none; } }

/* la fiche « Ta note » d'une épreuve : ses propres classes, le kit ayant
   retiré ae-bilan et ae-stat (09/10) ; toutes les couleurs sont des jetons */
.ex-fiche-note { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 2px solid var(--line); border-radius: var(--radius-lg); text-align: center; }
.ex-fiche-note p { margin: 0; }
.ex-fiche-note__lab { font: 600 calc(13px * var(--ae-echelle, 1)) var(--font-display); color: var(--success); }
.ex-fiche-note__titre { margin: 0; font-family: var(--font-display); font-size: calc(26px * var(--ae-echelle, 1)); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.ex-fiche-note__texte { color: var(--ink-muted); }
.ex-fiche-note__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ex-fiche-note__stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.ex-fiche-note__stat b { font: 600 calc(24px * var(--ae-echelle, 1)) var(--font-display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ex-fiche-note__stat span { font-size: calc(13px * var(--ae-echelle, 1)); line-height: 1.3; color: var(--ink-muted); }
.ex-fiche-note__sous { margin-top: var(--space-2) !important; text-align: left; font: 600 calc(15px * var(--ae-echelle, 1)) var(--font-display); }
.ex-fiche-note__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ex-fiche-note__liste li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.ex-fiche-note__liste .ae-icone { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--success-soft); color: var(--success); stroke-width: 3; }
.ex-fiche-note__revoir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--primary-soft); text-align: left; }
.ex-fiche-note__revoir p { flex: 1 1 180px; font-size: calc(15px * var(--ae-echelle, 1)); }
.ex-fiche-note__revoir b { display: block; color: var(--primary-ink); }
.ex-fiche-note__revoir .ex-fiche-note__pourquoi { flex-basis: 100%; }
/* une réponse libre, « auto-évaluée » (note_auto) */
.ex-fiche-note__stat small { font-size: calc(12px * var(--ae-echelle, 1)); color: var(--ink-muted); font-style: italic; }

/* ---------- surlignage de l'élève ---------- */
mark.surlignage { color: inherit; padding: 0; font-weight: inherit; white-space: normal; }

/* ---------- blocs du cours : changements du 09/10, formats 1.26 à 1.28 ---------- */
/* la carte « L'histoire » n'a plus de formes dans les coins : sa marge de droite redevient normale */
.ae-histoire:has(.ae-replique, .ae-narrateur) > .ae-narration { margin-right: 8px; }

/* formule à membres nommés (1.26) : le nom de chaque membre sous son côté, dans
   le flux et non en position absolue : chaque côté prend la largeur de son nom.
   1.30 : souligné d'un trait épais (5 px) aux bords arrondis, dessiné sous le
   côté (une bordure aurait des bouts carrés) */
.ae-formule--membres { padding-bottom: 14px; }
.ae-formule__membre { flex-direction: column; align-items: center; padding: 0; border-bottom: 0; }
.ae-formule__expr { position: relative; display: inline-flex; padding: 0 4px 7px; }
.ae-formule__expr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 5px; background: var(--m); }
.ae-formule__nom { position: static; transform: none; margin-top: 6px; }

/* le renard encadre la 1re adresse d'une suite : texte au style des adresses, en graisse 600 (NAR-07) */
.ae-cartouche .ae-adresse { font-weight: 600; }

/* annotation au crayon (1.26) : la flèche vers le bas est le même dessin retourné verticalement */
.ae-adresse__fleche--bas { align-self: flex-end; margin-top: 0; margin-bottom: -18px; transform: scaleY(-1); }

/* la feuille d'un personnage (FOR-09) : papier blanc cassé #FFFEF9, petits
   carreaux bleu très clair de 16 px, marge rouge à 28 px du bord gauche,
   formule en gras et agrandie à l'encre bleue #173A8A, légère ombre, penchée
   de −0,6° */
.ae-formule--feuille { padding: 14px 16px 14px 44px; text-align: left; background-color: #fffef9; background-image: linear-gradient(90deg, transparent 28px, var(--copie-marge) 28px, var(--copie-marge) 30px, transparent 30px), linear-gradient(#dde8f6 1px, transparent 1px), linear-gradient(90deg, #dde8f6 1px, transparent 1px); background-size: 100% 100%, 16px 16px, 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); color: #173a8a; font-size: calc(21px * var(--ae-echelle, 1)); transform: rotate(-.6deg); }
/* une ligne sur deux carreaux ; la copie passe à la ligne devant un « = » */
.ae-formule--feuille { line-height: 32px; }
.ae-formule--feuille > span { white-space: nowrap; }
.ae-cours .ae-formule--feuille mjx-container { color: #173a8a; }
/* le gras : un trait autour de chaque signe de MathJax */
.ae-formule--feuille mjx-container[jax="SVG"] path[data-c], .ae-formule--feuille mjx-container[jax="SVG"] use[data-c] { stroke-width: 40; }
@media (prefers-reduced-motion: reduce) { .ae-formule--feuille { transform: none; } }
/* 1.30 : la feuille écrite à la main, sans MathJax — Caveat 700, 1,6 fois la
   taille du texte, encre #173A8A, centrée ; chaque morceau « … = » insécable */
.ae-formule--main { text-align: center; font: 700 calc(17px * 1.6 * var(--ae-echelle, 1))/32px "Caveat", cursive; color: #173A8A; }
/* 1.30 : une formule et la ponctuation qui la suit restent sur la même ligne ;
   dans un tableau, une formule compte dans la largeur de sa colonne : deux
   en-têtes ne se chevauchent jamais (FOR-06) */
.ae-colle { white-space: nowrap; }
.ae-tableau mjx-container { min-width: max-content; }
/* la mise en évidence ==…== (TXT-02) et \hl (FOR-04) : un fond jaune
   #F2D69B derrière le fragment (plus soutenu depuis le 11/10), le texte en
   encre, 3 px de retrait de chaque côté ; jamais coupé en fin de ligne ; dans
   un en-tête de tableau, pas de fond */
.ae-cours mark:not(.surlignage), .ae-balance__egalite mark, .ae-hl { background: #f2d69b; color: var(--ink); padding: 0 3px; }
.ae-tableau th mark:not(.surlignage) { background: none; padding: 0; }

/* le piège (BLC-12, 11/10) : encadré « Attention » sans fond de cahier ; la
   situation en gras, puis deux cas sur fond pâle — juste : vert #E6EEDC,
   pastille « ✓ Juste » #46703B ; faux : rouge #F8E3DC, pastille « ✗ Faux »
   #A8412A. Tout le texte en encre ; seule la ligne de texte du cas faux est en
   brun-rouge #7E2E1C. Les étapes « à gauche » / « à droite » en deux colonnes,
   le côté en gris ; une formule trop large défile dans sa ligne. La
   conclusion en gras sous un filet pointillé. */
.ae-piege__situation { margin: 0; font-weight: 700; }
.ae-cas { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-md); color: var(--ink); }
.ae-cas--juste { background: var(--success-soft); --cas-c: var(--success); }
.ae-cas--faux { background: var(--danger-soft); --cas-c: var(--danger); --cas-texte: #7e2e1c; }
[data-theme="dark"] .ae-cas--faux { --cas-texte: var(--danger); }
.ae-cas__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.ae-cas__pastille { flex: none; padding: 2px 10px; border-radius: var(--radius-full); background: var(--cas-c); color: var(--surface-raised); font: 600 calc(13px * var(--ae-echelle, 1))/1.4 var(--font-display); }
.ae-cas__intro { flex: 1 1 12em; min-width: 0; }
.ae-cas__etapes { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 4px 12px; min-width: 0; font-variant-numeric: tabular-nums; }
.ae-cas__ligne { grid-column: 1 / -1; }
.ae-cas__ligne, .ae-cas__calc { min-width: 0; overflow-x: auto; overflow-y: hidden; }
.ae-cas__cote { color: var(--ink-muted); }
.ae-cas__ligne--texte { font-weight: 700; }
.ae-cas--faux .ae-cas__ligne--texte { color: var(--cas-texte); }
.ae-cas--faux .ae-cas__ligne--texte mjx-container { color: var(--ink); }
.ae-piege__concl { border-top: 2px dotted var(--line-strong); font-weight: 700; }

/* le comparatif, en tickets ou en duel (1.27) : les pastilles d'information
   forment un bloc à part sous les étiquettes, 20 px dessous (APP-07, 12/10) */
.b-comparatif { display: flex; flex-direction: column; gap: 20px; }

/* ---------- formules ---------- */
mjx-container[jax="SVG"][display="true"] { margin: 0 !important; }
.ae-cours mjx-container { color: inherit; }

/* ---------- la carte du bilan d'un testeur ----------
   Guide du questionnaire (« Apparence ») : la carte CoursAvis du système de
   design, absente de l'export du kit du 09/10 (bundle.css). Carte BD, titre,
   une ligne de texte, puis le bouton (ae-btn-bd, ae-avis__envoyer tant que
   l'avis n'est pas donné). À retirer quand le kit l'apportera. */
.ae-avis-carte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 16px 18px; background: var(--surface-raised); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); }
.ae-avis-carte[hidden] { display: none; }
.ae-avis-carte__titre { font: 600 calc(17px * var(--ae-echelle, 1))/1.3 var(--font-display); }
.ae-avis-carte__texte { margin: 0 0 var(--space-1); color: var(--ink-muted); font-size: calc(14px * var(--ae-echelle, 1)); }

/* le champ d'une réponse : le texte centré en hauteur dans tous les
   navigateurs (Arthur, 12/10 : « 295 » collé en bas). Le kit fixe une hauteur
   de 48 px et laisse le navigateur placer le texte ; ici la hauteur vient des
   marges intérieures autour d'une ligne de 24 px, donc le texte est au milieu
   par construction : 24 + 2 × 10 + 2 × 2 de bordure = 48 px. */
.ae-champ input { height: auto; min-height: 48px; padding: 10px 12px; line-height: 24px; }

/* ---------- patchs 4 et 5 du guide (11 et 12/10) ----------
   Le kit du 11/10 ne les connaît pas encore : ces règles le complètent, à
   retirer quand un export du kit les apportera. */

/* NAR-02 (patch 4) : le papier kraft et le trombone dans l'Introduction
   seulement (ae-histoire--kraft, posé par rendu.js). Ailleurs, « L'histoire »
   est un titre normal : dans la carte, caramel, 24 px, sans papier, sans
   rotation, sans marge en plus au-dessus de la carte. */
.ae-histoire:not(.ae-histoire--kraft) > .ae-histoire__lab { margin: 0 0 8px; padding: 0; background: none; color: #9A5B2E; border-radius: 0; font-size: calc(24px * var(--ae-echelle, 1)); line-height: 1.2; white-space: normal; transform: none; box-shadow: none; }
.ae-histoire:not(.ae-histoire--kraft) > .ae-histoire__lab::before { content: none; }
.ae-histoire:not(.ae-histoire--kraft):has(> .ae-histoire__lab) { margin-top: 0; }

/* NAV-04 (patch 5) : plus d'icône devant un titre de section (un HTML composé
   avant ne la montre plus), et le titre en 28 px */
.ae-section-icone { display: none; }
.ae-section-titre { font-size: calc(28px * var(--ae-echelle, 1)); }

/* CMP-01 (patch 5) : les pastilles d'infos du comparatif au style BD, contour
   encre de 2 px et ombre pleine de 3 px vers le bas ; l'icône devant le texte
   (patch 6, APP-04 : les icônes de l'application) */
.ae-info { border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ae-info__icone { display: inline-flex; flex: none; }
.ae-info__icone svg { width: 16px; height: 16px; }

/* BAL-03 (patch 5) : « Départ » et « Étape n » en 19 px au-dessus de l'égalité */
.ae-balance__egalite small { font-size: calc(19px * var(--ae-echelle, 1)); }

/* EXE-18 (patch 5) : une notion ouverte rangée comme un dossier : les cartes
   décalées de 16 px, sous un trait vertical encre de 3 px qui part du bandeau,
   chacune reliée par un petit trait horizontal. Le fond d'une carte tentée
   sans être réussie est jaune. */
.ex-rubrique-liste { position: relative; margin-left: 16px; padding-left: 16px; }
.ex-rubrique-liste::before { content: ""; position: absolute; top: -8px; bottom: 0; left: 0; width: 3px; background: var(--ink); }
.ex-rubrique-liste > .ae-exo-carte::before { content: ""; position: absolute; top: 50%; right: 100%; width: 14px; height: 3px; margin-top: -1px; background: var(--ink); }
.ae-exo-carte--tente { background: #F7E2A8; }

/* PRJ-15 (patch 5) : le projet plus aéré : 32 px entre deux blocs qui se
   suivent, et 32 px de plus au-dessus du titre d'une étape. La suite dévoilée
   par « Continuer » (.pj-suite, .pj-attente) range ses blocs comme la colonne
   du module : même écart, et 32 px de plus avant un encadré à onglet (APP-07),
   que le kit ne donne qu'aux enfants directs de .ae-cours. */
.corps-module--projet, .corps-module--projet .pj-suite, .corps-module--projet .pj-attente { display: flex; flex-direction: column; gap: 32px; }
.corps-module--projet .pj-suite[hidden], .corps-module--projet .pj-attente[hidden] { display: none; }
.corps-module--projet .pj-mission > .ae-enc__titre .ae-chip { margin-left: 10px; vertical-align: middle; }
.corps-module--projet .pj-suite > .ae-enc, .corps-module--projet .pj-attente > .ae-enc { margin-top: 32px; }
/* décisions d'Arthur du 12/10, à remonter à Jolan (le guide, PRJ-15, dit 56 px
   au-dessus de « Étape n » et 32 px entre toutes les données retenues) :
   « Étape n » à 32 px du bloc d'avant, son titre à 8 px dessous, et deux
   données retenues qui se suivent à 8 px */
.corps-module--projet .ae-section-num.pj-phase { margin-top: 0; }
.corps-module--projet .ae-section-num.pj-phase + .ae-section-titre { margin-top: -24px; }
.corps-module--projet .ae-retenue + .ae-retenue { margin-top: -24px; }