/* Fiche d'exercice : éditeur, résultats de tests, relecture IA, plan de reprise. */
/* exercice */
.exwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1100px; }
.edwrap { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 16px 20px; }
.edbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--type); font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.edbar .sp { flex: 1; }
.editor { display: block; width: 100%; min-height: 360px; font-family: var(--type); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 14px 16px; resize: vertical; tab-size: 4; white-space: pre; overflow: auto; caret-color: var(--stamp); }
.editor:focus { outline: none; border-color: var(--ink-dim); }
.tl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--card-edge); font-size: 15px; }
.tl .k { font-family: var(--disp); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; padding-top: 2px; }
.tl .k.ok { color: var(--ok); } .tl .k.ko { color: var(--stamp); }
.tl .n { font-family: var(--type); font-size: 14px; }
.tl .m { color: var(--ink-dim); font-size: 14px; margin-top: 2px; font-family: var(--type); }
.tl .h { margin-top: 6px; padding-left: 10px; border-left: 1px solid var(--card-edge); font-size: 14px; line-height: 1.45; }
.big { font-family: var(--disp); font-size: 44px; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); line-height: 1; }
.big.ko { color: var(--stamp); font-size: 26px; }
.plan { margin-top: 20px; border: 2px solid var(--stamp); border-radius: 3px; padding: 14px 16px; box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--stamp); }
.plan h3 { color: var(--stamp); }
.plan p { margin-top: 6px; }
.aiout { margin-top: 14px; padding: 12px 14px; background: rgba(var(--ink-rgb), .045); border-radius: 3px; font-size: 15px; line-height: 1.5; }
.aiout .lbl { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); display: block; margin-bottom: 4px; }
.aiout .lbl + * + .lbl { margin-top: 10px; }
.wait { font-family: var(--type); font-size: 13px; color: var(--ink-dim); }
.wait::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--stamp); animation: blink .9s infinite alternate; vertical-align: 1px; }
@keyframes blink { from { opacity: .2; } to { opacity: 1; } }
.pre-sol { max-height: 420px; }
@media (max-width: 720px) {
  .tl { grid-template-columns: 60px minmax(0, 1fr); }
}

.wbox { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 16px 20px; animation: deal .5s var(--ease) both; }
.wbox .lbl { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.wbox textarea { display: block; width: 100%; min-height: 150px; margin-top: 8px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--card-in); border: 1px solid var(--card-edge); border-radius: 3px; padding: 12px 14px; resize: vertical; caret-color: var(--stamp); }
.wbox textarea:focus { outline: none; border-color: var(--ink-dim); }
.wbox .mine { white-space: pre-wrap; font-size: 15px; line-height: 1.5; margin-top: 6px; border-left: 2px solid var(--card-edge); padding-left: 12px; }
.wbox .btn { color: var(--ink); border-color: rgba(var(--ink-rgb), .35); }
.aiout .corrige { font-size: 15px; line-height: 1.55; padding: 10px 14px; margin: 4px 0 10px; border-left: 3px solid var(--stamp); background: rgba(var(--ink-rgb), .04); }
.aiout .corrige p { margin: 0 0 8px; }
.wbox .btn:hover { background: rgba(var(--ink-rgb), .06); border-color: var(--ink); }
.wbox .btn:disabled { color: var(--ink-dim); border-color: rgba(var(--ink-rgb), .18); }
.mode-toggle { display: inline-flex; border: 1px solid var(--baize-line); border-radius: 3px; overflow: hidden; }
.mode-toggle button { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-dim); }
.mode-toggle button.on { background: var(--cream); color: var(--on-cream); }
.consol { border-top: 1px solid var(--baize-line); margin-top: 10px; }
.stg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.stg div { text-align: center; }
.stg .bar { height: 70px; display: flex; align-items: flex-end; justify-content: center; }
.stg .bar i { display: block; width: 70%; background: var(--fg-faint); border-radius: 2px 2px 0 0; height: var(--h); min-height: 2px; }
.stg .bar i.on { background: var(--cream); } .stg .bar i.amber { background: var(--amber); }
.stg .n { font-family: var(--disp); font-size: 18px; margin-top: 4px; }
.stg .l { font-size: 11px; color: var(--fg-faint); }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--baize-line); font-size: 14px; width: 100%; text-align: left; }
.crow:hover { background: rgba(255,255,255,.04); }
.crow small { color: var(--fg-faint); font-size: 12px; margin-left: 6px; }
.crow .r { font-family: var(--type); font-size: 12px; text-align: right; color: var(--fg-dim); }
.crow .r.od { color: var(--amber); }
.dstr { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.dstr b { font-family: var(--disp); font-weight: 500; font-size: 18px; margin-left: 6px; }

.dict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dict .rec { font-family: var(--disp); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--baize-line); border-radius: 3px; color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
.dict .rec:hover { border-color: var(--fg-dim); background: rgba(255,255,255,.06); }
.dict .rec.on { border-color: var(--stamp); color: #ffb3a6; }
.dict .rec .mic { width: 14px; height: 14px; display: inline-block; }
.dict .rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--stamp); animation: blink .8s infinite alternate; }
.dict .dur { font-family: var(--disp); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--fg); }
.dict .st { font-size: 13px; color: var(--fg-faint); }
.ink .dict .rec { border-color: var(--card-edge); color: var(--ink); }
.ink .dict .rec.on { border-color: var(--stamp); color: var(--stamp); }
.ink .dict .dur { color: var(--ink); } .ink .dict .st { color: var(--ink-dim); }

