/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --toolbar-h: 56px;   /* bannière sur une seule ligne (niveaux + onglets + actions alignés) */
  --subbar-h:  0px;   /* la barre secondaire a été fusionnée dans la bannière (#toolbar) */
  --stats-h:   44px;
  --algo-h:    46px;
  --spe-h:     50px;
  --pool-w:    420px;
  --col-w:     310px;
  --radius:    6px;

  /* ── Charte Saint-Joseph de Tivoli ──
     Extraite du logo officiel ZEZE-6.png :
     - anneau extérieur : bleu marine institutionnel
     - cercle intérieur : or chaud / beige doré
  */
  --tivoli-navy:       #1A3569;   /* bleu marine principal */
  --tivoli-navy-light: #2A4F9A;   /* marine hover */
  --tivoli-navy-dark:  #0F2045;   /* marine profond */
  --tivoli-gold:       #C4A46B;   /* or/beige doré */
  --tivoli-gold-light: #E8D9B0;   /* or clair / crème */
  --tivoli-gold-pale:  #F7F1E3;   /* crème très clair */
  --tivoli-white:      #FFFFFF;

  /* Couleurs spécialités (inchangées) */
  --c-maths:  #4472C4;
  --c-pc:     #FFFF00;
  --c-svt:    #92D050;
  --c-ses:    #FF0000;
  --c-hggsp:  #FFC000;
  --c-amc:    #FF6699;
  --c-nsi:    #9966FF;
  --c-hlp:    #00B0F0;

  /* UI tokens */
  --bg:        var(--tivoli-gold-pale);
  --panel-bg:  #FFFFFF;
  --toolbar-bg: var(--tivoli-navy-dark);
  --stats-bg:  var(--tivoli-navy);
  --border:    #D6C9A8;
  --border-light: #EDE5D0;
  --text:      #1A2E4A;
  --text-muted: #6B7A8D;
  --accent:    var(--tivoli-gold);
  --shadow:    0 2px 8px rgba(26, 53, 105, .10);
  --shadow-lg: 0 6px 20px rgba(26, 53, 105, .14);
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--toolbar-h);
  padding: 0 16px;
  background: var(--tivoli-navy-dark);
  border-bottom: 3px solid var(--tivoli-gold);
  color: #fff;
  gap: 8px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(15, 32, 69, .4);
}

.tb-tools  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tb-tools[hidden] { display: none !important; }
.tb-left   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.tb-right  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.tb-import { display: flex; align-items: center; gap: 6px; }

/* ── Bannière : zone repliable (menus de niveau + recherche fiche) ── */
.tb-collapse {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.tb-collapse .tb-tools { margin-left: auto; }

/* Bouton hamburger (masqué tant qu'on n'est pas sous le seuil mobile) */
.tb-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.tb-hamburger:hover { border-color: var(--tivoli-gold); }
.tb-hamburger-icon { position: relative; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: background .15s; }
.tb-hamburger-icon::before,
.tb-hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease;
}
.tb-hamburger-icon::before { top: -6px; }
.tb-hamburger-icon::after  { top: 6px; }
.tb-hamburger[aria-expanded="true"] .tb-hamburger-icon { background: transparent; }
.tb-hamburger[aria-expanded="true"] .tb-hamburger-icon::before { transform: translateY(6px) rotate(45deg); }
.tb-hamburger[aria-expanded="true"] .tb-hamburger-icon::after  { transform: translateY(-6px) rotate(-45deg); }

.tb-context-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .02em;
  max-width: min(320px, 28vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.tb-module {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.module-link {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .15s, color .15s, border-color .15s;
}
.module-link:hover {
  color: #fff;
  border-color: var(--tivoli-gold);
}
.module-link--active {
  color: var(--tivoli-navy-dark);
  background: var(--tivoli-gold);
  border-color: var(--tivoli-gold);
}

.app-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(200px, 20vw);
  /* Discret par défaut : pastille sobre, même pour l'admin */
  background: rgba(255, 255, 255, .08);
  color: var(--tivoli-gold-light);
  border: 1px solid rgba(196, 164, 107, .3);
}
.app-badge--admin {
  color: var(--tivoli-gold);
  border-color: rgba(196, 164, 107, .45);
}
.app-badge--prof {
  max-width: min(200px, 20vw);
}

.tb-right .app-badge {
  margin-right: 2px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.app-logo {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--tivoli-gold);
  flex-shrink: 0;
}
.app-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  font-style: italic;
  color: var(--tivoli-gold-light);
  letter-spacing: 1px;
  line-height: 1;
}
.app-title em {
  font-style: normal;
  color: var(--tivoli-gold);
  font-weight: 600;
}

.tb-niveau {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 8px;
}
.niveau-link {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .15s, color .15s, border-color .15s;
}
.niveau-link:hover {
  color: #fff;
  border-color: var(--tivoli-gold);
}
.niveau-link--active {
  color: var(--tivoli-navy-dark);
  background: var(--tivoli-gold);
  border-color: var(--tivoli-gold);
}

/* ── Barre de menus : un menu déroulant par niveau (« 1ère ▾ » / « Terminale ▾ ») ── */
.tb-niveau-menu { position: relative; }
.niveau-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.niveau-menu-trigger:hover { color: #fff; border-color: var(--tivoli-gold); }
.niveau-menu-trigger[aria-expanded="true"] { border-color: var(--tivoli-gold); color: #fff; }
.niveau-menu-trigger--active {
  color: var(--tivoli-navy-dark);
  background: var(--tivoli-gold);
  border-color: var(--tivoli-gold);
}
.niveau-menu-trigger--active:hover { color: var(--tivoli-navy-dark); }
.niveau-caret { font-size: 10px; opacity: .8; }

/* Panneau d'un menu de niveau : ancré à gauche (menus alignés à gauche) */
.tb-menu-panel.tb-niveau-panel { left: 0; right: auto; }

/* Item de module actif (Répartition / Conseils courant) */
.btn-menu-item--active {
  color: var(--tivoli-navy-dark);
  background: var(--tivoli-gold-light);
  font-weight: 700;
}
.btn-menu-item--active:hover { background: var(--tivoli-gold-light); }

/* Groupe « outils du tableau » sous l'item Répartition actif */
.tb-niveau-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 2px 8px;
  padding-left: 8px;
  border-left: 2px solid rgba(196, 164, 107, .3);
}

/* ============================================================
   BANNIÈRE À ONGLETS (navigation conventionnelle)
   Rang 1 : segmented control « 1ère | Terminale »  ·  utilisateur
   Rang 2 : onglets de sections           ·  actions contextuelles
   ============================================================ */
#toolbar.toolbar--tabs {
  align-items: stretch;
  height: var(--toolbar-h);
  padding: 0 16px;
  gap: 14px;
}
.toolbar--tabs .app-brand,
.toolbar--tabs .tb-hamburger,
.toolbar--tabs .tb-right { align-self: center; }

/* Conteneur repliable : tout sur une seule ligne (niveaux · onglets ··· actions · recherche) */
.toolbar--tabs .tb-collapse {
  display: flex;
  align-items: stretch;
  column-gap: 14px;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Segmented control niveau */
.tb-levels {
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.tb-level {
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tb-level:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.tb-level--on,
.tb-level--on:hover {
  background: var(--tivoli-gold);
  color: var(--tivoli-navy-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

/* Onglets de sections (soulignement or affleurant le liseré bas) */
.tb-tabs {
  align-self: stretch;
  margin-right: auto;             /* pousse actions + recherche vers la droite de la ligne */
  display: flex;
  gap: 2px;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* défilement horizontal de secours, sans barre visible */
}
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  gap: 8px;
  padding: 0 16px;
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.tb-tab-ic { font-size: 14px; opacity: .9; }
.tb-tab-short { display: none; }   /* libellé court : affiché seulement quand la place manque */
.tb-tab:hover { color: #fff; }
.tb-tab--on { color: #fff; }
.tb-tab--on::after {
  content: '';
  position: absolute;
  left: 9px; right: 9px; bottom: 0;
  height: 3px;
  background: var(--tivoli-gold);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 8px rgba(196, 164, 107, .5);
}

/* Barre d'actions contextuelle (page Liste classes) */
.tb-actions {
  align-self: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.toolbar--tabs .tb-tools {
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
}
.tb-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tb-act:hover { background: rgba(196, 164, 107, .2); border-color: var(--tivoli-gold); color: #fff; }
.tb-act--primary,
.tb-act--primary:hover { background: var(--tivoli-gold); color: var(--tivoli-navy-dark); border-color: var(--tivoli-gold); }
.tb-act--primary:hover { background: var(--tivoli-gold-light); }
.tb-act[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.tb-caret { font-size: 10px; opacity: .8; }

/* ── Page « Liste classes » : 2 bandes pleines largeur (desktop) ──
   Bande 1 (nav, 56px) : logo · niveaux · onglets ···· identité · déconnexion
   Bande 2 (44px)      : actions contextuelles à gauche · recherche fiche à droite
   Logo et identité sont épinglés sur la bande nav (align-self:flex-start) pour
   éviter l'effet « 3 étages décalés » de l'ancienne grille. */
@media (min-width: 1025px) {
  body.classes-page { --toolbar-h: 100px; }
  body.classes-page .toolbar--tabs .tb-collapse {
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 0;
  }
  body.classes-page .toolbar--tabs .tb-tabs { height: 56px; }
  body.classes-page .toolbar--tabs .tb-left,
  body.classes-page .toolbar--tabs .tb-hamburger,
  body.classes-page .toolbar--tabs .tb-right {
    align-self: flex-start;
    height: 56px;
  }
  .toolbar--tabs .tb-row2 {
    flex-basis: 100%;          /* force le passage à la 2e bande sous la nav */
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    min-width: 0;
  }
  .toolbar--tabs .tb-row2 .tb-tools { margin-left: auto; }  /* recherche calée à droite */
}

/* Dernier recours contre le débordement de la rangée d'actions : elle DÉFILE au lieu
   d'être rognée. Mesuré : au-delà de ~1150 px tout tient, la rangée débordant sur
   l'espace libre à droite des onglets — on n'y touche donc pas. En dessous, elle était
   coupée en pleine largeur (« Outils » tranché en deux, son menu inatteignable) ;
   on la confine alors à son conteneur et on la rend défilante. Même parti pris que
   pour .tb-tabs : jamais de rognage, jamais de bouton hors d'atteinte. */
@media (min-width: 1025px) and (max-width: 1149px) {
  .toolbar--tabs .tb-row2 .tb-actions {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 164, 107, .55) transparent;
    padding-bottom: 2px;
  }
  .toolbar--tabs .tb-row2 .tb-actions::-webkit-scrollbar { height: 6px; }
  .toolbar--tabs .tb-row2 .tb-actions::-webkit-scrollbar-thumb {
    background: rgba(196, 164, 107, .55); border-radius: 3px;
  }
  .toolbar--tabs .tb-row2 .tb-actions::-webkit-scrollbar-track { background: transparent; }
}
/* Mobile : la 2e bande se déplie en colonne dans le panneau hamburger */
@media (max-width: 1024px) {
  .tb-collapse .tb-row2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .tb-collapse .tb-row2 .tb-tools { margin-left: 0; }
}

/* Compaction progressive entre 1025px et le repli hamburger : on resserre
   onglets/actions/niveau pour éviter le débordement avant le mode mobile.
   En dernier recours, .tb-tabs défile horizontalement (jamais de chevauchement). */
@media (min-width: 1025px) and (max-width: 1500px) {
  .toolbar--tabs .tb-collapse { column-gap: 10px; }
  .tb-levels .tb-level { padding: 6px 13px; font-size: 12.5px; }
  .tb-tab { padding: 0 12px; font-size: 12.5px; gap: 6px; }
  .tb-tab-ic { display: none; }
  .tb-act { padding: 6px 11px; font-size: 12px; gap: 6px; }
}
/* Libellés courts d'onglets dès que la barre se resserre (Classes/Équipes/Conseils). */
@media (min-width: 1025px) and (max-width: 1340px) {
  .tb-tab-full { display: none; }
  .tb-tab-short { display: inline; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .tb-levels .tb-level { padding: 6px 11px; }
  .tb-tab { padding: 0 10px; font-size: 12px; }
  .tb-act { padding: 6px 9px; font-size: 11.5px; gap: 5px; }
  .tb-caret { font-size: 9px; }
}

/* Repli mobile (≤1024px) : la grille devient une pile dans le panneau hamburger */
@media (max-width: 1024px) {
  .toolbar--tabs .tb-collapse { display: none; }
  /* height:auto indispensable : l'overlay est en position:absolute ; height:100%
     le limiterait à la hauteur du toolbar (~56px) → panneau tronqué + défilement. */
  .toolbar--tabs .tb-collapse.tb-collapse--open { display: flex; height: auto; }
  .tb-levels { width: 100%; }
  .tb-levels .tb-level { flex: 1; text-align: center; }
  .tb-tabs {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 4px;
    width: 100%;
    overflow: visible;          /* pile verticale : pas de défilement/rognage */
  }
  .tb-tab {
    height: auto;                   /* sinon height:100% rend les onglets invisibles dans la pile */
    flex: 0 0 auto;
    padding: 11px 12px;
    border-radius: 8px;
  }
  .tb-tab-ic { display: inline; }   /* icônes réaffichées dans le menu hamburger */
  .tb-tab-full { display: inline; } /* libellés complets dans le menu hamburger */
  .tb-tab-short { display: none; }
  .tb-tab--on { background: rgba(196, 164, 107, .18); box-shadow: inset 3px 0 0 var(--tivoli-gold); }
  .tb-tab--on::after { display: none; }
  .tb-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    justify-self: stretch;
  }
  .tb-act { justify-content: flex-start; }
  .toolbar--tabs .tb-tools { width: 100%; justify-self: stretch; }
}

/* ── Barre secondaire : sous-onglets (Répartition / Conseils) + outils ── */
#subBar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--subbar-h);
  padding: 0 16px;
  background: var(--tivoli-navy);
  border-bottom: 1px solid rgba(196, 164, 107, .35);
  position: fixed;
  top: var(--toolbar-h);
  left: 0; right: 0;
  z-index: 101; /* au-dessus de #statsBar (99) et #algoPanel (98) : les menus déroulants débordent vers le bas */
  box-shadow: 0 2px 8px rgba(15, 32, 69, .25);
}
#subBar .tb-tools {
  flex: 0 1 auto;
  margin-left: auto;
  justify-content: flex-end;
}

.tb-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.subtab-link {
  padding: 5px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, .7);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.subtab-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.subtab-link--active {
  color: var(--tivoli-navy-dark);
  background: var(--tivoli-gold-light);
  border-color: var(--tivoli-gold);
}

/* Onglet « Répartition » + son caret de menu (Importer / Session / Outils) */
.tb-subtab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.subtab-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.subtab-caret:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.subtab-caret[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .14); }

.file-label {
  font-size: 11px;
  color: #94a3b8;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Recherche fiche élève (toolbar) ── */
.tb-fiche-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 4px;
}
.fiche-search-input {
  width: 150px;
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  outline: none;
  transition: width .18s ease, border-color .15s, background .15s;
}
.fiche-search-input::placeholder { color: rgba(255,255,255,.45); }
.fiche-search-input:focus {
  width: 240px;
  border-color: var(--tivoli-gold);
  background: rgba(255,255,255,.12);
}
.btn-fiche-filled {
  padding: 5px 8px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.25);
  position: relative;
}
.btn-fiche-filled:hover { background: rgba(255,255,255,.18); border-color: var(--tivoli-gold); }
.fiche-filled-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 8px;
  background: var(--tivoli-gold);
  color: var(--tivoli-navy-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.btn-fiche-important-list[hidden] { display: none; }
.fiche-important-count {
  background: #dc2626;
  color: #fff;
}
.fiche-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,32,69,.25);
  z-index: 200;
  border: 1px solid #e2e8f0;
}
.fiche-search-results[hidden] { display: none; }
.fiche-search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.fiche-search-tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
}
.fiche-search-tab:hover { background: #f0f4ff; color: var(--tivoli-navy); }
.fiche-search-tab.active {
  background: #fff;
  color: var(--tivoli-navy-dark);
  box-shadow: inset 0 -2px 0 var(--tivoli-gold);
}
#ficheSearchList {
  overflow-y: auto;
  max-height: 300px;
}
.fiche-search-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f1f5f9;
}
.fiche-search-row:last-child { border-bottom: none; }
.fiche-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.fiche-search-item:hover,
.fiche-search-item.active {
  background: #f0f4ff;
}
.fiche-search-locate {
  flex: 0 0 auto;
  width: 38px;
  border: none;
  border-left: 1px solid #f1f5f9;
  background: transparent;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.fiche-search-locate:hover {
  background: #eef6ff;
  color: var(--tivoli-navy);
}
.fiche-search-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tivoli-navy-dark);
}
.fiche-search-item-meta {
  font-size: 11px;
  color: #64748b;
}
.fiche-search-indicators {
  margin-left: 6px;
  color: var(--tivoli-gold);
  font-weight: 500;
}
.fiche-search-badge {
  color: var(--tivoli-gold);
  margin-left: 4px;
  font-size: 10px;
}
.fiche-search-empty {
  padding: 12px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* ── Modale fiche élève ── */
.fiche-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fiche-modal[hidden] { display: none; }
.fiche-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,32,69,.45);
}
.fiche-modal-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15,32,69,.3);
  overflow: hidden;
  animation: drawer-in .2s ease;
}
.fiche-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--tivoli-navy-dark);
  color: #fff;
  border-bottom: 3px solid var(--tivoli-gold);
}
.fiche-modal-header-text {
  min-width: 0;
  flex: 1;
}
.fiche-modal-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.fiche-modal-meta {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.fiche-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fiche-notes-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.fiche-editor-wrap { display: flex; flex-direction: column; gap: 0; }
.fiche-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.fiche-editor-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--tivoli-navy-dark);
  cursor: pointer;
}
.fiche-editor-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.fiche-editor-btn:active { background: #cbd5e1; }
.fiche-editor-sep {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 4px;
}
.fiche-notes-editor {
  width: 100%;
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  outline: none;
  background: #fff;
}
.fiche-notes-editor:focus {
  border-color: var(--tivoli-gold);
  box-shadow: 0 0 0 2px rgba(196,164,107,.25);
}
.fiche-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}
.fiche-notes-editor p { margin: 0 0 .5em; }
.fiche-notes-editor p:last-child { margin-bottom: 0; }
.fiche-notes-editor ul,
.fiche-notes-editor ol { margin: .4em 0 .6em 1.4em; padding: 0; }
.fiche-notes-editor li { margin-bottom: .2em; }
.fiche-notes-editor h3 { margin: .6em 0 .3em; font-size: 15px; }
.fiche-notes-editor blockquote {
  margin: .4em 0;
  padding: 6px 10px;
  border-left: 3px solid var(--tivoli-gold);
  background: #f8fafc;
  color: #475569;
}
.fiche-att-section { display: flex; flex-direction: column; gap: 8px; }
.fiche-att-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fiche-att-list { display: flex; flex-direction: column; gap: 4px; }
.fiche-att-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
}
.fiche-att-name {
  flex: 1;
  font-size: 13px;
  color: var(--tivoli-navy);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-att-name:hover { text-decoration: underline; }
.fiche-att-size { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.fiche-att-del {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  opacity: .6;
  padding: 2px 4px;
}
.fiche-att-del:hover { opacity: 1; }
.fiche-att-empty { font-size: 12px; color: #94a3b8; margin: 0; }
.fiche-att-add-btn { cursor: pointer; flex-shrink: 0; }

/* Fiche(s) de l'élève aux AUTRES niveaux — lecture seule.
   Fond ardoise et libellé « lecture seule » explicites : sans eux, ce bloc se
   confondrait avec la zone de notes juste au-dessus, qui est éditable, et on
   croirait pouvoir y écrire. */
.fiche-histo-section { display: flex; flex-direction: column; gap: 10px; }
.fiche-histo-bloc {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #f8fafc;
}
.fiche-histo-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.fiche-histo-niveau {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #475569;
}
.fiche-histo-date { font-size: 11px; color: #94a3b8; }
.fiche-histo-flag { font-size: 12px; }
.fiche-histo-ro {
  margin-left: auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 1px 8px;
}
.fiche-histo-notes {
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  max-height: 260px;
  overflow-y: auto;
}
.fiche-histo-notes p { margin: 0 0 .5em; }
.fiche-histo-notes p:last-child { margin-bottom: 0; }
.fiche-histo-notes ul,
.fiche-histo-notes ol { margin: .4em 0 .6em 1.4em; padding: 0; }
.fiche-histo-notes h3 { margin: .6em 0 .3em; font-size: 14px; }
.fiche-histo-vide { font-size: 12px; color: #94a3b8; font-style: italic; }
.fiche-histo-atts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fiche-histo-att {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tivoli-navy);
  text-decoration: none;
}
.fiche-histo-att:hover { text-decoration: underline; }
.fiche-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.fiche-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fiche-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fiche-save-status {
  font-size: 12px;
  color: #64748b;
}
.fiche-save-status.ok { color: #16a34a; }
.fiche-save-status.error { color: #dc2626; }

/* ── Bouton « Important ! » (action à penser) ── */
.fiche-important-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e2b4b4;
  border-radius: var(--radius);
  background: #fff;
  color: #b91c1c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.fiche-important-btn .fiche-important-icon {
  font-size: 14px;
  filter: grayscale(1) opacity(.6);
  transition: filter .12s;
}
.fiche-important-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}
.fiche-important-btn[aria-pressed="true"] {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  box-shadow: 0 1px 4px rgba(220,38,38,.35);
}
.fiche-important-btn[aria-pressed="true"] .fiche-important-icon {
  filter: none;
}

/* ── Drawer fiches renseignées ── */
#ficheFilledDrawer {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  justify-content: flex-end;
}
#ficheFilledDrawer[hidden] { display: none; }
.fiche-filled-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,32,69,.35);
}
.fiche-filled-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15,32,69,.2);
  animation: drawer-in .2s ease;
}
.fiche-filled-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--tivoli-navy-dark);
  color: #fff;
  border-bottom: 3px solid var(--tivoli-gold);
}
.fiche-filled-title {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}
.fiche-filled-sub {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  width: 100%;
  order: 3;
}
.fiche-filled-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid #e2e8f0;
}
.fiche-filled-tab {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
.fiche-filled-tab:hover { color: var(--tivoli-navy-dark); }
.fiche-filled-tab.active {
  background: #fff;
  border-color: #e2e8f0;
  color: var(--tivoli-navy-dark);
  margin-bottom: -1px;
}
.fiche-filled-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.fiche-filled-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.fiche-filled-row:hover {
  background: #f0f4ff;
  border-color: var(--tivoli-gold);
}
.fiche-filled-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tivoli-navy-dark);
}
.fiche-filled-row-meta {
  font-size: 12px;
  color: #64748b;
}
.fiche-filled-row-tags {
  font-size: 11px;
  color: var(--tivoli-gold);
  font-weight: 500;
}
.fiche-filled-tag-important {
  color: #dc2626;
  font-weight: 600;
}
.fiche-filled-row-date {
  font-size: 10px;
  color: #94a3b8;
}
.fiche-filled-empty {
  padding: 24px 16px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

/* ── Fiches : responsivité ── */
@media (max-width: 960px) {
  .tb-fiche-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .tb-fiche-search--conseils {
    flex: 1 1 100%;
    order: -1;
  }
  .fiche-search-input {
    flex: 1;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .fiche-search-results {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: 100vw;
  }
  #ficheFilledDrawer .fiche-filled-box {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .fiche-modal {
    align-items: flex-end;
    padding: 0;
  }
  .fiche-modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 94vh;
    border-radius: 14px 14px 0 0;
  }
  .fiche-modal-body {
    padding: 12px;
  }
  .fiche-notes-editor {
    min-height: 160px;
    max-height: 40vh;
  }
  .fiche-editor-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .fiche-editor-btn {
    min-width: 36px;
    height: 36px;
  }
  .fiche-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .fiche-modal-footer .btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
  .fiche-att-header {
    flex-direction: column;
    align-items: stretch;
  }
  .fiche-att-add-btn {
    width: 100%;
    justify-content: center;
  }
  .fiche-att-row {
    flex-wrap: wrap;
  }
  .fiche-att-name {
    flex: 1 1 100%;
    white-space: normal;
    word-break: break-word;
  }
  .fiche-filled-header {
    padding: 12px 14px;
  }
  .fiche-filled-row {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .tb-fiche-search {
    gap: 3px;
  }
  .fiche-search-input {
    font-size: 16px;
    padding: 7px 10px;
  }
  .btn-fiche-filled {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
  }
  .fiche-search-tab {
    padding: 10px 8px;
    font-size: 11px;
  }
  .fiche-modal-title {
    font-size: 15px;
  }
  .fiche-modal-meta {
    font-size: 11px;
  }
}

.separator {
  width: 1px;
  height: 28px;
  background: rgba(196,164,107,.2);
  margin: 0 4px;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius);
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn:not(:disabled):hover { filter: brightness(1.1); }
.btn:not(:disabled):active { filter: brightness(.95); }

a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited {
  text-decoration: none;
}

.btn-import        { background: var(--tivoli-navy); color: var(--tivoli-gold-light); border: 1px solid rgba(196,164,107,.3); }
.btn-success       { background: var(--tivoli-gold); color: var(--tivoli-navy-dark); }
.btn-secondary     { background: var(--tivoli-navy-light); color: #fff; }
.btn-export        { background: var(--tivoli-navy); color: var(--tivoli-gold-light); border: 1px solid rgba(196,164,107,.3); }
.btn-danger-outline{ background: transparent; color: #B55A5A; border: 1px solid #B55A5A; }
.btn-danger-outline:not(:disabled):hover { background: #B55A5A18; }

.input-save {
  padding: 5px 9px;
  border-radius: var(--radius);
  border: 1px solid rgba(196,164,107,.3);
  background: rgba(255,255,255,.07);
  color: var(--tivoli-gold-light);
  font-size: 12px;
  width: 160px;
}
.input-save::placeholder { color: rgba(196,164,107,.5); }
.input-save:focus { outline: 1px solid var(--tivoli-gold); background: rgba(255,255,255,.1); }

.select-load {
  padding: 5px 9px;
  border-radius: var(--radius);
  border: 1px solid rgba(196,164,107,.3);
  background: rgba(255,255,255,.07);
  color: var(--tivoli-gold-light);
  font-size: 12px;
  cursor: pointer;
  max-width: 220px;
}
.select-load option { background: var(--tivoli-navy-dark); color: #fff; }

/* Bouton déconnexion (bannière commune) */
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 9px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(196, 164, 107, .35);
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-logout-label { display: none; }
.btn-logout:hover {
  color: #fff;
  background: rgba(181, 90, 90, .22);
  border-color: rgba(220, 120, 120, .55);
  filter: none;
}
.btn-logout-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .9;
}

/* Bouton icône seule (legacy) */
.btn-icon-only {
  background: transparent;
  color: #B55A5A;
  border: 1px solid #B55A5A;
  padding: 5px 10px;
  font-size: 15px;
  line-height: 1;
}

/* ── Menus déroulants toolbar ── */
.tb-menu { position: relative; }

.btn-menu-trigger {
  background: var(--tivoli-navy-light);
  color: #fff;
  border: 1px solid rgba(196,164,107,.25);
}

.tb-menu-panel[hidden] { display: none; }

.tb-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--tivoli-navy-dark);
  border: 1px solid rgba(196,164,107,.45);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 270px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 28px rgba(15,32,69,.55);
}

.tb-menu-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tb-menu-row .input-save  { flex: 1; width: auto; min-width: 0; }
.tb-menu-row .select-load { flex: 1; max-width: none; min-width: 0; }

.tb-menu-sep {
  height: 1px;
  background: rgba(196,164,107,.2);
  margin: 2px 0;
}

.btn-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--tivoli-gold-light);
  border: none;
  justify-content: flex-start;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: var(--radius);
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}
.btn-menu-item:not([disabled]):hover { background: rgba(196,164,107,.12); filter: none; }
.btn-menu-item[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }

