/* =========================================================================
   Console FYC — feuille de style unique.
   Conforme au pack « FYC 2026 — Direction visuelle », artboard 1a
   (direction « salle de contrôle »).

   Règles du pack, appliquées partout :
     · six variables de fond/trait suffisent, le cyan ne dépend de rien d'autre ;
     · rayons 0, 2 px au maximum. Jamais d'ombre ;
     · bordures 1 px, blocs séparés par des filets, fonds à 4 % de luminance d'écart ;
     · pas de 600, pas d'italique, pas de capitale au-delà de 12 px ;
     · aucune icône ;
     · le rouge est réservé aux retards et blocages : filet gauche 2 px, fond
       très sombre, un chiffre. Jamais un bouton, jamais un aplat large ;
     · le cyan en aplat massif n'existe qu'à un endroit : la matrice du pipeline.
   ========================================================================= */

:root {
  --bg:  #05070a;   /* fond page       */
  --s1:  #0b0f14;   /* surface 1       */
  --s2:  #111820;   /* surface 2       */
  --s3:  #18212b;   /* surface 3       */
  --ln:  #1d2731;   /* filet           */
  --ln2: #2b3a49;   /* filet fort      */

  --tx: #e6edf5;    /* encre 100 %     */
  --tm: #93a3b5;    /* encre 62 %      */
  --td: #5f6f80;    /* encre 40 %      */

  --cy:  #00a3e0;   /* accent ESGI     */
  --cyd: #0b6e9e;   /* accent tenu     */
  --cyf: #062633;   /* fond accent     */

  --ok:  #3fa96b;   /* terminé / avance          */
  --al:  #e5484d;   /* retard / blocage          */
  --alf: #2a0f12;   /* fond de retard            */
  --alt: #ff8085;   /* rouge lisible sur fond sombre */

  --gouttiere: 16px;
  --ligne: 32px;
  --police: Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Le thème clair réassigne les six variables sans inverser :
   fonds chauds-neutres, pas du gris retourné. */
html[data-theme="clair"] {
  --bg:  #f4f6f8;
  --s1:  #ffffff;
  --s2:  #eef1f4;
  --s3:  #e4e9ee;
  --ln:  #dde2e8;
  --ln2: #c2ccd6;

  --tx: #0d151d;
  --tm: #56656f;
  --td: #83919d;

  --cy:  #0b6e9e;
  --cyd: #00a3e0;
  --cyf: #e6f4fb;

  --ok:  #2b7d4f;
  --al:  #c22c31;
  --alf: #fdeced;
  --alt: #c22c31;
}

* { box-sizing: border-box; }

/* Nos classes posent des `display`, qui l'emporteraient sur la règle
   `[hidden] { display: none }` du navigateur. On tranche une fois pour toutes. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 13px/1.45 var(--police);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--cy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Échelle typographique du pack ------------------------------------- */

h1 { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 18px; font-weight: 500; margin: 0; }
h3 { font-size: 15px; font-weight: 500; margin: 0; }

.chiffre-geant {
  font-size: 56px; font-weight: 900; letter-spacing: -0.03em; line-height: .92;
  font-variant-numeric: tabular-nums;
}
.etiquette {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tm);
}
.etiquette-cy { color: var(--cy); }
.etiquette-al { color: var(--al); }
.meta { font-size: 12px; color: var(--td); }
.mono, code, kbd { font-family: var(--mono); }
.mono-12 { font-family: var(--mono); font-size: 12px; }
.nb { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sourdine { color: var(--tm); }
.faible   { color: var(--td); }
.petit    { font-size: 12px; }
.nowrap   { white-space: nowrap; }
.rouge { color: var(--al); }
.vert  { color: var(--ok); }
.accent{ color: var(--cy); }
.en-ligne { display: inline; }

/* --- Blocs -------------------------------------------------------------- */

.bloc {
  border: 1px solid var(--ln2);
  background: var(--s1);
}
.bloc-tete {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--ln);
}
.bloc-tete .pousse { flex: 1; }
.bloc-corps { padding: 12px 16px; }
.bloc-corps-serre { padding: 0; }

/* --- Contrôles ---------------------------------------------------------- */

