/* Feuille de style unique, sans build. */
:root {
  --fond: #f6f5f1;
  --surface: #ffffff;
  --texte: #1f2421;
  --texte-doux: #5b635e;
  --bordure: #dcd9cf;
  --accent: #2f6b3f;
  --accent-texte: #ffffff;
  --alerte: #a33a2b;
  --alerte-fond: #fbeae7;
  --ok: #2f6b3f;
  --ok-fond: #e5f1e7;
  --dev-fond: #fff6db;
  --rayon: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

.entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.entete-titre { font-weight: 700; color: var(--texte); text-decoration: none; }
.entete-utilisateur { display: flex; gap: 12px; align-items: center; }
.entete-utilisateur form { margin: 0; }

.contenu { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.carte-etroite { max-width: 520px; margin-left: auto; margin-right: auto; }

h1 { font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-size: 1.2rem; margin: 0 0 10px; }

.aide { color: var(--texte-doux); font-size: 0.95rem; }

.bouton {
  display: inline-block;
  padding: 8px 16px;
  font: inherit;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { border-color: var(--accent); }
.bouton-principal { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.bouton-large { width: 100%; text-align: left; padding: 12px 16px; }
.bouton-discret { padding: 4px 10px; font-size: 0.9rem; }

.message { padding: 10px 14px; border-radius: var(--rayon); }
.message-refus { background: var(--alerte-fond); color: var(--alerte); }
.message-attention { background: #fff1d6; color: #7a4b00; }

/* Début du transcript figé, sur la fiche d'une vidéo. */
.apercu {
  margin: 0;
  padding: 12px 16px;
  background: var(--fond-doux, #f6f5f1);
  border-left: 3px solid var(--bordure);
  border-radius: var(--rayon);
  white-space: pre-wrap;
  font-size: 0.92rem;
  max-height: 22em;
  overflow-y: auto;
}

.mode-dev {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--dev-fond);
  border-radius: var(--rayon);
}
.liste-dev { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste-dev form { margin: 0; }
.liste-dev .role { float: right; }

.role {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
}
.role-administrateur { border-color: var(--accent); color: var(--accent); }

.liens { padding-left: 20px; }

.tableau { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tableau th, .tableau td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau code { font-size: 0.8rem; word-break: break-all; }
.nowrap { white-space: nowrap; }
.detail { max-width: 420px; }

.pastille { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.85rem; }
.pastille-ok { background: var(--ok-fond); color: var(--ok); }
.pastille-alerte { background: var(--alerte-fond); color: var(--alerte); }
.pastille-attention { background: #fff1d6; color: #7a4b00; }
.pastille-neutre { background: #ecebe6; color: var(--texte-doux); }
.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.onglets { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 12px; }
.onglets a { color: var(--accent); text-decoration: none; padding: 2px 0; }
.onglets a[aria-current="page"] { color: var(--texte); font-weight: 700; border-bottom: 2px solid var(--accent); }

.filtres { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 12px 0; }
.filtres label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--texte-doux); gap: 2px; }
.filtres input, .filtres select { font: inherit; padding: 5px 8px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); color: var(--texte); }
.pagination { display: flex; gap: 12px; }
.defilement { overflow-x: auto; }
details summary { cursor: pointer; color: var(--accent); }
details pre { white-space: pre-wrap; font-size: 0.8rem; background: var(--fond); padding: 8px; border-radius: var(--rayon); max-width: 520px; }
.motifs { margin: 0; padding-left: 18px; }
h3 { font-size: 1.05rem; margin: 16px 0 8px; }
.pastille { white-space: nowrap; }
.tableau-savoir code { word-break: normal; overflow-wrap: anywhere; font-size: 0.85rem; }
.tableau-savoir td:nth-child(-n+2) { min-width: 12em; }
.tableau-savoir td { overflow-wrap: break-word; }

/* -- Écran du correcteur (SPEC §9) --------------------------------------- */
/* Taille du texte réglable (A− / A+), retenue dans le navigateur. */
html[data-taille="petite"] body { font-size: 15px; }
html[data-taille="grande"] body { font-size: 20px; }
html[data-taille="tres-grande"] body { font-size: 23px; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
kbd { border: 1px solid var(--bordure); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 0.85em; background: var(--surface); }

.ecran .contenu, .ecran { max-width: none; }
.ecran-entete h1 { margin-bottom: 6px; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.taille-texte { display: inline-flex; gap: 4px; margin-left: auto; }
.raccourcis { margin: 6px 0; font-size: 0.92rem; }
.statut { min-height: 1.5em; margin: 6px 0 0; color: var(--ok); }
.statut-refus { color: var(--alerte); font-weight: 600; }

.progression .barre { height: 10px; background: #ecebe6; border-radius: 999px; overflow: hidden; }
.progression .barre span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }

.ecran-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
@media (max-width: 900px) { .ecran-corps { grid-template-columns: 1fr; } }
.transcript { line-height: 1.9; max-height: 75vh; overflow-y: auto; }
.transcript .paragraphe { margin: 0 0 12px; }
.transcript .locuteur { margin: 14px 0 2px; font-weight: 700; font-size: 0.9rem; color: var(--texte-doux); }
.panneau { position: sticky; top: calc(var(--hauteur-barre, 0px) + 12px); max-height: calc(100vh - var(--hauteur-barre, 0px) - 24px); overflow-y: auto; }

/* Les quatre catégories se distinguent par la couleur ET par le trait : un
   correcteur daltonien les reconnaît aussi. */
mark.cas, span.cas { color: inherit; cursor: pointer; border-radius: 3px; padding: 1px 0; }
.cas-sure { background: #e3f0e5; border-bottom: 2px solid #2f6b3f; }
.cas-verifier { background: #fff1d6; border-bottom: 2px dashed #8a5300; }
.cas-ecouter { background: #fbe3df; border-bottom: 3px double #a33a2b; }
.cas-ajout { background: #e3ecfb; border-bottom: 2px dotted #2b4ea3; }
.cas.decide { background: #efeee9; }
.cas.remplace { text-decoration: line-through; text-decoration-color: #5b635e; }
.cas.courant { outline: 3px solid #1f2421; outline-offset: 1px; }
ins.remplacement { text-decoration: none; font-weight: 600; color: #1d4d2a; background: #e3f0e5; border-radius: 3px; padding: 0 4px; margin: 0 2px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px; }
.legende mark { cursor: default; padding: 0 4px; }

.pastille-sure { background: #e3f0e5; color: #1d4d2a; }
.pastille-verifier { background: #fff1d6; color: #6b4000; }
.pastille-ecouter { background: #fbe3df; color: #8a2a1d; }
.pastille-ajout { background: #e3ecfb; color: #223f85; }

.lecteur { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.lecteur audio { width: 100%; }
.cas-panneau p { margin: 6px 0; }
.cas-panneau .contexte { font-size: 0.92rem; color: var(--texte-doux); }
.cas-panneau .motif { font-style: italic; }
.indices { margin: 6px 0; padding-left: 18px; font-size: 0.92rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.actions form { margin: 0; }
.formulaire { margin: 8px 0; display: grid; gap: 8px; }
.saisie { display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; color: var(--texte-doux); }
.saisie input, .saisie textarea, .saisie select { font: inherit; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: var(--rayon); color: var(--texte); }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.nom-nouveau { border-left: 3px solid var(--accent); padding-left: 10px; margin: 8px 0; }
.reponse { background: var(--fond); border-radius: var(--rayon); padding: 6px 10px; }
.participants { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.participants li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sections { list-style: none; padding: 0; display: grid; gap: 8px; }
.sections li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bilan { margin-top: 12px; }
.en-ligne { display: inline; }
.contenu-large { max-width: 1440px; }
.cas-panneau .contexte mark { background: #fff1d6; color: inherit; padding: 0 2px; border-radius: 3px; }

/* -- Écran du correcteur, seconde version (D65) --------------------------- */
/* La barre d'outils reste à l'écran pendant le défilement. */
.barre-fixe {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 2px 8px rgba(31, 36, 33, 0.08);
  padding: 10px 16px 4px; margin-bottom: 20px;
}
.barre-ligne { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.barre-ligne .progression { flex: 1 1 280px; min-width: 220px; }
.barre-ligne .progression p { margin: 2px 0 0; }
.barre-secondaire { margin-top: 6px; font-size: 0.95rem; }
.navigation { display: flex; gap: 6px; }
.interrupteur { display: inline-flex; gap: 6px; align-items: center; color: var(--texte-doux); }
.reglages { position: relative; }
.reglages summary { padding: 4px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon); color: var(--texte); list-style: none; }
.reglages[open] .reglages-contenu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 360px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 4px 16px rgba(31, 36, 33, 0.15); padding: 10px 14px; display: grid; gap: 6px;
}
.reglages-contenu p { margin: 0; }
.barre-fixe .statut { margin: 4px 0 2px; }

/* Les corrections sûres, hors du parcours : même couleur, plus discrètes. */
.cas-sure.hors-parcours { background: #f1f7f2; border-bottom: 1px solid #7fae8a; }
/* Un passage compris dans une correction plus large n'est plus surligné. */
mark.cas.absorbe { background: none; border-bottom: none; }
/* Les mots d'un passage en train d'être élargi. */
.transcript .elargie { background: #d8e6fb; box-shadow: 0 2px 0 #2b4ea3; }

.elargi { background: #eef3fc; border-radius: var(--rayon); padding: 6px 10px; margin: 8px 0; }
.elargi p { margin: 2px 0; }
.apercu-saisie { border-left: 3px solid var(--accent); padding: 4px 10px; margin: 8px 0; font-size: 0.95rem; }
.apercu-saisie p { margin: 4px 0; }
.propagation { border: 2px solid var(--accent); border-radius: var(--rayon); padding: 10px 12px; margin: 10px 0; background: var(--ok-fond); }
.propagation h2 { font-size: 1.05rem; }
.occurrences { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.occurrences label { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.occurrences .contexte { font-size: 0.92rem; }
.occurrences mark { background: #fff1d6; color: inherit; padding: 0 2px; border-radius: 3px; }
.mot-juste { border-left: 3px solid #2b4ea3; padding-left: 10px; margin: 8px 0; }

/* Guide de la première ouverture : quatre écrans, refermable. */
.guide { position: fixed; inset: 0; z-index: 50; background: rgba(31, 36, 33, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.guide-carte { max-width: 560px; width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
.guide-carte mark { padding: 0 4px; }

/* Sortie des contrôles du moteur, telle quelle (phase 9). */
pre.sortie { white-space: pre-wrap; font-size: 0.8rem; background: var(--fond); padding: 8px; border-radius: var(--rayon); overflow-x: auto; }

/* Organisation du travail (D71) : vidéo prise par quelqu'un d'autre, attente
   longue, vidéo urgente. */
tr.grisee td { color: var(--texte-doux); opacity: 0.6; }
tr.grisee td a { color: inherit; }
tr.ancienne td.attente { background: #fff1d6; color: #7a4b00; font-weight: 600; }
.pastille-urgente { background: var(--alerte); color: #fff; font-weight: 700; }
.filtres label.case { display: inline-flex; align-items: center; gap: 0.3em; }