/* ==========================================================================
   Espace encadrant — port de reference-espace-prof.html dans la DA du produit.
   Une seule différence assumée avec la maquette : les noms sont remplacés par
   des identifiants courts, parce que le serveur ne connaît pas les noms.
   ========================================================================== */
.teacher-page{max-width:1180px;margin-inline:auto}
.teacher-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.teacher-head h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.05;letter-spacing:-.035em;max-width:20ch}
.teacher-head-detail{font-size:.95rem}
.teacher-head-actions{display:flex;flex-wrap:wrap;gap:10px}
.teacher-export,.teacher-invite-button{min-height:48px}

.teacher-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--color-border)}
.teacher-tab{
  min-height:44px;padding:10px 12px;border:none;border-bottom:2px solid transparent;
  background:none;color:var(--color-text);font-size:.95rem;font-weight:500;white-space:nowrap;cursor:pointer;
}
.teacher-tab[aria-selected="true"]{border-bottom-color:var(--color-accent);font-weight:600}
.teacher-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.teacher-stack{display:grid;gap:16px}
.teacher-columns{display:grid;gap:16px}
@media(min-width:900px){.teacher-columns{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}}
.teacher-panel{
  display:grid;gap:12px;padding:18px;border:1px solid var(--color-border);
  border-radius:18px;background:var(--color-surface);min-width:0;
}
.teacher-panel h2{font-size:1.1rem;letter-spacing:-.02em}
.teacher-panel-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.teacher-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.teacher-label.is-late{color:var(--color-error)}
.teacher-intro{font-size:.95rem;line-height:1.5}

.teacher-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.teacher-kpi{display:grid;gap:4px;padding:16px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface)}
.teacher-kpi-value{font-size:2.1rem;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.teacher-kpi-label{font-size:.88rem}
.teacher-kpi-detail{font-family:var(--font-mono);font-size:.66rem;line-height:1.4}
.teacher-kpi.is-alert .teacher-kpi-value{color:var(--color-error)}

.teacher-alerts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.teacher-alerts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--color-cream);font-size:.9rem;line-height:1.45}
.teacher-pill{
  display:inline-block;padding:3px 7px;border-radius:5px;white-space:nowrap;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.teacher-pill.is-ko{background:var(--color-error);color:var(--color-on-dark)}
.teacher-pill.is-warn{background:#8A6A2B;color:var(--color-on-dark)}
.teacher-pill.is-ok{background:var(--color-success);color:var(--color-on-dark)}

.teacher-bars{display:grid;gap:10px}
.teacher-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:.88rem}
.teacher-bar-value{font-family:var(--font-mono);font-size:.76rem;text-align:right}
.teacher-track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--color-cream);overflow:hidden}
.teacher-track i{display:block;height:100%;background:var(--color-accent)}
.teacher-assignment{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.teacher-assignment-corps{display:grid;gap:5px;min-width:0}

/* Carte de maîtrise : elle défile dans sa boîte, jamais la page. */
.teacher-matrix-box{overflow-x:auto;border:1px solid var(--color-border);border-radius:12px}
.teacher-matrix{border-collapse:separate;border-spacing:0;min-width:640px;width:100%}
.teacher-matrix th,.teacher-matrix td{padding:0;text-align:left}
.teacher-matrix thead th{
  padding:10px 4px 8px;background:var(--color-cream);border-bottom:1px solid var(--color-border);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;vertical-align:bottom;
}
.teacher-matrix thead th.teacher-matrix-skill{max-width:84px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.teacher-matrix tbody th{
  position:sticky;left:0;z-index:1;padding:8px 12px;background:var(--color-surface);
  border-bottom:1px solid var(--color-border);font-size:.82rem;font-weight:500;white-space:nowrap;
}
.teacher-cell{display:block;width:100%;height:26px;border-bottom:2px solid var(--color-surface)}
.teacher-matrix-progress{padding-right:12px;font-family:var(--font-mono);font-size:.76rem;text-align:right}
.teacher-legend{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:.66rem}
.teacher-legend span{display:inline-flex;align-items:center;gap:6px}
.teacher-legend i{width:14px;height:14px;border-radius:3px}

.teacher-list{display:grid;gap:6px}
.teacher-list-head{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto auto;gap:10px;padding:0 12px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.teacher-row{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto auto;gap:10px;align-items:center;
  min-height:56px;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);color:var(--color-text);text-align:left;cursor:pointer;
}
.teacher-row:hover{border-color:var(--color-accent)}
.teacher-row-name{font-size:.92rem;font-weight:500}
.teacher-mini{display:block;height:6px;margin-top:4px;border-radius:3px;background:var(--color-cream);overflow:hidden}
.teacher-mini i{display:block;height:100%;background:var(--color-accent)}

.teacher-block{display:grid;gap:10px;padding:18px;border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface)}
.teacher-block-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.teacher-block-question{font-size:.92rem;line-height:1.5}
.teacher-block-wrong{padding:10px 12px;border-radius:10px;background:var(--color-error-soft);font-size:.9rem}
.teacher-block-wrong small{display:block;font-family:var(--font-mono);font-size:.62rem;font-weight:600}

.teacher-sheet-head h2{font-size:1.5rem;letter-spacing:-.02em}
.teacher-view{display:block}
.teacher-status:empty{display:none}
.teacher-foot{font-size:.85rem;line-height:1.5}

/* Inviter : le code et le QR, pensés pour être projetés au fond de la salle. */
.teacher-invite{
  display:grid;gap:20px;align-items:center;padding:clamp(20px,4vw,32px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-cream);
}
/* Une seule colonne : il n'y a plus de QR à poser à côté du code. */
.teacher-invite-copy{display:grid;gap:10px}
.teacher-invite-copy h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;letter-spacing:-.03em}
.teacher-invite-code{
  font-family:var(--font-mono);font-size:clamp(2.4rem,7vw,4rem);font-weight:600;
  letter-spacing:.08em;line-height:1;overflow-wrap:anywhere;
}