.btn, .btn-mini {
  display: inline-block;
  background: var(--s2);
  color: var(--tx);
  border: 1px solid var(--ln2);
  border-radius: 0;
  padding: 6px 12px;
  font: 400 13px/1.2 var(--police);
  cursor: pointer;
  text-decoration: none;
}
.btn-mini { padding: 3px 8px; font-size: 12px; color: var(--tm); }
.btn:hover, .btn-mini:hover { border-color: var(--cyd); color: var(--tx); text-decoration: none; }
.btn-primaire { background: var(--cy); color: #04121a; border-color: var(--cy); font-weight: 500; }
.btn-primaire:hover { background: var(--cy); color: #04121a; border-color: var(--cy); }
.btn-mini.actif { border-color: var(--cy); color: var(--cy); background: var(--cyf); }
.btn:disabled, .btn-mini:disabled { opacity: .4; cursor: not-allowed; }
/* Le rouge n'est jamais un bouton : un blocage actif se signale par le filet. */
.btn-mini.blocage-actif { color: var(--al); border-color: var(--al); background: transparent; }

input, select, textarea {
  background: var(--bg); color: var(--tx);
  font: 400 13px/1.3 var(--police);
  border: 1px solid var(--ln2); border-radius: 0;
  padding: 6px 8px;
}
input:focus, select:focus, textarea:focus,
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--cy); outline-offset: 1px; border-color: var(--cy);
}
textarea { resize: vertical; width: 100%; font-size: 13px; }
.select-mini { padding: 2px 5px; font-size: 12px; }

/* --- En-tête ------------------------------------------------------------ */

.entete {
  display: flex; align-items: center; gap: 16px;
  height: 44px; padding: 0 16px;
  background: var(--s1);
  border-bottom: 1px solid var(--ln2);
  position: sticky; top: 0; z-index: 40;
}
.marque { display: flex; align-items: baseline; gap: 12px; color: var(--tx); text-decoration: none; }
.marque:hover { text-decoration: none; }
.marque-sigle { font-size: 13px; font-weight: 700; letter-spacing: 0.10em; color: var(--tx); }
.marque-sigle .point { color: var(--cy); }
.marque-texte { font-size: 12px; color: var(--tm); }