.btn-menu-full { width: 100%; justify-content: center; }

/* Panneau « Répartition ▾ » : ancré à gauche (l'onglet est tout à gauche) */
.tb-repartition-panel { left: 0; right: auto; }
.tb-menu-import { position: relative; }
.tb-menu-caption {
  padding: 0 10px 2px;
  font-size: 11px;
  color: #94a3b8;
}
.tb-menu-caption .file-label { max-width: 240px; }

/* Sous-menus en cascade (Session ▸ / Outils ▸) */
.tb-submenu { position: relative; }
/* Pont transparent de 4 px comblant le gap entre le déclencheur et le panel
   (évite que mouseleave se déclenche lors du survol de ce gap). */
.tb-submenu::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 4px;
  pointer-events: auto;
}
.tb-submenu-trigger::after {
  content: '\25B8';            /* ▸ */
  margin-left: auto;
  padding-left: 10px;
  font-size: 11px;
  opacity: .65;
}
.tb-submenu-trigger[aria-expanded="true"] { background: rgba(196,164,107,.12); }
.tb-submenu-panel[hidden] { display: none; }
.tb-submenu-panel {
  position: absolute;
  left: calc(100% + 4px);
  top: -10px;
  background: var(--tivoli-navy-dark);
  border: 1px solid rgba(196,164,107,.45);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 250px;
  max-height: 250px;
  overflow-y: auto;
  /* Seul scroller sur fond sombre : le rail clair hérité de `html` (cf. SCROLLBARS
     GLOBALES) y ferait une bande blanche. Teintes de la charte à la place. */
  scrollbar-color: #6B80AC var(--tivoli-navy);
  z-index: 210;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 28px rgba(15,32,69,.55);
}

/* En-tête index (toolbar + stats + algo) */
#appHeader {
  position: relative;
  z-index: 100;
}

/* ============================================================
   REPLI DE LA BANNIÈRE (toolbar + barre de stats)
   ------------------------------------------------------------
   Tout l'empilement (#toolbar → #statsBar → #algoPanel → #main)
   est positionné à partir des variables de hauteur. Pour replier
   la bannière et les stats, on annule leurs hauteurs — les blocs
   en dessous (algoPanel, main) remontent alors d'eux-mêmes — puis
   on masque les éléments concernés.
   !important : bat les redéfinitions de --toolbar-h des media
   queries (ex. body.classes-page { --toolbar-h: 100px }).
   ============================================================ */
body.banner-collapsed {
  --toolbar-h: 0px !important;
  --subbar-h: 0px !important;
  --stats-h: 0px !important;
}
body.banner-collapsed #toolbar,
body.banner-collapsed #statsBar,
body.banner-collapsed .app-readonly-banner {
  display: none !important;
}

/* Bouton de repli, logé en tête de #algoPanel (barre toujours visible
   juste sous les stats — et qui remonte en haut une fois replié). */
.banner-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(196, 164, 107, .35);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--tivoli-gold-light);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.banner-toggle:hover { background: rgba(255, 255, 255, .16); }
.banner-toggle:active { transform: scale(.94); }
.banner-toggle-chevron {
  display: block;
  font-size: 11px;
  line-height: 1;
  transition: transform .2s ease;
}
/* déplié → chevron vers le haut (= « replier ») ; replié → vers le bas. */
.banner-toggle[aria-expanded="false"] .banner-toggle-chevron { transform: rotate(180deg); }

/* En lecture seule (prof standard) il n'y a pas de #algoPanel : le bouton
   est fixé au coin haut-droit, juste sous la barre de stats — et remonte
   en haut de page une fois la bannière repliée (les hauteurs valant 0). */
.banner-toggle--floating {
  position: fixed;
  top: calc(var(--toolbar-h) + var(--subbar-h) + var(--stats-h));
  right: 8px;
  margin-top: 6px;
  z-index: 102;
  background: var(--tivoli-navy);
  box-shadow: 0 2px 6px rgba(15, 32, 69, .3);
}
.banner-toggle--floating:hover { background: #16306b; }

/* Bouton « plein écran », logé à côté du bouton de repli. Réutilise l'allure
   de .banner-toggle. L'icône (crochets d'angle) est dessinée en CSS. */
.banner-fullscreen-icon {
  display: block;
  width: 14px;
  height: 14px;
  position: relative;
}
.banner-fullscreen-icon::before,
.banner-fullscreen-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
}
/* Coin haut-gauche + coin bas-droite → symbole « agrandir ». */
.banner-fullscreen-icon::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.banner-fullscreen-icon::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* En plein écran, les crochets s'inversent → symbole « réduire ». */
.banner-fullscreen[aria-pressed="true"] .banner-fullscreen-icon::before {
  top: 0; left: 0; border: 1.5px solid currentColor; border-left: 0; border-top: 0;
}
.banner-fullscreen[aria-pressed="true"] .banner-fullscreen-icon::after {
  bottom: 0; right: 0; border: 1.5px solid currentColor; border-right: 0; border-bottom: 0;
}
/* Variante flottante (lecture seule) : posée à gauche du bouton de repli. */
.banner-fullscreen.banner-toggle--floating { right: 46px; }

/* ============================================================
   BARRE DE STATS GLOBALE
   ============================================================ */
#statsBar {
  display: flex;
  align-items: center;
  height: var(--stats-h);
  padding: 0 16px;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  gap: 16px;
  position: fixed;
  top: calc(var(--toolbar-h) + var(--subbar-h));
  left: 0; right: 0;
  z-index: 99;
  border-bottom: 1px solid rgba(196, 164, 107, .25);
}