.teacher-invite-help{font-size:.9rem;line-height:1.5;max-width:46ch}

.teacher-form{display:grid;gap:8px}
.teacher-form label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.teacher-form select,.teacher-form input{
  min-height:48px;padding:10px 12px;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-button);background:var(--color-surface);color:var(--color-text);font-size:.95rem;
}
.teacher-form button{margin-top:6px}
/* La liste des personnes à viser. Ce sont des noms, pas des étiquettes de
   formulaire : ni capitales, ni police à chasse fixe, et 44 px de haut pour
   qu'une case se coche au doigt. */
.teacher-choix-liste{display:grid;gap:2px;max-height:240px;overflow-y:auto;
  padding:6px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface)}
.teacher-form label.teacher-choix{display:flex;align-items:center;gap:10px;min-height:44px;
  padding:0 8px;border-radius:8px;cursor:pointer;
  font-family:var(--font-body);font-size:.92rem;font-weight:400;letter-spacing:0;text-transform:none}
.teacher-form label.teacher-choix:hover{background:var(--color-surface-high)}
.teacher-choix input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--color-accent)}

@media(max-width:620px){
  .teacher-list-head{display:none}
  .teacher-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
}

/* Espace responsable : la liste des groupes et leurs actions. */
.owner-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  min-height:56px;padding:12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);
}
.owner-row strong{display:block;font-size:.95rem}
.owner-row small{font-size:.78rem}
.owner-row-actions{display:flex;flex-wrap:wrap;gap:8px}
.owner-row-actions .text-button,.owner-row-actions a{min-height:44px;display:inline-flex;align-items:center}
.owner-create{max-width:420px}