.nav-principale { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.nav-principale a {
  display: block; padding: 5px 10px;
  color: var(--tm); font-size: 13px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-principale a:hover { color: var(--tx); text-decoration: none; }
.nav-principale a.actif { color: var(--tx); border-bottom-color: var(--cy); background: var(--s2); }

.entete-droite { display: flex; align-items: center; gap: 10px; }
.entete-date { font-family: var(--mono); font-size: 12px; color: var(--td); }
.bascule-theme { display: flex; border: 1px solid var(--ln2); }
.bascule-theme button {
  background: transparent; border: 0; color: var(--td);
  font: 700 11px/1 var(--police); letter-spacing: 0.12em;
  padding: 6px 8px; cursor: pointer;
}
.bascule-theme button.actif { background: var(--s3); color: var(--tx); }
.pastille-user { font-size: 12px; color: var(--tm); white-space: nowrap; }
.pastille-user em { color: var(--cy); font-style: normal; }
.lien-sortie { font-size: 12px; color: var(--td); background: none; border: 0; cursor: pointer; font-family: var(--police); }
.lien-sortie:hover { color: var(--al); }

.bandeau-avertissement {
  border-left: 2px solid var(--al); background: var(--alf);
  color: var(--alt); padding: 8px 16px; font-size: 12px;
}
.bandeau-avertissement p { margin: 2px 0; }

/* --- Mise en page ------------------------------------------------------- */

.contenu { padding: var(--gouttiere); max-width: 1560px; margin: 0 auto; }
.entete-page { margin-bottom: var(--gouttiere); }
.entete-page h1 { margin-bottom: 2px; }

/* --- États (5 états du pack) -------------------------------------------- */

.case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.case input { position: absolute; opacity: 0; width: 0; height: 0; }
.case-visuel {
  flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px;
  border: 1px solid var(--ln2); background: transparent; position: relative;
}
.case input:checked + .case-visuel { background: var(--ok); border-color: var(--ok); }
.case input:checked + .case-visuel::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
  border: solid #04150f; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.case input:focus-visible + .case-visuel { outline: 1px solid var(--cy); outline-offset: 2px; }
.case input:disabled + .case-visuel { opacity: .4; }

/* --- Ligne de tâche ----------------------------------------------------- */

.liste-taches { list-style: none; margin: 0; padding: 0; }
.tache {
  display: block; padding: 7px 12px 7px 12px;
  border-bottom: 1px solid var(--ln);
  border-left: 2px solid transparent;
  background: var(--s1);
}
.tache:last-child { border-bottom: none; }
.tache-tete { display: flex; align-items: flex-start; gap: 10px; }
.tache-titre { font-size: 13px; line-height: 1.35; }
.tache-sous { font-size: 12px; color: var(--td); margin: 2px 0 0 23px; }
.tache-marge { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.tache.etat-en_cours { border-left-color: var(--cy); }
.tache.etat-en_cours .case-visuel { border-color: var(--cy); }
.tache.etat-terminee .tache-titre { text-decoration: line-through; color: var(--td); }
.tache.etat-en_retard { border-left-color: var(--al); background: var(--alf); }
.tache.etat-en_retard .tache-sous { color: var(--alt); }
.tache.etat-bloquee { border-left-color: var(--al); }
.tache.etat-bloquee .case-visuel { border-color: var(--al); border-style: dotted; }
.jour-retard { font-family: var(--mono); font-size: 12px; color: var(--alt); }
.marque-bloque { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--al); }

.groupe-echeance { border-bottom: 1px solid var(--ln2); }
.groupe-echeance:last-child { border-bottom: none; }
.titre-echeance {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; background: var(--s2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tm); border-bottom: 1px solid var(--ln);
}
.titre-echeance.retard { color: var(--al); background: var(--alf); }
.titre-echeance .pousse { flex: 1; }
.groupe-termine .tache { opacity: .55; }

.tache-details { margin: 6px 0 2px 23px; padding-top: 6px; border-top: 1px solid var(--ln); }
.detail-texte { font-size: 12px; color: var(--tm); margin-bottom: 6px; }
.detail-texte code, .visuel-methode code, .checklist code, .regle p code {
  font-family: var(--mono); font-size: 12px; background: var(--s2); padding: 0 4px;
}
.champ-note { display: block; }
.etat-sauvegarde { font-size: 11px; color: var(--ok); min-height: 14px; }

/* --- Barre segmentée ---------------------------------------------------- */

.segments { display: flex; height: 6px; background: var(--s3); overflow: hidden; }
.segments > span { display: block; height: 100%; }
.seg-ok     { background: var(--cy); }
.seg-cours  { background: var(--cyd); }
.seg-retard { background: var(--al); }
.legende-segments { display: flex; gap: 12px; font-size: 12px; color: var(--tm); margin-top: 6px; flex-wrap: wrap; }
.legende-segments b { font-family: var(--mono); font-weight: 500; color: var(--tx); }
.puce { display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: baseline; }
.puce.seg-retard + b, .legende-retard b { color: var(--alt); }

/* --- Accueil ------------------------------------------------------------ */

.grille-accueil { display: grid; gap: var(--gouttiere); }
.colonne-droite-accueil { display: grid; gap: var(--gouttiere); align-content: start; }
.bandeau-haut { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: var(--gouttiere); align-items: start; }

.rebours-jours { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.rebours-jours .chiffre-geant { color: var(--tx); }
.rebours-jours.urgent .chiffre-geant { color: var(--alt); }
.rebours-unite { font-size: 15px; color: var(--tm); }
.rebours-second {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ln);
  font-size: 12px; color: var(--td);
}

.avancement-chiffre { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.avancement-chiffre .grand { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.compteurs-livrables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ln); margin-top: 12px; }
.compteurs-livrables > div { background: var(--s1); padding: 8px 0; }
.compteurs-livrables .nb { display: block; font-size: 16px; font-weight: 500; }
.compteurs-livrables small { font-size: 11px; color: var(--td); }

/* Pipeline : le seul aplat massif de cyan du site. */
.matrice { display: grid; border-top: 1px solid var(--ln); }
.matrice-libelles { border-right: 1px solid var(--ln2); background: var(--s1); }
.matrice-libelle {
  height: 22px; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; font-size: 11px; color: var(--tm); border-bottom: 1px solid var(--ln);
}
.matrice-libelle.zero { color: var(--alt); }
.matrice-colonne { display: block; }
.matrice-cellule { height: 22px; background: var(--s2); border-bottom: 1px solid var(--bg); border-right: 1px solid var(--bg); }
.matrice-cellule.faite { background: var(--cy); }
.matrice-cellule.manquante { background: var(--alf); box-shadow: inset 0 0 0 1px var(--al); }
.matrice-pied {
  height: 22px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--tm);
  border-right: 1px solid var(--bg);
}
.matrice-pied:hover { color: var(--cy); text-decoration: none; }
.matrice-pied.courante { background: var(--cyf); color: var(--cy); }
.matrice-note { padding: 8px 16px; font-size: 12px; color: var(--td); border-top: 1px solid var(--ln); }
.compteurs-etapes { display: flex; gap: 14px; font-size: 12px; color: var(--tm); flex-wrap: wrap; }
.compteurs-etapes b { font-family: var(--mono); font-weight: 400; color: var(--tx); }
.compteurs-etapes .zero b { color: var(--alt); }

/* Cartes membres */
.cartes-membres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ln2); }
.carte-membre { background: var(--s1); padding: 12px 14px; border-left: 2px solid transparent; }
.carte-membre.a-du-retard { border-left-color: var(--al); }
.nom-membre { font-size: 15px; font-weight: 500; color: var(--tx); }
.role-membre { margin: 2px 0 10px; }
.compteurs-membre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); }
.compteurs-membre > div { background: var(--s1); padding: 4px 8px; }
.compteurs-membre .nb { display: block; font-size: 18px; font-weight: 500; line-height: 1.2; }
.compteurs-membre small { font-size: 11px; color: var(--td); }
.compteurs-membre .allume { background: var(--alf); }
.compteurs-membre .allume .nb, .compteurs-membre .allume small { color: var(--alt); }
.prochaine-action { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ln); }
.prochaine-action p { margin: 2px 0 0; font-size: 13px; }