/* L'éditeur CodeMirror (thèmes, 02/10) : la CHARPENTE (police, hauteur, cadre, marges) vaut pour tous les thèmes ;
   les COULEURS sont celles du thème choisi par l'élève (theme.js) — « colle » et « colle-dark », les deux thèmes
   maison ci-dessous, ou un thème de cdnjs (Dracula, Monokai, Nord…) qui apporte les siennes. Aucune règle non
   préfixée par un `.cm-s-…` ne doit donc poser de fond, de gouttière, de curseur ni de sélection : un `!important`
   ou une règle à quatre classes l'emporterait sur le thème tiers (c'est ce qui rendait la sélection vermillon et le
   fond crème dans tous les thèmes). Les thèmes maison écrivent leurs couleurs en dur, pas en jetons : « Colle ·
   sombre » doit rester sombre quand l'application est en clair, et inversement. */
.CodeMirror { height: auto; min-height: 360px; font-family: var(--type); font-size: 14px; line-height: 1.5; border: 1px solid var(--card-edge); border-radius: 3px; }
.CodeMirror[class*="cm-s-"] { font-family: var(--type); }     /* idea et darcula imposent Consolas : la machine à écrire reste */
.CodeMirror-focused { border-color: var(--ink-dim); }
.CodeMirror-linenumber { font-family: var(--type); }
.CodeMirror-lines { padding: 10px 0; }
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background: transparent; }    /* blanc par défaut : un coin blanc dans Dracula */
/* thème maison clair : la feuille crème, l'encre, le vermillon du caret — les couleurs d'avant, désormais nommées */
.cm-s-colle.CodeMirror { color: #1d1a15; background: #fbf8f0; }
.cm-s-colle .CodeMirror-gutters { background: #f1ecdf; border-right: 1px solid #d9d0ba; }
.cm-s-colle .CodeMirror-linenumber { color: #a49c8c; }
.cm-s-colle .CodeMirror-cursor { border-left: 2px solid #c8321e; }
.cm-s-colle div.CodeMirror-selected { background: rgba(200, 50, 30, .12); }
.cm-s-colle .CodeMirror-activeline-background { background: rgba(0, 0, 0, .03); }
.cm-s-colle .cm-keyword { color: #8a2a12; font-weight: 700; } .cm-s-colle .cm-string, .cm-s-colle .cm-string-2 { color: #2f6b3a; } .cm-s-colle .cm-comment { color: #a49c8c; font-style: italic; }
.cm-s-colle .cm-number, .cm-s-colle .cm-atom { color: #9b5a00; } .cm-s-colle .cm-variable-3, .cm-s-colle .cm-type { color: #1f4f8f; } .cm-s-colle .cm-meta, .cm-s-colle .cm-attribute { color: #6a4c9e; }
.cm-s-colle .cm-def, .cm-s-colle .cm-variable, .cm-s-colle .cm-variable-2, .cm-s-colle .cm-property, .cm-s-colle .cm-operator { color: #1d1a15; } .cm-s-colle .cm-tag { color: #8a2a12; }
/* thème maison sombre : le carton d'ardoise du thème sombre, mêmes rôles, teintes éclaircies */
.cm-s-colle-dark.CodeMirror { color: #e9e4d4; background: #1b1916; }
.cm-s-colle-dark .CodeMirror-gutters { background: #1f1d19; border-right: 1px solid #3d382f; }
.cm-s-colle-dark .CodeMirror-linenumber { color: #6f685c; }
.cm-s-colle-dark .CodeMirror-cursor { border-left: 2px solid #e4553c; }
.cm-s-colle-dark div.CodeMirror-selected { background: rgba(228, 85, 60, .22); }
.cm-s-colle-dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, .04); }
.cm-s-colle-dark .cm-keyword { color: #f0907a; font-weight: 700; } .cm-s-colle-dark .cm-string, .cm-s-colle-dark .cm-string-2 { color: #93d4a2; } .cm-s-colle-dark .cm-comment { color: #7e7566; font-style: italic; }
.cm-s-colle-dark .cm-number, .cm-s-colle-dark .cm-atom { color: #e8b65a; } .cm-s-colle-dark .cm-variable-3, .cm-s-colle-dark .cm-type { color: #8fbbf2; } .cm-s-colle-dark .cm-meta, .cm-s-colle-dark .cm-attribute { color: #c9aef2; }
.cm-s-colle-dark .cm-def, .cm-s-colle-dark .cm-variable, .cm-s-colle-dark .cm-variable-2, .cm-s-colle-dark .cm-property, .cm-s-colle-dark .cm-operator { color: #e9e4d4; } .cm-s-colle-dark .cm-tag { color: #f0907a; }
/* deux thèmes clairs de cdnjs (eclipse, idea) ne posent aucun fond : sur un carton sombre, leur encre noire serait illisible */
.cm-s-eclipse.CodeMirror, .cm-s-idea.CodeMirror { color: #000; background: #fff; }
.cm-s-eclipse .CodeMirror-gutters, .cm-s-idea .CodeMirror-gutters { background: #f3f3f3; border-right: 1px solid #ddd; }
.cm-s-eclipse .CodeMirror-linenumber, .cm-s-idea .CodeMirror-linenumber { color: #999; }
.cm-s-eclipse .CodeMirror-cursor, .cm-s-idea .CodeMirror-cursor { border-left: 2px solid #000; }
.cm-s-eclipse div.CodeMirror-selected, .cm-s-idea div.CodeMirror-selected { background: #d7d4f0; }
/* darcula : sa feuille écrit « CodeMirrir-linenumber » (coquille), les numéros resteraient sans couleur */
.cm-s-darcula .CodeMirror-linenumber { color: #606366; }
.qnote { font-family: var(--disp); font-size: 22px; letter-spacing: .06em; color: var(--ink); }
.qnote small { font-size: 12px; color: var(--ink-dim); margin-left: 6px; text-transform: uppercase; letter-spacing: .08em; }
/* relecture de projet : un axe = un constat noté, et l'avant/après quand le jury montre plutôt que de dire */
.axe { padding: 8px 0; border-top: 1px dotted rgba(var(--ink-rgb), .22); }
.axe:first-of-type { border-top: 0; }
.axe .an { font-family: var(--disp); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
.axe .am { font-family: var(--disp); font-size: 14px; margin-left: 8px; letter-spacing: .04em; color: var(--ink-dim); }
.axe .ac { margin-top: 2px; }
.adiff { margin-top: 6px; }
.adiff .af { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.adiff pre { margin: 4px 0 0; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; overflow-x: auto; background: rgba(var(--ink-rgb), .05); border-left: 3px solid rgba(var(--ink-rgb), .25); }
.adiff pre.ap { border-left-color: var(--stamp); }
.pnotes { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; justify-content: flex-end; margin: 2px 0 10px; }
.pnotes .pnpart b { font-family: var(--disp); font-size: 22px; }
.pnotes .pnpart small { font-size: 12px; color: var(--ink-dim); margin-left: 3px; text-transform: uppercase; letter-spacing: .06em; }
.pnotes .pndim { flex-basis: 100%; text-align: right; font-size: 12.5px; color: var(--ink-dim); }

.dialog { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 14px 20px; }
.dialog .turn { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px dashed var(--card-edge); font-size: 15px; line-height: 1.5; }
.dialog .turn:first-child { border-top: 0; }
.dialog .who { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding-top: 3px; }
.dialog .turn.rec .who { color: var(--stamp); }
.dialog .turn.rec .txt { font-family: var(--type); }
.dialog .txt { white-space: pre-wrap; }
.iabadge { display: inline-block; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-cream); background: var(--amber); padding: 1px 7px; border-radius: 2px; margin-left: 8px; vertical-align: 2px; }
.cr { margin-top: 18px; border-top: 1px solid var(--card-edge); padding-top: 12px; }
.cr .lbl { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); display: block; margin: 10px 0 3px; }
.cr .note { font-family: var(--disp); font-size: 34px; line-height: 1; }
.forme { border-top: 1px solid var(--baize-line); margin-top: 10px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--baize-line); font-size: 14px; }
.frow .v { font-family: var(--disp); font-size: 18px; text-align: right; }
.frow .p { font-family: var(--type); font-size: 12px; text-align: right; color: var(--fg-faint); }
.frow .v.warn { color: var(--amber); }
.genq { color: var(--ink); background: var(--card); border-radius: 4px; box-shadow: var(--shadow-ticket); padding: 16px 20px; margin-top: 16px; }
.genq .q { font-family: var(--type); font-size: 17px; }
.hist { margin-top: 10px; }
.hrowx { display: grid; grid-template-columns: 90px 70px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px dashed var(--card-edge); font-size: 14px; align-items: baseline; }
.hrowx .d { font-family: var(--type); font-size: 12px; color: var(--ink-dim); }
.hrowx .g { font-family: var(--disp); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.hrowx .g.g0 { color: var(--stamp); } .hrowx .g.g1 { color: var(--amber); } .hrowx .g.g2 { color: var(--ink-dim); } .hrowx .g.g3 { color: var(--ok); }
.hrowx .a { white-space: pre-wrap; color: var(--ink); }
.hrowx .a small { display: block; color: var(--ink-dim); }
.xdel { font-family: var(--disp); font-size: 12px; color: var(--fg-faint); padding: 0 6px; }
.xdel:hover { color: #ff8d78; }
.file { display: none; }
/* Défaut n° 5 du GUIDE_FRONT (bande vert sombre sous le code), cause établie le 30/09 : CodeMirror cache les barres
   natives de son `.CodeMirror-scroll` dans une marge négative de 50 px (overflow: scroll forcé). Avec un
   `min-height` sur `.CodeMirror`, le cadre devient plus haut que le contenu et DÉCOUVRE cette barre native, que la
   règle globale `* { scrollbar-color: … var(--baize) }` peint en vert tapis sur toute la largeur. La hauteur minimale
   se pose donc sur `.CodeMirror-scroll` (+ 50 px, la marge que CodeMirror retranche), jamais sur `.CodeMirror`. */
.edwrap > .CodeMirror { min-height: 0; }
.edwrap > .CodeMirror .CodeMirror-scroll { min-height: 410px; }
@media (max-width: 720px) { .edwrap > .CodeMirror .CodeMirror-scroll { min-height: calc(42vh + 50px); } }