/* Caractères lisibles, contrastes francs, peu d'éléments : pensé pour un usage sans habitude de l'informatique. */
:root {
  --fond: #f7f8fa;
  --carte: #ffffff;
  --texte: #111827;
  --discret: #6b7280;
  --bord: #e5e7eb;
  --accent: #4f46e5;
  --accent-fonce: #4338ca;
  --accent-doux: #eef2ff;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --orange: #b85c00;
  --orange-fond: #fff3e3;
  --vert: #1e7a3c;
  --vert-fond: #e8f6ec;
  --rouge: #b3261e;
  --rouge-fond: #fdecea;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
}
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 .6rem; }
h1 a { color: inherit; text-decoration: none; }

.bandeau {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1.5rem; background: var(--accent); color: #fff;
}
.bandeau a { color: #fff; text-decoration: none; margin-left: 1.2rem; }
.bandeau .logo { font-weight: 700; font-size: 1.2rem; margin: 0; }
.bandeau form.en-ligne { margin-left: 1.2rem; }
.bandeau button.lien { color: #fff; text-decoration: none; opacity: .85; }

main { max-width: 1000px; margin: 1.5rem auto; padding: 0 1.5rem; }
main.etroit { max-width: 680px; }
main.large { max-width: 1500px; }

.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1rem 0; }
.vide { text-align: center; color: var(--discret); padding: 2.5rem; }
.discret { color: var(--discret); font-size: .9rem; }
.aide { color: var(--discret); font-size: .9rem; margin: .3rem 0 0; }
.bas { margin-top: 2rem; font-size: .9rem; }
.bas .bouton { margin-right: 1rem; }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
input { font: inherit; padding: .55rem .7rem; border: 2px solid var(--bord); border-radius: 8px; width: 100%; background: #fff; }
input:focus { outline: none; border-color: var(--accent); }
input[type=file] { border-style: dashed; padding: .8rem; }
input.court { width: 6rem; }

button, .bouton {
  font: inherit; font-weight: 600; display: inline-block; text-decoration: none; text-align: center;
  padding: .7rem 1.3rem; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
}
.principal { background: var(--accent); color: #fff; }
.principal:hover { background: var(--accent-fonce); }
.principal:disabled { background: #a5b4fc; cursor: default; }
.secondaire { background: #fff; color: var(--accent); border-color: var(--accent); }
.danger { background: var(--rouge); color: #fff; }
.danger-lien { color: var(--rouge); }
button.lien { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font-weight: 400; font-size: inherit; }
form.en-ligne { display: inline; margin-left: .8rem; }

.alerte { background: var(--orange-fond); border-left: 5px solid var(--orange); padding: .8rem 1rem; border-radius: 6px; }
.succes { background: var(--vert-fond); border-left: 5px solid var(--vert); padding: .8rem 1rem; border-radius: 6px; margin-bottom: 1rem; word-break: break-word; }
.pastille { background: var(--orange); color: #fff; border-radius: 999px; padding: .05rem .6rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.fait { color: var(--vert); font-weight: 600; }
.attente { color: var(--discret); font-style: italic; }
progress { width: 100%; height: 1.2rem; }

.etape { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.etape > div { flex: 1; }
.num { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }

.liste { list-style: none; padding: 0; }
.liste li a {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1rem 1.3rem; margin-bottom: .7rem;
}
.liste li a:hover { border-color: var(--accent); }
.liste .etat { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--accent); font-weight: 600; }

.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border-radius: 10px; overflow: hidden; }
.tableau th, .tableau td { padding: .6rem .9rem; border-bottom: 1px solid var(--bord); text-align: left; }
.tableau th { background: #eef0f3; font-size: .9rem; }
.tableau tr:hover td { background: #f9fafb; }
.vignette { max-height: 3.2rem; max-width: 18rem; display: block; border-radius: 4px; }

.zone-dessin { position: relative; display: inline-block; cursor: crosshair; user-select: none; touch-action: none; border: 1px solid var(--bord); }
.zone-dessin img { display: block; max-width: 100%; width: 900px; }
#cadre { position: absolute; border: 3px solid var(--rouge); background: rgba(179, 38, 30, .15); pointer-events: none; }

/* Écran d'une copie */
.total { font-size: 1.4rem; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.scans { position: sticky; top: 4.6rem; max-height: calc(100vh - 5.6rem); overflow: auto; }
.scan { width: 100%; display: block; margin-bottom: 1rem; border: 1px solid var(--bord); cursor: zoom-in; }
.scan.agrandi { width: 200%; cursor: zoom-out; }
.eleve .vignette { margin-bottom: .6rem; max-height: 6rem; max-width: 100%; }
.question { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .8rem; }
.question.a-verifier { border: 2px solid var(--orange); background: var(--orange-fond); }
.question[data-page] { cursor: pointer; }
.question.montree { box-shadow: 0 0 0 3px var(--accent); }
.q-tete { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .4rem; }
.q-id { font-weight: 700; font-size: 1.1rem; min-width: 2.5rem; }
.q-enonce { flex: 1; color: var(--discret); font-size: .9rem; }
.q-corps { display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
.etiquette { color: var(--discret); font-size: .85rem; }
label.commentaire { font-weight: normal; margin: .6rem 0 0; }
input.commentaire { font-size: .9rem; padding: .35rem .6rem; margin-top: .2rem; }
.lu { font-weight: 600; }
.justif, .attendu { font-size: .95rem; }
.saisie { text-align: right; min-width: 7.5rem; }
.saisie .note { width: 4.5rem; text-align: center; font-size: 1.3rem; font-weight: 700; }
.saisie .note.invalide { border-color: var(--rouge); }
.sur { font-size: 1.1rem; }
.modif { font-size: .8rem; color: var(--accent); }
.erreur-saisie { font-size: .8rem; color: var(--rouge); max-width: 10rem; }
.navigation { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 3rem; }
.navigation .principal { margin-left: auto; }

@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .scans { position: static; max-height: none; }
}

/* Création d'un contrôle */
textarea, select { font: inherit; padding: .55rem .7rem; border: 2px solid var(--bord); border-radius: 8px; width: 100%; background: #fff; }
textarea { resize: vertical; }
textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.grille-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1rem; }
.grille-champs .large-2 { grid-column: span 2; }
.grille-champs .large-4 { grid-column: span 4; }
.exercice h2 { font-size: 1.3rem; margin: 0; }
.exercice .entete { margin-bottom: .6rem; }
.exercice > div { margin-bottom: .7rem; }
.outils { display: flex; gap: 1rem; align-items: baseline; font-size: .9rem; }
.question-edit { border: 1px solid var(--bord); border-left: 5px solid var(--accent); border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0; background: #fafafa; }
.question-edit > * { margin-bottom: .6rem; }
.q-ligne { display: flex; gap: 1rem; align-items: flex-end; }
.q-ligne > .flex { flex: 1; }
.q-ligne input.court { width: 6rem; }
.choix { display: flex; gap: .7rem; align-items: center; margin-bottom: .4rem; }
.choix .rond { display: flex; align-items: center; gap: .3rem; margin: 0; font-weight: 700; cursor: pointer; }
.choix .rond input { width: 1.3rem; height: 1.3rem; }
.case-a-cocher { display: flex; gap: .6rem; align-items: center; font-weight: 400; cursor: pointer; }
.case-a-cocher input { width: 1.3rem; height: 1.3rem; flex: none; }
.ajouts { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
button.petit { padding: .4rem .8rem; font-size: .9rem; }
.barre-bas { position: sticky; bottom: 0; background: var(--fond); border-top: 2px solid var(--bord); padding: .4rem 0; margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.barre-bas .actions { margin: .4rem 0; }
.barre-bas form { margin: 0; }
#problemes { margin-top: 1rem; }
#problemes ul { margin: .3rem 0 0; }
label > input, label > textarea, label > select { display: block; margin-top: .3rem; font-weight: 400; }
label.remarque-generale { margin-top: .8rem; }
textarea#remarque { font: inherit; font-size: .95rem; padding: .5rem .7rem; border: 2px solid var(--bord); border-radius: 8px; width: 100%; resize: vertical; }
textarea#remarque:focus { outline: none; border-color: var(--accent); }

/* Bilan de la classe */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.chiffres .valeur { font-size: 1.6rem; font-weight: 700; }
.jauge { display: flex; align-items: center; gap: .6rem; min-width: 9rem; }
.jauge .piste { flex: 1; height: .8rem; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.jauge .rempli { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.jauge .taux { min-width: 3rem; text-align: right; font-weight: 600; }
.faible .taux { color: var(--rouge); }
.difficulte { border-left: 5px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin: 1rem 0; }
.difficulte h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.difficulte p { margin: .2rem 0; }
.frequentes { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
@media (max-width: 700px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filtres { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.filtres label { display: flex; gap: .5rem; align-items: center; margin: 0; }
.filtres select { width: auto; margin: 0; }
.question-edit.schema { border-left-color: var(--discret); }
.apercu-image { max-width: 100%; max-height: 18rem; display: block; border: 1px solid var(--bord); background: #fff; }
.grille-champs .large-3 { grid-column: span 3; }
/* Aperçu d'un texte tel qu'imprimé : même police et mêmes listes que sur le PDF. */
.apercu-formule { margin: .3rem 0 0; padding: .35rem .6rem .45rem; background: #fff; border: 1px solid var(--bord);
  border-left: 3px solid #c7d2fe; border-radius: 4px; font: .92rem/1.45 "DejaVu Sans", Verdana, sans-serif; color: #000; }
.apercu-formule::before { content: "Imprimé"; display: block; margin-bottom: .1rem; color: var(--discret);
  font: .75rem/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.apercu-formule .ligne { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.apercu-formule .item { display: flex; gap: .35em; padding-left: .8em; }
.apercu-formule .item .marque { flex: none; }
.apercu-formule sub, .apercu-formule sup { font-size: 70%; line-height: 0; }
.tableau-texte { border-collapse: collapse; margin: .3rem 0; font-size: .9em; }
.tableau-texte th, .tableau-texte td { border: 1px solid #555; padding: .15rem .5rem; text-align: left; min-width: 2.5em; height: 1.4em; }
.tableau-texte th { font-weight: 600; }
[hidden] { display: none !important; }
.tableau-saisie textarea { font-family: ui-monospace, Menlo, monospace; min-height: 7rem; }

/* Éditeur et aperçu de l'impression côte à côte */
.editeur-apercu { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.apercu { position: sticky; top: 4.6rem; max-height: calc(100vh - 5.6rem); display: flex; flex-direction: column; background: #eef0f4; border-radius: 10px; padding: .8rem; }
.apercu-defile { flex: 1 1 auto; min-height: 0; overflow: auto; }
.apercu .assistant { flex: none; margin: .6rem 0 0; padding: .8rem 1rem; }
.apercu .assistant .assistant-fil { max-height: 10rem; }
.apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.onglets { display: flex; }
.onglets button { padding: .3rem .9rem; font-size: .9rem; background: #fff; color: var(--accent); border: 2px solid var(--accent); border-radius: 0; }
.onglets button:first-child { border-radius: 8px 0 0 8px; }
.onglets button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.onglets button.actif { background: var(--accent); color: #fff; }
#apercu-etat { margin: .4rem 0 .6rem; }
#apercu-pages img { width: 100%; display: block; margin-bottom: .8rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: zoom-in; }
#apercu-pages.attente-maj img { opacity: .6; }
#loupe { position: fixed; inset: 0; background: rgba(0,0,0,.6); overflow: auto; z-index: 10; cursor: zoom-out; padding: 2rem; }
#loupe img { display: block; margin: 0 auto; width: min(900px, 100%); background: #fff; }
@media (max-width: 1100px) {
  .editeur-apercu { grid-template-columns: 1fr; }
  .apercu { position: static; max-height: none; }
  .apercu-defile { overflow: visible; }
}
/* Blocs côte à côte (« À côté du précédent »), comme sur la feuille */
.rangee { display: grid; gap: .8rem; align-items: start; border: 2px dashed var(--bord); border-radius: 10px; padding: 0 .6rem; margin: 1rem 0; }
.rangee.colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rangee.colonnes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rangee > .question-edit { margin: .6rem 0; min-width: 0; }
.rangee .q-ligne { flex-wrap: wrap; }
.rangee .q-tete { flex-wrap: wrap; }
.outils label.a-cote { display: flex; gap: .35rem; align-items: center; font-weight: 400; margin: 0; cursor: pointer; white-space: nowrap; }
.outils label.a-cote input { width: 1.1rem; height: 1.1rem; }
.taille-case { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; font-weight: 400; }
.taille-case select { width: auto; }
.taille-case input.court { width: 4.5rem; }
/* Fiche de notation, relue avant la correction des copies */
.titre-exercice { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
fieldset.bonne-case { border: none; padding: 0; margin: 0; }
fieldset.bonne-case legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
fieldset.bonne-case .case-a-cocher { margin-bottom: .3rem; }
.lignes { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.lignes .ligne { width: 100%; align-items: center; }
.lignes .nom-ligne { font-weight: 600; }
.fiche-question input.points[readonly] { background: #eef0f3; }
.fiche-question input:disabled, .fiche-question textarea:disabled { background: #f3f4f6; color: var(--texte); }
/* Import : énoncé et corrigé côte à côte */
.deux-fichiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .8rem 0; }
.deux-fichiers input { display: block; margin-top: .3rem; max-width: 100%; }
/* Petit chat sous l'éditeur */
.assistant-fil { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; max-height: 18rem; overflow: auto; }
.assistant-fil:empty { display: none; }
.assistant-fil .msg { padding: .45rem .7rem; border-radius: 8px; max-width: 85%; white-space: pre-wrap; font-size: .95rem; }
.assistant-fil .moi { align-self: flex-end; background: var(--accent); color: #fff; }
.assistant-fil .lui { align-self: flex-start; background: #eef0f3; }
.assistant-fil .erreur { align-self: flex-start; background: var(--orange-fond); }
.assistant-fil .msg button { margin-left: .5rem; }
.assistant-saisie { display: flex; gap: .5rem; align-items: flex-end; margin: .5rem 0 0; }
.assistant-saisie button { white-space: nowrap; }
.question-edit.montree { box-shadow: 0 0 0 3px var(--accent); }

/* --- Thème : bandeau blanc, fond clair, accents indigo ------------------------------ */
body { font: 16.5px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1 { font-weight: 700; letter-spacing: -.02em; }
.bandeau { background: rgba(255, 255, 255, .85); color: var(--texte); border-bottom: 1px solid var(--bord);
  backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 30; padding: .7rem 1.5rem; }
.bandeau a { color: var(--discret); font-weight: 500; font-size: .95rem; padding: .35rem .7rem; border-radius: 8px; margin-left: .4rem; }
.bandeau a:hover { color: var(--texte); background: #f3f4f6; }
.bandeau .logo { color: var(--texte); font-weight: 750; font-size: 1.1rem; letter-spacing: -.02em; padding: 0; display: inline-flex; align-items: center; gap: .5rem; }
.bandeau .logo:hover { background: none; }
.bandeau .logo::before { content: ""; width: 1.35rem; height: 1.35rem; border-radius: 6px;
  background: linear-gradient(135deg, #6366f1, #4f46e5 55%, #7c3aed); box-shadow: 0 1px 3px rgba(79, 70, 229, .4); }
.bandeau button.lien { color: var(--discret); font-size: .95rem; }
.carte, .liste li a, .tableau, .question { border-color: var(--bord); border-radius: 12px; box-shadow: var(--ombre); }
.liste li a:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(79, 70, 229, .08); }
button, .bouton { border-radius: 10px; padding: .6rem 1.15rem; font-weight: 600; border-width: 1px; transition: background .15s, border-color .15s, box-shadow .15s; }
.principal { box-shadow: 0 1px 2px rgba(79, 70, 229, .3); }
.secondaire { background: #fff; color: var(--texte); border-color: #d1d5db; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.secondaire:hover { background: #f9fafb; border-color: #9ca3af; }
input, textarea, select { border-width: 1px; border-color: #d1d5db; border-radius: 8px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.onglets button { border-width: 1px; }
.onglets button:last-child { border-left: none; }
.alerte, .succes { border-radius: 10px; border-left-width: 4px; }
.num { background: var(--accent-doux); color: var(--accent); }
.tableau th { background: #f9fafb; color: var(--discret); font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; }