/* Colonne de droite */
.carte-blocage { border-color: var(--al); }
.carte-blocage .bloc-tete { border-bottom-color: var(--al); }
.blocage-item { padding: 10px 16px; border-bottom: 1px solid var(--ln); }
.blocage-item:last-child { border-bottom: none; }
.blocage-item p { margin: 0 0 6px; font-size: 13px; }
.blocage-meta { font-family: var(--mono); font-size: 11px; color: var(--td); }

.liste-semaine { list-style: none; margin: 0; padding: 0; }
.liste-semaine li {
  padding: 8px 16px; border-bottom: 1px solid var(--ln);
  border-left: 2px solid transparent; display: flex; gap: 10px; align-items: flex-start;
}
.liste-semaine li:last-child { border-bottom: none; }
.liste-semaine li.retard { border-left-color: var(--al); background: var(--alf); }
.liste-semaine .sous { font-family: var(--mono); font-size: 11px; color: var(--td); margin-top: 2px; display: block; }
.liste-semaine li.retard .sous { color: var(--alt); }

.liste-docs { list-style: none; margin: 0; padding: 0; }
.liste-docs li {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 16px; border-bottom: 1px solid var(--ln); font-size: 13px;
}
.liste-docs li:last-child { border-bottom: none; }
.liste-docs .quand { font-family: var(--mono); font-size: 11px; color: var(--td); white-space: nowrap; }

/* --- Espace membre ------------------------------------------------------ */

.onglets-membres {
  display: flex; gap: 0; margin-bottom: var(--gouttiere);
  border-bottom: 1px solid var(--ln2);
}
.onglets-membres a {
  padding: 6px 16px; font-size: 13px; background: transparent; color: var(--tm);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets-membres a.actif { color: var(--tx); border-bottom-color: var(--cy); }
.onglets-membres a:hover { text-decoration: none; color: var(--tx); }

.entete-membre {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--gouttiere); flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: var(--gouttiere); border-bottom: 1px solid var(--ln2);
}
.entete-membre .badge-retard {
  display: inline-block; margin-left: 10px; padding: 3px 8px;
  border-left: 2px solid var(--al); background: var(--alf); color: var(--alt); font-size: 12px;
}
.entete-membre-droite { min-width: 260px; }

.colonnes-membre { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gouttiere); align-items: start; }
.colonne-membre { display: grid; gap: var(--gouttiere); }

