:root {
  --encre: #1c2230; --doux: #5d6577; --fond: #f6f5f1; --carte: #ffffff; --trait: #e2e0d8;
  --acc: #1f5f8b; --acc-fond: #e8f0f6; --ok: #2e7d4f; --warn: #a35a00; --err: #b3261e;
  --rayon: 8px; --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --encre: #e7e8ec; --doux: #a1a7b3; --fond: #15171c; --carte: #1e2128; --trait: #333743;
          --acc: #7fb2dd; --acc-fond: #1f2b37; --ok: #6cc28e; --warn: #f0a656; --err: #ff8a80; }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--encre); background: var(--fond) }
a { color: var(--acc) }
h1 { font-size: 1.45rem; margin: 0 0 14px } h2 { font-size: 1.1rem; margin: 0 0 8px } h3 { font-size: .98rem; margin: 14px 0 6px }

/* barre du haut */
.barre { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; padding: 10px 20px;
         background: var(--carte); border-bottom: 1px solid var(--trait) }
.barre .nom { font-weight: 700; color: var(--encre); text-decoration: none; margin-right: 8px }
.barre nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 }
.barre nav a { color: var(--doux); text-decoration: none; padding: 5px 10px; border-radius: 6px }
.barre nav a:hover { background: var(--fond); color: var(--encre) }
.barre nav a.actif { background: var(--acc-fond); color: var(--acc); font-weight: 600 }
.barre .droite { display: flex; gap: 12px; align-items: center; color: var(--doux); font-size: .92rem }
@media (max-width: 600px) {   /* téléphone : nom et compte sur une ligne, sections défilantes en dessous */
  .barre { padding: 8px 12px; gap: 4px 10px }
  .barre .droite { margin-left: auto }
  .barre nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto }
  .barre nav a { white-space: nowrap }
}
.pastille { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--err);
            color: #fff; font-size: .75rem; text-align: center; line-height: 18px; margin-left: 4px }

main { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px }
main.etroit { max-width: 560px }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; margin: 0 0 16px }
.doux { color: var(--doux); font-size: .92rem }
.ok { color: var(--ok) } .warn { color: var(--warn) } .err { color: var(--err) }
.msg { padding: 10px 12px; border-radius: var(--rayon); border: 1px solid currentColor; margin: 0 0 14px; white-space: pre-line }

label { display: block; margin: 10px 0 4px; font-size: .9rem; color: var(--doux) }
input[type=email], input[type=text], input[type=password], input[type=search], input[type=datetime-local],
input[type=number], select, textarea {
  font: inherit; color: inherit; background: var(--fond); border: 1px solid var(--trait); border-radius: 6px;
  padding: 8px 10px; width: 100% }
textarea { font-family: var(--mono); font-size: .88rem }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: -1px }
input.code { font-size: 1.6rem; letter-spacing: .4em; text-align: center }
button, .btn { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--acc);
               background: var(--acc); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap }
button.second, .btn.second { background: transparent; color: var(--acc) }
button.lien { background: none; border: none; color: var(--acc); padding: 0 }
button.petit, .btn.petit { padding: 2px 8px; font-size: .85rem }
button.danger { border-color: var(--err); background: transparent; color: var(--err) }
form.inline { display: inline }
.ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px }
.sep { margin: 18px 0 8px; border-top: 1px solid var(--trait); padding-top: 12px }

table { width: 100%; border-collapse: collapse; font-size: .93rem }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--trait); vertical-align: top }
th { color: var(--doux); font-weight: 600; font-size: .85rem }
tr:hover td { background: color-mix(in srgb, var(--acc-fond) 40%, transparent) }
.tag { display: inline-block; padding: 0 7px; border-radius: 10px; background: var(--fond); border: 1px solid var(--trait);
       font-size: .78rem; color: var(--doux); margin: 1px 2px 1px 0; text-decoration: none }
.tag.type { background: var(--acc-fond); border-color: transparent; color: var(--acc) }
.etat-publie { color: var(--ok); font-size: .85rem } .etat-perime { color: var(--warn); font-size: .85rem }
.hash { font-family: var(--mono); font-size: .82rem; word-break: break-all }

/* filtres bibliothèque */
.filtres { display: grid; grid-template-columns: 1fr 180px 180px auto; gap: 8px; align-items: end }
@media (max-width: 700px) { .filtres { grid-template-columns: 1fr } }

/* site élève */
.rubrique h2 { border-bottom: 2px solid var(--acc-fond); padding-bottom: 4px }
.chapitre { margin: 10px 0 4px; font-weight: 600; color: var(--doux); font-size: .9rem }
.fichier { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--trait) }
.fichier .titre { flex: 1 }

/* messagerie : site_eleve/static/messagerie.css (commune au site et à la Forge) */

