/* =========================================================================
   exos.css — la zone de depot et sa correction
   -------------------------------------------------------------------------
   SOURCE UNIQUE. Deployee par scripts/12-exercices.py.
   N utilise que les jetons du theme (--surface, --txt, --violet...) : la
   zone s affiche donc juste dans les deux themes, sans regle en double.
   ========================================================================= */

.exo-depot {
  border: 1px solid var(--line, #2a2536);
  border-radius: var(--r-bloc, 16px);
  background: var(--surface, #1b1726);
  padding: 20px 22px;
  margin: 26px 0;
}

.exo-depot-haut {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.exo-depot-haut b { font-size: 1.05rem; color: var(--txt); }

.exo-niveau {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
  color: var(--accent-txt, #C9B3F5);
}
.exo-niveau-initial      { background: color-mix(in srgb, #2BB673 18%, transparent); color: #7FE0B0; }
.exo-niveau-operationnel { background: color-mix(in srgb, #2B7FFF 18%, transparent); color: #8AB8FF; }
.exo-niveau-avance       { background: color-mix(in srgb, #F5A623 20%, transparent); color: #F5C26B; }
.exo-niveau-expert       { background: color-mix(in srgb, #FF5C7A 20%, transparent); color: #FF8A7A; }

.exo-depot-intro { color: var(--txt-2); font-size: .92rem; margin: 0 0 14px; }

.exo-zone {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-2, #3a3450);
  border-radius: var(--r-bloc, 14px); padding: 26px 18px;
  color: var(--txt-2); transition: border-color .18s, background .18s;
}
.exo-zone:hover, .exo-zone:focus-visible, .exo-survol {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 8%, transparent);
  outline: none;
}
.exo-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.exo-zone-txt { font-weight: 600; }

.exo-attente { color: var(--txt-2); margin: 14px 0 0; }

.exo-erreur {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-bloc, 10px);
  background: color-mix(in srgb, #FF5C7A 14%, transparent);
  color: var(--txt); line-height: 1.5;
}

.exo-score {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 10px;
}
.exo-score b { font-size: 1.6rem; color: var(--txt); }
.exo-score span { color: var(--txt-2); }
.exo-score-plein b { color: var(--ok-txt, #5EE0A0); }

.exo-points { list-style: none; margin: 0; padding: 0; }
.exo-points li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--line, #2a2536);
}
.exo-puce {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.exo-ok .exo-puce { background: color-mix(in srgb, #5EE0A0 22%, transparent); color: var(--ok-txt, #5EE0A0); }
.exo-ko .exo-puce { background: color-mix(in srgb, #FF5C7A 22%, transparent); color: var(--ko-txt, #FF8A7A); }
.exo-corps { flex: 1; }
.exo-corps b { color: var(--txt); font-weight: 600; }
.exo-detail { margin: 4px 0 0; color: var(--txt-2); font-size: .9rem; }
.exo-conseil {
  margin: 6px 0 0; padding: 8px 12px; border-radius: var(--r-bloc, 8px);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 10%, transparent);
  color: var(--txt-2); font-size: .9rem; line-height: 1.55;
}

@media (max-width: 640px) {
  .exo-depot { padding: 16px 14px; }
  .exo-zone { padding: 20px 12px; }
}

/* =========================================================================
   Les micro-exercices joues dans la page (micro.js)
   ========================================================================= */

.mx-serie { margin: 22px 0; display: grid; gap: 16px; }

.mx {
  border: 1px solid var(--line, #2a2536);
  border-left: 3px solid var(--violet, #7E4DD2);
  border-radius: var(--r-bloc, 12px);
  background: var(--surface, #1b1726);
  padding: 16px 18px;
}
.mx-fini { border-left-color: var(--line-2, #3a3450); }

.mx-haut { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
/* deja fait (30/09/2026) : la pastille d un exercice tente, apres rechargement */
.mx-deja {
  margin-left: auto; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-2, #3a3450); color: var(--txt-2, #b8b0cc);
}
.mx-deja-juste { border-color: var(--ok-txt, #5EE0A0); color: var(--txt, #ececf3); }
.mx-type {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-txt, #C9B3F5);
}
.mx-niveau {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 16%, transparent);
  color: var(--accent-txt, #C9B3F5);
}
.mx-niveau-initial      { background: color-mix(in srgb, #2BB673 16%, transparent); color: #7FE0B0; }
.mx-niveau-operationnel { background: color-mix(in srgb, #2B7FFF 16%, transparent); color: #8AB8FF; }
.mx-niveau-avance       { background: color-mix(in srgb, #F5A623 18%, transparent); color: #F5C26B; }
.mx-niveau-expert       { background: color-mix(in srgb, #FF5C7A 18%, transparent); color: #FF8A7A; }

.mx-question { margin: 0 0 12px; color: var(--txt); line-height: 1.6; }
.mx-corps { display: grid; gap: 8px; }

/* propositions */
.mx-opt {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: var(--surface-2, #242034);
  color: var(--txt); font: inherit; font-size: .95rem;
  transition: border-color .15s, background .15s;
}
.mx-opt:hover:not(:disabled) { border-color: var(--violet, #7E4DD2); }
/* apres la reponse : pas d opacite, qui effacait aussi le code colore
   des propositions (3,7:1) ; le texte passe simplement en secondaire */
.mx-opt:disabled { cursor: default; color: var(--txt-2, #b8b0cc); }
.mx-opt-vf { display: inline-block; width: auto; min-width: 110px; text-align: center; margin-right: 8px; }
.mx-opt-juste {
  border-color: var(--ok-txt, #5EE0A0); opacity: 1;
  background: color-mix(in srgb, #5EE0A0 14%, transparent);
}
.mx-opt-faux {
  border-color: var(--ko-txt, #FF8A7A);
  background: color-mix(in srgb, #FF5C7A 14%, transparent);
}
/* proposition choisie, en attente du bouton Valider (21/10/2026) : le meme code
   que la zone choisie d un exercice cible */
.mx-opt-choisie {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--violet, #7E4DD2);
}

/* saisie */
.mx-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.mx-champ {
  flex: 1 1 220px; padding: 10px 14px; border-radius: var(--r-bloc, 10px);
  border: 1px solid var(--bord-champ, var(--line-2, #3a3450));
  background: var(--surface-2, #242034);
  color: var(--txt); font: inherit;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.mx-champ:focus { outline: none; border-color: var(--violet, #7E4DD2); }
/* le texte d indication (« Ta réponse », « A1:D20 ») : le gris du navigateur
   tombait a 2,6:1 en sombre et 4,3:1 en clair (audit du 30/09/2026) */
.mx-champ::placeholder { color: var(--txt-2, #b8b0cc); opacity: 1; }
/* Jetons poses par theme-pont.css (27/09/2026) ; sans eux, les couleurs
   d origine, dessinees pour le theme sombre. */
.mx-champ-juste { border-color: var(--ok-txt, #5EE0A0); }
.mx-champ-faux { border-color: var(--ko-txt, #FF8A7A); }
.mx-valider {
  padding: 10px 18px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid transparent; background: var(--accent-fond, var(--violet, #7E4DD2));
  color: var(--accent-encre, #fff); font: inherit; font-weight: 600;
}
/* inactif : lisible (surface neutre), plus de blanc a demi efface sur l accent */
.mx-valider:disabled {
  cursor: default; background: var(--surface-2, #2a2436);
  color: var(--txt-2, #b8b0cc); border-color: var(--line-2, #3a3450);
}
.mx-indice { margin: 8px 0 0; color: var(--txt-3, #8C85A3); font-size: .86rem; }
.mx-indice-alerte { color: #F5C26B; }

/* remise en ordre */
.mx-etapes { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: mx; }
.mx-etape {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px; border-radius: var(--r-bloc, 10px);
  border: 1px solid var(--line-2, #3a3450);
  background: var(--surface-2, #242034);
  color: var(--txt);
}
.mx-etape::before {
  counter-increment: mx; content: counter(mx);
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
  color: var(--accent-txt, #C9B3F5);
}
.mx-etape-txt { flex: 1; }
.mx-fleches { display: flex; gap: 4px; }
.mx-fleche {
  width: 30px; height: 30px; border-radius: var(--r-bloc, 8px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: var(--surface, #1b1726); color: var(--txt); font: inherit;
}
/* inactive (en haut ou en bas de liste) : texte SECONDAIRE, pas tertiaire --
   3,5 a 3,9:1 mesures le 27/09 (contenu-pedagogique), sous le seuil */
.mx-fleche:disabled { cursor: default; color: var(--txt-2, #b8b0cc); border-style: dashed; }
.mx-etape-juste { border-color: var(--ok-txt, #5EE0A0); }
.mx-etape-faux { border-color: var(--ko-txt, #FF8A7A); }

/* associations */
.mx-paires { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mx-col { display: grid; gap: 8px; align-content: start; }
.mx-paire {
  text-align: left; padding: 10px 12px; border-radius: var(--r-bloc, 10px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450);
  background: var(--surface-2, #242034);
  color: var(--txt); font: inherit; font-size: .92rem;
}
.mx-paire-active { border-color: var(--violet, #7E4DD2); background: color-mix(in srgb, var(--violet,#7E4DD2) 14%, transparent); }
.mx-paire-liee { border-style: solid; }
.mx-paire-prise { opacity: .45; }
.mx-lien { display: block; font-size: .8rem; color: var(--accent-txt, #C9B3F5); margin-top: 3px; }
.mx-paire-juste { border-color: var(--ok-txt, #5EE0A0); }
.mx-paire-faux { border-color: var(--ko-txt, #FF8A7A); }

/* schema cliquable */
.mx-schema { margin: 4px 0 12px; }
.mx-schema svg { width: 100%; height: auto; display: block; }
.mx-zone { cursor: pointer; }
.mx-zone:hover > rect:first-of-type,
.mx-zone:hover > text { filter: brightness(1.35); }
.mx-zone-juste > rect:first-of-type { stroke: #5EE0A0; stroke-width: 2.5; }
.mx-zone-faux > rect:first-of-type { stroke: #FF8A7A; stroke-width: 2.5; }
.mx-zone-juste > text:first-of-type { fill: #5EE0A0; }
.mx-zone-faux > text:first-of-type { fill: #FF8A7A; }

/* verdict */
.mx-pied { margin-top: 12px; }
.mx-verdict { display: flex; gap: 10px; align-items: flex-start; }
.mx-verdict b { color: var(--txt); }
.mx-puce {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.mx-juste .mx-puce { background: color-mix(in srgb, #5EE0A0 22%, transparent); color: var(--ok-txt, #5EE0A0); }
.mx-faux .mx-puce { background: color-mix(in srgb, #FF5C7A 22%, transparent); color: var(--ko-txt, #FF8A7A); }
.mx-explication { margin: 6px 0 0; color: var(--txt-2); font-size: .9rem; line-height: 1.6; }
.mx-rejouer {
  margin-top: 10px; padding: 7px 14px; border-radius: var(--r-bloc, 8px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450); background: transparent;
  color: var(--txt-2); font: inherit; font-size: .86rem;
}
.mx-rejouer:hover { border-color: var(--violet, #7E4DD2); color: var(--txt); }

/* --- la revision des exercices rates (22/10/2026, p-023) ------------------
   Une barre au-dessus de la premiere serie de la seance, puis un panneau de
   copies des exercices rates du premier coup. Rien n'est note. */
.mx-revision-barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0; padding: 12px 16px; border-radius: var(--r-bloc, 12px);
  border: 1px solid var(--line-2, #3a3450);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 10%, transparent);
}
.mx-revision-txt { flex: 1 1 280px; margin: 0; color: var(--txt); font-size: .92rem; line-height: 1.55; }
.mx-revision-barre .mx-rejouer { margin-top: 0; }
.mx-revision { margin: 0 0 22px; padding: 4px 0 0 16px; border-left: 3px solid var(--violet, #7E4DD2); }
.mx-revision[hidden] { display: none; }
.mx-revision-titre { margin: 8px 0 4px; font-size: 1.05rem; color: var(--txt); }
.mx-revision-consigne { margin: 0 0 12px; color: var(--txt-2); font-size: .9rem; line-height: 1.55; }
.mx-rev-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2, #3a3450); color: var(--txt);
}
.mx.mx-revu { border-left-color: var(--ok-txt, #5EE0A0); }

/* --- le cas a embranchements (22/10/2026, p-023) -------------------------- */
.mx-cas-texte { margin: 0 0 10px; color: var(--txt); line-height: 1.6; }
.mx-cas-fil { margin: 0 0 10px; padding-left: 1.4em; color: var(--txt-2); font-size: .88rem; line-height: 1.55; }
.mx-cas-fil:empty { display: none; }
.mx-cas-pris { margin-bottom: 2px; }
.mx-cas-choix { display: grid; gap: 8px; }
.mx-cas-issue {
  display: inline-block; margin: 4px 0 0; padding: 3px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; border: 1px solid currentColor; color: var(--txt);
}
.mx-cas-issue-bon { color: var(--ok-txt, #5EE0A0); }
.mx-cas-issue-mauvais { color: var(--ko-txt, #FF8A7A); }

/* compteur de fin de serie */
.mx-compteur {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 24px 0; padding: 14px 18px; border-radius: var(--r-bloc, 12px);
  background: var(--surface, #1b1726);
  border: 1px solid var(--line, #2a2536);
}
.mx-compteur b { font-size: 1.3rem; color: var(--txt); }
.mx-barre {
  flex: 1 1 160px; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2, #242034);
}
.mx-barre > span { display: block; height: 100%; background: #5EE0A0; transition: width .3s; }
.mx-compteur-txt { color: var(--txt-2); font-size: .9rem; }

@media (max-width: 640px) {
  .mx-paires { grid-template-columns: 1fr; }
  .mx { padding: 14px; }
}

/* =========================================================================
   Le bilan d un QCM : reussite par niveau, par competence, estimation TOSA
   ========================================================================= */

.qcm-detail { margin-top: 16px; text-align: left; }
.qcm-detail-titre {
  margin: 0 0 10px; font-weight: 600; color: var(--txt);
}
.qcm-barres { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.qcm-barres li { display: flex; align-items: center; gap: 12px; }
.qcm-cat { flex: 0 0 auto; min-width: 190px; color: var(--txt-2); font-size: .9rem; }
.qcm-barres .mx-niveau { flex: 0 0 auto; min-width: 110px; text-align: center; }
.qcm-barre {
  flex: 1 1 auto; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--txt-3, #8C85A3) 25%, transparent);
}
.qcm-barre > i { display: block; height: 100%; background: #5EE0A0; }
.qcm-chiffre {
  flex: 0 0 auto; min-width: 58px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--txt-2); font-size: .9rem;
}
.qcm-tosa { margin: 12px 0 0; color: var(--txt); line-height: 1.6; }
.qcm-tosa b { color: var(--txt); }
.qcm-reserve { color: var(--txt-3, #8C85A3); font-size: .86rem; }

/* le chronometre de l examen blanc */
.qcm-chrono {
  position: sticky; top: 10px; z-index: 40;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 18px; border-radius: var(--r-bloc, 12px);
  background: var(--surface, #1b1726);
  border: 1px solid var(--line, #2a2536);
}
.qcm-chrono .temps {
  font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.qcm-chrono.presse .temps { color: #F5C26B; }
.qcm-chrono.fini .temps { color: var(--ko-txt, #FF8A7A); }
.qcm-chrono .note { color: var(--txt-2); font-size: .9rem; }

@media (max-width: 640px) {
  .qcm-barres li { flex-wrap: wrap; }
  .qcm-cat { min-width: 100%; }
}

/* --- QCM : les questions qui ne sont pas a quatre propositions ----------- */
.q-type {
  margin-left: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-3, #8C85A3);
}
.mx-attendu {
  margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-bloc, 8px);
  background: color-mix(in srgb, #5EE0A0 12%, transparent);
  color: var(--txt); font-size: .92rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.mx-zone-choisie > rect:first-of-type { stroke: var(--violet, #7E4DD2); stroke-width: 2.5; }
.q-card.q-juste { border-left: 3px solid var(--ok-txt, #5EE0A0); }
.q-card.q-faux { border-left: 3px solid var(--ko-txt, #FF8A7A); }
.q-card .mx-serie, .q-card .mx { margin: 0; }
.q-card .mx-schema { max-width: 620px; }

.mx-attendu-bloc {
  margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r-bloc, 10px);
  background: color-mix(in srgb, #5EE0A0 10%, transparent);
}
.mx-attendu-titre { margin: 0 0 6px; font-weight: 600; color: var(--txt); font-size: .92rem; }
.mx-attendu-liste { margin: 0; padding-left: 22px; color: var(--txt-2); font-size: .92rem; line-height: 1.7; }
.mx-lien-bon { color: var(--ok-txt, #5EE0A0); }
/* la reponse attendue d un exercice ferme, apres rechargement (02/10/2026) */
.mx-attendu-un { margin: 0; color: var(--txt); font-size: .92rem; line-height: 1.6; }
.mx-fini .mx-hot { cursor: default; }

/* --- une vraie capture d ecran, rendue cliquable ------------------------- */
.mx-photo { position: relative; display: inline-block; max-width: 100%; margin: 4px 0 12px; }
.mx-photo img {
  display: block; width: 100%; height: auto; border-radius: var(--r-bloc, 10px);
  border: 1px solid var(--line, #2a2536);
}
.mx-hot {
  position: absolute; border: 2px solid transparent; border-radius: 6px;
  background: transparent; cursor: pointer; padding: 0;
  transition: border-color .15s, background .15s;
}
.mx-hot:hover, .mx-hot:focus-visible {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
  outline: none;
}
.mx-hot.mx-zone-choisie { border-color: var(--violet, #7E4DD2); background: color-mix(in srgb, var(--violet,#7E4DD2) 22%, transparent); }
.mx-hot.mx-zone-juste { border-color: #5EE0A0; background: color-mix(in srgb, #5EE0A0 22%, transparent); }
.mx-hot.mx-zone-faux { border-color: #FF8A7A; background: color-mix(in srgb, #FF5C7A 22%, transparent); }

/* =========================================================================
   Mode clair : deux blocs passaient sous le seuil de lisibilite
   -------------------------------------------------------------------------
   Mesure du 25/09 sur les pages BA1 et BA2, thème clair :

     .mx-niveau  4,0:1  la pastille reprenait la couleur du logiciel comme
                        couleur de TEXTE, sur une teinte de la meme couleur.
                        Deux tons proches : illisible en petit corps.
     .mx-indice  3,5:1  l indice utilisait --txt-3, pense pour du texte
                        secondaire sur fond sombre.

   On garde le code couleur — il vient du FOND de la pastille — et on rend
   le texte franchement sombre. 4,5:1 est le minimum exige pour du petit
   texte, et ces pastilles font 0,68 rem.
   ========================================================================= */

:root[data-theme="light"] .mx-niveau,
:root[data-theme="light"] .exo-niveau,
:root[data-theme="light"] .mx-type {
  color: #15111C;
}
:root[data-theme="light"] .mx-indice {
  color: var(--txt-2);
}
/* le message « schema / capture indisponible » : jaune clair pense pour le
   sombre, 1,64:1 sur blanc (audit du 30/09) ; encre jaune des chakras. */
:root[data-theme="light"] .mx-indice-alerte {
  color: #735400;
}
:root[data-theme="light"] .qcm-reserve,
:root[data-theme="light"] .mx-compteur-txt,
:root[data-theme="light"] .q-type {
  color: var(--txt-2);
}

/* -------------------------------------------------------------------------
   Mode sombre : la pastille "Basique" seule etait limite
   -------------------------------------------------------------------------
   Mesure du 25/09, avec composition correcte des couches translucides :

     Basique       4,2 a 4,7:1  selon le fond de la carte  <- sous le seuil
     Operationnel  7,7:1
     Avance        8,2:1
     Expert        6,4:1

   Les trois derniers portent une couleur explicite, claire. "Basique", lui,
   reprenait --accent-txt, c est-a-dire la couleur du logiciel : le vert
   d Excel sur une teinte de ce meme vert. Deux tons proches, en corps 0,68
   rem. On eclaircit la couleur du logiciel plutot que de la remplacer : le
   code couleur reste lisible, et la regle vaut pour Word, Photoshop et les
   autres sans etre reecrite.

   La cible est etroite a dessein : ecrire ".mx-niveau" ici ecraserait aussi
   les trois variantes, qui n ont aucun probleme.
   ------------------------------------------------------------------------- */

:root[data-theme="dark"] .mx-niveau-basique,
:root[data-theme="dark"] .exo-niveau:not(.exo-niveau-initial):not(.exo-niveau-operationnel):not(.exo-niveau-avance):not(.exo-niveau-expert) {
  color: color-mix(in srgb, var(--accent-txt, #C9B3F5) 55%, #fff);
}

/* --- le parcours d un atelier : telecharger, travailler, deposer --------- */
.exo-etapes {
  margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: exo;
  display: grid; gap: 10px;
}
/* La pastille est posee en absolu, et non en colonne de grille : une
   etape peut contenir plusieurs liens et une liste (les exports attendus
   d un atelier d image). En grille, chaque enfant au-dela du deuxieme
   retombait dans la colonne de 26 px de la pastille. */
.exo-etapes > li {
  position: relative; padding-left: 36px; min-height: 24px;
  color: var(--txt-2); font-size: .93rem; line-height: 1.55;
}
.exo-etapes > li::before {
  counter-increment: exo; content: counter(exo);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 20%, transparent);
  color: var(--accent-txt, #C9B3F5);
}
.exo-etapes > li > b { color: var(--txt); font-weight: 600; }
.exo-etape-txt { color: var(--txt-2); }

.exo-telecharger {
  display: inline-block; margin: 4px 0 0 10px; padding: 5px 14px;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .88rem;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 22%, transparent);
  color: var(--accent-txt, #C9B3F5);
  border: 1px solid color-mix(in srgb, var(--violet, #7E4DD2) 45%, transparent);
}
.exo-telecharger:hover { background: var(--accent-fond, var(--violet, #7E4DD2)); color: var(--accent-encre, #fff); }
:root[data-theme="light"] .exo-telecharger { color: #15111C; }

.exo-zone-sous { display: block; margin-top: 4px; font-size: .84rem; color: var(--txt-3, #8C85A3); }
:root[data-theme="light"] .exo-zone-sous { color: var(--txt-2); }

@media (max-width: 640px) {
  .exo-telecharger { margin: 6px 0 0; display: block; text-align: center; }
  .exo-etapes > li { padding-left: 32px; }
}


/* ---------------------------------------- les ateliers d image (exports.js)
   La liste des exports attendus, puis la grille d auto-evaluation sur
   l echelle de l intervenant : N1 a N4. Memes jetons que le reste de la
   zone de depot, donc justes dans les deux themes. */

.exp-attendus { margin: 6px 0 4px 1.1em; color: var(--txt-2); font-size: .92rem; }
.exp-attendus li { margin: 2px 0; }

.exp-auto {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line, #2a2536);
}
.exp-auto-titre { margin: 0 0 4px; font-size: 1rem; color: var(--txt); }
.exp-auto-intro { margin: 0 0 12px; color: var(--txt-2); font-size: .9rem; }

.exp-critere {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line, #2a2536);
}
.exp-critere-texte b { display: block; color: var(--txt); font-weight: 600; }
.exp-critere-texte span { color: var(--txt-2); font-size: .86rem; }
.exp-critere-pts { color: var(--txt-2); font-size: .82rem; white-space: nowrap; }

/* MB6 : les penalites de la grille, cochees par l'etudiant */
.exp-penalites { padding: 10px 0; border-top: 1px solid var(--line, #2a2536); display: grid; gap: 6px; }
.exp-penalites b { color: var(--txt); font-weight: 600; }
.exp-penalite { display: flex; align-items: center; gap: 6px; color: var(--txt); font-size: .9rem; cursor: pointer; }
.exp-penalite input { width: 18px; height: 18px; accent-color: var(--accent, #7E4DD2); }

.exp-niveaux { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-niveau {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 70px; padding: 5px 8px;
  border: 1px solid var(--line-2, #3a3450); border-radius: var(--r-bloc, 10px);
  cursor: pointer; line-height: 1.2;
}
.exp-niveau input { position: absolute; opacity: 0; pointer-events: none; }
.exp-niveau-cle { font-weight: 800; font-size: .86rem; color: var(--txt); }
.exp-niveau-nom { font-size: .7rem; color: var(--txt-2); }
.exp-niveau:hover { border-color: var(--violet, #7E4DD2); }
.exp-niveau:has(input:checked) {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 20%, transparent);
}
.exp-niveau:has(input:focus-visible) { outline: 3px solid var(--violet, #7E4DD2); outline-offset: 2px; }

.exp-auto-score { margin: 12px 0 2px; font-weight: 700; color: var(--txt); }
.exp-envoi { margin: 0; color: var(--txt-2); font-size: .9rem; }

@media (max-width: 720px) {
  .exp-critere { grid-template-columns: 1fr; }
  .exp-critere-pts { justify-self: start; }
  .exp-niveau { min-width: 0; flex: 1; }
}

/* =========================================================================
   Six formats ajoutes le 27/09/2026 (micro.js) : trous, chemin de menus,
   categories, nombre, avant/apres, defaut sur un visuel reel.
   Memes jetons que le reste (theme-pont.css les redefinit en clair) :
   aucun texte blanc pose sur l accent, aucune opacite sur un texte.
   ========================================================================= */

/* texte a trous */
.mx-trous { margin: 0 0 10px; line-height: 2.4; color: var(--txt); }
.mx-trou {
  display: inline-block; flex: none; width: auto; min-width: 4ch;
  padding: 4px 8px; margin: 0 4px; vertical-align: baseline;
}
.mx-attendu-trou {
  display: inline-block; margin: 0 6px 0 2px; font-size: .88rem; font-weight: 600;
  color: var(--ok-txt, #5EE0A0);
}
.mx-banque { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-banque-titre { color: var(--txt-2, #b8b0cc); font-size: .88rem; }
.mx-mot {
  padding: 2px 8px; border-radius: 6px; font-size: .88rem;
  border: 1px solid var(--line-2, #3a3450); background: var(--surface-2, #242034); color: var(--txt);
}

/* chemin de menus : un faux ruban */
.mx-ruban {
  display: grid; gap: 6px; padding: 8px; border-radius: var(--r-bloc, 10px);
  border: 1px solid var(--line-2, #3a3450); background: var(--surface-2, #242034);
}
.mx-rang { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-onglets { border-bottom: 1px solid var(--line-2, #3a3450); padding-bottom: 6px; }
.mx-onglet, .mx-cmd {
  padding: 6px 12px; border-radius: var(--r-bloc, 8px); cursor: pointer; font: inherit; font-size: .9rem;
  border: 1px solid var(--line-2, #3a3450); background: var(--surface, #1b1726); color: var(--txt);
}
.mx-onglet { font-weight: 600; }
.mx-onglet:hover:not(:disabled), .mx-cmd:hover:not(:disabled) { border-color: var(--violet, #7E4DD2); }
.mx-cmd-active {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 16%, transparent);
}
.mx-onglet:disabled, .mx-cmd:disabled { cursor: default; color: var(--txt-2, #b8b0cc); }
/* le chemin choisi reste lisible une fois fige : texte principal sur le fond
   teinte (mesure du 27/09 : 4,33:1 en secondaire, theme sombre de Photoshop) */
.mx-onglet.mx-cmd-active:disabled, .mx-cmd.mx-cmd-active:disabled { color: var(--txt); }
.mx-cmd-retour { justify-self: start; margin-top: 4px; }
.mx-fil {
  margin: 8px 0 0; padding: 6px 10px; border-radius: var(--r-bloc, 8px); font-weight: 600;
  border: 1px dashed var(--line-2, #3a3450); color: var(--txt);
}
.mx-fil-juste { border-style: solid; border-color: var(--ok-txt, #5EE0A0); }
.mx-fil-faux { border-style: solid; border-color: var(--ko-txt, #FF8A7A); }

/* classement en categories */
.mx-cats { display: grid; gap: 8px; margin-bottom: 4px; }
.mx-cat-ligne {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--r-bloc, 10px);
  border: 1px solid var(--line-2, #3a3450); background: var(--surface-2, #242034); color: var(--txt);
}
.mx-cat-elt { flex: 1 1 220px; }
.mx-cat-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-cat-btn {
  padding: 6px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .85rem;
  border: 1px solid var(--line-2, #3a3450); background: var(--surface, #1b1726); color: var(--txt);
}
.mx-cat-btn:hover:not(:disabled) { border-color: var(--violet, #7E4DD2); }
.mx-cat-active {
  border-color: var(--violet, #7E4DD2); font-weight: 700;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 18%, transparent);
}
.mx-cat-btn:disabled { cursor: default; }
.mx-cat-juste { border-color: var(--ok-txt, #5EE0A0); }
.mx-cat-faux { border-color: var(--ko-txt, #FF8A7A); }

/* reponse chiffree */
.mx-nombre { flex: 0 1 180px; }
.mx-unite { align-self: center; color: var(--txt-2, #b8b0cc); font-weight: 600; }

/* avant / apres */
.mx-comparer {
  position: relative; overflow: hidden; border-radius: var(--r-bloc, 10px); margin: 4px 0 6px;
  border: 1px solid var(--line, #2a2536);
}
.mx-calque img, .mx-calque svg { display: block; width: 100%; height: auto; }
.mx-calque-apres { position: absolute; inset: 0; }
.mx-etiquette {
  position: absolute; top: 8px; padding: 2px 8px; border-radius: 6px; font-size: .78rem; font-weight: 700;
  background: var(--surface, #1b1726); color: var(--txt); border: 1px solid var(--line-2, #3a3450);
}
.mx-etiquette-g { left: 8px; }
.mx-etiquette-d { right: 8px; }
.mx-curseur { width: 100%; margin: 0 0 10px; accent-color: var(--violet, #7E4DD2); }

/* =========================================================================
   Choisir la cible (micro.js, 30/09/2026) : une capture d ecran du
   logiciel, l etudiant clique au bon endroit.
   Les marqueurs et les noms de zones sont poses SUR la capture : ils
   portent leurs propres couleurs, opaques (encres des chakras), avec un
   liseré blanc et un contour sombre. Ils restent donc visibles sur une
   capture claire comme sur une capture sombre, dans les deux themes.
   Blanc sur #1D6645 7,1:1 ; sur #9E2A2B 7,6:1 ; sur #3F4C9A 8,5:1.
   ========================================================================= */
.mx-cible-mode { margin: 0 0 8px; }
.mx-cible-cadre {
  margin: 4px 0 8px; overflow-x: auto; overflow-y: hidden;
  border-radius: var(--r-bloc, 10px);
  -webkit-overflow-scrolling: touch;
}
.mx-cible-scene {
  position: relative; width: 100%; line-height: 0;
  cursor: crosshair; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.mx-cible-scene img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2, #3a3450); border-radius: var(--r-bloc, 10px);
  -webkit-user-drag: none;
}
/* la loupe : l image double de largeur, on la fait defiler dans son cadre */
.mx-cible-loupe .mx-cible-scene { width: 200%; max-width: none !important; }
.mx-fini .mx-cible-scene { cursor: default; }

.mx-marque {
  position: absolute; z-index: 3; box-sizing: border-box;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1B1B1F, 0 2px 6px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  font: 700 13px/1 system-ui, "Segoe UI", sans-serif;
  pointer-events: none;
}
button.mx-marque { pointer-events: auto; cursor: pointer; }
button.mx-marque:focus-visible { outline: 3px solid #F0B92C; outline-offset: 2px; }
.mx-marque-pose { background: #3F4C9A; color: #fff; }
.mx-marque-juste { background: #1D6645; color: #fff; }
.mx-marque-faux { background: #9E2A2B; color: #fff; }
/* un point faux d un essai precedent : blanc, bord tirete, pas d opacite */
.mx-marque-ancien {
  z-index: 2; background: #fff; color: #4A4A55;
  border: 2px dashed #9E2A2B; box-shadow: 0 0 0 1px #1B1B1F;
}

.mx-cible-zone {
  position: absolute; z-index: 1; box-sizing: border-box; pointer-events: none;
  border: 3px solid #1D6645; border-radius: 6px;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #fff;
  background: rgba(46, 155, 107, .16);
  line-height: 1.3;
}
.mx-cible-nom {
  position: absolute; z-index: 4; left: -3px; top: calc(100% + 6px);
  width: max-content; max-width: 220px;
  padding: 3px 8px; border-radius: 6px;
  background: #1D6645; color: #fff; font-size: .8rem; font-weight: 700;
  box-shadow: 0 0 0 2px #fff; white-space: normal;
}
.mx-cible-nom-haut { top: auto; bottom: calc(100% + 6px); }
.mx-cible-nom-droite { left: auto; right: -3px; }

.mx-cible-outils { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 8px; }
.mx-cible-btn {
  padding: 7px 14px; border-radius: var(--r-bloc, 8px); cursor: pointer;
  border: 1px solid var(--line-2, #3a3450); background: var(--surface-2, #242034);
  color: var(--txt); font: inherit; font-size: .88rem;
}
.mx-cible-btn:hover:not(:disabled) { border-color: var(--violet, #7E4DD2); }
.mx-cible-btn[aria-pressed="true"] {
  border-color: var(--violet, #7E4DD2);
  background: color-mix(in srgb, var(--violet, #7E4DD2) 16%, var(--surface-2, #242034));
}
.mx-cible-btn:disabled { cursor: default; color: var(--txt-2, #b8b0cc); border-style: dashed; }
.mx-cible-compte { color: var(--txt-2, #b8b0cc); font-size: .88rem; }

.mx-cible-clavier { margin: 2px 0 0; }
.mx-cible-clavier > summary {
  cursor: pointer; padding: 4px 0; color: var(--txt-2, #b8b0cc); font-size: .88rem;
}
.mx-cible-clavier > summary:hover { color: var(--txt); }
.mx-cible-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px; margin-top: 8px;
}
.mx-cible-choix { font-size: .9rem; }
.mx-cible-pris {
  border-color: var(--violet, #7E4DD2); font-weight: 600;
  background: color-mix(in srgb, var(--violet, #7E4DD2) 16%, var(--surface-2, #242034));
}

@media (max-width: 640px) {
  .mx-cible-liste { grid-template-columns: 1fr; }
  .mx-marque { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
}

/* Le repere d une reponse pas encore validee (14/10/2026) : une pastille
   indigo cerclee (contour indigo, liseré blanc, trait sombre), visible sur
   une capture claire comme sombre. Il laisse passer les clics : un clic
   suivant le deplace. Indigo #3F4C9A sur blanc 8,5:1 ; blanc sur #1B1B1F. */
.mx-marque.mx-marque-repere {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
}
.mx-marque.mx-marque-repere::after {
  content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid #3F4C9A;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1B1B1F, inset 0 0 0 2px #fff;
}
.mx-photo .mx-marque { z-index: 3; }
/* Reessayer a cote de Valider (15/10/2026) : meme ligne quand la place le
   permet, sinon a la ligne (flex-wrap), sans jamais deborder. */
.mx-cible-outils .mx-rejouer { margin-top: 0; }
.mx-cible-actions { display: inline-flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; max-width: 100%; }
.mx-cible-actions > button { max-width: 100%; white-space: normal; }
.mx-cible-outils > button { max-width: 100%; white-space: normal; }
/* sur telephone, la capture est petite : un cercle plus serre cache moins */
@media (max-width: 640px) {
  .mx-marque.mx-marque-repere { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .mx-marque.mx-marque-repere::after { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
}