/* Piscine 42 — feuille de style.
   Sobre par construction : aucun badge, aucune barre de progression globale,
   aucun confetti. Le score en cascade est la seule métrique affichée. */

:root {
  --fond: #0e1116;
  --fond-2: #12161c;
  --fond-3: #171c24;
  --bord: #262c36;
  --texte: #d7dae0;
  --texte-faible: #8b93a1;
  --accent: #6aa9f0;
  --ok: #7fbf7f;
  --echec: #e0716b;
  --grave: #d94f4f;
  --attention: #d9a441;
  --mono: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fond); color: var(--texte);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-size: 13px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }

/* ------------------------------------------------------------- connexion */
body.centre { display: grid; place-items: center; }

.carte-connexion {
  width: 320px; padding: 32px;
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 8px;
}
.carte-connexion h1 { font-size: 20px; margin-bottom: 2px; }
.carte-connexion .sous-titre { color: var(--texte-faible); margin: 0 0 24px; font-size: 13px; }
.carte-connexion label { display: block; font-size: 12px; color: var(--texte-faible); margin-top: 14px; }
.carte-connexion input {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 4px;
  color: var(--texte); font-family: var(--mono);
}
.carte-connexion button {
  width: 100%; margin-top: 22px; padding: 9px;
  background: var(--accent); border: 0; border-radius: 4px;
  color: #0b1017; font-weight: 600; cursor: pointer;
}
.erreur { color: var(--echec); font-size: 13px; margin: 14px 0 0; }

/* ---------------------------------------------------------------- entête */
.entete {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: var(--fond-2); border-bottom: 1px solid var(--bord);
}
.entete .marque { font-weight: 600; letter-spacing: .02em; }
.entete .vide { flex: 1; }
.entete .qui { color: var(--texte-faible); font-size: 13px; }
.entete form { display: inline; }
button.lien {
  background: none; border: 0; color: var(--texte-faible);
  cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline;
}
.retour { color: var(--texte-faible); font-size: 13px; }

/* -------------------------------------------------------------- parcours */
.parcours { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }
.parcours h1 { font-size: 22px; }
.parcours .note { color: var(--texte-faible); font-size: 13px; margin-bottom: 26px; }

.modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.module {
  padding: 14px 16px; background: var(--fond-2);
  border: 1px solid var(--bord); border-radius: 6px;
}
.module.valide { border-color: #2f4a35; }
.tete-module { display: flex; align-items: baseline; gap: 10px; }
.tete-module h2 { font-size: 15px; margin: 0; }
.etiquette {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-faible); border: 1px solid var(--bord);
  border-radius: 3px; padding: 1px 5px;
}
.etiquette.exam { color: var(--attention); border-color: #4a3d21; }
.etiquette.rush { color: var(--accent); border-color: #24384f; }
.module .resume { color: var(--texte-faible); font-size: 13px; margin: 6px 0; }
.chiffres { display: flex; gap: 16px; align-items: baseline; margin: 8px 0; font-size: 13px; }
.score { font-family: var(--mono); font-size: 15px; }
.score.ok { color: var(--ok); }
.score.triche { color: var(--grave); }
.seuil, .avancement { color: var(--texte-faible); }
.exercices { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.exercices a {
  display: inline-block; padding: 2px 8px; font-family: var(--mono); font-size: 12px;
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: 3px;
  color: var(--texte);
}

/* --------------------------------------------------------------- atelier */
body.atelier { display: flex; flex-direction: column; overflow: hidden; }

.bandeau {
  display: flex; align-items: center; gap: 18px;
  padding: 7px 16px; background: var(--fond-2);
  border-bottom: 1px solid var(--bord); font-size: 13px; flex: 0 0 auto;
}
.bandeau-module { font-weight: 600; }
.bandeau-score { font-family: var(--mono); }
.bandeau-score.ok { color: var(--ok); }
.bandeau-score.triche { color: var(--grave); }
.bandeau-temps { color: var(--texte-faible); margin-left: auto; }

.trois-zones { flex: 1 1 auto; display: flex; min-height: 0; }
.zone { display: flex; flex-direction: column; min-width: 180px; min-height: 0; }
.zone.gauche  { flex: 0 0 30%; border-right: 1px solid var(--bord); }
.zone.centre  { flex: 1 1 auto; background: var(--fond-2); }
.zone.droite  { flex: 0 0 26%; border-left: 1px solid var(--bord); }

.poignee { flex: 0 0 4px; cursor: col-resize; background: transparent; }
.poignee:hover { background: var(--bord); }
body.en-glissement { user-select: none; cursor: col-resize; }

.tete-zone {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; font-size: 12px; color: var(--texte-faible);
  background: var(--fond-3); border-bottom: 1px solid var(--bord); flex: 0 0 auto;
}
.tete-zone button {
  margin-left: auto; background: none; border: 1px solid var(--bord);
  color: var(--texte-faible); border-radius: 3px; cursor: pointer; padding: 1px 6px;
}

.etat-connexion { font-family: var(--mono); font-size: 11px; }
.etat-connexion[data-etat="ouvert"]    { color: var(--ok); }
.etat-connexion[data-etat="connexion"] { color: var(--attention); }
.etat-connexion[data-etat="ferme"]     { color: var(--texte-faible); }

.zone .contenu { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; min-height: 0; }
#terminal { flex: 1 1 auto; min-height: 0; padding: 6px 4px 4px 8px; }
.xterm-viewport::-webkit-scrollbar { width: 9px; }
.xterm-viewport::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 4px; }

body.terminal-plein .zone.gauche,
body.terminal-plein .zone.droite,
body.terminal-plein .poignee { display: none; }

/* onglets du panneau gauche */
.onglets { display: flex; gap: 0; border-bottom: 1px solid var(--bord); flex: 0 0 auto; }
.onglets button {
  flex: 1; padding: 7px 4px; font-size: 12px; cursor: pointer;
  background: var(--fond-3); border: 0; border-right: 1px solid var(--bord);
  color: var(--texte-faible);
}
.onglets button.actif { background: var(--fond); color: var(--texte); font-weight: 600; }
.bloc.cache { display: none; }

.notions { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; }
.notions span {
  font-size: 11px; color: var(--texte-faible);
  border: 1px solid var(--bord); border-radius: 3px; padding: 1px 6px;
}

.fiche { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
.fiche th {
  text-align: left; font-weight: 500; color: var(--texte-faible);
  padding: 4px 10px 4px 0; vertical-align: top; white-space: nowrap;
}
.fiche td { padding: 4px 0; }

.rendu h2 { font-size: 14px; margin-top: 20px; }
pre.commande, .zone pre {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px;
  padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 8px 0;
}
.zone .contenu p { margin: 0 0 12px; }

.porte-qcm {
  flex: 0 0 auto; padding: 12px 18px; font-size: 13px;
  background: #1d1a12; border-top: 1px solid #3d3520;
}
.bouton {
  display: inline-block; margin-top: 8px; padding: 6px 12px;
  background: var(--accent); color: #0b1017; border-radius: 4px;
  font-size: 13px; font-weight: 600;
}

/* -------------------------------------------------------------- verdict */
.attente { color: var(--texte-faible); font-size: 13px; }
.verdict {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 4px; margin-bottom: 14px;
  background: var(--fond-3); border-left: 3px solid var(--bord);
}
.verdict .etiquette-verdict { font-weight: 600; font-size: 13px; }
.verdict .note { font-family: var(--mono); margin-left: auto; }
.verdict .quand { color: var(--texte-faible); font-size: 11px; width: 100%; }
.verdict.v-ok      { border-left-color: var(--ok); }
.verdict.v-triche  { border-left-color: var(--grave); background: #241417; }
.verdict.v-norme,
.verdict.v-compilation,
.verdict.v-tests,
.verdict.v-fuite,
.verdict.v-timeout,
.verdict.v-qcm     { border-left-color: var(--echec); }

.v-ok { color: var(--ok); }
.v-triche { color: var(--grave); font-weight: 600; }
.v-norme, .v-compilation, .v-tests, .v-fuite, .v-timeout, .v-qcm { color: var(--echec); }

.bloc-sortie { margin-bottom: 16px; }
.bloc-sortie h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                  color: var(--texte-faible); margin-bottom: 4px; }
.bloc-sortie pre { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.bloc-sortie.grave { border-left: 3px solid var(--grave); padding-left: 10px; }
.bloc-sortie .sec { color: var(--grave); font-size: 13px; }

.cascade h3, .historique h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-faible); margin: 18px 0 4px;
}
.cascade .explication { font-size: 12px; color: var(--texte-faible); margin-bottom: 8px; }
.cascade ol, .historique ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cascade li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 6px; border-radius: 3px; font-family: var(--mono);
}
.cascade li .etat { color: var(--texte-faible); margin-left: auto; }
.cascade li.c-valide { color: var(--ok); }
.cascade li.c-echoue, .cascade li.c-triche { color: var(--echec); }
.cascade li.ignore { opacity: .45; }
.cascade li .mention { font-size: 10px; color: var(--attention); }
.historique li { display: flex; gap: 10px; padding: 2px 0; font-family: var(--mono); }
.historique .quand { color: var(--texte-faible); }

/* ------------------------------------------------------------------ QCM */
body.qcm-plein { overflow-y: auto; }
.qcm { max-width: 720px; margin: 0 auto; padding: 28px 20px 80px; }
.qcm header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.qcm header .ou { color: var(--texte-faible); font-size: 13px; }
.qcm header .retour { margin-left: auto; }
.qcm .consigne { color: var(--texte-faible); font-size: 13px; margin-bottom: 30px; }
.question { margin-bottom: 34px; }
.question h2 { font-size: 16px; font-weight: 500; }
.reponses { display: grid; gap: 7px; margin-top: 12px; }
button.reponse {
  text-align: left; padding: 10px 13px; cursor: pointer;
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 5px;
  color: var(--texte); font-size: 14px; font-family: inherit;
}
button.reponse:hover { border-color: var(--accent); }

ul.correction { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
ul.correction li {
  display: grid; grid-template-columns: 20px 1fr; gap: 4px 8px;
  padding: 10px 13px; border-radius: 5px; font-size: 14px;
  background: var(--fond-2); border: 1px solid var(--bord);
}
ul.correction li.juste { border-color: #2f4a35; }
ul.correction li.fausse { opacity: .8; }
ul.correction li.choisie { box-shadow: inset 0 0 0 1px var(--accent); }
ul.correction .marque { font-family: var(--mono); }
ul.correction li.juste .marque { color: var(--ok); }
ul.correction li.fausse .marque { color: var(--echec); }
ul.correction .pourquoi {
  grid-column: 2; font-size: 12.5px; color: var(--texte-faible); line-height: 1.5;
}
.renvoi { font-size: 13px; color: var(--attention); margin-top: 10px; }
.fin-qcm { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--bord); }
.fin-qcm .ok { color: var(--ok); }
.fin-qcm .pas-encore { color: var(--texte-faible); }

/* --------------------------------------------------------------- parent */
body.parent { overflow-y: auto; }
.tableau { max-width: 1100px; margin: 0 auto; padding: 24px 20px 70px; }
.tableau section { margin-bottom: 34px; }
.tableau h2 { font-size: 15px; color: var(--texte-faible);
              text-transform: uppercase; letter-spacing: .05em; }
table.grille { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grille th, table.grille td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
table.grille th { color: var(--texte-faible); font-weight: 500; }
table.grille td.ok { color: var(--ok); }
table.grille td.triche { color: var(--grave); }
.pastilles { display: flex; flex-wrap: wrap; gap: 3px; }
.pastille {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--bord); display: inline-block;
}
.pastille.c-valide { background: var(--ok); }
.pastille.c-echoue { background: var(--echec); }
.pastille.c-triche { background: var(--grave); }
.pastille.ignore { opacity: .35; }
.alerte { color: var(--attention); }
.texte-sms { font-family: var(--mono); font-size: 12px; max-width: 460px; }
pre.sortie {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px;
  padding: 12px; overflow: auto; max-height: 420px; white-space: pre-wrap;
}
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.reglages { display: grid; gap: 10px; max-width: 380px; }
.reglages label { font-size: 12px; color: var(--texte-faible); display: grid; gap: 4px; }
.reglages label.case { display: flex; align-items: center; gap: 8px; }
.reglages input, .reglages textarea {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px;
  color: var(--texte); padding: 6px 9px; font-family: var(--mono); font-size: 13px;
}
.reglages button {
  justify-self: start; padding: 7px 14px; background: var(--accent);
  border: 0; border-radius: 4px; color: #0b1017; font-weight: 600; cursor: pointer;
}

/* ----------------------------------------------- coloration syntaxique */
.code { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px;
        padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
.code pre { margin: 0; background: none; border: 0; padding: 0; }

/* ------------------------------------------------------ paliers vim */
.palier-lien { margin: 10px 0 0; font-size: 13px; }
.palier-fait { color: var(--ok); margin-left: 10px; font-size: 12px; }
.carte-palier { margin: 24px 0; }
.carte-palier h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-faible); margin: 22px 0 6px;
}
.temps-reference { color: var(--texte-faible); font-size: 13px; }
.defi { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--bord); }
.chrono { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.chrono #affichage { font-family: var(--mono); font-size: 28px; }
.chrono form { display: inline; }
.palier h1 { font-size: 22px; margin-top: 6px; }

/* ------------------------------------------------------------- indices */
.zone-indice { margin: 18px 0; }
.bouton-indice {
  background: none; border: 1px solid var(--bord); border-radius: 4px;
  color: var(--texte-faible); cursor: pointer; font-size: 12px;
  padding: 5px 10px; font-family: inherit;
}
.bouton-indice:hover { border-color: var(--accent); color: var(--texte); }
.htmx-indicator { display: none; color: var(--texte-faible); margin-left: 8px; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

.indice {
  margin-top: 12px; padding: 12px 14px; border-radius: 4px;
  background: var(--fond-3); border-left: 3px solid var(--accent);
}
.indice.n2 { border-left-color: var(--attention); }
.indice.n3 { border-left-color: var(--echec); }
.tete-indice {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 11px; color: var(--texte-faible); margin-bottom: 8px;
}
.tete-indice .assiste { margin-left: auto; color: var(--attention); }
.texte-indice { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.escalade { font-size: 11px; color: var(--texte-faible); margin: 10px 0 0; }
.indice-absent { font-size: 12px; color: var(--texte-faible); margin-top: 10px; }

/* --------------------------------------------------- journal LLM (parent) */
.journal-llm details { border-bottom: 1px solid var(--bord); padding: 6px 0; }
.journal-llm summary { cursor: pointer; font-size: 13px; }
.journal-llm summary .quand { color: var(--texte-faible); margin-right: 10px; }
.journal-llm .rejete { color: var(--attention); }
.journal-llm pre {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px;
  padding: 10px; margin: 8px 0; max-height: 300px; overflow: auto;
  white-space: pre-wrap; font-size: 12px;
}

/* ---------------------------------------------------------------- examen */
.bandeau-examen { background: #1a1113; border-bottom-color: #4a2b30; }
.bandeau-niveau { color: var(--texte-faible); }
.chrono-examen {
  margin-left: auto; font-family: var(--mono); font-size: 18px;
  letter-spacing: .04em; color: var(--texte);
}
.chrono-examen.urgence  { color: var(--attention); }
.chrono-examen.critique { color: var(--grave); font-weight: 600; }

.verrou {
  margin: 10px 0 0; padding: 8px 11px; font-size: 13px;
  background: #1d1a12; border-left: 3px solid var(--attention);
  color: var(--texte-faible); border-radius: 3px;
}
.exam-lien { margin: 10px 0 0; font-size: 13px; }

.tentatives { list-style: none; margin: 12px 0; padding: 0; font-size: 12px; }
.tentatives li {
  display: flex; gap: 10px; padding: 3px 6px;
  font-family: var(--mono); border-radius: 3px;
}
.tentatives .quand { color: var(--texte-faible); }
.tentatives .niv { color: var(--texte-faible); }
.tentatives .verdict { margin-left: auto; }
.abandon { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--bord); }
.abandon button {
  background: none; border: 1px solid var(--bord); border-radius: 4px;
  color: var(--texte-faible); cursor: pointer; font-size: 12px; padding: 6px 11px;
}
.abandon button:hover { border-color: var(--grave); color: var(--grave); }
.zone .note { font-size: 12px; color: var(--texte-faible); }