/* notes */
.grille { overflow: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon) }
.grille table { font-size: .88rem }
.grille th, .grille td { padding: 4px 6px; text-align: center; white-space: nowrap }
.grille th.nom, .grille td.nom { text-align: left; position: sticky; left: 0; background: var(--carte) }
.grille input { width: 52px; padding: 3px 4px; text-align: center; font-variant-numeric: tabular-nums }
.grille input.trop { outline: 2px solid var(--err) }
.grille td.total { font-weight: 700 }

/* éditeur */
body.editeur { height: 100vh; display: flex; flex-direction: column; overflow: hidden }
.ed { flex: 1; display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr); min-height: 0 }
.ed > * { min-height: 0 }
.ed .panneau { overflow: auto; padding: 12px 14px; border-right: 1px solid var(--trait); background: var(--carte) }
.ed .panneau h3:first-child { margin-top: 0 }
.ed .panneau label { margin-top: 8px }
.ed .source { display: flex; flex-direction: column; border-right: 1px solid var(--trait) }
.ed .outils { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--trait); background: var(--carte); font-size: .88rem; flex-wrap: wrap }
.ed .outils .espace { flex: 1 }
.ed .CodeMirror { flex: 1; height: auto; font-family: var(--mono); font-size: 13.5px; background: var(--carte); color: var(--encre) }
.ed .CodeMirror-gutters { background: var(--fond); border-right: 1px solid var(--trait) }
.ed .CodeMirror-cursor { border-left-color: var(--encre) }
.ed .ligne-erreur { background: color-mix(in srgb, var(--err) 18%, transparent) }
.ed .apercu { display: flex; flex-direction: column; background: #8e9097 }
.ed .pages { flex: 1; overflow: auto; padding: 14px }
.ed .pages svg { display: block; width: 100%; height: auto; background: #fff; margin: 0 auto 14px; box-shadow: 0 1px 4px rgba(0,0,0,.25) }
.ed .erreur { background: #fdecea; color: #8a1c14; font-family: var(--mono); font-size: .82rem; padding: 8px 12px; white-space: pre-wrap; display: none; cursor: pointer }
.ed .erreur.avert { background: #fff4e0; color: #7a4300; cursor: default }
.cases label { display: flex; gap: 8px; align-items: center; color: var(--encre); margin: 6px 0 }
.cases label input { width: auto }
.compo { list-style: none; padding: 0; margin: 4px 0 }
.compo li { display: flex; gap: 4px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--trait); font-size: .88rem }
.compo li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.compo button { padding: 0 6px; font-size: .8rem }
.resultats { max-height: 260px; overflow: auto; margin-top: 6px }
.resultat { padding: 6px 4px; border-bottom: 1px solid var(--trait); font-size: .88rem; cursor: pointer }
.resultat:hover { background: var(--acc-fond) }
.etat-sauve { font-size: .82rem; color: var(--doux) }
.etat-sauve.modifie { color: var(--warn) }
.cm-typst-fonction { color: #1f5f8b } .cm-typst-titre { color: #8b1f3d; font-weight: 700 }
.cm-typst-math { color: #6a3d9a } .cm-typst-chaine { color: #2e7d4f } .cm-typst-com { color: #8a8f99; font-style: italic }
.cm-typst-raw { color: #a35a00 }
@media (prefers-color-scheme: dark) {
  .cm-typst-fonction { color: #7fb2dd } .cm-typst-titre { color: #f08ba7 } .cm-typst-math { color: #c39bef }
  .cm-typst-chaine { color: #6cc28e } .cm-typst-raw { color: #f0a656 }
}
@media (max-width: 1000px) { .ed { grid-template-columns: 1fr; overflow: auto } body.editeur { height: auto; overflow: auto } .ed .CodeMirror { height: 60vh } }

/* liste déroulante cochable */
.multi { position: relative }
.multi-champ { width: 100%; display: flex; align-items: center; gap: 4px; text-align: left; background: var(--fond);
  color: var(--encre); border: 1px solid var(--trait); padding: 5px 8px; min-height: 38px; border-radius: 6px; white-space: normal }
.multi-valeurs { flex: 1; display: flex; flex-wrap: wrap; gap: 2px }
.multi-fleche { color: var(--doux) }
.multi-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); background: var(--carte);
  border: 1px solid var(--trait); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 6px }
.multi-options { max-height: 220px; overflow: auto; margin-top: 4px }
.multi-options label { display: flex; gap: 8px; align-items: center; margin: 0; padding: 4px 4px; color: var(--encre); border-radius: 4px; cursor: pointer }
.multi-options label:hover { background: var(--acc-fond) }
.multi-options input { width: auto }
.multi-ajout { margin-top: 6px; width: 100% }

/* ---------- barre latérale */
.cadre.avec-laterale { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - 53px) }
.laterale { background: var(--carte); border-right: 1px solid var(--trait); padding: 12px 8px; position: sticky; top: 0;
  align-self: start; height: calc(100vh - 53px); overflow: auto }
.laterale .groupe { margin-bottom: 14px }
.laterale .titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); padding: 2px 10px 4px }
.laterale a { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 6px;
  color: var(--encre); text-decoration: none; font-size: .93rem }
.laterale a:hover { background: var(--fond) }
.laterale a.actif { background: var(--acc-fond); color: var(--acc); font-weight: 600 }
.cadre.avec-laterale main { margin: 0; max-width: 1080px }
@media (max-width: 760px) {
  .cadre.avec-laterale { display: block }
  .laterale { position: static; height: auto; display: flex; overflow-x: auto; gap: 4px; border-right: 0; border-bottom: 1px solid var(--trait) }
  .laterale .groupe { display: flex; gap: 2px; margin: 0 } .laterale .titre { display: none } .laterale a { white-space: nowrap }
}
pre.diff { font-family: var(--mono); font-size: .82rem; background: var(--fond); padding: 10px; border-radius: 6px; overflow: auto; white-space: pre-wrap }
.diff-plus { background: color-mix(in srgb, var(--ok) 18%, transparent); display: inline-block; width: 100% }
.diff-moins { background: color-mix(in srgb, var(--err) 16%, transparent); display: inline-block; width: 100% }
.diff-zone { color: var(--acc) }
tr.actif td { background: var(--acc-fond) }

/* aller à la définition */
.cm-lien-def { text-decoration: underline; color: var(--acc) !important; cursor: pointer }
.ligne-cible { background: color-mix(in srgb, var(--acc) 18%, transparent) }
.bulle-info { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--encre); color: var(--fond); padding: 8px 14px; border-radius: 8px; font-size: .9rem;
  transition: .2s; pointer-events: none; z-index: 100; max-width: 80vw }
.bulle-info.visible { opacity: 1; transform: translateX(-50%) }

/* métadonnées lues dans le Typst (éditeur) */
.infos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 4px 0; font-size: .9rem }
.infos dt { color: var(--doux) }
.infos dd { margin: 0; overflow-wrap: anywhere }

/* versions d'un document */
.versions { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px }
.version { border: 1px solid var(--trait); border-radius: 6px; padding: 6px 8px; display: grid;
  grid-template-columns: 1fr auto; gap: 4px 6px; align-items: center; background: var(--fond) }
.version.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset }
.version .v-nom { font-weight: 600; padding: 2px 6px; min-width: 0; width: 100% }
.version .v-outils { display: flex; gap: 2px }
.version .v-outils button, .version .v-outils .btn { padding: 1px 6px; font-size: .8em }
.version .v-reglages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; cursor: pointer; min-height: 1.4em }
.version .v-reglages .tag.non { opacity: .65 }
.version .v-pub { grid-column: 1 / -1; order: 9; display: flex; gap: 6px; align-items: center; margin: 0;
  font-size: .85em; color: var(--doux) }