/* L'entrée vers l'espace d'encadrement, depuis le profil. */
.space-switch{display:grid;gap:10px}
.space-switch h2{font-size:1.2rem}
.space-switch-actions{display:flex;flex-wrap:wrap;gap:10px}
.space-switch-actions .button{min-height:48px}
.owner-invites{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.owner-invites li{padding:10px 12px;border-radius:var(--radius-xs);background:var(--color-cream)}
.owner-invites strong{display:block;font-size:.92rem}
.owner-invites small{font-family:var(--font-mono);font-size:.72rem}

/* --- La barre des classes ------------------------------------------------
   Changer de classe, en créer une, renommer, archiver. Elle vit au-dessus des
   onglets : c'est le contexte de tout ce qui suit, pas une action de plus. */
.teacher-switch-bar{
  display:grid;gap:10px;padding:14px 16px;border-radius:16px;
  background:var(--surface-sunken,rgba(0,0,0,.035));
}
.teacher-switch{display:grid;gap:4px;min-width:0}
.teacher-switch-label{
  font-family:var(--font-mono,monospace);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.teacher-switch-select,.teacher-form-input{
  min-height:48px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid var(--border,rgba(0,0,0,.18));
  background:var(--surface,#fff);color:inherit;font:inherit;
}
.teacher-switch-select:focus-visible,.teacher-form-input:focus-visible{
  outline:2px solid var(--accent,#0a7);outline-offset:2px}
.teacher-switch-actions{display:flex;flex-wrap:wrap;gap:8px}
.teacher-switch-actions .button{min-height:44px}
.teacher-form{display:grid;gap:8px;padding-top:4px}
.teacher-form label{font-weight:600;font-size:.92rem}
.teacher-form-actions{display:flex;flex-wrap:wrap;gap:8px}
.teacher-form-actions .button{min-height:44px}
.teacher-form-erreur{margin:0;color:var(--danger,#b4232a);font-size:.9rem}
.teacher-form-archive p{margin:0;font-size:.95rem;line-height:1.5}

/* La porte vers la création de compte, pour qui arrive avec un code sans
   en avoir un. Les deux boutons sur une ligne dès qu'il y a la place. */
.join-sans-compte{gap:12px}
.join-sans-compte-actions{display:flex;flex-wrap:wrap;gap:10px}
.join-sans-compte-actions .button{min-height:48px;flex:1 1 12rem;justify-content:center}

/* ==========================================================================
   Les vues de classe, refaites pour un professeur.

   Trois contraintes, et elles décident de tout ce qui suit :

   1. LISIBLE SANS LÉGENDE À CHERCHER. Chaque case du tableau porte le MOT du
      niveau. La couleur confirme, elle n'informe jamais seule — un daltonien
      lit le mot, une photocopie garde la trame.
   2. QUARANTE-QUATRE ÉLÈVES. Le tableau défile dans sa propre boîte, l'en-tête
      et la colonne des noms restent collés. La page ne part jamais en largeur.
   3. PROJETÉ EN 1280×720. Les tailles ne descendent pas sous 13 px, et rien
      d'important ne dépend d'un survol.
   ========================================================================== */

/* --- À travailler en priorité -------------------------------------------- */
.teacher-priorites{border-left:4px solid var(--color-accent)}
.teacher-priorite-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.teacher-priorite{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-surface);
}
.teacher-priorite-rang{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--color-accent);color:var(--color-on-dark);
  font-family:var(--font-mono);font-weight:700;font-size:1rem;
}
.teacher-priorite-corps{display:grid;gap:8px;min-width:0}
.teacher-priorite-corps h3{margin:0;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
/* Le chiffre ET sa phrase : « 22 % » seul ne se lit pas. */
.teacher-priorite-chiffre{margin:0;font-size:.98rem;font-weight:600;line-height:1.45}
.teacher-priorite-detail{margin:0;font-size:.86rem;opacity:.8}
.teacher-priorite-erreur{
  margin:0;padding:10px 12px;border-radius:var(--radius-xs);
  background:var(--color-error-soft);color:var(--color-error-strong);
  font-size:.92rem;line-height:1.5;
}
.teacher-priorite-revele{
  margin:0;padding:10px 12px;border-radius:var(--radius-xs);
  background:var(--color-surface-high);font-size:.92rem;line-height:1.5;
}
.teacher-priorite-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.teacher-priorite-actions .button{min-height:44px}
.teacher-priorite-etat{font-size:.85rem;opacity:.85}
.teacher-track-large{height:10px}

/* --- Le tableau du positionnement ---------------------------------------- */
/* Il défile chez lui. Avec quarante-quatre élèves et sept colonnes, laisser
   la page porter le tableau la faisait partir en largeur sur un portable, et
   l'en-tête disparaissait au premier défilement. */
.teacher-table-box{
  overflow:auto;max-height:min(62vh,560px);
  border:1px solid var(--color-border-faint);border-radius:var(--radius-card);
  -webkit-overflow-scrolling:touch;
}
.teacher-pos-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
.teacher-pos-table th,.teacher-pos-table td{
  padding:6px 8px;border-bottom:1px solid var(--color-border-faint);text-align:left;
  vertical-align:middle;
}
/* L'en-tête reste à l'écran : on lit toujours de quelle colonne il s'agit. */
.teacher-pos-table thead th{
  position:sticky;top:0;z-index:2;background:var(--color-surface);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--color-border);
}
/* Et la colonne des noms aussi : à sept colonnes, on perd sinon QUI on lit. */
.teacher-pos-table tbody th[scope="row"]{
  position:sticky;left:0;z-index:1;background:var(--color-surface);
  min-width:11rem;max-width:16rem;font-weight:600;
}
.teacher-pos-table thead th:first-child{z-index:3;left:0}
.teacher-pos-row:nth-child(even) th[scope="row"],
.teacher-pos-row:nth-child(even) td{background:var(--color-surface-high)}

/* 44 px au minimum : ce sont des cibles tactiles, en-tête de tableau ou pas.
   Mesuré à 390 px, le doigt rate un en-tête de 34 px une fois sur trois. */
.teacher-tri{
  display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:2px 4px;
  border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;border-radius:6px;
}
.teacher-tri:hover{background:var(--color-accent-soft)}
.teacher-tri:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:1px}
.teacher-tri.is-actif{color:var(--color-accent-strong)}
.teacher-tri-fleche{opacity:.55;font-size:.7em}
.teacher-tri.is-actif .teacher-tri-fleche{opacity:1}

.teacher-pos-nom{
  display:inline-flex;align-items:center;min-height:44px;
  border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit;
  text-align:left;cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--color-border-strong);text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.teacher-pos-nom:hover{color:var(--color-accent-strong)}
.teacher-pos-nom:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px}

/* La case d'un bloc : le mot, puis le pourcentage. Jamais la couleur seule. */
.teacher-pos-cell{
  display:grid;align-content:center;gap:1px;width:100%;min-height:44px;padding:5px 8px;
  border:1px solid transparent;border-radius:8px;
  font:inherit;text-align:left;cursor:pointer;
}
.teacher-pos-cell:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:1px}
.teacher-pos-mot{font-size:.8rem;font-weight:650;line-height:1.15}
.teacher-pos-part{
  font-family:var(--font-mono);font-size:.68rem;font-variant-numeric:tabular-nums;opacity:.75;
}

/* Les quatre niveaux. Teintes séparées EN LUMINOSITÉ autant qu'en teinte, et
   chacune sa trame : la couleur ne décide jamais seule. */
.is-maitrise{background:#DCE7DD;color:#2C4432;border-color:#9FBCA6}
.is-en-cours{
  background:#F7EBD4;color:#5E4712;border-color:#D9BE85;
  background-image:repeating-linear-gradient(45deg,rgba(94,71,18,.09) 0 3px,transparent 3px 7px);
}
.is-a-construire{
  background:#F7DED3;color:#7A3518;border-color:#DCA98F;
  background-image:repeating-linear-gradient(-45deg,rgba(122,53,24,.12) 0 3px,transparent 3px 6px);
}
.is-non-evalue{
  background:var(--color-surface-high);color:#5C5852;border-color:var(--color-border);
  background-image:repeating-linear-gradient(90deg,rgba(92,88,82,.10) 0 2px,transparent 2px 8px);
}

.teacher-pos-idees,.teacher-pos-test,.teacher-pos-parcours{white-space:nowrap}
.teacher-pos-parcours{font-size:.85rem;white-space:normal;max-width:14rem}
.teacher-pos-incomplet{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--color-warning-soft);color:var(--color-warning);
  font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;
}
.teacher-pos-row.is-absent th[scope="row"]{opacity:.75}
.teacher-pos-absent{font-size:.88rem;opacity:.75;font-style:normal}

/* --- La légende, toujours à l'écran -------------------------------------- */
.teacher-legende{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:10px 12px;margin-bottom:10px;
  border:1px solid var(--color-border-faint);border-radius:var(--radius-card);
  background:var(--color-surface-high);font-size:.82rem;
}
.teacher-legende-titre{font-weight:650}
.teacher-legende-item{display:inline-flex;align-items:center;gap:6px;background:none}
.teacher-legende-item i{
  display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid;
}
.teacher-legende-item.is-maitrise i{background:#DCE7DD;border-color:#9FBCA6}
.teacher-legende-item.is-en-cours i{
  background:#F7EBD4;border-color:#D9BE85;
  background-image:repeating-linear-gradient(45deg,rgba(94,71,18,.3) 0 2px,transparent 2px 5px);
}
.teacher-legende-item.is-a-construire i{
  background:#F7DED3;border-color:#DCA98F;
  background-image:repeating-linear-gradient(-45deg,rgba(122,53,24,.35) 0 2px,transparent 2px 5px);
}
.teacher-legende-item.is-non-evalue i{
  background:var(--color-surface-high);border-color:var(--color-border);
  background-image:repeating-linear-gradient(90deg,rgba(92,88,82,.3) 0 2px,transparent 2px 6px);
}
.teacher-legende-aide{opacity:.8;flex:1 1 16rem;min-width:12rem}

/* --- Le détail d'un bloc -------------------------------------------------- */
.teacher-bloc-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.teacher-bloc-liste li{
  display:grid;gap:5px;padding:12px 14px;
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-surface);
}
.teacher-bloc-competence{font-weight:650;font-size:.98rem;line-height:1.35}
.teacher-bloc-chiffre{font-size:.88rem}

/* --- Points de blocage ---------------------------------------------------- */
.teacher-blocage{
  display:grid;gap:9px;padding:16px;
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-surface);
}
.teacher-blocage-tete{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
}
.teacher-blocage-tete h3{margin:0;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.teacher-blocage-chiffre{margin:0;font-weight:600;font-size:.98rem}
.teacher-blocage-etiquette{
  margin:0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;
  text-transform:uppercase;opacity:.75;
}
.teacher-blocage-texte{margin:2px 0 0;font-size:.95rem;line-height:1.55}
.teacher-blocage-enonce{margin:2px 0 4px;font-size:.95rem;line-height:1.55;font-weight:500}
.teacher-blocage-question{
  padding:12px 14px;border-radius:var(--radius-xs);background:var(--color-surface-high);
}
.teacher-blocage-mauvaise{
  padding:12px 14px;border-radius:var(--radius-xs);
  background:var(--color-error-soft);color:var(--color-error-strong);
}
.teacher-blocage-revele{
  padding:12px 14px;border-radius:var(--radius-xs);
  background:var(--color-warning-soft);color:var(--color-warning);
}
.teacher-blocage-bonne{
  padding:12px 14px;border-radius:var(--radius-xs);
  background:var(--color-success-soft);color:var(--color-success);
}

/* --- La liste des membres, à cinq colonnes -------------------------------- */
.teacher-list-head-5,.teacher-row-5{
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr) auto auto;
}
.teacher-niveau-cell{display:grid;gap:1px}
.teacher-niveau-mot{font-weight:650;font-size:.9rem}

@media(max-width:860px){
  .teacher-list-head-5{display:none}
  .teacher-row-5{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .teacher-priorite{grid-template-columns:1fr}
  .teacher-priorite-rang{width:28px;height:28px;font-size:.85rem}
}

/* Les colonnes de blocs : assez larges pour que « À construire » ne se brise
   pas en « À constr / uire ». Mesuré en 1280 px avec cinq blocs. */
.teacher-pos-table td:not(.teacher-pos-idees):not(.teacher-pos-test):not(.teacher-pos-parcours){
  min-width:7.5rem;
}
.teacher-pos-mot{overflow-wrap:normal;word-break:keep-all;hyphens:none}
/* La complétude et sa mention : sur deux lignes plutôt que coupées. */
.teacher-pos-test{white-space:normal;min-width:8.5rem}
.teacher-pos-incomplet{margin:2px 0 0 0;display:inline-block}

.teacher-blocage-suite{
  padding:12px 16px;border:1px solid var(--color-border);
  border-radius:var(--radius-card);background:var(--color-surface);
}
.teacher-blocage-suite>summary{
  cursor:pointer;font-weight:650;min-height:40px;display:flex;align-items:center;
}
.teacher-blocage-suite>summary:focus-visible{
  outline:2px solid var(--color-accent-strong);outline-offset:2px}
.teacher-blocage-suite[open]>summary{margin-bottom:10px}

/* ============================ ONGLET TRAVAIL ============================
   Ce que la classe a fait DANS l'application. Le test de positionnement a sa
   propre partie. Composant : js/screens/teacherClasse.js (section D). */
.travail-lecon{padding:18px 0;border-top:1px solid var(--color-border)}
.travail-lecon:first-child{border-top:none;padding-top:0}
.travail-lecon-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.travail-lecon-head h3{font-size:1rem;font-weight:650;margin:0}
.travail-personnes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.travail-personnes li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding:9px 0;border-top:1px solid var(--color-border-soft,var(--color-border))}
.travail-personnes li:first-child{border-top:none}

.chrono{list-style:none;margin:0;padding:0;display:grid;gap:0}
.chrono-entree{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--color-border)}
.chrono-entree:first-child{border-top:none}
.chrono-date{font-family:var(--font-mono,monospace);font-size:.8rem;color:var(--color-text-soft,var(--color-copy));padding-top:2px;white-space:nowrap}
.chrono-quoi{display:grid;gap:3px;min-width:0}
.chrono-entree.is-test .chrono-date{color:var(--color-accent)}
.chrono-entree.is-test{background:var(--color-accent-soft);border-radius:8px;padding-left:12px;padding-right:12px}