/* Indicateur vidéo — 6 étapes */
.ligne-video { padding: 10px 14px; border-bottom: 1px solid var(--ln); }
.ligne-video:last-child { border-bottom: none; }
.video-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.code-video { font-family: var(--mono); font-size: 13px; color: var(--cy); }
.video-titre { font-size: 15px; font-weight: 500; flex: 1; min-width: 0; }
.video-alerte { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; color: var(--al); white-space: nowrap; }
.etapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.etape-seg { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.etape-seg .barre { display: block; height: 4px; background: var(--s3); }
.etape-seg.atteinte .barre { background: var(--cy); }
.etape-seg.manquante .barre { background: var(--al); }
.etape-seg .nom { display: block; font-size: 11px; color: var(--td); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape-seg.atteinte .nom { color: var(--tm); }
.etape-seg.manquante .nom { color: var(--alt); }
.etape-seg:disabled { cursor: default; }
.video-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.video-actions .pousse { flex: 1; }

/* Visuels : un tableau, pas des fiches */
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--td);
  padding: 8px 12px; border-bottom: 1px solid var(--ln2); background: var(--s1);
}
.tableau td { padding: 7px 12px; border-bottom: 1px solid var(--ln); vertical-align: top; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tr.retard td { background: var(--alf); }
.tableau tr.retard td:first-child { box-shadow: inset 2px 0 0 var(--al); }
.tableau .ref { font-family: var(--mono); color: var(--cy); }
.etat-visuel { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.etat-visuel.a_faire  { color: var(--td); }
.etat-visuel.en_cours { color: var(--cy); }
.etat-visuel.terminee { color: var(--ok); }

.note-libre { padding: 12px 16px; }
.note-libre textarea { min-height: 72px; }

/* --- Planning ----------------------------------------------------------- */

.frise { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.frise::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--ln2); }
.jalon { position: relative; margin-bottom: var(--gouttiere); }
.jalon-point { position: absolute; left: -22px; top: 14px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--ln2); }
.jalon-passe .jalon-point { background: var(--ok); border-color: var(--ok); }
.jalon-prochain .jalon-point { background: var(--cy); border-color: var(--cy); }
.jalon-retard .jalon-point { background: var(--al); border-color: var(--al); }
.jalon-passe .jalon-corps { opacity: .72; }
.jalon-prochain .jalon-corps { border-color: var(--cy); }
.jalon-tete { display: flex; justify-content: space-between; gap: var(--gouttiere); flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ln); }
.jalon-date { font-family: var(--mono); font-size: 12px; color: var(--td); }
.jalon-tete h2 { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.jalon-jauge { min-width: 190px; text-align: right; }
.pourcent { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.liste-livrables { list-style: none; margin: 0; padding: 8px 16px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 16px; font-size: 13px; }
.liste-livrables li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.liste-livrables li.fait, .liste-livrables li.fait a { color: var(--td); }
.marque-etat { font-family: var(--mono); font-size: 11px; color: var(--td); }
.liste-livrables li.fait .marque-etat { color: var(--ok); }
.liste-livrables li.rouge .marque-etat { color: var(--al); }
.videos-jalon { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 0 16px 12px; }
.pastille-video { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--ln2); color: var(--tm); }
.pastille-video.avancee { border-color: var(--cyd); color: var(--cy); }
.pastille-video.publiee { border-color: var(--ok); color: var(--ok); }

/* --- Bibliothèque et documents ------------------------------------------ */

.barre-recherche { display: flex; gap: 8px; margin-bottom: var(--gouttiere); }
.barre-recherche input { flex: 1; }
.resultats { list-style: none; margin: 0; padding: 0; }
.resultats li { padding: 8px 16px; border-bottom: 1px solid var(--ln); }
.resultats li:last-child { border-bottom: none; }
.resultat-extrait { margin: 2px 0 0; font-size: 12px; color: var(--tm); }

.contenu-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.sommaire { position: sticky; top: 60px; max-height: calc(100vh - 76px); overflow-y: auto; }
.sommaire-tete { padding-bottom: 8px; border-bottom: 1px solid var(--ln2); margin-bottom: 8px; }
.sommaire-fichier { font-family: var(--mono); font-size: 12px; color: var(--tm); word-break: break-all; margin: 4px 0 2px; }
.sommaire-titre { margin: 14px 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pleine-largeur { display: block; width: 100%; text-align: center; margin-top: 8px; }
.sommaire-liste { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.sommaire-liste a {
  display: block; padding: 3px 8px; color: var(--tm);
  border-left: 2px solid transparent; font-size: 12px;
}
.sommaire-liste a:hover { color: var(--tx); text-decoration: none; background: var(--s2); }
.sommaire-liste a.courant { color: var(--cy); border-left-color: var(--cy); background: var(--s2); }
.sommaire-liste .niveau-1 { font-size: 13px; color: var(--tx); }
.sommaire-liste .niveau-2 { padding-left: 16px; }
.sommaire-liste .niveau-3 { padding-left: 28px; }
.sommaire-liste .niveau-4 { padding-left: 40px; }
.barre-lecture { position: fixed; left: 0; top: 44px; height: 2px; background: var(--cy); width: 0; z-index: 39; }

.document { min-width: 0; font-size: 14px; line-height: 1.62; padding-bottom: 40vh; }
.document h1 { font-size: 26px; margin: 4px 0 14px; }
.document h2 { font-size: 18px; margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ln2); }
.document h3 { font-size: 15px; margin: 20px 0 6px; }
.document h4 { font-size: 14px; font-weight: 500; margin: 16px 0 4px; color: var(--tm); }
.document p { margin: 0 0 12px; }
.document ul, .document ol { margin: 0 0 12px; padding-left: 22px; }
.document li { margin-bottom: 4px; }
.document blockquote { margin: 12px 0; padding: 8px 14px; border-left: 2px solid var(--cy); background: var(--s1); color: var(--tm); }
.document hr { border: none; border-top: 1px solid var(--ln); margin: 24px 0; }
.document > p > code, .document li > code, .document td > code {
  font-family: var(--mono); font-size: 12px; background: var(--s2); padding: 1px 5px;
}
.titre-doc { position: relative; scroll-margin-top: 60px; }
.titre-doc .ancre { position: absolute; left: -16px; color: var(--td); opacity: 0; text-decoration: none; font-weight: 400; }
.titre-doc:hover .ancre { opacity: 1; }

/* Tableau large : la première colonne est figée, le reste défile.
   Jamais réduit à un empilement de fiches. */
.table-cadre { border: 1px solid var(--ln2); margin: 0 0 14px; }
.table-cadre-tete {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 10px; background: var(--s2); border-bottom: 1px solid var(--ln);
  font-size: 11px; color: var(--td);
}
.table-cadre-tete .compteur-colonnes { font-family: var(--mono); color: var(--cy); }
.table-scroll { overflow-x: auto; }
.table-doc { border-collapse: collapse; font-size: 13px; min-width: 100%; background: var(--s1); }
.table-doc th { background: var(--s2); text-align: left; font-weight: 500; padding: 7px 12px; border-bottom: 1px solid var(--ln2); border-right: 1px solid var(--ln); white-space: nowrap; }
.table-doc td { padding: 7px 12px; border-bottom: 1px solid var(--ln); border-right: 1px solid var(--ln); vertical-align: top; }
.table-doc th:last-child, .table-doc td:last-child { border-right: none; }
.table-doc tr:last-child td { border-bottom: none; }
.table-doc th:first-child, .table-doc td:first-child {
  position: sticky; left: 0; background: var(--s2); border-right: 1px solid var(--ln2);
}
.table-doc td:first-child { background: var(--s1); }

.bloc-code { margin: 0 0 14px; border: 1px solid var(--ln2); }
.bloc-code-barre { display: flex; justify-content: space-between; align-items: center; background: var(--s2); border-bottom: 1px solid var(--ln); padding: 3px 10px; }
.bloc-code-langue { font-family: var(--mono); font-size: 11px; color: var(--td); }
.btn-copier { background: transparent; border: 0; color: var(--tm); font: 400 12px var(--police); cursor: pointer; padding: 1px 4px; }
.btn-copier:hover { color: var(--cy); }
.btn-copier.copie { color: var(--ok); }
.bloc-code pre { margin: 0; overflow-x: auto; background: var(--s1); }
.bloc-code pre code, .source-fichier code { font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.source-fichier { margin: 0; border: 1px solid var(--ln2); background: var(--s1); overflow-x: auto; }

/* --- Règles ------------------------------------------------------------- */

.grille-regles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--ln2); }
.regle { background: var(--s1); padding: 14px 16px; border-top: 2px solid transparent; }
.regle-critique { border-top-color: var(--al); }
.regle h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.regle p { margin: 0; font-size: 13px; color: var(--tm); }
.notation { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gouttiere); }
.notation-poids { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: var(--cy); line-height: 1; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 7px 16px; border-bottom: 1px solid var(--ln); font-size: 13px; }
.checklist li:last-child { border-bottom: none; }