.version .v-pub input { width: auto }
.version .v-pub:has(input:checked) { color: var(--ok); font-weight: 600 }
.options-apercu { min-width: 0; max-width: 340px }
.options-apercu .multi-champ { white-space: nowrap; overflow: hidden }
.options-apercu .multi-valeurs { display: block; overflow: hidden; text-overflow: ellipsis }
.options-apercu .multi-liste { min-width: 240px; right: auto }

/* serveur de langage : documentation au survol (Ctrl), complétion */
.bulle-doc { position: fixed; z-index: 120; max-width: 460px; max-height: 50vh; overflow: auto; background: var(--carte);
  color: var(--encre); border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / .15);
  padding: 8px 10px; font-size: .85rem; line-height: 1.4 }
.bulle-doc pre { background: var(--fond); padding: 6px 8px; border-radius: 6px; font-family: var(--mono); font-size: .8rem;
  white-space: pre-wrap; margin: 4px 0 }
.bulle-doc code { font-family: var(--mono); font-size: .82em }
.bulle-doc hr { border: 0; border-top: 1px solid var(--trait); margin: 6px 0 }
.CodeMirror-hints { font-family: var(--mono); font-size: .82rem; z-index: 130 }
.CodeMirror-hint .hint-detail { color: var(--doux); margin-left: 10px; font-size: .9em }
.CodeMirror-hint-active .hint-detail { color: inherit; opacity: .85 }

/* aperçu dans la Forge : bandeau au-dessus du site */
.bandeau-apercu { padding: 8px 20px; background: var(--acc-fond); color: var(--encre); font-size: .92rem;
                  border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center }
.bandeau-apercu select { width: auto; padding: 2px 6px }