.travail-ratee{padding:16px 0;border-top:1px solid var(--color-border)}
.travail-ratee:first-child{border-top:none;padding-top:0}
.ratee-lecon{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-soft,var(--color-copy));margin:0 0 8px}
.ratee-enonce{margin:0 0 12px;line-height:1.5}
.ratee-choisi,.ratee-bonne{display:grid;gap:2px;margin:0 0 8px;padding-left:12px;border-left:2px solid var(--color-border)}
.ratee-choisi{border-left-color:var(--color-error,#b4443a)}
.ratee-bonne{border-left-color:var(--color-accent)}
.ratee-pourquoi{margin:10px 0 0;font-size:.87rem;color:var(--color-text-soft,var(--color-copy));line-height:1.55}

@media (max-width:620px){
  .chrono-entree{grid-template-columns:1fr;gap:4px}
  .travail-personnes li,.travail-lecon-head{flex-direction:column;align-items:flex-start}
}

/* ============================ ONGLET SUIVI ============================
   Six sections repliables. Le tri, les filtres et la recherche vivent dans
   l'écran : le tableau garde sa place et son focus.
   Composant : js/screens/teacherSuivi.js */
.suivi-fraicheur{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-size:.84rem;color:var(--color-copy)}
.suivi-sec{border:1px solid var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface);overflow:hidden}
.suivi-sec>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;gap:12px;font-weight:650;font-size:.98rem}
.suivi-sec>summary::-webkit-details-marker{display:none}
.suivi-sec>summary::before{content:"▾";font-size:.78rem;color:var(--color-copy);transition:transform .15s}
.suivi-sec:not([open])>summary::before{transform:rotate(-90deg)}
.suivi-sec>summary .compte{margin-left:auto;font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-copy);font-weight:400}
.suivi-corps{padding:4px 18px 18px;border-top:1px solid var(--color-border)}
.suivi-phrase{margin:10px 0 0;font-size:1rem;line-height:1.6;max-width:72ch}