/* --- Partage de documents ----------------------------------------------- */

.formulaire-depot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.formulaire-depot label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--td); }
.formulaire-depot label.large { grid-column: span 2; }
.formulaire-depot input[type="file"] { padding: 5px; font-size: 12px; }
.formulaire-depot button { grid-column: 3; justify-self: end; min-width: 140px; }

.fiche-doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--gouttiere); align-items: start; }
.visionneuse { border: 1px solid var(--ln2); background: var(--s1); }
.visionneuse-barre {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px;
  background: var(--s2); border-bottom: 1px solid var(--ln); font-size: 12px; color: var(--tm);
}
.visionneuse-barre .pousse { flex: 1; }
.visionneuse-pages { background: var(--bg); padding: 12px; max-height: 78vh; overflow-y: auto; }
.page-pdf { display: block; margin: 0 auto 12px; max-width: 100%; height: auto; border: 1px solid var(--ln); background: #fff; }
.page-pdf:last-child { margin-bottom: 0; }
.visionneuse-etat { padding: 28px 16px; text-align: center; color: var(--tm); font-size: 13px; }
.visionneuse-image { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.visionneuse-texte { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--s1); }
.visionneuse-texte code { font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.doc-meta { list-style: none; margin: 0; padding: 0; }
.doc-meta li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--ln); font-size: 12px; }
.doc-meta li:last-child { border-bottom: none; }
.doc-meta .cle { color: var(--td); }

/* --- Veille ------------------------------------------------------------- */