.stat-bloc { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stat-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 15px; font-weight: 700; color: #fff; }
.stat-sep   { color: #64748b; }

/* Ratio « équipages avec chef » : bloc de stat cliquable. */
.stat-chef-bloc {
  border: 1px solid rgba(196, 164, 107, .35);
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.stat-chef-bloc:hover { background: rgba(255, 255, 255, .1); border-color: rgba(196, 164, 107, .6); }
/* Des équipages restent sans chef : on teinte le ratio en rouge d'alerte. */
.stat-chef-bloc.stat-chef-incomplete { border-color: rgba(198, 40, 40, .55); }
.stat-chef-bloc.stat-chef-incomplete #statChefCrews { color: #ff8a8a; }
/* État actif (atténuation en cours) : le bloc reste visiblement enfoncé. */
.stat-chef-bloc[aria-pressed="true"] {
  background: rgba(198, 40, 40, .22);
  border-color: #c62828;
  box-shadow: inset 0 0 0 1px rgba(198, 40, 40, .4);
}

/* Atténuation des équipages pourvus d'un chef pour laisser ressortir
   ceux « Sans chef » (déclenchée au clic sur le ratio « Chefs »). */
body.dim-crews-with-chef .equipage--has-chef {
  opacity: .32;
  filter: grayscale(.55);
  transition: opacity .2s, filter .2s;
}
body.dim-crews-with-chef .equipage--has-chef:hover { opacity: .85; filter: none; }
body.dim-crews-with-chef .equipage--no-chef { box-shadow: inset 4px 0 0 #c62828, 0 0 0 2px rgba(198, 40, 40, .35); }

.spe-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  /* Firefox : `thin` = ~11 px, PRIS sur les 44 px de #statsBar → cartes rognées.
     Le pouce de thin-scrollbars.js, lui, est en surimpression : il ne consomme
     aucune hauteur. Ce `none` reste le repli si le script est absent (mieux vaut
     pas de barre qu'un bandeau rogné ; la molette défile horizontalement sur un
     scroller purement horizontal). */
  scrollbar-width: none;
}
.spe-stats-row::-webkit-scrollbar { height: 3px; }
.spe-stats-row::-webkit-scrollbar-track { background: transparent; }
.spe-stats-row::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.premiere-crew-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-left: 1px solid rgba(196,164,107,.25);
  padding-left: 12px;
}
.pcs-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pcs-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pcs-row-ref {
  opacity: .75;
}
.pcs-label {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  min-width: 28px;
}
.ref-file-btn {
  font-size: 10px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 6px;
  border: 1px solid rgba(100,116,139,.35);
  border-radius: 6px;
  align-self: center;
  transition: color .15s, border-color .15s;
}
.ref-file-btn:hover { color: #c4a46b; border-color: rgba(196,164,107,.6); }

/* Cartes « Groupes de spé répartis sur 1 / 2 / 3+ classes » (mode ILP / CP-SAT).
   Styles en classes (et non inline) pour rester pilotables en responsive. */
.pcs-grp-cards {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.pcs-grp-card {
  flex: 1 1 0;
  min-width: 64px;
  text-align: center;
  padding: 6px 4px;
  border: 1.5px solid;
  border-radius: 6px;
  cursor: help;
  line-height: 1;
}
.pcs-grp-card-n { font-size: 20px; font-weight: 700; line-height: 1; }
.pcs-grp-card-l { font-size: 11px; margin-top: 2px; white-space: nowrap; }
.pcs-grp-card--1 { background: #d4edda; border-color: #28a745; color: #155724; }
.pcs-grp-card--2 { background: #fff3cd; border-color: #ffc107; color: #7a5c00; }
.pcs-grp-card--3 { background: #f8d7da; border-color: #dc3545; color: #721c24; }
@media (max-width: 1024px) {
  .pcs-grp-card { min-width: 52px; padding: 4px 3px; }
  .pcs-grp-card-n { font-size: 17px; }
  .pcs-grp-card-l { font-size: 10px; }
}
@media (max-width: 480px) {
  .pcs-grp-card { min-width: 44px; padding: 3px 2px; }
  .pcs-grp-card-n { font-size: 15px; }
  .pcs-grp-card-l { font-size: 9px; }
}

/* Bandeau Terminale #termCrewStats : cartes de synthèse (chk-card) + cartes « 1/2/3+ classes »
   (pcs-grp-card) côte à côte DANS la barre de stats à hauteur fixe (--stats-h = 44px). Scopé à
   l'ID pour ne pas toucher le bandeau 1ère #premiereCrewStats. Compacté pour tenir dans les 44px
   + rétractable/défilant pour rester responsive quand la barre est étroite. */
#termCrewStats {
  flex-shrink: 1;            /* peut rétrécir dans le flex de #statsBar (override du flex-shrink:0) */
  min-width: 0;
  overflow-x: auto;          /* défile au lieu de déborder/pousser les voisins hors écran */
  overflow-y: hidden;
  scrollbar-width: none;     /* repli, cf. .spe-stats-row : 11 px en Firefox = 44 px de bandeau rognés */
}
#termCrewStats::-webkit-scrollbar { height: 3px; }
#termCrewStats::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
/* flex: 0 0 auto — les 3 groupes (synthèse / 1-2-3+ / réglages) gardent leur largeur de
   contenu. Sans ça, min-width:0 + flex-shrink:1 (défaut) les comprime SOUS leur contenu
   tandis que les cartes (flex:0 0 auto) ne rétrécissent pas → elles débordent et se
   CHEVAUCHENT sur le groupe voisin. En 0 0 auto, la somme déborde → le scroll-x de
   #termCrewStats prend le relais au lieu de laisser les cartes se superposer. */
#termCrewStats .chk-cards,
#termCrewStats .pcs-grp-cards { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
/* Groupe « réalisation des réglages » : séparé des cartes équipages/concentration par un filet. */
#termCrewStats .chk-cards--settings {
  border-left: 1px solid rgba(196,164,107,.25);
  padding-left: 10px;
}
#termCrewStats .chk-card,
#termCrewStats .pcs-grp-card {
  flex: 0 0 auto;            /* taille au contenu (pas d'étirement ni de wrap) */
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: none;
  line-height: 1;
  white-space: nowrap;
}
#termCrewStats .pcs-grp-card { padding: 3px 7px; min-width: 50px; text-align: center; }
#termCrewStats .chk-card-v,
#termCrewStats .pcs-grp-card-n { font-size: 15px; line-height: 1.1; }
#termCrewStats .chk-card-l,
#termCrewStats .pcs-grp-card-l { font-size: 9px; margin-top: 1px; white-space: nowrap; }
@media (max-width: 1024px) {
  #termCrewStats .chk-card,
  #termCrewStats .pcs-grp-card { padding: 2px 6px; }
  #termCrewStats .chk-card-v,
  #termCrewStats .pcs-grp-card-n { font-size: 14px; }
}

/* Tableau détaillé des effectifs de groupes (mode ILP / CP-SAT) */
.ilp-group-detail {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.grp-detail { width: 100%; font-size: 11px; }
.grp-detail > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  padding: 3px 0;
  user-select: none;
}
.grp-detail > summary:hover { color: #1e293b; }
.grp-table-wrap { overflow: auto; max-height: 320px; margin-top: 4px; }
.grp-table {
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}
.grp-table th, .grp-table td {
  border: 1px solid #e2e8f0;
  padding: 2px 6px;
  text-align: center;
}
.grp-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
  position: sticky;
  top: 0;
}
.grp-table .grp-code { text-align: left; font-family: ui-monospace, monospace; font-weight: 600; }
.grp-table .grp-mid { color: #475569; }
.grp-table .grp-tot { font-weight: 700; background: #f8fafc; }
.grp-table .grp-cell { color: #94a3b8; min-width: 30px; }
.grp-table .grp-cell-on { color: #0f172a; font-weight: 700; background: #eef6ff; }
.grp-spe-hdr td {
  text-align: left;
  background: #fdf6e9;
  font-weight: 700;
  color: #7a5c00;
  border-color: #f0e2c4;
}
.grp-ecart { font-weight: 600; color: #92400e; }
.grp-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
/* ── Check-up de la répartition (1ère) ── */
.checkup-card { width: 100%; }
.checkup-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  padding: 2px 0;
}
.checkup-head:hover { color: #0f172a; }
.checkup-card[open] > .checkup-head { margin-bottom: 6px; }
.checkup-body { display: flex; flex-direction: column; gap: 2px; }
/* Carte inline Terminale : sections (cartes <details>) plus espacées */
.checkup-body--term { gap: 12px; padding-top: 4px; }
.checkup-sum {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.ck-legend {
  font-size: 10px;
  color: #64748b;
  margin: 4px 0 2px;
  line-height: 1.4;
}
.ck-table .ck-rowlbl {
  text-align: left;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
  position: sticky;
  left: 0;
}
.ck-table .ck-cell { min-width: 34px; color: #475569; }
.ck-table .ck-tot-row td { border-top: 2px solid #cbd5e1; font-weight: 700; background: #f1f5f9; }
.ck-pct { font-size: 9px; color: #94a3b8; font-weight: 600; }
/* Cellules colorées par type d'équipage (texte foncé sur fond clair) */
.ck-table td.ck-h3p { background: #d1fae5; color: #065f46; font-weight: 700; }
.ck-table td.ck-h3m { background: #ecfdf5; color: #047857; font-weight: 700; }
.ck-table td.ck-h2p { background: #e0f2fe; color: #075985; font-weight: 700; }
.ck-table td.ck-h2m { background: #ede9fe; color: #5b21b6; font-weight: 700; }
.ck-table td.ck-h1p { background: #fef9c3; color: #854d0e; font-weight: 700; }
.ck-table td.ck-h1m { background: #ffedd5; color: #9a3412; font-weight: 700; }
.ck-table td.ck-h0  { background: #fee2e2; color: #991b1b; font-weight: 700; }
/* Barre de mixité de genre */
.ck-bar-cell { min-width: 90px; }
.ck-bar {
  display: flex;
  height: 12px;
  width: 90px;
  border-radius: 3px;
  overflow: hidden;
  background: #e2e8f0;
}
.ck-bar-g { background: #3b82f6; }
.ck-bar-f { background: #ec4899; }

.pcs-chip-grp3 { background: rgba(239,68,68,.2); color: #fca5a5; }
.pcs-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.pcs-chip-homogp  { background: rgba(28,122,72,.25);  color: #6ee7a0; }
.pcs-chip-homogm  { background: rgba(107,114,128,.2); color: #cbd5e1; }
.pcs-chip-spe4    { background: rgba(180,120,20,.2);  color: #fcd34d; }
.pcs-chip-spe5    { background: rgba(178,58,46,.2);   color: #fca5a5; }
.pcs-chip-h3p { background: rgba(16,185,129,.25); color: #6ee7b7; }
.pcs-chip-h3m { background: rgba(52,211,153,.15); color: #a7f3d0; }
.pcs-chip-h2p { background: rgba(56,189,248,.2);  color: #7dd3fc; }
.pcs-chip-h2m { background: rgba(99,102,241,.2);  color: #c4b5fd; }
.pcs-chip-h1p { background: rgba(251,191,36,.2);  color: #fde68a; }
.pcs-chip-h1m { background: rgba(249,115,22,.2);  color: #fed7aa; }
.pcs-chip-h0  { background: rgba(239,68,68,.2);   color: #fca5a5; }

.stat-spe {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1e293b;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.stat-spe-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stat-spe-name { font-size: 11px; color: #cbd5e1; }
.stat-spe-val  { font-size: 12px; font-weight: 700; color: #fff; }
.stat-spe-val.complete { color: #4ade80; }
.stat-spe-val.partial  { color: #fbbf24; }

/* ============================================================
   PANNEAU ALGORITHMES
   ============================================================ */
#algoPanel {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--algo-h);
  padding: 0 16px;
  background: var(--tivoli-gold-pale);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: calc(var(--toolbar-h) + var(--subbar-h) + var(--stats-h));
  left: 0; right: 0;
  z-index: 98;
  overflow: hidden;
}

.algo-divider {
  width: 1px;
  height: 26px;
  background: rgba(26, 53, 105, .18);
  flex-shrink: 0;
}

.algo-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.algo-option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 600;
  user-select: none;
}
.algo-option input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--primary, #1a3569);
  width: 13px;
  height: 13px;
}
.algo-option input[type="radio"] {
  cursor: pointer;
  accent-color: var(--primary, #1a3569);
  width: 13px;
  height: 13px;
}

.algo-mode-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px 10px;
  background: rgba(26, 53, 105, .07);
  border-radius: 20px;
  border: 1px solid rgba(26, 53, 105, .15);
}

.algo-ilp-params {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
/* L'attribut `hidden` (règle UA) est écrasé par le `display:inline-flex` auteur
   ci-dessus → on rétablit explicitement le masquage du mode non sélectionné. */
.algo-ilp-params[hidden],
#algoStandardOpts[hidden] { display: none !important; }
.algo-ilp-lbl {
  gap: 4px !important;
  font-size: 11px;
}
.algo-ilp-input {
  width: 46px;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid rgba(26, 53, 105, .3);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  color: var(--tivoli-navy, #1a3569);
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.algo-ilp-input::-webkit-outer-spin-button,
.algo-ilp-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.algo-ilp-input:focus {
  outline: 2px solid rgba(26, 53, 105, .5);
  outline-offset: 1px;
}
.algo-ilp-range {
  width: 62px;
  vertical-align: middle;
  accent-color: var(--tivoli-navy, #1a3569);
  cursor: pointer;
}
.algo-ilp-rangeval {
  display: inline-block;
  min-width: 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tivoli-navy, #1a3569);
  text-align: center;
}
.algo-ilp-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid rgba(26, 53, 105, .35);
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  color: var(--tivoli-navy, #1a3569);
  cursor: pointer;
}
.algo-ilp-btn:hover { background: var(--tivoli-navy, #1a3569); color: #fff; }

/* ── Menu déroulant des réglages CP-SAT ── */
.algo-settings-dd { position: relative; display: inline-block; }
.btn-algo-settings {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid rgba(26, 53, 105, .3);
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  color: var(--tivoli-navy, #1a3569);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-algo-settings:hover { background: #fff; border-color: var(--tivoli-navy, #1a3569); }
.btn-algo-settings[aria-expanded="true"] {
  background: var(--tivoli-navy, #1a3569);
  color: var(--tivoli-gold-light, #f3e2b3);
  border-color: var(--tivoli-navy, #1a3569);
}
.algo-settings-panel {
  position: fixed;
  z-index: 1100;
  min-width: 260px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--border, #d9d2c4);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 32, 69, .22);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.algo-settings-panel[hidden] { display: none; }
.algo-settings-panel-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #6b7280);
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border, #e5e0d5);
}
.algo-settings-panel .algo-ilp-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
.algo-settings-panel .algo-ilp-range { width: 96px; }
/* Étiquette empilée (texte au-dessus, contrôle large en dessous) pour les libellés
   d'options longs (ex. sélecteur « Allemand » dont les options débordent en ligne). */
.algo-settings-panel .algo-ilp-lbl-col {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.algo-ilp-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid rgba(26, 53, 105, .3);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  color: var(--tivoli-navy, #1a3569);
  cursor: pointer;
}
.algo-ilp-reset {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid rgba(26, 53, 105, .3);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  color: var(--tivoli-navy, #1a3569);
  cursor: pointer;
  font-family: inherit;
}
.algo-ilp-reset:hover {
  background: var(--tivoli-gold-light, #f5edd8);
  border-color: rgba(26, 53, 105, .5);
}
.algo-ilp-cpsat {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border: 1px solid var(--tivoli-navy, #1a3569);
  border-radius: 4px;
  background: var(--tivoli-navy, #1a3569);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.algo-ilp-cpsat:hover { filter: brightness(1.12); }
.algo-ilp-cpsat:disabled { opacity: .5; cursor: default; }

.algo-crew-total {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(26, 53, 105, .08);
  color: var(--tivoli-navy);
  border: 1px solid transparent;
}
.algo-crew-total.crew-total-ok  { background: rgba(34, 139, 84, .12);  color: #1c7a48; border-color: rgba(34, 139, 84, .35); }
.algo-crew-total.crew-total-bad { background: rgba(192, 57, 43, .12);  color: #b23a2e; border-color: rgba(192, 57, 43, .4); }

.btn-toggle-pool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  border: 1px solid rgba(196, 164, 107, .4);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn-toggle-pool:hover {
  background: var(--tivoli-navy-light);
  border-color: var(--tivoli-gold);
  box-shadow: 0 2px 8px rgba(15, 32, 69, .18);
}
.btn-toggle-pool:active { transform: scale(.98); }
.btn-toggle-pool[aria-expanded="true"] {
  background: var(--tivoli-navy-dark);
  border-color: var(--tivoli-gold);
}
.pool-toggle-label { white-space: nowrap; }
.pool-toggle-icon {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 1px;
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.btn-toggle-pool[aria-expanded="true"] .pool-toggle-icon {
  transform: rotate(135deg);
  margin-right: 0;
  margin-left: 2px;
}
.btn-toggle-pool .pool-count-badge {
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1;
}

.btn-algo {
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  border: 1px solid rgba(196, 164, 107, .3);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  letter-spacing: .2px;
}
.btn-algo:not(:disabled):hover {
  background: var(--tivoli-gold);
  color: var(--tivoli-navy-dark);
  border-color: var(--tivoli-gold);
}
.btn-algo:disabled { opacity: .35; cursor: not-allowed; }

.btn-algo-secondary {
  background: rgba(26, 54, 93, .08);
  color: var(--tivoli-navy);
  border-color: rgba(26, 54, 93, .25);
}
.btn-algo-secondary:not(:disabled):hover {
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  border-color: var(--tivoli-navy);
}

.algo-progress {
  flex: 1 1 0;
  min-width: 0;              /* autorise le rétrécissement dans le bandeau à hauteur fixe */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  overflow: hidden;
}
.algo-progress.hidden { display: none; }
/* Pendant un calcul : on ESCAMOTE le reste du bandeau (boutons/réglages, désactivés de toute façon)
   pour donner TOUTE la largeur à la barre de progression + « Arrêter » → jamais tronqués. */
#algoPanel.algo-busy > :not(#algoProgress) { display: none !important; }
#algoPanel.algo-busy .algo-progress { flex: 1 1 100%; margin-left: 0; }
#btnAlgoStop { flex: 0 0 auto; white-space: nowrap; }   /* « Arrêter » jamais rétréci ni coupé */
.algo-hourglass {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  animation: hourglass-flip 1.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hourglass-flip {
  0%, 55%  { transform: rotate(0deg); }
  70%, 100% { transform: rotate(180deg); }
}

/* Spread max par spé (Terminale) */
.spread-cfg-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.spread-cfg-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
}
.spread-cfg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.spread-cfg-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--tivoli-navy);
  white-space: nowrap;
}
.spread-cfg-input {
  width: 42px;
  padding: 2px 4px;
  font-size: 12px;
  border: 1px solid rgba(26,53,105,.25);
  border-radius: 4px;
  text-align: center;
  color: var(--tivoli-navy);
  background: #fff;
}
.spread-cfg-input:focus {
  outline: none;
  border-color: var(--tivoli-navy);
  box-shadow: 0 0 0 2px rgba(26,53,105,.12);
}
.spread-achieved {
  font-size: 11px;
  font-weight: 700;
  color: #1c7a48;
  min-width: 18px;
  text-align: center;
}
.spread-achieved.spread-over {
  color: #b23a2e;
}
.spread-cfg-mixtes {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(26,53,105,.08);
  color: var(--tivoli-navy);
  white-space: nowrap;
  margin-left: 4px;
}

.algo-progress-bar-wrap {
  flex: 0 0 180px;          /* LARGEUR FIXE : la barre ne change JAMAIS de taille selon le texte */
  width: 180px;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}
.algo-progress-bar {
  height: 6px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  border-radius: 3px;
  width: 0%;
  transition: width .3s ease;
}
.algo-progress-msg {
  font-size: 11px;
  color: #93c5fd;
  white-space: nowrap;
  flex: 1 1 auto;           /* c'est le TEXTE qui absorbe les variations de place, pas la barre */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   ZONE PRINCIPALE
   ============================================================ */
#main {
  display: flex;
  position: fixed;
  top: calc(var(--toolbar-h) + var(--subbar-h) + var(--stats-h) + var(--algo-h));
  left: 0; right: 0;
  bottom: var(--spe-h);
  overflow: hidden;
}

/* ── VIVIER ─────────────────────────────────────────────────── */
#poolPanel {
  width: var(--pool-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 2px solid var(--border);
  background: var(--panel-bg);
  overflow: hidden;
  transition: width .35s cubic-bezier(.4, 0, .2, 1), border-width .35s ease, opacity .25s ease;
  will-change: width;
}
#poolPanel.collapsed {
  width: 0;
  min-width: 0;
  border-right-width: 0;
  opacity: 0;
  pointer-events: none;
}

#poolHeader {
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(180deg, var(--tivoli-navy) 0%, var(--tivoli-navy-dark) 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pool-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--tivoli-gold-light);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .4px;
  text-transform: uppercase;
  min-width: 0;
  flex-shrink: 0;
}
.pool-title-label { white-space: nowrap; }
.pool-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid rgba(196,164,107,.45);
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  color: var(--tivoli-gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.pool-add-btn:hover { background: rgba(196,164,107,.25); border-color: var(--tivoli-gold); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: var(--tivoli-gold);
  color: var(--tivoli-navy-dark);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}

#filters {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.filter-genre {
  max-width: 64px;
  flex: none;
}
.filter-select {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid rgba(196,164,107,.3);
  border-radius: var(--radius);
  font-size: 11px;
  background: rgba(255,255,255,.1);
  color: var(--tivoli-gold-light);
  cursor: pointer;
}
.filter-select option { background: var(--tivoli-navy-dark); color: #fff; }
.filter-input {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid rgba(196,164,107,.3);
  border-radius: var(--radius);
  font-size: 11px;
  background: rgba(255,255,255,.1);
  color: var(--tivoli-gold-light);
}
.filter-input::placeholder { color: rgba(196,164,107,.5); }
.filter-input:focus, .filter-select:focus { outline: 1px solid var(--tivoli-gold); outline-offset: -1px; }

.btn-icon {
  padding: 4px 7px;
  background: transparent;
  border: 1px solid rgba(196,164,107,.3);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  color: var(--tivoli-gold);
}
.btn-icon:hover { background: #B5555520; color: #B55555; border-color: #B55555; }

#poolList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#poolList::-webkit-scrollbar { width: 5px; }
#poolList::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Zone des élèves inactifs (non pris en compte par la répartition) ── */
#poolInactiveSection {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 42%;
  border-top: 2px solid var(--border);
  background: repeating-linear-gradient(
    45deg, rgba(148,163,184,.06), rgba(148,163,184,.06) 8px,
    transparent 8px, transparent 16px);
}
#poolInactiveHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-shrink: 0;
  border-bottom: 1px dashed var(--border);
}
.pool-inactive-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #64748b;
}
.pool-inactive-badge { background: #94a3b8; color: #fff; }
#poolInactiveList {
  flex: 1;
  min-height: 48px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#poolInactiveList::-webkit-scrollbar { width: 5px; }
#poolInactiveList::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* Les cartes inactives sont grisées pour signaler qu'elles sont ignorées. */
#poolInactiveList .eleve-card { opacity: .62; filter: grayscale(.35); }
#poolInactiveList .eleve-card:hover { opacity: 1; filter: none; }
.drop-zone-inactive.sortable-drag-over,
#poolInactiveList.drag-target { background: rgba(148,163,184,.18); }

/* ── Boutons « Statut » de la modale d'édition ── */
.edit-status-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#editToggleInactifBtn.is-reactivate { border-color: #16a34a; color: #16a34a; }

/* ── CLASSES ────────────────────────────────────────────────── */
/* Pile verticale board (voie générale) + bande STMG, occupe la place à droite du vivier */
#boardStack {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#classesPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px;
}

#classesArea {
  display: flex;
  gap: 8px;
  min-width: max-content;
  align-items: flex-start;
}

.classe-column {
  width: var(--col-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Tenue à l'écran des 6 classes ──────────────────────────────────────
   On conserve EXACTEMENT la mise en page desktop des colonnes (largeur
   --col-w, cartes non déstructurées) ; pour que les 6 classes tiennent à
   l'écran sans scroll horizontal (portables 14" inclus), le bandeau est
   réduit en JS (fitClassesZoom) via `transform: scale` + marges négatives
   compensatrices (pour récupérer le reflow que `transform` ne fait pas seul).
   NB : on n'utilise PAS la propriété CSS `zoom` car SortableJS ne sait pas en
   tenir compte → le glisser-déposer des cartes se fige sous `zoom`. Le facteur
   est calculé selon la largeur disponible et n'est jamais > 1 (pas
   d'agrandissement). Vivier déplié → échelle 1 et scroll horizontal. ── */

.classe-header {
  padding: 8px 10px;
  background: var(--tivoli-gold-pale);
  border-bottom: 2px solid var(--border);
}

.classe-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 3px;
  margin-bottom: 4px;
}

.classe-nom {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.classe-profil {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  white-space: nowrap;
  letter-spacing: .5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.classe-flag-es,
.classe-flag-euro {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  cursor: help;
}
.flag-es-svg,
.flag-euro-svg,
.flag-gb-svg {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.flag-gb-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 4px;
}

.classe-count {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.count-ok      { background: #D8EAD8; color: #1A5C1A; }
.count-warning { background: var(--tivoli-gold-light); color: #6B4E0A; }
.count-danger  { background: #F0CECE; color: #7A2020; }

.classe-eq-count {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-left: 2px;
}

.classe-genre {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  flex-shrink: 0;
}
.classe-genre .cg-f,
.classe-genre .cg-g {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.classe-genre .cg-f { background: #F9D6E5; color: #8A1F52; }
.classe-genre .cg-g { background: #CFE0F7; color: #1E467F; }
/* Hors bande d'équité [1/3, 2/3] : ⚠ + surlignage rouge du genre déficient (sous le tiers). */
.classe-genre .cg-warn {
  align-self: center;
  color: #dc2626;
  font-size: 12px;
  line-height: 1;
}
.classe-genre .cg-f.cg-low,
.classe-genre .cg-g.cg-low {
  box-shadow: 0 0 0 1.5px #dc2626;
  color: #b91c1c;
}

.classe-spe-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 18px;
}
.spe-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.spe-pill--on-dark  { color: #ffffff; }
.spe-pill--on-light { color: #1a1a1a; }

.classe-spe-pill-clickable { cursor: pointer; }
.classe-spe-pill-clickable:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }

/* Badges LV2 en entête de classe (Espagnol / Allemand / Allemand euro) */
.classe-lv2-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.lv2-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lv2-badge.lv2-esp  { background: #FDECC8; color: #8A5A00; border-color: #E8C77A; }
.lv2-badge.lv2-all  { background: #E2E3E5; color: #3A3D42; border-color: #C4C7CC; }
.lv2-badge.lv2-euro { background: #DCE7FB; color: #1E467F; border-color: #B6CCF2; }

/* Popover « profs de spé » ancré sous un badge de l'en-tête de classe */
.csp-popover {
  position: absolute;
  z-index: 1000;
  min-width: 180px;
  max-width: 280px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 7px;
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
  overflow: hidden;
  font-size: 12px;
}
.csp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.csp-title { font-weight: 700; flex: 1; }
.csp-total { font-size: 11px; font-weight: 600; opacity: .9; }
.csp-close {
  border: none;
  background: rgba(255,255,255,.22);
  color: inherit;
  cursor: pointer;
  line-height: 1;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 11px;
}
.csp-close:hover { background: rgba(255,255,255,.4); }
.csp-body { max-height: 240px; overflow-y: auto; padding: 4px 0; }
.csp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 10px;
}
.csp-row:hover { background: rgba(0,0,0,.04); }
.csp-prof { font-weight: 600; flex: 1; color: var(--tivoli-navy); }
.csp-grp  { font-size: 10px; color: #6b7280; font-variant-numeric: tabular-nums; }
.csp-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}
.csp-empty, .csp-foot { padding: 6px 10px; color: #6b7280; font-size: 11px; }
.csp-foot { border-top: 1px solid rgba(0,0,0,.08); }
.csp-row-clickable { cursor: pointer; }
.csp-row-active {
  background: rgba(15, 32, 69, .09);
  box-shadow: inset 3px 0 0 var(--tivoli-navy);
}
.csp-row-active .csp-grp { color: var(--tivoli-navy); font-weight: 700; }

/* Mise en évidence des élèves d'un groupe de spé dans toute la promotion : on atténue
   toutes les cartes, sauf celles marquées .is-spotlit. */
body.group-spotlight-active .eleve-card {
  opacity: .3;
  filter: grayscale(.55);
  transition: opacity .12s ease, filter .12s ease;
}
body.group-spotlight-active .eleve-card.is-spotlit {
  opacity: 1;
  filter: none;
  outline: 2px solid var(--spotlight-color, var(--tivoli-navy));
  outline-offset: -1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spotlight-color, #0f2045) 30%, transparent);
  z-index: 1;
}
#groupSpotlightBar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tivoli-navy);
  color: #fff;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(15, 32, 69, .35);
  font-size: 13px;
}
#groupSpotlightBar .gsb-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); flex-shrink: 0;
}
#groupSpotlightBar .gsb-txt b { font-weight: 700; }
#groupSpotlightBar .gsb-clear {
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
#groupSpotlightBar .gsb-clear:hover { background: rgba(255,255,255,.25); }

.classe-pp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 2px;
}
.classe-pp-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--tivoli-navy);
  flex-shrink: 0;
  letter-spacing: .03em;
}
.classe-pp-input {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
}
.classe-pp-input:focus {
  outline: none;
  border-color: var(--tivoli-gold);
  box-shadow: 0 0 0 2px rgba(196,164,107,.2);
}
.classe-pp-input::placeholder { color: #94a3b8; }
.classe-pp-select { cursor: pointer; height: 22px; }

.classe-anchor-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.classe-anchor-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--tivoli-navy);
  flex-shrink: 0;
  letter-spacing: .03em;
}
.classe-anchor-select {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.classe-anchor-select:focus {
  outline: none;
  border-color: var(--tivoli-gold);
  box-shadow: 0 0 0 2px rgba(196, 164, 107, .25);
}

.classe-header-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.btn-add-eq {
  font-size: 10px;
  padding: 2px 8px;
  background: transparent;
  color: var(--tivoli-navy);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .2px;
}
.btn-add-eq:hover { background: var(--tivoli-gold-light); border-color: var(--tivoli-gold); }

.classe-equipages {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── ÉQUIPAGES ──────────────────────────────────────────────── */
.equipage {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fafafa;
  flex-shrink: 0;
}

.equipage-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 5px;
  padding: 4px 7px;
  align-items: start;
  background: var(--tivoli-navy);
  border-bottom: 1px solid rgba(196,164,107,.2);
}

.equipage-drag-handle {
  cursor: grab;
  color: rgba(226,232,240,.55);
  font-size: 13px;
  line-height: 1;
  padding: 0 1px;
  flex-shrink: 0;
  user-select: none;
  grid-row: 1 / -1;
  align-self: center;
}
.equipage-drag-handle:hover { color: var(--tivoli-gold-light); }
.equipage-drag-handle:active { cursor: grabbing; }

.equipage-header-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.equipage-header-row1 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  width: 100%;
}
.equipage-header-row2 {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  width: 100%;
}
.eq-hdr-field {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.eq-hdr-lbl {
  font-size: 8px;
  font-weight: 600;
  color: rgba(226, 232, 240, .55);
  text-transform: uppercase;
  letter-spacing: .35px;
  white-space: nowrap;
}
.eq-hdr-eff { flex-shrink: 0; }
.equipage-num {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  min-width: 1.2em;
  text-align: center;
}

.eq-spe-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.eq-spe-r1 {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin-left: 3px;
}
.equipage-nom   { font-size: 11px; font-weight: 700; color: #e2e8f0; white-space: nowrap; }
.equipage-count { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.eq-spe-pill    { font-size: 9px !important; padding: 1px 4px !important; }
.eq-jour-select {
  font-size: 9px;
  padding: 1px 2px;
  border: 1px solid rgba(196,164,107,.25);
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  color: var(--tivoli-gold-light);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 2.8em;
}
.eq-jour-select option { background: var(--tivoli-navy-dark); color: #fff; }

.eq-hdr-ref {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-prof-ref-control {
  position: relative;
  flex: 1 1 auto;
  min-width: 5em;
  max-width: 10em;
}
.eq-prof-ref-select,
.eq-prof-ref-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 4px;
  border: 1px solid rgba(196, 164, 107, .25);
  border-radius: 3px;
  line-height: 1.25;
}
.eq-prof-ref-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23c4a46b' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  padding-right: 12px;
}
.eq-prof-ref-input {
  background: rgba(255, 255, 255, .1);
  color: var(--tivoli-gold-light);
}
.eq-prof-ref-input::placeholder { color: rgba(226, 232, 240, .45); }
.eq-prof-ref-select[hidden],
.eq-prof-ref-input[hidden] { display: none !important; }
.eq-prof-ref-select option { font-weight: 600; }
.eq-prof-ref-input:focus,
.eq-prof-ref-select:focus {
  outline: 1px solid var(--tivoli-gold);
  outline-offset: 0;
}

.drop-zone {
  counter-reset: line-num;
  min-height: 32px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background .15s;
}
.drop-zone.sortable-over,
.drop-zone:empty { background: rgba(196,164,107,.08); }
.drop-zone:empty::after {
  content: 'Déposer ici';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 10px;
  color: #94a3b8;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  width: 100%;
}

/* ── CARTES ÉLÈVES ──────────────────────────────────────────── */
.eleve-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2px 3px 2px 18px;
  cursor: grab;
  user-select: none;
  transition: box-shadow .12s, transform .12s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
}
.eleve-card::before {
  counter-increment: line-num;
  content: counter(line-num);
  font-size: 8px;
  color: #94a3b8;
  font-weight: 700;
  position: absolute;
  left: 2px;
  top: 2px;
  min-width: 12px;
}
.eleve-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,.12); border-color: #94a3b8; }
.eleve-card.has-conflict { border-left: 3px solid #ef4444; }

/* Clignotement « localiser » : surbrillance temporaire de la carte ciblée
   depuis la recherche de fiches (voie générale ou bande 1° STMG). */
.eleve-card.card-locate-flash {
  animation: card-locate-flash 4s ease-in-out;
  position: relative;
  z-index: 4;
}
@keyframes card-locate-flash {
  /* 4 pulses appuyés (anneau doré épais + halo) entrecoupés d'un creux. */
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244,180,0,0);
    border-color: #e2e8f0;
    background: #fff;
  }
  10%, 32%, 54%, 76% {
    box-shadow: 0 0 0 5px var(--tivoli-gold, #f4b400), 0 0 20px 6px rgba(244,180,0,.9);
    border-color: var(--tivoli-gold, #f4b400);
    background: #fff0bf;
  }
  21%, 43%, 65%, 87% {
    box-shadow: 0 0 0 2px rgba(244,180,0,.45), 0 0 8px 2px rgba(244,180,0,.35);
    border-color: #fde68a;
    background: #fffbeb;
  }
}

.card-left {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
  flex-shrink: 1;
}

/* Vivier : même disposition horizontale que les cartes des classes
   (nom à gauche, genre + spés/LV2/options à droite). flex-shrink:0 évite
   que les cartes ne s'écrasent verticalement dans le conteneur scrollable. */
#poolList .eleve-card {
  flex-shrink: 0;
}
.eleve-nom {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}
.warn-icon { font-size: 10px; cursor: help; flex-shrink: 0; margin-top: 2px; }

/* Gratifications / sanctions de l'année précédente : deux pastilles d'angle.
   Gratification = cercle (vert→émeraude), sanction = carré arrondi (ambre→rouge).
   La forme distingue les deux familles au-delà de la couleur ; le détail est en
   infobulle (title). Discret mais identifiable. */
.gs-pips {
  display: inline-flex;
  gap: 3px;
  margin-left: 5px;
  margin-top: 3px;
  flex-shrink: 0;
}
.gs-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
  cursor: help;
}
.gs-pip--sanct { border-radius: 2px; }

.card-right {
  display: flex;
  flex-direction: column; /* rangée 1 = spés ; rangée 2 = LV2 + options (dessous) */
  gap: 2px;
  flex-shrink: 0;
  align-items: flex-start;
  width: 122px; /* 3 × spe-badge(38px) + 2 gaps */
}
body[data-niveau="term"] .card-right {
  width: 80px; /* 2 × spe-badge(38px) + 1 gap */
}
.card-spes {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.card-meta {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

/* Badge genre G / F */
.genre-badge {
  font-size: 7px;
  font-weight: 800;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
  letter-spacing: 0;
  align-self: center;
}
.genre-badge.genre-g { background: #DBEAFE; color: #1D4ED8; }
.genre-badge.genre-f { background: #FCE7F3; color: #BE185D; }
.genre-badge.empty   { display: none; }

.orig-badge {
  font-size: 8px;
  color: var(--tivoli-navy);
  background: var(--tivoli-gold-light);
  border: 1px solid rgba(196,164,107,.4);
  padding: 1px 3px;
  border-radius: 3px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  font-weight: 600;
}
.spe-badge {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  padding: 1px 2px;
  border-radius: 2px;
  letter-spacing: 0px;
  flex-shrink: 0;
  width: 38px;
  text-align: center;
}
/* Lettre de barrette (A/B/C) sur le badge de spé. Pastille sombre à texte blanc plutôt
   qu'un exposant atténué : le contraste ne dépend PAS de la couleur de la spé (illisible
   sinon sur PC jaune / HGGSP orange). Taille égale au code, sans élargir le badge
   (width fixe 38px : « SVT3 » + pastille ≈ 33px). */
.spe-badge .spe-barr {
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: rgba(17, 24, 39, .82);
  border-radius: 2px;
  padding: 0 1.5px;
  margin-left: 2px;
  vertical-align: baseline;
  text-shadow: none;
}
.spe-badge.empty {
  background: transparent;
  border: none;
  padding: 1px 2px;
}
.spe-badge-clickable {
  cursor: pointer;
  transition: filter .12s, box-shadow .12s;
}
.spe-badge-clickable:hover {
  filter: brightness(0.93);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.opt-badge {
  font-size: 8px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 1px 4px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}
.opt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex-shrink: 1;
  justify-content: flex-start;
}
.opt-badge.empty {
  display: none;
}
/* Vignette LV2 (entre les spés et les options) */
.lv2-badge {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  padding: 1px 3px;
  border-radius: 2px;
  flex-shrink: 0;
  text-align: center;
  min-width: 22px;
  white-space: nowrap;
  align-self: flex-start;
}
.lv2-badge.empty {
  display: none;
}

/* Vignette GA / GB (anglais demi-classe Terminale) — en tête de la ligne d'options.
   Style doux : pastille discrète, GA en vert d'eau, GB en indigo tendre. */
.ang-gagb {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 1px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  line-height: 1.35;
}
.ang-gagb.ang-ga { background: #e2f6f0; color: #0f766e; border-color: #b7e4d8; }
.ang-gagb.ang-gb { background: #eae7fb; color: #4a3f9e; border-color: #cdc6f2; }

.orig-badge.empty {
  background: transparent;
  border: none;
  padding: 1px 3px;
}

/* SortableJS drag states */
.sortable-ghost   { opacity: .35; background: var(--tivoli-gold-light) !important; border: 1px dashed var(--tivoli-gold) !important; }
.sortable-chosen  { box-shadow: 0 4px 14px rgba(26,53,105,.2); z-index: 999; }
.sortable-drag    { transform: rotate(1.5deg); cursor: grabbing !important; }

.sortable-ghost-equipage   { opacity: .45; border: 1px dashed var(--tivoli-gold) !important; }
.sortable-chosen-equipage  { box-shadow: 0 6px 18px rgba(26,53,105,.25); z-index: 998; }
.sortable-drag-equipage    { cursor: grabbing !important; }
.classe-equipages.sortable-over { background: rgba(196,164,107,.06); border-radius: var(--radius); }

/* Pendant le drag d'équipage : les zones élèves ne captent plus la souris */
body.equipage-drag-active .drop-zone,
body.equipage-drag-active .eleve-card {
  pointer-events: none;
}
body.equipage-drag-active .classe-equipages {
  gap: 8px;
  transition: gap .15s;
}
body.equipage-drag-active .equipage-header {
  outline: 1px dashed rgba(196,164,107,.35);
  outline-offset: -1px;
}

/* ============================================================
   PANNEAU GROUPES DE SPÉS (bas de page)
   ============================================================ */
#speGroupPanel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--spe-h);
  background: var(--tivoli-navy-dark);
  border-top: 2px solid rgba(196,164,107,.3);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  overflow-x: auto;
  z-index: 98;
  /* Panneau à hauteur imposée (--spe-h : 50 px, 32-34 px en petit écran) sur fond
     navy foncé. Les 11 px de Firefox en mangeraient un tiers, et le pouce clair
     hérité de `html` détonnerait sur le navy → barre native masquée (repli sans
     JS : molette), pouce en surimpression via thin-scrollbars.js. */
  scrollbar-width: none;
}
#speGroupPanel::-webkit-scrollbar { height: 3px; }
#speGroupPanel::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }

#speGroupTitle {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
}

#speGroupTable {
  display: flex;
  gap: 8px;
  align-items: center;
}

.spg-bloc {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #0f172a;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.spg-spe-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  min-width: 34px;
}
.spg-classes {
  display: flex;
  gap: 2px;
}
.spg-cell {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  color: #fff;
  min-width: 22px;
  text-align: center;
}
.spg-cell.ok      { background: #166534; }
.spg-cell.light   { background: #14532d88; }
.spg-cell.zero    { background: #1e293b; color: #475569; }
.spg-cell.high    { background: #991b1b; }

/* ── Boutons d'action : colonne entre nom et genre ─────────── */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity .15s;
}
.eleve-card:hover .card-actions { opacity: 1; }
.eleve-card.is-chef .card-actions { opacity: 1; }

.btn-edit-eleve,
.btn-chef-eleve {
  background: none;
  border: none;
  font-size: 9px;
  color: #94a3b8;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
  transition: background .1s, color .1s;
  line-height: 1;
  display: block;
  text-align: center;
}
.btn-edit-eleve:hover,
.btn-chef-eleve:hover { background: var(--tivoli-gold-light); color: var(--tivoli-navy); }
.btn-chef-eleve.is-chef-active { color: var(--tivoli-gold); }

/* Dans le vivier (actif ou inactif), pas de bouton chef */
#poolList .btn-chef-eleve,
#poolInactiveList .btn-chef-eleve { display: none; }

/* ── Chef d'équipage — badge et style carte ─────────────── */
.chef-badge {
  color: var(--tivoli-gold);
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 2px;
  line-height: 1;
}

.eleve-card.is-chef {
  border-left: 3px solid var(--tivoli-gold);
  background: #fffbf0;
}
.eleve-card.is-chef.has-conflict {
  border-left: 3px solid var(--tivoli-gold);
}

.eq-chef-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #6b4e12;
  background: linear-gradient(180deg, #ffe9a8, #f6cf6b);
  border: 1px solid #d9ad3f;
  border-radius: 999px;
  padding: 1px 9px 1px 7px;
  margin-left: 6px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  box-shadow: 0 1px 2px rgba(180, 140, 30, .25);
}
/* Équipage sans chef (fonctionnalité active) : badge d'alerte ROUGE,
   volontairement contrasté avec le doré du chef pour un repérage immédiat. */
.eq-chef-label.eq-chef-missing {
  color: #fff;
  background: linear-gradient(180deg, #e5484d, #c62828);
  border: 1px solid #a01f24;
  box-shadow: 0 1px 2px rgba(180, 30, 30, .3);
  animation: eqNoChefPulse 1.8s ease-in-out infinite;
}
@keyframes eqNoChefPulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(180, 30, 30, .3); }
  50%      { box-shadow: 0 0 0 3px rgba(198, 40, 40, .22); }
}
/* Accent d'entête : liseré doré si chef, rouge marqué si sans chef. */
.equipage--has-chef > .equipage-header { box-shadow: inset 3px 0 0 var(--tivoli-gold); }
.equipage--no-chef  > .equipage-header {
  box-shadow: inset 4px 0 0 #c62828;
  background:
    linear-gradient(90deg, rgba(198, 40, 40, .35), rgba(198, 40, 40, 0) 160px),
    var(--tivoli-navy);
}

/* ============================================================
   POPUP ÉDITION ÉLÈVE
   ============================================================ */
.edit-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-popup[hidden] { display: none; }
.edit-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 69, .5);
}
.edit-popup-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15, 32, 69, .3);
  width: 300px;
  overflow: hidden;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}
.edit-student-box {
  width: min(460px, calc(100vw - 24px));
}
.edit-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  font-weight: 700;
  font-size: 13px;
  gap: 8px;
}
.edit-popup-close {
  background: none;
  border: none;
  color: var(--tivoli-gold);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
}
.edit-popup-close:hover { background: rgba(196,164,107,.2); }
.edit-popup-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;   /* autorise le défilement interne : sans ça, un contenu trop haut déborde de la boîte (overflow:hidden) et chevauche le pied */
  gap: 8px;
}
/* Colonne flex + overflow:auto : par défaut les enfants ont flex-shrink:1 et se
   COMPRIMENT sous leur hauteur naturelle quand le contenu dépasse ; comme leur contenu
   déborde en overflow:visible, il se superpose aux blocs suivants (vœux, filière, statut).
   On fige la hauteur des enfants → c'est la boîte qui défile, plus de chevauchement. */
.edit-popup-body > * { flex-shrink: 0; }
.edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* .edit-row et .btn définissent `display`, ce qui l'emporte sur l'attribut [hidden]
   (feuille auteur > feuille UA) : on rétablit explicitement le masquage. */
.edit-row[hidden],
.edit-status-btns .btn[hidden],
.edit-filiere-btns .btn[hidden] { display: none; }
.edit-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  width: 46px;
  flex-shrink: 0;
}
.edit-row select,
.edit-row input[type="text"] {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text);
  background: #fff;
}
.edit-row select:focus,
.edit-row input[type="text"]:focus {
  outline: 1px solid var(--tivoli-navy);
  outline-offset: -1px;
}
.edit-options-row { align-items: flex-start; }
.edit-options-row label { padding-top: 4px; }
.edit-options-list {
  flex: 1;
  display: grid;
  /* min ramené à 150px : à la largeur fixe de la modale (460px), 2 colonnes tiennent
     avec OU sans la barre de défilement verticale (présente en mode « Modifier », où
     les blocs vœux/filière/statut allongent le corps ; absente en mode création).
     Avec 170px la marge était trop juste → la modale d'édition retombait à 1 colonne. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
  max-height: 150px;
  overflow-y: auto;
}
.edit-opt-check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.25;
}
.edit-opt-check input { flex-shrink: 0; margin-top: 1px; }
.edit-opt-unknown { color: var(--text-muted); font-style: italic; }
.edit-opt-unknown-tag { font-size: 10px; opacity: .7; }
.edit-options-empty {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Gratifications / sanctions (année précédente) — grille éditable */
.edit-gs-row { align-items: flex-start; }
.edit-gs-row label { padding-top: 4px; line-height: 1.25; }
.edit-gs-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 6px 8px;
  background: #fff;
}
.edit-gs-head,
.edit-gs-line {
  display: grid;
  grid-template-columns: 1fr repeat(var(--gs-cols, 3), 28px);
  align-items: center;
  gap: 2px;
}
.edit-gs-head {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.edit-gs-trim-h {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.edit-gs-cat {
  font-size: 11px;
  color: var(--text);
}
.edit-gs-line.edit-gs-grat .edit-gs-cat { color: #047857; }
.edit-gs-line.edit-gs-sanct .edit-gs-cat { color: #b91c1c; }
.edit-gs-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.edit-gs-cell input { cursor: pointer; }
/* Bascule de filière / niveau dans la popup d'édition */
.edit-filiere-row {
  align-items: flex-start;
  border-top: 1px dashed var(--border-light);
  padding-top: 10px;
}
.edit-filiere-btns {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edit-filiere-btns .edit-filiere-btn {
  font-size: 11px;
  padding: 4px 10px;
}
/* Bloc info profs dans la popup */
.edit-profs-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--tivoli-gold-pale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  min-height: 20px;
}
.edit-grp-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-light);
}
.edit-grp-block:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.edit-grp-empty {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.edit-grp-info {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Ligne principale d'un groupe : un seul span descriptif (qui peut wrapper proprement)
   + le badge d'effectif calé à droite. Pas de space-between sur des items multiples
   (qui créait des espacements erratiques et des chevauchements au retour à la ligne). */
.edit-grp-info-main {
  align-items: baseline;
  gap: 8px;
}
.edit-grp-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.edit-grp-info b { color: var(--text); }
.edit-eff-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: baseline;
}
.edit-eff-ok   { background: #D8EAD8; color: #1A5C1A; }
.edit-eff-high { background: var(--tivoli-gold-light); color: #6B4E0A; }
.edit-eff-over { background: #F0CECE; color: #7A2020; }

.edit-grp-siblings {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.65;
  padding-left: 2px;
}
.edit-grp-siblings-label {
  font-weight: 700;
  color: var(--tivoli-navy);
  display: block;
  margin-bottom: 2px;
}
.edit-sib-grp {
  display: inline-block;
  margin: 0 5px 3px 0;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.edit-sib-grp em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 8px;
  margin: 0 2px;
}
.edit-sib-grp b { font-weight: 700; color: var(--text); }
.edit-sib-grp.edit-eff-high { border-color: #d4a82a; background: #FDF8EC; }
.edit-sib-grp.edit-eff-over { border-color: #c44; background: #FDF0F0; }
.edit-sib-grp.edit-eff-over b { color: #7A2020; }
.edit-barrette {
  font-size: 9px;
  font-weight: 700;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  padding: 0 4px;
  border-radius: 2px;
}

.edit-barrette-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #FDF3E3;
  border: 1px solid #E8C56A;
  border-radius: var(--radius);
  font-size: 11px;
  color: #6B4E0A;
  line-height: 1.5;
}
.edit-barrette-warn[hidden] { display: none !important; }
.edit-barrette-warn-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.2;
}
.edit-barrette-warn-detail {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: #8B6914;
}

/* Vœux liés à l'élève (fiche d'édition) */
.edit-wishes-info {
  padding: 8px 10px;
  background: var(--surface, #fafafa);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.edit-wishes-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--tivoli-navy);
  margin-bottom: 5px;
}
.edit-wishes-empty {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
}
.edit-wishes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-wishes-list li {
  font-size: 11px;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}
.edit-wishes-list .ew-txt { flex: 1 1 auto; min-width: 0; }   /* pousse l'état à droite */
.ew-st {
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.ew-st.ew-soft { background: #E4ECF6; color: #2A4A73; }
.ew-st.ew-hard { background: #F5D9C0; color: #8A3B10; }
.ew-st.ew-off  { background: #E8E8E8; color: #777; }

.edit-popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--tivoli-gold-pale);
}
.edit-popup-footer--triple {
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ── Popup suggestions de placement ─────────────────────────── */
.placement-popup-box {
  width: min(520px, calc(100vw - 24px));
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
}
.placement-popup-body {
  overflow-y: auto;
  max-height: calc(88vh - 120px);
  gap: 12px;
}
.place-profile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: var(--tivoli-gold-pale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-size: 11px;
}
.place-profile-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.place-profile-label {
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .04em;
  width: 52px;
  flex-shrink: 0;
}
.place-profile-val { color: var(--text); font-weight: 600; }
.place-profile-grps { font-weight: 500; font-family: ui-monospace, monospace; font-size: 10px; }

.place-section-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tivoli-navy);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Éditeur de vœux de répartition (popup placement) ── */
.wish-editor {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--tivoli-cream, #faf7ef);
  border: 1px solid var(--border, #e3ddcf);
  border-radius: 8px;
}
.wish-row { margin-bottom: 8px; }
.wish-row:last-of-type { margin-bottom: 4px; }
.wish-row-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #2a2a2a);
  margin-bottom: 3px;
}
.wish-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.wish-empty { font-size: 11px; color: var(--text-muted, #999); font-style: italic; }
.wish-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 12px;
  padding: 1px 4px 1px 8px;
  font-size: 11px;
}
.wish-chip-rm {
  border: none;
  background: transparent;
  color: var(--tivoli-rust, #b5482e);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.wish-chip-rm:hover { color: #7a2d1a; }
.wish-add-line { display: flex; gap: 4px; }
.wish-input {
  flex: 1;
  min-width: 0;
  padding: 3px 7px;
  font-size: 11px;
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 5px;
}
.wish-add {
  border: 1px solid var(--tivoli-navy, #1f3a5f);
  background: var(--tivoli-navy, #1f3a5f);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.wish-add:hover { opacity: .9; }
.wish-note {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* ── Résumé des vœux sur la carte élève (lecture seule) ── */
.ws-list { list-style: none; margin: 0 0 8px; padding: 0; }
.ws-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0;
  color: var(--text, #333);
}
.ws-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ws-ok         { background: #2E7D32; }
.ws-violated   { background: #C62828; }
.ws-impossible { background: #C62828; outline: 2px solid #f3c1b8; }
.ws-partial    { background: #1565C0; }
.ws-pending    { background: #bbb; }
.wish-open-panel { font-size: 12px; padding: 4px 10px; }

/* ── Volet vœux : sections + vœux de professeur ── */
.gr-sec-title { margin: 16px 0 8px; padding-top: 10px; border-top: 1px solid var(--border, #e3ddcf); }
.gr-toggle { cursor: pointer; user-select: none; }
.gr-toggle:hover { color: var(--tivoli-navy-dark, #16294a); }
.gr-caret { font-size: 9px; width: 11px; display: inline-block; color: var(--text-muted, #888); }
.gr-sec-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--tivoli-navy, #1f3a5f);
  color: var(--tivoli-gold-light, #f7eccd);
  border-radius: 8px;
  padding: 0 6px;
}
.pw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-light, #eee);
  font-size: 12px;
}
.pw-stud { font-weight: 600; }
.pw-kind { color: var(--text-muted, #777); white-space: nowrap; }
.pw-prof { font-weight: 600; color: var(--tivoli-navy, #1f3a5f); }
.pw-kind-select {
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
  font-family: inherit;
  background: #fff;
}
.pw-prof-input-inline {
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tivoli-navy, #1f3a5f);
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 4px;
  font-family: inherit;
  width: 140px;
  background: #fff;
}
.pw-prof-input-inline:focus {
  border-color: var(--tivoli-gold);
  outline: none;
}
.pw-row .gr-del { margin-left: auto; }
.pw-add { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.pw-add .pw-stud-input, .pw-add .pw-prof-input {
  flex: 1; min-width: 110px;
  padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--border, #d8d2c4); border-radius: 5px;
}
.pw-add .pw-kind-input { padding: 4px 6px; font-size: 12px; border: 1px solid var(--border, #ccc); border-radius: 5px; }

/* ── Panneau « Séparer / réunir des élèves » ── */
.grouprules-modal-box { width: min(620px, 94vw); }
#groupRulesModalBody,
#profOverlapModalBody,
#forcedSpesModalBody,
#concAllemandModalBody,
#runSelectModalBody {            /* override flex-wrap de .groups-modal-body */
  display: block;
  padding: 14px 16px;
}
.gr-intro { margin: 0 0 10px; font-size: 12px; color: var(--text, #333); line-height: 1.4; }
.gr-hint { margin: 8px 0 0; font-size: 11px; color: var(--text-muted, #888); line-height: 1.4; }
.gr-newline { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.gr-list { display: flex; flex-direction: column; gap: 10px; }
.gr-card {
  border: 1px solid var(--border, #ddd);
  border-left: 4px solid var(--tivoli-navy, #1f3a5f);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
}
.gr-card.gr-sep { border-left-color: var(--tivoli-rust, #b5482e); }
.gr-card.gr-gat { border-left-color: #1A5C1A; }
/* groupe fraîchement créé : anneau + pastille pour le repérer parmi les autres */
.gr-card-new {
  border-color: var(--tivoli-gold, #c79a3a);
  box-shadow: 0 0 0 2px rgba(199, 154, 58, .45);
}
.gr-new-pill {
  font-size: 10px;
  font-weight: 700;
  color: #6B4E0A;
  background: var(--tivoli-gold-light, #f7eccd);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}
@keyframes gr-flash {
  0%   { background: #fff6d8; }
  100% { background: #fff; }
}
.gr-flash { animation: gr-flash 1.2s ease; }
.gr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.gr-kind { font-size: 12px; padding: 3px 6px; border: 1px solid var(--border, #ccc); border-radius: 5px; }
/* ── Contrôle 3-états par vœu : désactivé / souple / impératif ── */
.wish-state { display: inline-flex; align-items: center; border: 1px solid var(--border, #d8d2c4); border-radius: 6px; overflow: hidden; flex: none; }
.wish-state .ws-btn {
  border: none; background: #f4f1ea; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 7px; color: #888;
  border-left: 1px solid var(--border, #e3ddcf);
  transition: background .12s, color .12s;
}
.wish-state .ws-btn:first-child { border-left: none; }
.wish-state .ws-btn:hover { background: #ece7db; }
.wish-state .ws-off.on  { background: #d6d2c8; color: #555; }
.wish-state .ws-soft.on { background: #D6E4F5; color: #1a3d6b; }
.wish-state .ws-hard.on { background: #dc2626; color: #fff; }
/* dim global du vœu désactivé / accent de l'impératif */
.pw-row.wish-disabled, .gr-card.wish-disabled { opacity: .55; }
.gr-card.wish-hard { border-color: #dc2626; box-shadow: 0 0 0 1px #dc262633 inset; }
.gr-badge.gr-off { background: #e7e3d8; color: #777; }
/* barre de raccourcis globaux */
.gr-bulk { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.gr-bulk-lbl { font-size: 11px; font-weight: 700; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: .3px; }
.gr-bulk-sep { color: var(--border, #ccc); }
.gr-bulk-btn { font-size: 11px; padding: 3px 9px; }
.gr-del {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  opacity: .65;
}
.gr-del:hover { opacity: 1; }
.gr-warn {
  margin: 4px 0;
  font-size: 11px;
  color: #6B4E0A;
  background: var(--tivoli-gold-light, #f7eccd);
  border-radius: 5px;
  padding: 3px 7px;
}
/* synthèse + recherche */
.gr-summary { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.gr-summary-note { font-size: 10px; color: var(--text-muted, #999); font-style: italic; }
.gr-filter-clear { font-size: 10px; font-weight: 600; padding: 2px 8px; line-height: 1.4; }
.gr-io { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.gr-io-btn { font-size: 12px; padding: 4px 10px; }
.gr-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 6px;
}
/* badges de statut temps réel */
.gr-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}
.gr-ok       { background: #D8EAD8; color: #1A5C1A; }
.gr-partial  { background: #D6E4F5; color: #1a3d6b; }
.gr-violated { background: #F6D7D0; color: #8a2d18; }
.gr-pending  { background: #ececec; color: #666; }
.gr-card-head .gr-badge { margin-left: 2px; }
/* Badges de statut cliquables (filtre du bilan des vœux) */
.wish-fbtn { border: 1px solid transparent; cursor: pointer; line-height: 1.4; font-family: inherit; }
.wish-fbtn:disabled { opacity: .45; cursor: default; }
.wish-fbtn:not(:disabled):hover { filter: brightness(.95); }
.wish-fbtn.wf-active { outline: 2px solid var(--tivoli-navy, #1a3d6b); outline-offset: 1px; box-shadow: 0 0 0 2px rgba(26, 61, 107, .15); }
/* badge décomposé « Séparer » : classe ✓/✗ · groupe de spé ✓/✗ */
.gr-badge-split { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }
.gr-subbadge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}
.gr-badge-note { font-size: 9px; color: #1a3d6b; font-style: italic; }
/* lignes de détail : groupe de spé partagé (évitable = faute, inévitable = info) */
.gr-detail { margin: 3px 0 0; font-size: 11px; line-height: 1.35; }
.gr-detail-bad  { color: #8a2d18; }
.gr-detail-info { color: #6B4E0A; }
.gr-detail b { font-weight: 700; }
/* pastille de classe + repérage des élèves fautifs dans les chips */
.gr-chip-cls { font-size: 9px; font-weight: 700; color: var(--tivoli-navy, #1f3a5f); opacity: .8; }
.gr-chip-placed { border-color: #b9d2ef; }
.gr-chip-bad { border-color: #d9624a; background: #fbe9e4; }
.gr-chip-bad .gr-chip-cls { color: #8a2d18; }
/* Détail des groupes de spé par élève (vœux « séparer ») */
.gr-chip-main  { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.gr-chip-name  { white-space: nowrap; }
.gr-chip-grps  { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 1px; }
.gr-grp        { font-size: 8.5px; font-weight: 700; line-height: 1.3; padding: 0 4px; border-radius: 7px;
                 background: #eef1f5; color: #43526b; border: 1px solid #dfe4ec; }
.gr-grp-shared { background: #fbe0d9; color: #8a2d18; border-color: #e8a594; }
.gr-grp-forced { background: #fbf1d6; color: #6B4E0A; border-color: #e6d49a; }
.gr-grp-gather { background: #dcf0e1; color: #1a5c1a; border-color: #a8d9b4; }
.gr-chip-nogrp { font-size: 8.5px; font-style: italic; color: var(--text-muted, #999); }
.gr-detail-gather { color: #1a5c1a; }
.place-section-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  padding: 1px 6px;
  border-radius: 8px;
}
.place-section-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.place-row {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: #fafafa;
}
.place-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.place-row-loc {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.place-row-eff {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: #D8EAD8;
  color: #1A5C1A;
  flex-shrink: 0;
}
.place-row-eff.place-eff-low { background: var(--tivoli-gold-light); color: #6B4E0A; }
.place-row-eff.place-eff-full { background: #F0CECE; color: #7A2020; }
.place-row-detail {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
}
.place-row-warn, .place-row-hint {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
}
.place-row-warn { color: #7A2020; }
.place-row-hint { color: #6B4E0A; }

.place-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.place-tag-ok    { background: #D8EAD8; color: #1A5C1A; }
.place-tag-warn  { background: var(--tivoli-gold-light); color: #6B4E0A; }
.place-tag-info  { background: #D6E4F5; color: #1a3d6b; }
.place-tag-muted { background: #e2e8f0; color: #475569; }

.place-section-peers { border-top: 1px solid var(--border-light); padding-top: 8px; }
.place-peers-subtitle {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 6px 0 4px;
}
.place-peer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}
.place-peer-row:last-child { border-bottom: none; }
.place-peer-nom { font-weight: 600; color: var(--text); }
.place-peer-place {
  font-size: 10px;
  color: var(--tivoli-navy);
  font-weight: 600;
}
.place-peer-extra {
  font-size: 9px;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
}
.place-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
}

/* ── Popup élèves d'un groupe de spé ───────────────────────── */
.grp-peers-title-code {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.grp-peers-title-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--tivoli-gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grp-peers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--tivoli-gold-pale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 4px;
}
.grp-peers-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.grp-peers-place { margin-top: 8px; }
.grp-peers-place-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tivoli-navy);
  display: flex;
  align-items: center;
  gap: 6px;
}
.grp-peers-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}
.grp-peer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
}
.grp-peer-row--self {
  background: rgba(196, 164, 107, .22);
  font-weight: 700;
  outline: 1px solid rgba(196, 164, 107, .45);
}
.grp-peer-nom { color: var(--text); }

/* ============================================================
   HINT & EMPTY STATES
   ============================================================ */
.empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 8px;
  font-size: 11px;
  color: var(--text-muted);
  height: 100%;
  flex: 1;
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
#notifContainer {
  position: fixed;
  top: calc(var(--toolbar-h) + var(--subbar-h) + 8px);
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notif {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-lg);
  animation: notif-in .2s ease;
  max-width: 300px;
}
.notif-persistent { max-width: min(520px, calc(100vw - 24px)); }
.notif-msg {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.notif-persistent .notif-msg {
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  cursor: text;
}
.notif-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: -2px 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: .75;
  cursor: pointer;
}
.notif-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .18);
}
@keyframes notif-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.notif-success { background: #2E7D5A; }
.notif-error   { background: #A03838; }
.notif-info    { background: var(--tivoli-navy); border: 1px solid var(--tivoli-gold); }
.notif-warning { background: #8B6A1A; }

/* ============================================================
   DRAWER — GROUPES DE SPÉS
   ============================================================ */
#groupsModal,
#premiereOptionsModal,
#premiereAnglaisModal,
#mspecifModal,
#termOptionsModal,
#termAnglaisModal,
#groupRulesModal,
#profOverlapModal,
#forcedSpesModal,
#concAllemandModal,
#teamEqListModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
/* S'ouvre par-dessus la modale Options → au-dessus dans la pile. */
#teamEqListModal { z-index: 1002; }
#groupsModal[hidden],
#premiereOptionsModal[hidden],
#premiereAnglaisModal[hidden],
#mspecifModal[hidden],
#termOptionsModal[hidden],
#termAnglaisModal[hidden],
#profOverlapModal[hidden],
#forcedSpesModal[hidden],
#concAllemandModal[hidden],
#teamEqListModal[hidden],
#groupRulesModal[hidden] { display: none; }

/* Modale de choix du tirage (Répartir ×N, 1ère) : même comportement « drawer » que les autres,
   mais plus large (tableau de synthèse à 14 colonnes). Son ID n'est pas dans la liste ci-dessus,
   d'où sa propre règle de positionnement. */
#runSelectModal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
#runSelectModal[hidden] { display: none; }
#runSelectModal .groups-modal-box { width: min(940px, 96vw); }

.groups-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 69, .4);
}

.groups-modal-box {
  position: relative;
  background: #f8f6f0;
  width: 700px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 28px rgba(15, 32, 69, .22);
  animation: drawer-in .2s ease;
}
@keyframes drawer-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.groups-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tivoli-navy-dark);
  color: var(--tivoli-gold-light);
  border-bottom: 2px solid var(--tivoli-gold);
  flex-shrink: 0;
}
.groups-modal-title {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
}
.groups-filter-spe {
  max-width: 130px;
  flex: none;
}

.groups-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.groups-modal-body::-webkit-scrollbar { width: 5px; }
.groups-modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Maths spécifiques (MSpécif) ── */
.mspecif-body {
  display: block;               /* override flex-wrap des groups-modal-body */
  padding: 14px 16px;
}
.mspecif-hint {
  font-size: 13px;
  color: #475569;
  margin: 0 0 12px;
  line-height: 1.45;
}
.mspecif-config {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.mspecif-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #334155;
  font-weight: 600;
}
.mspecif-field select {
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.mspecif-rules {
  margin: 8px 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  background: #f8fafc;
}
.mspecif-rules summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #334155;
}
.mspecif-rule-table {
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
}
.mspecif-rule-table th,
.mspecif-rule-table td {
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  text-align: center;
}
.mspecif-rule-table .mspecif-rule-day { text-align: left; font-weight: 600; }
.mspecif-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mspecif-meta { font-size: 12px; color: #64748b; }
.mspecif-force-note { font-size: 11px; font-weight: 400; color: #64748b; margin-top: 2px; }
.mspecif-force-note.warn { color: #92400E; font-weight: 600; }
.mspecif-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.mspecif-group-card {
  flex: 1 1 260px;
  min-width: 240px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mspecif-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: #1B365D;
  color: #fff;
  font-size: 14px;
}
.mspecif-group-slot { font-size: 12px; opacity: 0.9; }
.mspecif-group-split { display: block; font-weight: 400; font-size: 11px; color: #64748b; margin-top: 2px; }
.mspecif-stamp { font-size: 12px; color: #2E7D5A; font-weight: 600; margin-bottom: 10px; }
.mspecif-group-counts {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #D9E1F2;
}
.mspecif-stu-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 360px;
  overflow-y: auto;
}
.mspecif-stu-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  font-size: 13px;
}
.mspecif-stu-list li:nth-child(even) { background: #F4F7FA; }
.mspecif-stu-name { flex: 1; min-width: 0; }
.mspecif-stu-grps {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.mspecif-stu-list.has-spe-grps .mspecif-stu-name { flex: 0 1 auto; max-width: 28%; }
.mspecif-stu-cls { font-size: 11px; color: #64748b; font-weight: 600; flex-shrink: 0; }
.termopt-me-align-field {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px;
  line-height: 1.35;
}
.termopt-me-align-field input { margin-top: 2px; flex-shrink: 0; }
.mspecif-warn {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #92400E;
}
.premiere-options-modal-box { max-width: min(960px, 96vw); }
.prem-opt-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prem-opt-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a5f;
}
.prem-opt-config-panel {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.prem-opt-config-panel > summary {
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  user-select: none;
}
.prem-opt-config-panel > summary::-webkit-details-marker { display: none; }
.prem-opt-config-panel > summary::before {
  content: '▸';
  font-size: 11px;
  color: #64748b;
  transition: transform 0.15s ease;
}
.prem-opt-config-panel[open] > summary::before { transform: rotate(90deg); }
.prem-opt-config-panel[open] > summary {
  border-bottom: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
}
.prem-opt-config-inner { padding: 12px 14px 14px; }
.prem-opt-groups-panel {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px 14px;
}
.prem-opt-groups-panel .prem-opt-panel-title { margin-bottom: 10px; }
.prem-opt-groups-panel .prem-opt-verify-box { margin: 0 0 12px; }
.prem-opt-groups-panel .mspecif-result { margin-top: 0; }
.prem-opt-layout-readonly .prem-opt-groups-panel { border: none; padding: 0; background: transparent; }
.prem-opt-blocks { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; }
.prem-opt-block {
  border-radius: 10px;
  padding: 12px 14px 10px;
  border: 1px solid transparent;
}
.prem-opt-block-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a5f;
}
.prem-opt-block-hint { margin: 0 0 8px; font-size: 12px; }
.prem-opt-block-lg {
  background: #FFFBEB;
  border-color: #FDE68A;
}
.prem-opt-block-lg .prem-opt-card { background: #fff; border-color: #FCD34D; }
.prem-opt-block-arts {
  background: #EFF6FF;
  border-color: #BFDBFE;
}
.prem-opt-block-arts .prem-opt-card { background: #fff; border-color: #93C5FD; }
.prem-opt-block-mspecif {
  background: #F8FAFC;
  border-color: #CBD5E1;
}
.prem-opt-block-mspecif .prem-opt-card { background: #fff; border-color: #94A3B8; }
.prem-opt-lg-mode { margin: 0 0 10px; max-width: 420px; }
.prem-opt-lg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 10px;
}
.prem-opt-lg-profs { max-width: 280px; }
.prem-opt-lg-mode-info { margin: 2px 0 10px; }
.prem-opt-warn { color: #b45309; font-weight: 600; }

/* ── EDT prévisionnel (aperçu) ── */
.prem-opt-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.edt-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edt-preview-modal[hidden] { display: none; }
.edt-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.edt-preview-panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  width: min(1100px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
}
.edt-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.edt-preview-head h2 { margin: 0; font-size: 18px; }
.edt-preview-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.edt-preview-scope {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.edt-scope-btn.active {
  background: #1e40af;
  color: #fff;
  border-color: #1e40af;
}
.edt-preview-body { overflow: auto; }
.edt-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.edt-preview-table th,
.edt-preview-table td {
  border: 1px solid #cbd5e1;
  vertical-align: top;
  padding: 4px 6px;
}
.edt-preview-table thead th {
  background: #1e3a5f;
  color: #fff;
  text-align: center;
  position: sticky;
  top: 0;
}
.edt-preview-period {
  background: #eef2f7;
  font-weight: 600;
  white-space: nowrap;
  width: 90px;
}
.edt-preview-cell { min-height: 34px; }
.edt-preview-midi { background: #fdf6e3; }
.edt-preview-line {
  padding: 1px 0;
  border-bottom: 1px dotted #e2e8f0;
}
.edt-preview-line:last-child { border-bottom: none; }

/* Option « Afficher les élèves & conflits » */
.edt-preview-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.edt-preview-toggle input { margin: 0; }
.edt-preview-studnote { margin: 0 0 10px; font-size: 12.5px; color: #334155; }
.edt-preview-clash-count { color: #b91c1c; font-weight: 600; }
.edt-preview-ok { color: #15803d; font-weight: 600; }
.edt-preview-students td { vertical-align: top; }
.edt-stud-group { margin-bottom: 6px; }
.edt-stud-group:last-child { margin-bottom: 0; }
.edt-stud-glabel { font-weight: 600; font-size: 11px; color: #334155; margin-bottom: 2px; }
.edt-stud-glabel.edt-stud-team { color: #3730a3; }
.edt-stud-count { font-weight: 400; color: #64748b; }
.edt-stud-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.edt-stud-chip {
  font-size: 10.5px; padding: 1px 5px; border-radius: 3px;
  background: #eef2f7; color: #334155; white-space: nowrap;
}
.edt-stud-clash { background: #fee2e2; color: #b91c1c; font-weight: 600; outline: 1px solid #fca5a5; }
.prem-opt-result-block {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.prem-opt-result-block:last-child { margin-bottom: 0; }
.prem-opt-verify-box { margin: 10px 0 4px; }
.prem-opt-groups-panel .prem-opt-verify-box:empty { display: none; margin: 0; }
.prem-opt-verify {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.prem-opt-verify-ok { background: #D1FAE5; color: #065F46; }
.prem-opt-verify-err { background: #FEE2E2; color: #991B1B; }
.prem-opt-verify-warn-h { margin-top: 8px; font-size: 12px; font-weight: 600; color: #92400E; }
.prem-opt-verify-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
}
.prem-opt-verify-err-list { color: #7F1D1D; }
.prem-opt-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.prem-opt-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 10px 8px;
  background: #fafbfc;
}
.prem-opt-card summary { cursor: pointer; padding: 10px 4px; font-size: 13px; }
.prem-opt-card-body { padding-bottom: 4px; }
.prem-opt-edtclasses { flex-direction: column; align-items: flex-start; gap: 4px; }
.prem-opt-edtclass-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.prem-opt-edtclass { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.prem-opt-edtclass-hint { font-size: 11px; }
.prem-opt-auto-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.prem-opt-lock-badge { font-size: 11px; font-weight: 600; color: #92400E; margin-left: 6px; }
.prem-opt-fusion-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 6px;
  font-size: 13px;
}
.prem-opt-fusion-field input { margin: 0; }
.prem-opt-fusion-meta { display: block; width: 100%; margin-top: 2px; }
.fusion-niv-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}
.fusion-niv-badge.fusion-niv-1ere { background: #DBEAFE; color: #1E40AF; }
.fusion-niv-badge.fusion-niv-term { background: #D1FAE5; color: #065F46; }
.prem-opt-card summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.premopt-unlock { margin-left: auto; font-size: 11px; padding: 2px 8px; }
.prem-opt-global { flex-wrap: wrap; gap: 12px 20px; }
.prem-opt-pre-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #E5E7EB);
}
.prem-opt-fusion-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 6px 0 10px;
  padding: 8px 10px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 6px;
  font-size: 13px;
}
.prem-opt-fusion-partner .mspecif-field { margin: 0; }
.prem-opt-fusion-partner #fusionPartnerInfo { color: #0369A1; }
.prem-opt-midi-note { margin: 6px 0 0; font-size: 12px; }
.prem-opt-result-title {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  color: #1e3a5f;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}
.prem-opt-result-section {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 4px;
}
.prem-opt-result-section:last-child { margin-bottom: 0; }
.prem-opt-result-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.prem-opt-team-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 8px 0 10px;
  font-size: 12px;
}
.prem-opt-auto-team { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* Répartition des équipages sur les temps d'équipage (jours autorisés) */
.premopt-eq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 14px 0 6px;
}
.premopt-eqboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.premopt-eqcol {
  border: 1px solid #d9e1f2;
  border-radius: 8px;
  background: #f7f9fd;
  overflow: hidden;
}
.premopt-eqcol-head {
  padding: 6px 8px;
  font-weight: 600;
  font-size: 12px;
  background: #e9f0fb;
  border-bottom: 1px solid #d9e1f2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.premopt-eqcol-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.premopt-eqchip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 6px;
  font-size: 12px;
}
.premopt-eqchip-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.premopt-eqchip-n {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  color: #2f5597;
  background: #eef3fc;
  border-radius: 4px;
  padding: 0 4px;
}
.premopt-eqchip-empty { justify-content: center; color: #9aa5b8; border-style: dashed; }
.premopt-eqday { font-size: 11px; padding: 1px 2px; }
.premopt-eq-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Modale « Élèves par temps d'équipage » — listes triables par jour */
.teq-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 4px 0;
  z-index: 1;
}
.teq-controls-lbl { font-size: 12px; font-weight: 600; color: #555; }
.teq-sort {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #d9e1f2;
  border-radius: 999px;
  background: #f4f7fa;
  cursor: pointer;
}
.teq-sort:hover { background: #e9f0fb; }
.teq-sort-on { background: #2f5597; color: #fff; border-color: #2f5597; }
.teq-day { margin-bottom: 18px; }
.teq-day-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1b365d;
  border-bottom: 2px solid #d9e1f2;
  padding-bottom: 3px;
}
.teq-table-wrap { overflow-x: auto; }
.teq-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.teq-table th, .teq-table td {
  border: 1px solid #e2e8f5;
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
}
.teq-table thead th {
  background: #d9e1f2;
  font-weight: 600;
}
.teq-table tbody tr:nth-child(even) { background: #f4f7fa; }
.teq-table .teq-c { text-align: center; }
.mspecif-warn {
  font-size: 12px;
  line-height: 1.4;
}
.mspecif-modal-box { max-width: 760px; }

/* Options Terminale (ME/MC/DGEMC + EPS) — réutilise les classes .mspecif-* */
.termopt-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.termopt-optcard {
  border: 1px solid #d9e1f2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}
.termopt-opthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.termopt-epscfg {
  border: 1px solid #c5d4e8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #eef4fb;
  margin-bottom: 14px;
}
.termopt-section { margin-top: 16px; }
.termopt-section-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: #1b365d;
  border-bottom: 2px solid #d9e1f2;
  padding-bottom: 4px;
}

/* Cartes groupe */
.grp-card {
  width: 218px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

.grp-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px 6px;
}
.grp-card-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.grp-code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.grp-prof-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 10px;
  padding: 3px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .15);
}
.grp-prof-input--on-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.grp-prof-input--on-dark::placeholder { color: rgba(255, 255, 255, .5); }
.grp-prof-input--on-light {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, .15);
  background: rgba(255, 255, 255, .55);
}
.grp-prof-input--on-light::placeholder { color: rgba(0, 0, 0, .4); }
.grp-prof-input:focus {
  outline: 1px solid var(--tivoli-gold);
  outline-offset: 0;
}
/* Salle(s) du groupe : second champ de l'entête, sous le professeur. */
.grp-salle-input {
  margin-top: 3px;
  font-style: italic;
}
.grp-salle-input[readonly] {
  cursor: default;
  opacity: .75;
}
.grp-salle-input[readonly]:focus { outline: none; }
.grp-prof {
  font-size: 10px;
  flex: 1;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grp-meta {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.grp-barrette,
.grp-effectif {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: .02em;
  line-height: 1.35;
}
.grp-effectif--warn {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.grp-barrette {
  min-width: 1.1em;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
}

/* Fond de carte sombre (Maths, SES…) → pastille claire */
.grp-badge-on-dark {
  background: rgba(255, 255, 255, 0.92);
  color: var(--tivoli-navy-dark);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Fond de carte clair (PC, SVT, HLP…) → pastille sombre */
.grp-badge-on-light {
  background: rgba(15, 32, 69, 0.88);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.grp-card-body {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grp-student-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 1px 0;
  min-width: 0;
}
.grp-student-nom {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.grp-student-place {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.grp-student-place.placed { background: #D8EAD8; color: #1A5C1A; }
.grp-student-place.vivier { background: var(--tivoli-gold-light); color: #6B4E0A; }
.grp-empty {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* ============================================================
   DRAWER — SYNTHÈSE PAR PROF RÉFÉRENT (Terminale)
   ============================================================ */
/* ── Check-up de la répartition (Terminale) — carte inline ── */
.chk-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chk-card {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--tivoli-navy);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  text-align: center;
}
.chk-card--t1 { border-left-color: #2563eb; }
.chk-card--t2 { border-left-color: #0891b2; }
.chk-card--ok { border-left-color: #16a34a; }
.chk-card--warn { border-left-color: #dc2626; background: #fff7f6; }
.chk-card-v {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--tivoli-navy);
  line-height: 1.2;
}
.chk-card-l {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Sections dépliables (cartes <details>) — même esprit qu'en 1ère */
.chk-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
summary.chk-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--tivoli-navy);
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
summary.chk-section-title::-webkit-details-marker { display: none; }
summary.chk-section-title::before {
  content: '▸';
  font-size: 10px;
  color: var(--tivoli-gold);
  transition: transform .15s ease;
}
.chk-section[open] > summary.chk-section-title::before { transform: rotate(90deg); }
summary.chk-section-title:hover { background: #faf8f4; }
.chk-section[open] > summary.chk-section-title { border-bottom: 1px solid var(--border); }
/* Contenu de la section : marge interne + reset des bordures de table (déjà encadrée par la carte) */
.chk-section > :not(summary) { margin: 10px 12px; }
.chk-section > .chk-table,
.chk-section > .chk-table-scroll > .chk-table { box-shadow: none; }
.chk-section > .chk-table-scroll { margin: 10px 12px; }
.chk-note { margin: 0; font-size: 11px; color: var(--text-muted); }
.chk-note--warn { color: #b45309; font-weight: 600; }

.chk-table-scroll { overflow-x: auto; }
/* Carte inline (Terminale) : les tableaux se dimensionnent à leur contenu,
   ils ne prennent pas toute la largeur (comme le check-up 1ère). */
.checkup-card .chk-table { width: auto; max-width: 100%; }
.checkup-card .chk-table-scroll { display: inline-block; max-width: 100%; }
.chk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.chk-table th {
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  font-weight: 600;
  text-align: left;
  padding: 7px 10px;
  white-space: nowrap;
}
.chk-table td {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.chk-table tbody tr:nth-child(even) { background: #faf8f4; }
.chk-num { text-align: center; white-space: nowrap; }
.chk-pct { font-size: 9.5px; color: var(--text-muted); margin-left: 2px; }
.chk-zero { color: #cbd5e1; }
.chk-row-total td { font-weight: 700; border-top: 2px solid var(--tivoli-navy); background: #f1ece1 !important; }
.chk-row-warn { background: #fff8e6 !important; }
.chk-bad { color: #dc2626; font-weight: 700; }

.chk-grp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chk-grp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #eef2f7;
  border: 1px solid #dbe2ec;
  color: var(--tivoli-navy);
  white-space: nowrap;
}
.chk-grp-chip b { font-weight: 700; }
.chk-grp-chip--max { background: #fee2e2; border-color: #fca5a5; }
.chk-grp-chip--min { background: #dbeafe; border-color: #93c5fd; }
.chk-ecart {
  display: inline-block;
  min-width: 18px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #166534;
}
.chk-ecart--mid { background: #fef3c7; color: #92400e; }
.chk-ecart--warn { background: #fee2e2; color: #b91c1c; }

.chk-bar {
  display: flex;
  width: 100%;
  min-width: 90px;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #e5e7eb;
}
.chk-bar-g { background: #3b82f6; }
.chk-bar-f { background: #ec4899; }

.chk-spedist-table th:first-child,
.chk-spedist-table td:first-child { position: sticky; left: 0; background: inherit; }
.chk-spedist-table thead th:first-child { background: var(--tivoli-navy); }
.chk-empty { text-align: center; color: var(--text-muted); padding: 12px; }

#profRefModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
#profRefModal[hidden] { display: none; }

.prof-ref-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 69, .4);
}

.prof-ref-modal-box {
  position: relative;
  background: #f8f6f0;
  width: min(960px, 94vw);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 28px rgba(15, 32, 69, .22);
  animation: drawer-in .2s ease;
}

.prof-ref-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--tivoli-navy-dark);
  color: var(--tivoli-gold-light);
  border-bottom: 2px solid var(--tivoli-gold);
  flex-shrink: 0;
}
.prof-ref-modal-title {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.prof-ref-export-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 5px 12px;
}

.prof-ref-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prof-ref-modal-body::-webkit-scrollbar { width: 5px; }
.prof-ref-modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.prof-ref-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.prof-ref-stat {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  text-align: center;
}
.prof-ref-stat-val {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--tivoli-navy);
  line-height: 1.2;
}
.prof-ref-stat-lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.prof-ref-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.prof-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.prof-ref-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  white-space: nowrap;
}
.prof-ref-table td {
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.prof-ref-row:nth-child(even) { background: #faf8f4; }
.prof-ref-row--warn { background: #fff8e6 !important; }
.prof-ref-td-prof { font-weight: 600; white-space: nowrap; }
.prof-ref-td-num { text-align: center; white-space: nowrap; }
.prof-ref-td-spes { min-width: 100px; }
.prof-ref-spes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.prof-ref-spe-pill {
  font-size: 9px !important;
  padding: 1px 5px !important;
}
.prof-ref-td-eqs { min-width: 200px; }
.prof-ref-eq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.prof-ref-eq-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--tivoli-gold-light);
  color: var(--tivoli-navy-dark);
  border: 1px solid rgba(196, 164, 107, .45);
  white-space: nowrap;
}
.prof-ref-eq-chip--muted {
  background: #eef1f5;
  color: var(--text-muted);
  border-color: var(--border);
}
.prof-ref-warn {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #b45309;
}
.prof-ref-cap {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}
.prof-ref-empty,
.prof-ref-empty-row {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 24px 12px;
}
.prof-ref-unassigned {
  background: #fff;
  border: 1px dashed #d4a574;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.prof-ref-unassigned-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
}

.prof-ref-students-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prof-ref-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--tivoli-navy);
}

.prof-ref-details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.prof-ref-details-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  background: #faf8f4;
  border-bottom: 1px solid transparent;
  font-size: 12px;
}
.prof-ref-details[open] .prof-ref-details-summary {
  border-bottom-color: var(--border);
}
.prof-ref-details-summary::-webkit-details-marker { display: none; }
.prof-ref-details-summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .15s;
}
.prof-ref-details[open] .prof-ref-details-summary::before {
  transform: rotate(90deg);
}
.prof-ref-details-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}
.prof-ref-details-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prof-ref-eq-details {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.prof-ref-eq-details summary.prof-ref-eq-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  list-style: none;
  background: #f3f6fa;
  border-bottom: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--tivoli-navy);
  margin-bottom: 0;
}
.prof-ref-eq-details[open] summary.prof-ref-eq-block-title {
  border-bottom-color: var(--border);
}
.prof-ref-eq-details summary::-webkit-details-marker { display: none; }
.prof-ref-eq-details summary::before {
  content: '▸';
  font-size: 9px;
  color: var(--text-muted);
  transition: transform .15s;
  flex-shrink: 0;
}
.prof-ref-eq-details[open] summary::before {
  transform: rotate(90deg);
}
.prof-ref-eq-details .prof-ref-student-list {
  padding: 4px 8px 6px;
}
.prof-ref-unassigned .prof-ref-unassigned-title {
  margin: 0;
  color: #92400e;
}
.prof-ref-student-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prof-ref-student-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 0;
  min-width: 0;
}
.prof-ref-student-row--empty {
  color: var(--text-muted);
  font-style: italic;
}
.prof-ref-student-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.prof-ref-student-grp {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   MODAL — GESTION DES OPTIONS
   ============================================================ */
#optionsModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#optionsModal[hidden] { display: none; }
.options-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 69, .5);
}
.options-modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15, 32, 69, .3);
  width: 420px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popup-in .15s ease;
}
@keyframes popup-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.options-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--tivoli-navy);
  color: var(--tivoli-gold-light);
  font-weight: 700;
  font-size: 13px;
  gap: 8px;
  flex-shrink: 0;
}
.options-modal-body {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
  padding: 8px 0;
}
.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-light);
}
.option-row:last-child { border-bottom: none; }
.opt-code-cell {
  font-size: 11px;
  font-weight: 800;
  color: var(--tivoli-navy);
  width: 44px;
  flex-shrink: 0;
}
.opt-label-cell {
  flex: 1;
  font-size: 12px;
  color: var(--text);
}
.opt-label-input {
  flex: 1;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--tivoli-navy);
  border-radius: 3px;
}
.btn-opt-edit, .btn-opt-save, .btn-opt-cancel, .btn-opt-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-opt-edit   { color: var(--tivoli-navy); }
.btn-opt-save   { color: #2E7D5A; }
.btn-opt-cancel { color: var(--text-muted); }
.btn-opt-del    { color: #A03838; }
.btn-opt-edit:hover, .btn-opt-save:hover, .btn-opt-cancel:hover, .btn-opt-del:hover {
  background: var(--tivoli-gold-light);
}
.options-modal-footer {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--tivoli-gold-pale);
  flex-shrink: 0;
}
.options-modal-footer input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}
.options-modal-footer input:focus {
  outline: 1px solid var(--tivoli-navy);
  outline-offset: -1px;
}

/* Section « Codes des options 1ère » (haut de la modale Options facultatives) */
.options-canonical-codes:empty { display: none; }
.options-canonical-codes {
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  background: var(--tivoli-gold-pale);
}
.opt-code-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--tivoli-navy);
  margin-bottom: 2px;
}
.opt-code-hint {
  font-size: 11px;
  color: var(--text-soft, #666);
  margin-bottom: 8px;
}
.opt-code-subtitle {
  font-size: 11px;
  font-weight: 800;
  color: var(--tivoli-navy);
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.opt-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.opt-code-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
}
.opt-code-input {
  width: 90px;
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.opt-code-input:focus {
  outline: 1px solid var(--tivoli-navy);
  outline-offset: -1px;
}
.opt-code-input:disabled {
  background: var(--border-light);
  color: var(--text-soft, #888);
}
.opt-code-save {
  margin-top: 8px;
  width: 100%;
}

/* Modale de résolution des options non reconnues (construite en JS) */
#optionResolverModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opt-resolve-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.opt-resolve-token {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opt-resolve-select {
  width: 190px;
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}
.opt-resolve-select:focus {
  outline: 1px solid var(--tivoli-navy);
  outline-offset: -1px;
}

/* ============================================================
   SCROLLBARS GLOBALES
   ============================================================ */
/* Deux syntaxes, deux moteurs. Les pseudo-éléments ::-webkit-scrollbar
   (Chrome/Edge/Safari) portent la barre fine de 5 px du design ; Firefox n'en
   implémente AUCUN et ne lit que les deux propriétés standard ci-dessous. Là-bas
   `thin` vaut ~11 px sur Windows — le mot-clé n'accepte pas de longueur, 5 px
   est donc hors d'atteinte — et il n'existe pas d'équivalent de
   ::-webkit-scrollbar-thumb:hover : Firefox DÉRIVE lui-même les états
   survol/pressé de la couleur qu'on lui donne. D'où deux choix qui ne valent que
   pour lui :
     • pouce OPAQUE. #94a3b8 rend sur blanc la même teinte que le rgba(...,.35)
       de WebKit, mais ne se dilue pas quand Firefox l'éclaircit au clic — à 35 %
       d'alpha le pouce devenait invisible au moment précis où on l'attrape.
     • rail NON transparent, qui garde la gouttière lisible pendant le glissement.
   Chromium ignore les propriétés standard dès qu'un ::-webkit-scrollbar est stylé
   (règle universelle juste en dessous → tous les scrollers) : les modifier ici ne
   touche donc que Firefox. Même correctif déjà appliqué localement à
   .eq-fold-body dans equipes.php. */
html { scrollbar-width: thin; scrollbar-color: #94a3b8 #eef2f7; }
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); }

/* ── Pouce fin de remplacement (js/thin-scrollbars.js) ──────────────────────
   Le natif ci-dessus reste la règle générale. Sur les conteneurs listés dans
   SELECTORS (longues listes, corps de modales, sous-menus), le script masque la
   barre native et dessine ce pouce de 6 px : c'est le seul moyen d'obtenir la
   même finesse sous Firefox, où `thin` plafonne à ~11 px CSS.
   `.tsb-host` est posée par le SCRIPT, jamais ici : script absent = barres
   natives intactes. Et comme `scrollbar-width` est HÉRITÉE, on la rétablit sur
   les enfants du host — indispensable quand le host est <html> (pages conseils /
   annuaire), sinon plus une seule barre native dans toute la page. */
.tsb-host { scrollbar-width: none; }
.tsb-host > * { scrollbar-width: thin; }
.tsb-host::-webkit-scrollbar { display: none; }

.tsb-thumb {
  position: fixed;
  border-radius: 3px;
  background: var(--tsb-thumb, #94a3b8);
  opacity: 0;
  /* Invisible ⇒ totalement transparent aux clics. Sans ça une bande morte de
     6 px longerait le bord droit de chaque liste et avalerait les dépôts
     Sortable qui y tombent. */
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 10000;                /* au-dessus du plus haut z-index du projet (9999) */
}
/* L'épaisseur est portée par l'axe (6 px = WIDTH dans thin-scrollbars.js) ; la
   longueur, elle, est calculée et posée en style inline. */
.tsb-thumb--v { width: 6px; }
.tsb-thumb--h { height: 6px; }

.tsb-thumb.is-visible { opacity: .85; pointer-events: auto; }
.tsb-thumb.is-visible:hover,
.tsb-thumb.is-dragging { opacity: 1; background: var(--tsb-thumb-hi, #64748b); }

/* Surfaces sombres : teintes recopiées sur le pouce à l'attache (il vit dans
   <body>, il ne peut donc pas les hériter du conteneur). */
.tb-submenu-panel,
.spe-stats-row, #termCrewStats,        /* dans #statsBar, fond --tivoli-navy */
#speGroupPanel                         /* fond --tivoli-navy-dark */
  { --tsb-thumb: #6B80AC; --tsb-thumb-hi: #8DA1CA; }

/* NB : --col-w (largeur de design des colonnes de classe) reste CONSTANT sur
   toute la gamme desktop/14". On ne le réduit plus par paliers : les cartes ne
   doivent jamais se redisposer (noms qui reviennent à la ligne), c'est le zoom
   global de #classesArea (fitClassesZoom) qui adapte la taille à l'écran, puis
   le scroll horizontal en-deçà du seuil. */
@media (max-width: 1400px) {
  :root { --pool-w: 380px; }
}

/* ── En-tête en flux (peut wrapper) dès 1500px, sans toucher au
      layout principal desktop (vivier latéral conservé jusqu'à 1024px).
      Empêche « Importer Excel » et autres boutons d'être masqués. ── */
@media (max-width: 1500px) {
  html.app-page,
  html:has(body.app-page) { overflow: hidden; height: 100svh; }
  body.app-page {
    overflow: hidden;
    height: 100svh;
    display: flex;
    flex-direction: column;
  }
  body.app-page #appHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(15, 32, 69, .25);
  }
  body.app-page #toolbar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: 8px 16px;
    gap: 8px;
    overflow: visible;
  }
  /* Base sur le contenu (pas 0) + largeur mini : force le wrap au lieu de
     laisser le groupe d'import déborder hors écran */
  body.app-page #toolbar .tb-tools {
    flex: 1 1 auto;
    min-width: 280px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.app-page #toolbar .tb-import { flex-shrink: 0; }
  body.app-page #toolbar .file-label { max-width: 130px; }
  /* Garde les menus (Session/Outils) collés à droite même lorsqu'ils
     passent sur une 2e ligne : leurs panneaux (ancrés à droite) restent
     alors entièrement à l'écran au lieu de déborder vers la gauche */
  body.app-page #toolbar .tb-right {
    margin-left: auto;
    flex-shrink: 0;
  }
  body.app-page #subBar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 16px;
  }
  body.app-page #subBar .tb-tools {
    flex: 1 1 auto;
    min-width: 280px;
    margin-left: auto;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.app-page #statsBar {
    position: relative;
    top: auto;
    height: auto;
    min-height: var(--stats-h);
  }
  body.app-page #algoPanel {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    overflow: visible;
  }
  body.app-page #main {
    position: relative;
    top: auto;
    bottom: auto;
    flex: 1;
    min-height: 0;
    margin-bottom: var(--spe-h);
    overflow: hidden;
  }
}

/* Sous 1500px, le bloc « en flux » ci-dessus (hérité de l'ancienne bannière)
   faisait wrapper le HEADER entier (height:auto + flex-wrap:wrap + recherche
   min-width:280px qui pousse) → bannière sur 3-4 lignes = très haute.
   Le nouveau modèle garde une hauteur fixe : le header ne wrappe pas, seul
   .tb-collapse se replie en 2 bandes (nav / actions). Placé APRÈS pour primer. */
@media (min-width: 1025px) and (max-width: 1500px) {
  body.app-page #toolbar {
    height: var(--toolbar-h);
    padding: 0 16px;
    flex-wrap: nowrap;
  }
  body.app-page #toolbar .tb-tools {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* ── Page ÉQUIPES (modèle « toolbar fixe + offset ») ──
   equipes.php bâtit sa mise en page autour d'un toolbar FIXE (hauteur --toolbar-h)
   (#equipesContainer compense par un margin-top). Les overrides « en flux »
   ci-dessus (≤1500px : toolbar position:relative, flex-wrap:wrap) sont prévus
   pour la répartition et CASSENT ce modèle : la grille .tb-collapse retombe à la
   ligne (onglets décalés/coupés) et l'offset se cumule à la hauteur du toolbar
   redevenu en flux (grand vide). De plus un toolbar `relative` prend la largeur
   du contenu de <body> (amputée d'une gouttière de scrollbar) → bannière pas
   pleine largeur ; `fixed` est ancré au viewport. On force donc le modèle fixe
   sur equipes à toutes les largeurs.
   NB : ce correctif est SCOPÉ à .equipes-page — calendrier/conseils utilisent un
   autre modèle (« en flux » : .cal-main flex:1 sans offset) qu'il ne faut pas
   casser. Le panneau hamburger (.tb-collapse position:absolute top:100%) reste
   ancré au toolbar fixe. */
@media (max-width: 1500px) {
  body.equipes-page > #toolbar.toolbar--tabs {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--toolbar-h);
    flex-wrap: nowrap;
    padding: 0 16px;
    gap: 14px;
    overflow: visible;
  }
}

@media (max-width: 1024px) {
  :root {
    --pool-w: 100%;
    --spe-h: 34px;
  }
  .input-save { width: 140px; }
  .select-load { max-width: 180px; }
  .file-label { max-width: 120px; }
  .algo-progress-msg { min-width: 140px; }

  /* ── App-page : layout plein-écran comme sur desktop ── */
  html.app-page,
  html:has(body.app-page) { overflow: hidden; height: 100svh; }
  body.app-page {
    overflow: hidden;
    height: 100svh;
    display: flex;
    flex-direction: column;
  }

  body.app-page #appHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(15, 32, 69, .25);
  }

  body.app-page #toolbar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
    overflow: visible;
  }
  body.app-page #toolbar .tb-tools {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.app-page #toolbar .tb-import {
    flex-shrink: 0;
  }
  body.app-page #toolbar .tb-right {
    flex-shrink: 0;
  }
  body.app-page #toolbar .btn {
    font-size: 12px;
    padding: 7px 11px;
    min-height: 36px;
  }
  body.app-page #toolbar .file-label {
    max-width: 140px;
  }
  .fiche-search-input { width: 130px; }
  .app-title { font-size: 20px; }
  .app-logo  { height: 36px; width: 36px; }

  body.app-page #subBar {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 12px;
  }
  body.app-page #subBar .tb-tools {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.app-page #statsBar {
    position: relative;
    top: auto;
    height: auto;
    min-height: var(--stats-h);
    padding: 8px 12px;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.app-page .stat-label { color: #cbd5e1; }
  body.app-page #algoPanel {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    overflow: visible;
  }
  body.app-page .btn-algo {
    flex: 1 1 auto;
    min-height: 38px;
    font-size: 12px;
    justify-content: center;
  }
  .algo-label { font-size: 11px; }
  .algo-progress { flex: 1 1 100%; margin-left: 0; min-width: 0; }
  .algo-progress-msg { min-width: 0; flex: 1; white-space: normal; line-height: 1.35; }

  body.app-page #main {
    position: relative;
    top: auto;
    bottom: auto;
    flex: 1;
    min-height: 0;
    margin-bottom: var(--spe-h);
    overflow: hidden;
  }
  #main {
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #poolPanel {
    width: 100% !important;
    height: 34vh;
    max-height: 300px;
    min-height: 160px;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 2px solid var(--border);
    opacity: 1;
    pointer-events: auto;
    transition: height .35s cubic-bezier(.4, 0, .2, 1), min-height .35s ease, max-height .35s ease, border-width .35s ease, opacity .25s ease;
  }
  #poolPanel.collapsed {
    width: 100% !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    border-bottom-width: 0;
    opacity: 0;
    pointer-events: none;
  }
  #poolHeader { flex-wrap: wrap; gap: 6px; }
  .algo-divider { display: none; }
  #filters { flex: 1 1 100%; min-width: 0; }
  #classesPanel { flex: 1; min-height: 0; padding: 6px; overflow-x: auto; overflow-y: auto; }
  #classesArea { gap: 6px; }
  .card-right { width: auto; max-width: 100%; }

  #speGroupPanel { padding: 0 10px; gap: 8px; }
}

@media (max-width: 768px) {
  :root {
    --stats-h: 44px;
    --algo-h: 52px;
  }

  .app-title { font-size: 18px; }
  .app-logo  { height: 32px; width: 32px; }

  /* ── Toolbar empilée : marque + menus (ligne 1), niveau (ligne 2), outils (ligne 3) ── */
  body.app-page #toolbar {
    row-gap: 8px;
    column-gap: 6px;
  }
  body.app-page #toolbar .tb-left {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body.app-page #toolbar .tb-left .separator { display: none; }
  body.app-page #toolbar .tb-right {
    order: 2;
    flex-shrink: 0;
  }
  body.app-page #toolbar .tb-niveau {
    order: 3;
    flex: 1 1 100%;
    margin-right: 0;
    justify-content: flex-start;
  }
  body.app-page #subBar .tb-subtabs {
    flex: 1 1 100%;
  }
  body.app-page #subBar .tb-tools {
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* La marque peut tronquer plutôt que provoquer un débordement horizontal */
  .app-brand { flex: 0 1 auto; min-width: 0; }
  .app-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ── Panneaux déroulants pleine largeur sous la bannière ── */
  .tb-menu { position: static; }
  .tb-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100svh - var(--toolbar-h) - var(--subbar-h) - 24px);
    overflow-y: auto;
  }

  /* Sur petit écran, les sous-menus s'ouvrent en accordéon (inline et indentés)
     plutôt qu'en flyout latéral, pour rester accessibles au tactile. */
  .tb-submenu-panel {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    min-width: 0;
    margin: 2px 0 4px 10px;
    box-shadow: none;
    border: none;
    border-left: 2px solid rgba(196,164,107,.3);
    border-radius: 0;
    padding: 6px 0 6px 8px;
  }
  .tb-submenu-trigger::after { content: '\25BE'; }   /* ▾ */

  /* Recherche fiche élève : champ compact (ne prend plus toute la ligne) pour
     économiser de la hauteur sur petits écrans. Les résultats s'ouvrent en
     pleine largeur sous le champ, donc un champ étroit reste utilisable. */
  body.app-page #subBar .tb-fiche-search {
    flex: 0 1 auto;
  }
  body.app-page #subBar .fiche-search-input {
    flex: 0 1 auto;
    width: 140px;
    min-width: 0;
  }

  /* Modales & popups */
  .edit-popup { align-items: flex-end; padding: 0; }
  .edit-popup-box {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .edit-popup-body { overflow-y: auto; max-height: calc(92vh - 120px); }
  .edit-popup-footer,
  .edit-popup-footer--triple { flex-direction: column; align-items: stretch; }
  .edit-popup-footer .btn,
  .edit-popup-footer--triple .btn { width: 100%; justify-content: center; }

  #groupsModal { align-items: flex-end; }
  .groups-modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
    animation: drawer-up .2s ease;
  }
  @keyframes drawer-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .groups-modal-header { flex-wrap: wrap; gap: 8px; }
  .groups-filter-spe { max-width: none; flex: 1; min-width: 120px; }
  .grp-card { width: calc(50% - 4px); min-width: 0; }

  .options-modal-box { width: calc(100vw - 16px); max-width: 100%; max-height: 92vh; }
  .options-modal-body { max-height: calc(92vh - 160px); }
  .options-modal-footer { flex-wrap: wrap; }
  .options-modal-footer input { flex: 1 1 calc(50% - 3px); min-width: 120px; }
  .option-row { flex-wrap: wrap; gap: 6px; }

  #notifContainer { left: 10px; right: 10px; top: 10px; }
  .notif { max-width: none; width: 100%; }
}

@media (max-width: 480px) {
  :root {
    --stats-h: 42px;
    --algo-h: 48px;
    --spe-h: 32px;
  }

  .app-title { font-size: 17px; }
  .app-logo  { height: 30px; width: 30px; }

  body.app-page #toolbar {
    padding: 8px 10px;
    column-gap: 4px;
  }
  /* Boutons de navigation plus compacts pour tenir sans débordement */
  .module-link,
  .niveau-link,
  .niveau-menu-trigger,
  .subtab-link {
    padding: 4px 9px;
    font-size: 12px;
  }
  body.app-page #toolbar .tb-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  /* ── Recherche fiche élève : réduite à la loupe seule, se déplie au tap ──
     Le champ ne montre que l'icône 🔍 ; au focus, toute la recherche occupe la
     ligne et le champ s'élargit. */
  body.app-page #subBar .tb-fiche-search {
    flex: 0 0 auto;
    margin-left: auto;
    transition: flex-basis .2s ease;
  }
  body.app-page #subBar .fiche-search-input {
    flex: 0 0 auto;
    width: 42px;
    padding-left: 10px;
    padding-right: 4px;
    cursor: pointer;
    text-overflow: clip;
    transition: width .2s ease;
  }
  body.app-page #subBar .tb-fiche-search:focus-within {
    flex: 1 1 100%;
  }
  body.app-page #subBar .tb-fiche-search:focus-within .fiche-search-input {
    flex: 1 1 auto;
    width: auto;
    cursor: text;
  }
  /* Nom d'utilisateur tronqué pour préserver l'espace */
  .app-badge--prof,
  .app-badge--admin { max-width: 40vw; }

  #poolPanel {
    height: 30vh;
    min-height: 140px;
  }
  .btn-toggle-pool {
    height: 36px;
    padding: 0 10px;
    font-size: 10px;
  }
  .grp-card {
    width: 100%;
  }
  .options-modal-footer input {
    flex: 1 1 100%;
  }
}

/* Cibles tactiles plus grandes sur écran touch */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 36px;
    padding: 6px 11px;
  }
  .btn-sentiment {
    width: 44px;
    height: 40px;
  }
  .eleve-card {
    min-height: 32px;
    padding: 4px 3px 4px 20px;
  }
  .card-actions { opacity: 1; }
  .btn-edit-eleve,
  .btn-chef-eleve {
    min-width: 28px;
    min-height: 28px;
  }
  .btn-toggle-pool {
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
  }
  .conseils-picker-item,
  .conseils-tab,
  .conseils-picker-tab {
    min-height: 44px;
  }
}

/* ── Mode consultation (profs) ── */
.app-readonly-banner {
  background: #fff8e6;
  border-bottom: 1px solid #e8d4a8;
  color: #5c4a1e;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  text-align: center;
}
/* ── Bannière « brouillon local » (admin) — injectée par updateDraftBanner() sous la toolbar,
   même emplacement et même gabarit que la bannière de consultation ci-dessus. ── */
.draft-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  background: #fff8e6;
  border-bottom: 1px solid #e8d4a8;
  border-left: 4px solid #c4a46b;
  color: #5c4a1e;
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
  text-align: center;
}
.draft-banner[hidden] { display: none; }
.draft-banner strong { font-weight: 600; }
.draft-banner-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  background: #fff;
  border: 1px solid #c4a46b;
  color: #5c4a1e;
}
.draft-banner-btn:hover { background: #f6ecd8; }
.draft-banner-dismiss { padding: 0.25rem 0.45rem; }
body.banner-collapsed .draft-banner { display: none !important; }

.app-readonly-badge {
  align-self: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(196, 164, 107, 0.35);
  border-radius: 6px;
  color: var(--tivoli-gold-light, #e8d4a8);
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

/* Rôle visible dans le badge utilisateur (Admin · / Prof ·) */
.app-badge-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  padding-right: 5px;
  margin-right: 4px;
  border-right: 1px solid currentColor;
}

/* Nom de la session courante dans la barre de stats */
.current-session-badge[hidden] { display: none; }
.current-session-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tivoli-gold-light);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(196, 164, 107, 0.3);
  border-radius: 4px;
  padding: 2px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  flex-shrink: 1;
}
.current-session-badge::before {
  content: '📁';
  font-size: 10px;
}

/* Nom de session dans le bouton du menu Session */
.tb-session-name-label {
  font-weight: 400;
  opacity: 0.75;
  font-size: 10px;
  margin-left: 3px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.tb-active-session-row {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}
.tb-active-session-label {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
  width: 100%;
}
.tb-active-session-info {
  flex: 1;
  font-size: 0.8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admins-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
  max-height: 240px;
  overflow-y: auto;
}
.admins-list-item {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
}
.admins-list-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.admins-list-meta {
  color: #64748b;
  font-size: 0.75rem;
}
.admins-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.admins-add-form .btn {
  align-self: flex-start;
}
.conseils-hint {
  color: #64748b;
  font-size: 0.85rem;
  margin: 0;
}
.app-readonly {
  --algo-h: 0px;
}
.app-readonly #main {
  top: calc(var(--toolbar-h) + var(--subbar-h) + var(--stats-h));
}
.app-readonly .classe-pp-input,
.app-readonly .eq-jour-select,
.app-readonly .eq-prof-ref-select,
.app-readonly .eq-prof-ref-input {
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   Bannière repliable (hamburger) sous 1024px : les menus de niveau
   et la recherche fiche passent dans un panneau déroulant.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.app-page #toolbar { position: relative; }
  .tb-hamburger { display: inline-flex; }
  /* Ordre sur mobile : marque … badge/déconnexion … hamburger (à droite) */
  body.app-page #toolbar .tb-left  { order: 0; }
  body.app-page #toolbar .tb-right { order: 1; margin-left: auto; }
  body.app-page #toolbar .tb-hamburger { order: 2; margin-left: 8px; }

  body.app-page #toolbar .tb-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background: var(--tivoli-navy);
    border-top: 1px solid rgba(196, 164, 107, .25);
    border-bottom: 2px solid var(--tivoli-gold);
    box-shadow: 0 14px 30px rgba(15, 32, 69, .45);
    z-index: 200;
    max-height: calc(100svh - var(--toolbar-h));
    overflow-y: auto;
  }
  body.app-page #toolbar .tb-collapse.tb-collapse--open { display: flex; }

  /* Menus de niveau empilés ; déclencheurs pleine largeur */
  .tb-collapse .tb-niveau {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    width: 100%;
  }
  .tb-collapse .tb-niveau-menu { width: 100%; }
  .tb-collapse .niveau-menu-trigger { width: 100%; justify-content: space-between; }

  /* Panneaux (niveau + sous-menus) en accordéon, dans le flux */
  .tb-collapse .tb-menu { position: static; }
  .tb-collapse .tb-menu-panel {
    position: static;
    inset: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 4px;
    box-shadow: none;
  }
  .tb-collapse .tb-submenu-panel {
    position: static;
    inset: auto;
    min-width: 0;
    margin: 2px 0 4px 10px;
    padding: 6px 0 6px 8px;
    border: none;
    border-left: 2px solid rgba(196, 164, 107, .3);
    border-radius: 0;
    box-shadow: none;
  }
  .tb-collapse .tb-submenu-trigger::after { content: '\25BE'; }

  /* Recherche fiche : pleine largeur dans le panneau */
  .tb-collapse .tb-tools { margin-left: 0; width: 100%; }
  .tb-collapse .tb-fiche-search { width: 100%; flex: 1 1 auto; }
  .tb-collapse .fiche-search-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .tb-collapse .fiche-search-results { left: 0; right: 0; min-width: 0; max-width: none; }
}

/* ════════════════════════════════════════════════════════════════
   Recherche fiche élève relogée HORS de la zone repliable
   (.tb-tools--bar = enfant direct de #toolbar) : toujours visible,
   y compris en mode hamburger, et plus jamais coincée / tronquée
   par la bande d'actions de « Liste classes » (1025–1350px).
   ════════════════════════════════════════════════════════════════ */
.toolbar--tabs .tb-tools--bar {
  align-self: center;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 0 0 8px;
}
/* Suggestions ancrées au bord droit de la recherche : elles s'ouvrent
   vers l'intérieur et ne débordent donc jamais hors de la fenêtre. */
.tb-tools--bar .fiche-search-results {
  left: auto;
  right: 0;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 24px));
}

/* Bannière « Liste classes » (2 bandes, ≥1025px) : la recherche se cale
   en bande 1 (en haut, à droite des onglets, avant l'utilisateur). */
@media (min-width: 1025px) {
  body.classes-page .toolbar--tabs .tb-tools--bar {
    align-self: flex-start;
    height: 56px;
    align-items: center;
  }
  body.app-page .toolbar--tabs .tb-tools--bar {
    margin-left: auto;
  }
  body.app-page .toolbar--tabs .tb-tools--bar + .tb-right {
    margin-left: 0;
  }
}
/* Plage resserrée avant le repli hamburger : champ compact mais entier. */
@media (min-width: 1025px) and (max-width: 1500px) {
  .tb-tools--bar .fiche-search-input { width: 140px; }
  .tb-tools--bar .fiche-search-input:focus { width: 190px; }
}

/* Mode hamburger (≤1024px) : la recherche RESTE dans la barre du haut
   (jamais repliée dans le menu), et occupe l'espace disponible. */
@media (max-width: 1024px) {
  body.app-page #toolbar .tb-tools--bar {
    order: 0;
    flex: 1 1 auto;
    min-width: 200px;
    margin: 0;
  }
  .tb-tools--bar .tb-fiche-search { flex: 1 1 auto; min-width: 0; width: auto; }
  .tb-tools--bar .fiche-search-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .tb-tools--bar .fiche-search-input:focus { width: auto; }
  .tb-tools--bar .fiche-search-results { min-width: 0; max-width: calc(100vw - 16px); }
}
/* Petits écrans : la recherche prend toute la largeur, sur sa propre ligne. */
@media (max-width: 768px) {
  body.app-page #toolbar .tb-tools--bar {
    order: 4;
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   1° STMG — bande de la classe technologique autonome
   ═══════════════════════════════════════════════════════════════ */
/* Bande 1° STMG : overlay ancré en bas, tirable vers le haut jusque sous la
   bannière (peut donc couvrir la barre de stats et la barre d'algo). */
.stmg-section {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--spe-h);
  height: 40%;          /* défaut ; surchargé en px par le séparateur tirable */
  min-height: 120px;
  z-index: 200;
  background: var(--panel-bg, #fff);
  border-top: 1px solid var(--border, #cbd5e1);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .14);
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
/* L'attribut [hidden] doit l'emporter sur display:flex ci-dessus (même spécificité) */
.stmg-section[hidden] { display: none; }

/* Poignée tirable sur le bord HAUT de la bande */
#stmgResizer {
  flex: 0 0 10px;
  height: 10px;
  margin: 0 -8px 4px;   /* pleine largeur (annule le padding latéral de la bande) */
  cursor: ns-resize;
  background: var(--tivoli-gold, #c4a46b);
  position: relative;
  touch-action: none;
}
#stmgResizer::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 3px 0 rgba(255, 255, 255, .85), 0 -3px 0 rgba(255, 255, 255, .85);
}
#stmgResizer:hover { filter: brightness(1.08); }
body.stmg-resizing { cursor: ns-resize; user-select: none; }
body.stmg-resizing * { user-select: none !important; }
.stmg-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stmg-bar-title { font-weight: 700; font-size: 1.05em; color: var(--tivoli-gold-dark, #8a6d2f); }
.stmg-bar-count { font-size: .85em; color: #64748b; }
.stmg-bar-btn {
  padding: 4px 10px;
  font-size: .85em;
  background: #fff;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  cursor: pointer;
}
.stmg-bar-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.stmg-bar-close { margin-left: auto; }
.stmg-area {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  overflow: auto;
  min-width: 0;
  padding-bottom: 4px;
}
.stmg-vivier-col { background: rgba(148, 163, 184, .08); }
.stmg-vivier-zone { min-height: 60px; }
.stmg-vivier-toggle {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-right: 4px;
  padding: 0;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 4px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.stmg-vivier-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }
/* Vivier replié : colonne étroite, libellé vertical, cartes masquées */
.stmg-vivier-col.collapsed { width: 38px; }
.stmg-vivier-col.collapsed .stmg-vivier-zone { display: none; }
.stmg-vivier-col.collapsed .classe-header-top {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.stmg-vivier-col.collapsed .classe-nom {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
/* Cartes STMG : pas de colonne « spés » → bloc de droite compact */
.stmg-card .card-right { width: auto; }
.stmg-card .card-meta { flex-wrap: wrap; }

/* ── Anglais demi-classe (1ère) ── */
.premiere-anglais-modal-box { max-width: min(960px, 96vw); }
.prem-ang-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 12px;
}
.prem-ang-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
  margin-top: 10px;
}
.prem-ang-class-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.prem-ang-class-config {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.prem-ang-class-title { margin: 0 0 8px; font-size: 13px; color: #1e3a5f; }
/* Bascules « réunion d'équipages » (Terminale) : liste d'équipages cochables pour GA. */
.term-ang-crews {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.term-ang-crews > p { margin: 0 0 2px; }
.term-ang-crew {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.term-ang-crew input { margin: 0; }
/* Équipage verrouillé en GB (stratégie « GA Espagnol » : contient un germaniste). */
.term-ang-crew-locked { cursor: not-allowed; opacity: .65; }
.term-ang-crew-locked input { cursor: not-allowed; }
.term-ang-crew-lock-tag { color: #c0392b; font-weight: 600; }
.term-ang-crew-auto { align-self: flex-start; margin-top: 4px; }
/* Groupe de badges de spé dans les listes GA/GB (1ère). */
.ang-spes { display: flex; gap: 2px; flex-shrink: 0; }
/* Listes GA/GB (1ère) : badges de spé (ligne 1) + LV2 & options (ligne 2, sous les spés). */
.ang-badges-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ang-lv2opt { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; }
/* LV2 à la même taille que les badges de spé (.spe-badge) quand il est dans la colonne 1ère. */
.ang-badges-col .ang-lv2 { font-size: 8px; font-weight: 700; padding: 1px 2px; border-radius: 2px; }
/* Pastille LV2 dans les listes GA/GB (1ère + Terminale). */
.ang-lv2 {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background: #eef2f7;
  color: #475569;
  border: 1px solid #d7dfea;
}
.ang-lv2.lv2-esp  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ang-lv2.lv2-all  { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.ang-lv2.lv2-euro { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
/* Sous-groupes par équipage (stratégie « réunion d'équipages »). */
.term-ang-crew-group { margin-top: 8px; }
.term-ang-crew-head {
  margin: 0 0 3px;
  font-size: 12px;
  color: #1e3a5f;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 2px;
}
.prem-ang-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 10px;
  font-size: 12px;
}
.prem-ang-mode-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.prem-ang-both-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 720px) {
  .prem-ang-both-config { grid-template-columns: 1fr; }
}
.prem-ang-half-config {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
}
.prem-ang-half-config strong { width: 100%; font-size: 12px; color: #334155; }
.prem-ang-single-config {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
}
.prem-ang-half-idle { opacity: .72; border-style: dashed; }
.prem-ang-badge-ok {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  vertical-align: middle;
}
.prem-ang-badge-warn {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  vertical-align: middle;
}
.prem-ang-day-field select { min-width: 140px; }
.prem-ang-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.prem-ang-result-title { margin: 4px 0 0; }
.prem-ang-config { margin-top: 16px; }
.prem-ang-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafbfc;
}
.prem-ang-card-err { border-color: #fca5a5; background: #fef2f2; }
.prem-ang-card h3 { margin: 0 0 4px; font-size: 14px; color: #1e3a5f; }
.prem-ang-swap {
  padding: 1px 8px;
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
}
.prem-ang-swap.is-active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.prem-ang-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .prem-ang-halves { grid-template-columns: 1fr; }
}
.prem-ang-half {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
}
.prem-ang-half h4 { margin: 0 0 6px; font-size: 12px; color: #334155; }
.prem-ang-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.prem-ang-list li { margin: 2px 0; }
.prem-ang-empty { list-style: none; margin-left: -18px; color: #94a3b8; }
.prem-opt-verify-warn-list { color: #92400e; }

/* ── Chefs d'équipage volontaires ─────────────────────────────── */
#chefVoloModal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
#chefVoloModal[hidden] { display: none; }
.chefvolo-body { display: block; padding: 14px; font-size: 13px; color: #1f2937; }
.chefvolo-intro { margin-bottom: 12px; line-height: 1.4; }
.chefvolo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chefvolo-count { margin: 8px 0; }
.chefvolo-cov {
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: #eef2ff;
  border-left: 3px solid #6366f1;
  border-radius: 4px;
  line-height: 1.45;
}
.chefvolo-cov.chefvolo-muted { background: #f1f5f9; border-left-color: #cbd5e1; color: #64748b; }
.chefvolo-ok { color: #15803d; font-weight: 600; }
.chefvolo-muted { color: #64748b; }
.chefvolo-uncov { margin-top: 6px; font-size: 12px; color: #475569; max-height: 180px; overflow-y: auto; }
.chefvolo-recruit { margin-top: 6px; font-size: 12px; max-height: 220px; overflow-y: auto; }
.chefvolo-recruit > summary { cursor: pointer; color: #b45309; font-weight: 600; }
.chefvolo-recruit-hint { margin: 6px 0 8px; color: #475569; font-style: italic; }
.chefvolo-recruit-eq { padding: 4px 0; border-top: 1px solid #e2e8f0; }
.chefvolo-recruit-hd { color: #334155; }
.chefvolo-recruit-anchor { color: #6366f1; font-size: 11px; margin-left: 4px; }
.chefvolo-recruit-cands { color: #475569; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.chefvolo-recruit-btn {
  border: 1px solid #86efac; background: #f0fdf4; color: #166534;
  cursor: pointer; font-size: 11.5px; padding: 2px 8px; border-radius: 12px; line-height: 1.5;
}
.chefvolo-recruit-btn:hover { background: #22c55e; border-color: #16a34a; color: #fff; }

/* Propositions de déplacement (« propose tout, n'applique rien ») — validables une par une. */
.chefvolo-moves {
  margin: 8px 0 12px; padding: 8px 10px;
  background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 4px;
}
.chefvolo-moves-hd { font-weight: 600; color: #1e3a8a; margin-bottom: 6px; font-size: 12.5px; }
.chefvolo-moves-list { display: flex; flex-direction: column; gap: 4px; }
.chefvolo-mv-row {
  display: flex; align-items: flex-start; gap: 7px; padding: 5px 7px;
  background: #fff; border: 1px solid #dbeafe; border-radius: 4px; cursor: pointer; font-size: 12.5px;
}
.chefvolo-mv-row:hover { border-color: #93c5fd; }
.chefvolo-mv-chk { margin-top: 2px; }
.chefvolo-mv-main { flex: 1; line-height: 1.4; }
.chefvolo-mv-detail { color: #64748b; font-size: 11.5px; }
.chefvolo-mv-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  vertical-align: 1px; margin-left: 4px;
}
.chefvolo-mv-neutral { background: #dcfce7; color: #166534; }
.chefvolo-mv-cost    { background: #fef3c7; color: #92400e; }
.chefvolo-mv-mixte   { background: #fee2e2; color: #b91c1c; }
.chefvolo-mixte-warn { color: #b91c1c; }
.chefvolo-mv-warn    { color: #b45309; font-size: 11.5px; font-weight: 600; }
.chefvolo-nowish {
  margin: 8px 0 12px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  background: #f1f5f9; border-left: 3px solid #64748b; border-radius: 4px; color: #334155;
}
.chefvolo-moves-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chefvolo-list { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 18px; }
.chefvolo-list li { break-inside: avoid; display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.chefvolo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-chefvolo-x {
  border: none; background: none; cursor: pointer;
  color: #b91c1c; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 3px;
}
.btn-chefvolo-x:hover { background: #fee2e2; }
.chefvolo-orphans { margin-top: 10px; }
.chefvolo-orphans summary { cursor: pointer; color: #92400e; }
.chefvolo-relax {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 2px; font-weight: 600; cursor: pointer;
}
.chefvolo-relax input { margin: 0; }
.chefvolo-relax-note {
  font-size: 11.5px; line-height: 1.4; color: #7c5a12;
  background: #fff8e8; border-left: 3px solid #e0b64a;
  border-radius: 4px; padding: 6px 8px; margin: 0 0 10px;
}

/* Impacts EDT/MSpécif pris comme concession pour couvrir plus d'équipages */
.chefvolo-sidefx {
  margin: 8px 0 12px; padding: 8px 10px;
  background: #fff7ed; border-left: 3px solid #f59e0b; border-radius: 4px;
}
.chefvolo-sidefx-hd { font-weight: 600; color: #92400e; margin-bottom: 6px; font-size: 12.5px; }
.chefvolo-sidefx-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.chefvolo-sidefx-list li { padding: 3px 0; border-top: 1px solid #fde7c7; line-height: 1.4; }
.chefvolo-sidefx-list li:first-child { border-top: none; }
.chefvolo-sidefx-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 5px; border-radius: 3px; margin-right: 5px; vertical-align: 1px;
}
.chefvolo-sidefx-tt  { background: #e0e7ff; color: #3730a3; }
.chefvolo-sidefx-opt { background: #fee2e2; color: #b91c1c; }
.chefvolo-sidefx-msp { background: #fef3c7; color: #92400e; }

/* Rapport d'impact CHIFFRÉ d'une concession (avant→après) — sous chaque scénario. */
.chefvolo-scenario-hard { border-left: 3px solid #dc2626; padding-left: 8px; }
.chefvolo-imp-banner { margin: 5px 0 3px; padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1.4; }
.chefvolo-imp-banner-hd { font-weight: 700; margin-bottom: 3px; }
.chefvolo-imp-hard { background: #fef2f2; border-left: 3px solid #dc2626; color: #991b1b; }
.chefvolo-imp-soft { background: #fffbeb; border-left: 3px solid #f59e0b; color: #92400e; }
.chefvolo-imp-okc  { background: #f0fdf4; border-left: 3px solid #22c55e; color: #166534; font-weight: 600; }
.chefvolo-imp-cons { list-style: none; margin: 0; padding: 0; }
.chefvolo-imp-cons li { padding: 1px 0; }
.chefvolo-imp-hardtag {
  display: inline-block; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
  padding: 0 4px; border-radius: 3px; margin-right: 3px; vertical-align: 1px;
}
.chefvolo-imp { margin: 2px 0 4px; font-size: 12px; }
.chefvolo-imp > summary { cursor: pointer; color: #475569; font-weight: 600; }
.impact-tbl { border-collapse: collapse; margin: 4px 0 2px; width: 100%; font-size: 12px; }
.impact-tbl td { padding: 2px 6px; border-top: 1px solid #eef2f7; }
.impact-tbl .imp-lbl { color: #334155; }
.impact-tbl .imp-b, .impact-tbl .imp-a { text-align: right; font-variant-numeric: tabular-nums; }
.impact-tbl .imp-arr { color: #94a3b8; padding: 2px 2px; }
.impact-tbl .imp-tag { font-size: 11px; white-space: nowrap; }
.impact-tbl tr.imp-worse  { background: #fef2f2; }
.impact-tbl tr.imp-worse  .imp-a, .impact-tbl tr.imp-worse .imp-tag  { color: #b91c1c; font-weight: 700; }
.impact-tbl tr.imp-better { background: #f0fdf4; }
.impact-tbl tr.imp-better .imp-a, .impact-tbl tr.imp-better .imp-tag { color: #166534; font-weight: 700; }
.impact-tbl tr.imp-same td { color: #94a3b8; }
.chefvolo-imp-err { font-size: 11.5px; color: #b45309; font-style: italic; margin: 3px 0; }

/* Panneau flottant « impact d'un déplacement manuel » (drag & drop d'un élève). */
.move-imp-panel {
  position: relative; background: #fff; border: 1px solid #cbd5e1; border-left: 4px solid #6366f1;
  border-radius: 6px; box-shadow: 0 4px 16px rgba(15,23,42,.14); padding: 10px 30px 10px 12px;
  margin-top: 8px; max-width: 380px; font-size: 12.5px; animation: notif-in .2s ease;
}
.move-imp-panel-hard { border-left-color: #dc2626; }
.move-imp-close {
  position: absolute; top: 5px; right: 6px; border: none; background: none; cursor: pointer;
  color: #94a3b8; font-size: 14px; line-height: 1; padding: 2px 4px;
}
.move-imp-close:hover { color: #475569; }
.move-imp-hd { font-weight: 600; color: #1e293b; margin-bottom: 5px; }
.move-imp-route { color: #6366f1; font-weight: 600; white-space: nowrap; }
.move-imp-banner { border-radius: 4px; padding: 5px 8px; margin: 4px 0; font-size: 12px; line-height: 1.4; }
.move-imp-hard { background: #fef2f2; color: #991b1b; }
.move-imp-banner ul { list-style: none; margin: 3px 0 0; padding: 0; }
.move-imp-banner li { padding: 1px 0; }
.move-imp-soft { list-style: none; margin: 4px 0; padding: 0; color: #92400e; font-size: 12px; }
.move-imp-soft li { padding: 1px 0; }
.move-imp-det { margin-top: 4px; }
.move-imp-det > summary { cursor: pointer; color: #475569; font-weight: 600; }
.move-imp-none { color: #166534; font-weight: 600; font-size: 12px; margin-top: 3px; }

/* Boost de couverture — panneau de propositions de relabel-swaps */
.chefvolo-boost {
  margin: 8px 0 12px; padding: 8px 10px;
  background: #f0fdf4; border-left: 3px solid #22c55e; border-radius: 4px;
}
.chefvolo-boost-hd { font-weight: 600; margin-bottom: 6px; color: #14532d; }
.chefvolo-boost-row {
  display: block; padding: 5px 2px; border-top: 1px solid #d6f0df; cursor: pointer; font-size: 13px;
}
.chefvolo-boost-row.cvb-is-break { background: #fef2f2; }
.chefvolo-boost-target {
  margin: 8px 0; padding: 4px 10px 8px; border: 1px solid #cbead6; border-radius: 5px;
  background: #f8fef9;
}
.chefvolo-boost-target > legend {
  padding: 0 6px; font-size: 12.5px; display: flex; align-items: baseline; gap: 8px;
}
.chefvolo-cand-row {
  display: block; padding: 4px 2px; cursor: pointer; font-size: 13px;
  border-top: 1px solid #e4f3ea;
}
.chefvolo-cand-row:first-of-type { border-top: none; }
.chefvolo-cand-row.cvb-is-break { background: #fef2f2; }
.chefvolo-cand-row.cvb-skip { opacity: .8; }
.cvb-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cvb-main input { margin: 0; }
.cvb-eq { font-weight: 600; }
.cvb-combo { color: #475569; font-size: 12px; }
.cvb-swap { flex: 1; min-width: 160px; }
.cvb-detail {
  margin: 3px 0 0 24px; font-size: 12px; color: #475569; line-height: 1.4;
  display: flex; align-items: baseline; gap: 6px;
}
.cvb-detail-break { color: #991b1b; }
.cvb-badge { font-size: 11.5px; padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.cvb-clean { background: #dcfce7; color: #166534; }
.cvb-soft  { background: #fef3c7; color: #92400e; }
.cvb-break { background: #fee2e2; color: #991b1b; }
.cvb-tier  { background: #ede9fe; color: #5b21b6; }
.chefvolo-boost-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chefvolo-boost-undo {
  margin: 8px 0 12px; padding: 6px 10px; font-size: 13px;
  background: #f1f5f9; border-left: 3px solid #94a3b8; border-radius: 4px;
}

/* Attentions injectées dans les popups de dépôt (drag&drop) */
.move-attentions {
  margin-top: .25rem; padding: 8px 10px;
  background: #fff8e8; border-left: 3px solid #e0b64a; border-radius: 4px;
}
.move-attentions-hd { font-weight: 600; font-size: 13px; color: #7c5a12; margin-bottom: 4px; }
.move-attentions-list { list-style: none; margin: 0; padding: 0; line-height: 1.5; }
.move-attentions-list li { font-size: 12.5px; margin: 2px 0; }
.move-attentions-list .matt-break { color: #991b1b; font-weight: 600; }
.move-attentions-list .matt-soft  { color: #475569; }
/* Tableau d'impact avant→après inséré dans l'encart d'attentions d'un popup de dépôt. */
.move-attentions .move-imp-det {
  background: #fff; border-radius: 4px; padding: 5px 8px; margin-top: 6px;
}
.move-attentions .move-imp-det > summary { cursor: pointer; color: #475569; font-weight: 600; font-size: 12.5px; }

/* Marqueur « volontaire » sur les cartes (étoile creuse dorée) et fiche */
.chef-badge.chef-volo { color: #c99700; opacity: .9; }
.eleve-card.is-chef-volo:not(.is-chef) { box-shadow: inset 3px 0 0 rgba(201, 151, 0, .55); }
.edit-chefvolo-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; }
.edit-chefvolo-check input { margin: 0; }