.suivi-outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 12px}
.suivi-champ{width:auto;flex:0 0 auto;max-width:230px;padding:8px 11px;border:1px solid var(--color-border-strong);border-radius:9px;background:var(--color-surface);font:inherit;font-size:.86rem}
.suivi-champ[type=search]{min-width:170px}

.suivi-tbl{border:1px solid var(--color-border);border-radius:10px;overflow:auto;max-height:440px}
.suivi-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:900px}
.suivi-table th{position:sticky;top:0;z-index:2;background:var(--color-surface-high);text-align:left;font-family:var(--font-mono,monospace);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-copy);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--color-border-strong);white-space:nowrap}
.suivi-table td{padding:9px 12px;border-bottom:1px solid var(--color-border);vertical-align:top}
.suivi-table tr:hover td{background:var(--color-surface-high)}
.suivi-table td:first-child,.suivi-table th:first-child{min-width:140px}
.suivi-nom{border:0;background:none;padding:0;font:inherit;font-weight:650;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.suivi-nom:hover{color:var(--color-accent)}
.suivi-ou span{display:block;line-height:1.35}
.suivi-ou small{display:block;color:var(--color-copy);font-size:.78rem;margin-top:2px}
.suivi-doux{font-size:.82rem;color:var(--color-copy);line-height:1.4}
.suivi-avance{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.suivi-avance:last-child{margin-bottom:0}
.suivi-avance .piste{flex:0 0 52px;height:5px;border-radius:9px;background:var(--color-track,#e7e2d8);overflow:hidden}
.suivi-avance .piste i{display:block;height:100%;background:var(--color-accent)}
.suivi-signal{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.73rem;border:1px solid var(--color-border-strong);white-space:nowrap;margin:0 0 3px}
.suivi-signal.is-rouge{border-color:var(--color-error,#b4443a);color:var(--color-error-strong,#8c3229)}
.suivi-signal.is-ocre{border-color:var(--color-accent);background:var(--color-accent-soft)}

.suivi-parcours{padding:14px 0;border-top:1px solid var(--color-border)}
.suivi-parcours:first-child{border-top:none;padding-top:10px}
.suivi-parcours h3{margin:0 0 4px;font-size:.96rem}
.suivi-bloque{margin:8px 0 0;font-size:.86rem;line-height:1.5;color:var(--color-copy)}

.suivi-fil{list-style:none;margin:12px 0 0;padding:0}
.suivi-fil li{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--color-border)}
.suivi-fil li:first-child{border-top:none}
.suivi-fil .q{font-family:var(--font-mono,monospace);font-size:.74rem;color:var(--color-copy);white-space:nowrap;padding-top:2px}
.suivi-fil .t{line-height:1.45;font-size:.88rem}

/* La liste nommée des inactifs, dépliée depuis le résumé. */
.suivi-inactifs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.suivi-inactifs li{font-size:.86rem}

/* Section C : où en est la classe, module par module. */
.suivi-repart{display:flex;gap:3px;margin:10px 0 2px;height:26px}
.suivi-repart div{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--color-on-dark);background:var(--color-accent);white-space:nowrap;overflow:hidden;padding:0 6px}
.suivi-repart div.est-vide{background:var(--color-surface-high);color:var(--color-copy);border:1px solid var(--color-border)}
.suivi-legende{font-size:.78rem;color:var(--color-copy);margin:2px 0 0}

/* Section D : la pagination du fil. */
.suivi-plus{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}

/* Section F : la fiche d'un élève. */
.fiche-parcours{padding:10px 0 4px;border-top:1px solid var(--color-border)}
.fiche-parcours:first-of-type{border-top:none}
.fiche-mod{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.85rem}
.fiche-mod .piste{flex:0 0 70px;height:5px;border-radius:9px;background:var(--color-track,#e7e2d8);overflow:hidden}
.fiche-mod .piste i{display:block;height:100%;background:var(--color-accent)}
.fiche-devoirs{list-style:none;margin:10px 0 0;padding:0}
.fiche-devoirs li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--color-border);font-size:.88rem}
.fiche-devoirs li:first-child{border-top:none}

@media (max-width:620px){
  .suivi-fil li{grid-template-columns:1fr;gap:3px}
  .suivi-champ[type=search]{flex:1 1 100%;max-width:none}
  .suivi-sec>summary .compte{display:none}
  .suivi-repart{height:auto;flex-direction:column;gap:4px}
  .suivi-repart div{height:24px;justify-content:flex-start}
  .fiche-mod{align-items:flex-start}
}
/* L'association d'un résultat « sans compte » à un élève. Deux noms côte à
   côte, parce que c'est la seule chose qui permette de décider sans se
   tromper de personne. */
.teacher-assoc-ligne td{padding:0}
.teacher-assoc-cellule:empty{display:none}
.teacher-assoc-cellule>.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.teacher-assoc-panneau{display:grid;gap:10px;padding:14px;background:var(--color-surface-high)}
.teacher-assoc-panneau select{min-height:44px;padding:0 10px;border:1px solid var(--color-border-strong);
  border-radius:10px;background:var(--color-surface);font:inherit}
.teacher-assoc-apercu{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:0;font-size:.92rem;line-height:1.5}
.teacher-assoc-fleche{color:var(--color-accent-strong)}
.teacher-assoc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.teacher-assoc-actions .button{min-height:44px}
.teacher-assoc-journal{margin-top:18px;padding-top:14px;border-top:1px solid var(--color-border)}
.teacher-assoc-journal h3{margin:0 0 8px;font-size:1rem}
.teacher-assoc-journal ul{list-style:none;margin:0;padding:0}
.teacher-assoc-journal li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:9px 0;border-top:1px solid var(--color-border-faint);font-size:.92rem}
.teacher-assoc-journal li:first-child{border-top:0}