.formulaire-veille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.formulaire-veille label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--td); }
.formulaire-veille label.large { grid-column: span 2; }
.formulaire-veille button { grid-column: 4; justify-self: end; min-width: 140px; }
.filtres { display: flex; gap: 4px; flex-wrap: wrap; }
.ligne-formulaire { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ligne-formulaire.entre { justify-content: space-between; }

/* --- Connexion et erreurs ----------------------------------------------- */

.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.carte-connexion { background: var(--s1); border: 1px solid var(--ln2); padding: 28px; width: 100%; max-width: 380px; }
.connexion-entete { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ln); }
.connexion-entete h1 { font-size: 18px; margin: 10px 0 4px; }
.formulaire { display: grid; gap: 4px; }
.formulaire label { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--td); margin-top: 12px; }
.formulaire button { margin-top: 18px; padding: 9px; }
.alerte { padding: 8px 12px; border-left: 2px solid var(--ln2); background: var(--s2); margin: 10px 0; font-size: 13px; }
.alerte.rouge { border-left-color: var(--al); background: var(--alf); color: var(--alt); }
.alerte.vert { border-left-color: var(--ok); background: var(--s2); color: var(--ok); }
.carte-erreur { max-width: 520px; margin: 48px auto; }
.code-erreur { font-size: 56px; font-weight: 900; color: var(--td); margin: 0; letter-spacing: -0.03em; }

/* ================================================== MODE TÉLÉPROMPTEUR === */
/* Tout ce qui n'est pas le texte descend sous 40 % de luminance.            */

.corps-plein { overflow: hidden; }

.prompteur {
  position: fixed; inset: 0; background: #000; color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  --pr-ligne: .42;
}
.pr-barre {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; background: #000; border-bottom: 1px solid #14181c;
  font-size: 12px; color: #4a5866; flex: 0 0 auto; z-index: 3;
}
.pr-barre .pousse { flex: 1; }
.pr-quitter { color: #4a5866; font-size: 13px; text-decoration: none; }
.pr-quitter:hover { color: #93a3b5; text-decoration: none; }
.pr-bloc-courant { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #93a3b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-cible { font-family: var(--mono); color: #4a5866; }
.pr-chrono { font-family: var(--mono); font-size: 20px; font-weight: 500; color: #e6edf5; font-variant-numeric: tabular-nums; }
.pr-ecart { font-family: var(--mono); font-size: 12px; min-width: 96px; text-align: right; }
.pr-ecart.avance { color: var(--ok); }
.pr-ecart.retard { color: var(--alt); }
.pr-btn { background: transparent; color: #93a3b5; border: 1px solid #1d2731; padding: 4px 10px; font: 400 12px var(--police); cursor: pointer; }
.pr-btn:hover { border-color: #2b3a49; color: #e6edf5; }
.pr-btn[aria-expanded="true"] { border-color: var(--cyd); color: var(--cy); }
.pr-btn-large { padding: 8px 18px; font-size: 13px; min-width: 128px; }

.pr-corps { display: flex; flex: 1; min-height: 0; }
.pr-gauche { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-scene { position: relative; flex: 1; overflow: hidden; }
.pr-piste { position: absolute; left: 0; right: 0; top: 0; will-change: transform; padding: 0 6vw; --pr-taille: 52px; }
/* Panneau replié : la colonne de texte se recentre. */
.prompteur.sans-panneau .pr-bloc > *, .prompteur.sans-panneau .pr-fin { max-width: 22ch; margin-left: auto; margin-right: auto; }
.prompteur.sans-panneau .pr-code { max-width: 34ch; }

.pr-amorce { height: calc(var(--pr-ligne) * 100vh); }
.pr-fin { height: 60vh; padding-top: 32px; color: #2b3a49; font-size: 14px; text-align: center; }
.pr-bloc { margin-bottom: 32px; }
.pr-bloc-etiquette { font-family: var(--mono); font-size: 12px; color: #2b3a49; margin: 0 0 10px; }
.pr-voix {
  font-size: var(--pr-taille); line-height: 1.28; font-weight: 400;
  margin: 0 0 .55em; color: #4a5866;
  max-width: 22ch; padding-left: 22px; border-left: 2px solid transparent;
  text-wrap: pretty;
}
/* La phrase active est en blanc plein, ses voisines chutent à #4A5866. */
.pr-bloc.actif .pr-voix.active { color: #fff; border-left-color: var(--cy); }
.pr-vide { color: #2b3a49; font-size: 22px; }
.pr-code { max-width: 34ch; margin: 0 0 .6em 22px; font-size: calc(var(--pr-taille) * .34); border: 1px solid #14181c; background: #050505; }
.pr-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; background: #050505; }
.pr-code code { font-family: var(--mono); font-size: 1em; line-height: 1.45; }
.pr-ligne-lecture { position: absolute; left: 0; right: 0; top: calc(var(--pr-ligne) * 100%); height: 0; border-top: 1px solid #14181c; pointer-events: none; }

.pr-panneau {
  flex: 0 0 min(320px, 44vw);
  background: #050708; border-left: 1px solid #14181c; overflow-y: auto;
  font-size: 13px; color: #93a3b5;
}
.pr-panneau-section { padding: 12px 14px; border-bottom: 1px solid #14181c; }
.pr-panneau h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #93a3b5; }
.pr-panneau h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cy); margin-bottom: 4px; }
.pr-panneau p { margin: 0 0 8px; line-height: 1.5; }
.pr-blocs-liste { list-style: none; margin: 0; padding: 0; }
.pr-blocs-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 14px; font-size: 12px; color: #6b7c8d; cursor: pointer; border-left: 2px solid transparent; }
.pr-blocs-liste li.courant { background: #0b1015; color: #e6edf5; border-left-color: var(--cy); }
.pr-blocs-liste .t { font-family: var(--mono); color: #4a5866; }
.pr-panneau kbd { background: #0d1117; border: 1px solid #1d2731; padding: 0 4px; font-size: 11px; color: #93a3b5; }
.pr-aide-liste { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.pr-aide-liste li { margin-bottom: 3px; }

.pr-pied { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #000; border-top: 1px solid #14181c; flex: 0 0 auto; z-index: 3; font-size: 12px; color: #4a5866; }
.pr-pied .pousse { flex: 1; }
.pr-raccourci { color: #4a5866; white-space: nowrap; }
.pr-raccourci b { font-weight: 400; color: #93a3b5; }
.pr-progression { width: 180px; height: 2px; background: #14181c; }
.pr-progression > span { display: block; height: 100%; background: var(--cy); width: 0; }

/* =============================================================== Responsive */

@media (max-width: 1400px) {
  .bandeau-haut { grid-template-columns: 260px minmax(0, 1fr); }
  .colonne-droite-accueil { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gouttiere); }
  .cartes-membres { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .colonnes-membre { grid-template-columns: 1fr; }
  .contenu-doc { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .bandeau-haut { grid-template-columns: 1fr; }
  .colonne-droite-accueil { grid-template-columns: 1fr; }
  .sommaire { position: static; max-height: none; border: 1px solid var(--ln2); background: var(--s1); padding: 10px 12px; }
  .sommaire-liste { max-height: 200px; overflow-y: auto; }
  .formulaire-veille { grid-template-columns: repeat(2, 1fr); }
  .formulaire-veille button { grid-column: span 2; }
}

@media (max-width: 720px) {
  /* Menu en bas sur téléphone. */
  .entete { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 10px; }
  .nav-principale {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
    background: var(--s1); border-top: 1px solid var(--ln2);
    padding: 0 0 env(safe-area-inset-bottom); justify-content: space-between;
  }
  .nav-principale a { flex: 1; text-align: center; font-size: 11px; padding: 10px 4px; border-bottom: 0; border-top: 2px solid transparent; }
  .nav-principale a.actif { border-top-color: var(--cy); border-bottom-color: transparent; }
  body { padding-bottom: 46px; }
  .corps-plein { padding-bottom: 0; }
  .corps-plein .nav-principale { display: none; }
  .contenu { padding: 12px 12px 24px; }
  .entete-date { display: none; }
  .cartes-membres { grid-template-columns: 1fr; }
  .compteurs-livrables { grid-template-columns: repeat(2, 1fr); }
  .entete-membre-droite { min-width: 0; width: 100%; }
  .jalon-jauge { text-align: left; min-width: 0; }
  .formulaire-veille { grid-template-columns: 1fr; }
  .formulaire-veille label.large, .formulaire-veille button { grid-column: span 1; }
  .liste-livrables { grid-template-columns: 1fr; }
  /* La matrice reste une matrice : elle défile plutôt que de se replier. */
  .matrice-enveloppe { overflow-x: auto; }
  .matrice { min-width: 620px; }
  .barre-lecture { top: auto; bottom: 46px; }
}

@media (max-width: 520px) {
  .marque-texte { display: none; }
  .prompteur .pr-barre { flex-wrap: wrap; }
}

/* Prompteur sur tablette ou téléphone en paysage : on récupère de la hauteur. */
@media (max-width: 1000px) {
  .pr-pied .pr-raccourci { display: none; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .prompteur { --pr-ligne: .30; }
  .pr-barre, .pr-pied { padding: 4px 12px; }
  .pr-chrono { font-size: 16px; }
  .pr-btn-large { padding: 5px 14px; min-width: 104px; }
  .pr-bloc { margin-bottom: 20px; }
}

/* Aucune animation décorative. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }