/* portal/admin.css — le dashboard PROF, par-dessus chrome.css (couche 6).
   Le prof est le miroir de l'élève : on réutilise TOUT le chrome (`shell-*`) et les composants
   (`edu-*`), et on n'ajoute ICI que les contrôles propres au prof (sélecteur de classe, table
   roster, badge de rôle). Namespacé `adm-*` — aucun re-style des `.shell-*`/`.edu-*`. */

/* ---- badge de rôle dans le brand ---- */
.adm-role {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--edu-accent-ink); background: var(--edu-accent-soft);
  padding: 2px 8px; border-radius: var(--edu-pill);
}

/* ---- sélecteur de classe (<details> natif, zéro JS) ---- */
.adm-classpick { padding: 0; }
.adm-classpick summary {
  list-style: none; cursor: pointer; padding: 12px; position: relative;
  border-radius: var(--edu-radius);
}
.adm-classpick summary::-webkit-details-marker { display: none; }
.adm-classpick summary:hover { background: var(--edu-surface); }
.adm-chev { position: absolute; right: 12px; top: 12px; color: var(--edu-faint); transition: transform .15s; }
.adm-classpick[open] .adm-chev { transform: rotate(180deg); }
.adm-class-menu { border-top: 1px solid var(--edu-border); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.adm-class-opt {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--edu-radius-sm);
  color: var(--edu-text); transition: background .12s;
}
.adm-class-opt:hover { background: var(--edu-surface); }
.adm-class-opt.is-active { background: var(--edu-accent-soft); }
.adm-class-opt-name { font-weight: 600; font-size: 13.5px; }
.adm-class-opt-meta { font-size: 11px; color: var(--edu-muted); }
.adm-hint { font-size: 12px; color: var(--edu-muted); margin-top: 6px; line-height: 1.4; }
.adm-hint code, .shell-empty code {
  font-family: var(--edu-font-mono); font-size: 11.5px; background: var(--edu-surface-2);
  padding: 1px 5px; border-radius: 4px;
}

/* ---- nav désactivée (aucune classe sélectionnée) ---- */
.shell-nav-link.is-disabled { opacity: .4; pointer-events: none; }

/* ---- page AUTONOME (hors chrome) ----
   Les écrans qui n'appartiennent à AUCUNE session — la réserve (Atelier), l'équipe, l'instance —
   ne peuvent pas entrer dans la sidebar (ses URLs sont scopées à une classe) : ils sont des pages
   nues. Sans conteneur, elles collent au bord gauche (base.css remet `* { margin: 0 }`) : UN seul
   ici, ⛔ pas une copie par page. Chaque page garde SA largeur si elle en veut une autre — sa
   règle vient plus tard dans la cascade (style en ligne) et gagne. */
.adm-page { max-width: 980px; margin: 32px auto; padding: 0 20px; }
@media (max-width: 620px) { .adm-page { margin: 18px auto; padding: 0 14px; } }

/* ---- actions rapides (accueil classe) ---- */
.adm-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- table roster ---- */
.adm-roster { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-roster thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--edu-faint); padding: 0 12px 8px; border-bottom: 1px solid var(--edu-border);
}
.adm-roster tbody td { padding: 11px 12px; border-bottom: 1px solid var(--edu-border); vertical-align: middle; }
.adm-roster tbody tr:hover { background: var(--edu-surface); }
.adm-r-name { font-weight: 600; }
.adm-r-email { color: var(--edu-muted); }
.adm-none { color: var(--edu-faint); }
.adm-r-act { text-align: right; white-space: nowrap; }

.adm-code {
  font-family: var(--edu-font-mono); font-size: 13.5px; letter-spacing: .14em;
  background: var(--edu-surface-2); border: 1px solid var(--edu-border); border-radius: var(--edu-radius-sm);
  padding: 3px 9px;
}
.adm-reveal {
  margin-left: 8px; font-size: 11.5px; color: var(--edu-accent-ink); font-weight: 600;
  background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.adm-r-act form { margin-left: 4px; }
.adm-danger { color: var(--edu-danger); }
.adm-danger:hover { background: color-mix(in srgb, var(--edu-danger) 12%, transparent); }

/* ---- formulaire d'ajout d'élève ---- */
.adm-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-add-in {
  padding: 8px 11px; border: 1px solid var(--edu-border-strong); border-radius: var(--edu-radius-sm);
  background: var(--edu-surface-2); font-size: 14px; font-family: var(--edu-font-ui);
}
.adm-add-in:focus { border-color: var(--edu-accent); background: var(--edu-surface); }
.adm-add-in[name="nom"] { flex: 1 1 180px; }
.adm-add-in[name="email"] { flex: 1 1 200px; }

@media (max-width: 860px) {
  .adm-roster, .adm-roster thead, .adm-roster tbody, .adm-roster tr, .adm-roster td, .adm-roster th { display: block; }
  .adm-roster thead { display: none; }
  .adm-roster tbody tr { border: 1px solid var(--edu-border); border-radius: var(--edu-radius); margin-bottom: 10px; padding: 4px; }
  .adm-roster tbody td { border: none; padding: 6px 10px; }
  .adm-r-act { text-align: left; }
}

/* ---- Diffusion : cartes lien + QR ---- */
.adm-diff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.adm-diff-card {
  display: flex; gap: 12px; align-items: center; padding: 12px;
  border: 1px solid var(--edu-border); border-radius: var(--edu-radius); background: var(--edu-surface);
}
.adm-diff-qr { flex: none; width: 68px; height: 68px; background: #fff; border-radius: 8px; padding: 4px; display: grid; place-items: center; }
.adm-diff-qr svg { width: 100%; height: 100%; display: block; }
.adm-diff-body { min-width: 0; flex: 1; }
.adm-diff-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.adm-diff-linkrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.adm-diff-link {
  flex: 1; min-width: 0; font-family: var(--edu-font-mono); font-size: 11px; color: var(--edu-muted);
  padding: 5px 8px; border: 1px solid var(--edu-border); border-radius: var(--edu-radius-sm); background: var(--edu-surface-2);
}
.adm-diff-print { font-size: 12.5px; font-weight: 600; color: var(--edu-accent-ink); }

/* ---- Inscription : le code de session, dictable et projetable ---- */
/* Tokens `--edu-*` uniquement (theme-aware clair ET sombre par héritage). Aucun re-style .edu-*. */
.adm-enroll-grid { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.adm-enroll-main { flex: 1; min-width: 260px; }
.adm-enroll-k {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--edu-muted); margin-bottom: 6px;
}
.adm-enroll-coderow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-enroll-code {
  font-family: var(--edu-font-mono); font-size: 34px; font-weight: 700; line-height: 1.1;
  letter-spacing: .12em; color: var(--edu-accent-ink); padding: 8px 16px;
  border: 1px solid var(--edu-border); border-radius: var(--edu-radius);
  background: var(--edu-surface-2); user-select: all;
}
.adm-enroll-code--inline { font-size: 15px; padding: 2px 8px; letter-spacing: .08em; }
.adm-enroll-cap { margin-top: 8px; font-size: 13px; color: var(--edu-muted); }
.adm-enroll-hint { margin-top: 10px; font-size: 12.5px; color: var(--edu-muted); }
.adm-enroll-qr { flex: none; width: 132px; height: 132px; background: #fff; border-radius: 10px; padding: 8px; }
.adm-enroll-qr svg { width: 100%; height: 100%; display: block; }
.adm-enroll-line { margin-bottom: 14px; }
/* Le bouton d'état de la porte (ouvertes / fermées) — l'état à gauche, l'action à droite. */
.adm-enroll-toggle {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--edu-border); border-radius: var(--edu-radius);
  background: var(--edu-surface-2);
}
.adm-enroll-state { font-size: 13px; font-weight: 600; color: var(--edu-text); }
.adm-enroll-toggle button { margin-left: auto; }

/* ---- Fiche imprimable (« PDF par élève ») ---- */
.adm-print-body { background: var(--edu-surface-2); padding: 24px; }
.adm-print-bar { max-width: 620px; margin: 0 auto 18px; display: flex; justify-content: flex-end; }
.adm-fiche {
  max-width: 620px; margin: 0 auto 24px; background: #fff; color: #1e1b2e;
  border: 1px solid #e5e2ee; border-radius: 16px; padding: 40px; text-align: center;
  box-shadow: var(--edu-shadow); break-inside: avoid;
}
.adm-fiche-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8b5cf6; }
.adm-fiche-class { font-family: var(--edu-font-display); font-size: 15px; color: #6b6580; margin-top: 4px; }
.adm-fiche-name { font-family: var(--edu-font-display); font-size: 28px; font-weight: 700; margin: 6px 0 20px; }
.adm-fiche-qr { display: grid; place-items: center; margin: 0 auto 20px; }
.adm-fiche-qr svg { width: 220px; height: 220px; }
.adm-fiche-code { font-size: 18px; margin-bottom: 8px; }
.adm-fiche-code b { font-family: var(--edu-font-mono); letter-spacing: .18em; font-size: 22px; }
.adm-fiche-link { font-family: var(--edu-font-mono); font-size: 12px; color: #6b6580; word-break: break-all; margin-bottom: 16px; }
.adm-fiche-hint { font-size: 12.5px; color: #6b6580; line-height: 1.5; max-width: 380px; margin: 0 auto; }

@media print {
  .adm-print-bar { display: none; }
  .adm-print-body { background: #fff; padding: 0; }
  .adm-fiche { border: none; box-shadow: none; margin: 0; page-break-after: always; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
  .adm-fiche:last-child { page-break-after: auto; }
}

/* ---- Planche 6-up (cartes compactes à découper) ---- */
.adm-planche {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 900px; margin: 0 auto;
}
.adm-fiche--sm { max-width: none; margin: 0; padding: 22px; }
.adm-fiche--sm .adm-fiche-qr { margin-bottom: 12px; }
.adm-fiche--sm .adm-fiche-qr svg { width: 120px; height: 120px; }
.adm-fiche--sm .adm-fiche-name { font-size: 19px; margin: 4px 0 12px; }
.adm-fiche--sm .adm-fiche-code { font-size: 15px; }
.adm-fiche--sm .adm-fiche-code b { font-size: 18px; }
.adm-fiche--sm .adm-fiche-link { font-size: 10.5px; margin-bottom: 0; }

@media print {
  .adm-planche { gap: 6mm; max-width: none; }
  /* Après les règles print de .adm-fiche : surcharge pour tenir 2×3 par page A4. */
  .adm-fiche--sm {
    min-height: 82mm; height: 82mm; margin: 0; padding: 6mm;
    page-break-after: auto; break-inside: avoid; page-break-inside: avoid;
    border: 1px dashed #b9b4c8; border-radius: 10px;
    justify-content: center;
  }
}

/* ---- Roster : lien nom + badge fiche ---- */
.adm-r-link { font-weight: 600; color: var(--edu-text); text-decoration: none; }
.adm-r-link:hover { color: var(--edu-accent-ink); text-decoration: underline; }
.adm-fiche-ok { color: var(--edu-ok); font-size: 11px; }
.adm-fiche-no { color: var(--edu-faint); font-size: 11px; }

/* ---- Fiche de renseignement : en-tête du détail élève ----
   (le FORMULAIRE lui-même = composant partagé `fiche-*` dans core/ui/components.css) */
.adm-detail-head { margin-bottom: 18px; }
.adm-detail-name { font-family: var(--edu-font-display); font-size: 22px; font-weight: 700; }
.adm-detail-code { font-family: var(--edu-font-mono); font-size: 12px; color: var(--edu-muted); }

/* ---- Parcours : timeline verticale (colonne vertébrale) ---- */
.adm-tl-intro { color: var(--edu-muted); font-size: 13.5px; margin-bottom: 16px; line-height: 1.5; }
.adm-tl { list-style: none; position: relative; padding-left: 0; }
.adm-tl::before {                 /* le rail vertical */
  content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--edu-border);
}
.adm-tl-item { display: grid; grid-template-columns: 104px 28px 1fr; align-items: start; margin-bottom: 12px; }
.adm-tl-when { text-align: right; padding-top: 10px; padding-right: 6px; }
.adm-tl-date { font-size: 12.5px; font-weight: 600; }
.adm-tl-slot { font-family: var(--edu-font-mono); font-size: 11px; color: var(--edu-muted); }
.adm-tl-dot {
  width: 12px; height: 12px; border-radius: var(--edu-pill); margin: 12px auto 0; z-index: 1;
  background: var(--edu-accent); border: 2px solid var(--edu-bg);
}
.adm-tl-block {
  background: var(--edu-surface); border: 1px solid var(--edu-border); border-left: 3px solid var(--edu-accent);
  border-radius: var(--edu-radius); padding: 11px 14px;
}
.adm-tl-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--edu-muted); }
.adm-tl-title { font-weight: 600; font-size: 14.5px; margin: 1px 0 3px; }
.adm-tl-meta { font-size: 12px; color: var(--edu-muted); }
/* teintes de module (couleurs natives : cours=violet, evals=bleu, depots=ambre) */
.adm-tl--cours  .adm-tl-block { border-left-color: var(--edu-cours); }
.adm-tl--cours  .adm-tl-dot   { background: var(--edu-cours); }
.adm-tl--evals  .adm-tl-block { border-left-color: var(--edu-evals); }
.adm-tl--evals  .adm-tl-dot   { background: var(--edu-evals); }
.adm-tl--depots .adm-tl-block { border-left-color: var(--edu-depots); }
.adm-tl--depots .adm-tl-dot   { background: var(--edu-depots); }

@media (max-width: 640px) {
  .adm-tl::before { left: 6px; }
  .adm-tl-item { grid-template-columns: 14px 1fr; }
  .adm-tl-when { grid-column: 2; text-align: left; padding: 0 0 2px; }
  .adm-tl-dot { grid-row: 1 / span 2; margin: 6px 0 0; }
  .adm-tl-block { grid-column: 2; }
}

/* ---- Parcours : éditeur vertical drag-drop (P2) ---- */
.adm-pc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-pc-hint { font-size: 12px; color: var(--edu-muted); }
.adm-pc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.adm-pc-empty {
  border: 1px dashed var(--edu-border-strong); border-radius: var(--edu-radius);
  padding: 22px; text-align: center; color: var(--edu-muted); font-size: 13.5px;
}
.adm-pc-card {
  background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-left: 3px solid var(--edu-accent); border-radius: var(--edu-radius);
  padding: 10px 12px; box-shadow: var(--edu-shadow-sm);
}
.adm-pc-card.is-drag { opacity: .55; box-shadow: var(--edu-shadow-lg); }
.adm-pc-card--off { border-left-color: var(--edu-border-strong); background: var(--edu-surface-2); }
.adm-pc-card--off .adm-pc-label { color: var(--edu-muted); }
.adm-pc-head { display: flex; align-items: center; gap: 8px; }
.adm-pc-grip { cursor: grab; color: var(--edu-faint); font-size: 16px; user-select: none; padding: 0 2px; }
.adm-pc-grip:active { cursor: grabbing; }
.adm-pc-label {
  flex: 1; min-width: 80px; font-weight: 600; font-size: 14.5px; color: var(--edu-text);
  border: 1px solid transparent; background: transparent; border-radius: var(--edu-radius-sm);
  padding: 4px 6px; font-family: var(--edu-font-ui);
}
.adm-pc-label:hover { border-color: var(--edu-border); }
.adm-pc-label:focus { border-color: var(--edu-accent); background: var(--edu-bg); outline: none; }
.adm-pc-when { font-family: var(--edu-font-mono); font-size: 11px; color: var(--edu-muted); white-space: nowrap; }
.adm-pc-noanchor { font-style: italic; color: var(--edu-faint); }
.adm-pc-active { font-size: 12px; color: var(--edu-muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.adm-pc-pin, .adm-pc-del {
  border: 1px solid var(--edu-border); background: var(--edu-bg); border-radius: var(--edu-radius-sm);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 5px 7px; color: var(--edu-muted);
}
.adm-pc-pin.is-on { background: var(--edu-accent-soft); border-color: var(--edu-accent); filter: none; }
.adm-pc-pin:not(.is-on) { filter: grayscale(1) opacity(.6); }
.adm-pc-del:hover { border-color: var(--edu-danger); color: var(--edu-danger); }
.adm-pc-etapes { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.adm-pc-etape { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 24px; }
.adm-pc-noetape { padding: 4px 6px 4px 24px; font-size: 12px; color: var(--edu-faint); font-style: italic; }
.adm-pc-etype {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--edu-pill); background: var(--edu-cours-bg); color: var(--edu-cours);
}
.adm-pc-etype--quiz { background: var(--edu-evals-bg); color: var(--edu-evals); }
.adm-pc-etype--folder, .adm-pc-etype--media { background: var(--edu-depots-bg); color: var(--edu-depots); }
.adm-pc-eid { flex: 1; font-family: var(--edu-font-mono); font-size: 12px; color: var(--edu-text); overflow-wrap: anywhere; }
.adm-pc-elabel { flex: 1; font-size: 13px; color: var(--edu-text); overflow-wrap: anywhere; }
.adm-pc-elabel--missing { color: var(--edu-faint); font-style: italic; }
.adm-pc-pub {
  font-size: 12px; padding: 3px 6px; border-radius: var(--edu-radius-sm);
  border: 1px solid var(--edu-border); background: var(--edu-bg); color: var(--edu-text);
}
.adm-pc-pub--publie { border-color: var(--edu-ok); color: var(--edu-ok); }
.adm-pc-pub--programme { border-color: var(--edu-warn); color: var(--edu-warn); }
.adm-pc-edel {
  border: none; background: transparent; cursor: pointer; color: var(--edu-faint); font-size: 12px; padding: 3px 5px;
}
.adm-pc-edel:hover { color: var(--edu-danger); }
.adm-pc-attach { display: flex; align-items: center; gap: 6px; margin: 9px 0 2px; padding-left: 24px; flex-wrap: wrap; }
.adm-pc-attach select {
  flex: 1; min-width: 160px; max-width: 480px;
  font-size: 12.5px; padding: 5px 7px; border-radius: var(--edu-radius-sm);
  border: 1px solid var(--edu-border); background: var(--edu-bg); color: var(--edu-text);
}
.adm-pc-nocontent { font-size: 12px; color: var(--edu-faint); font-style: italic; }
.adm-pc-nocontent code { font-style: normal; font-family: var(--edu-font-mono); font-size: 11px; }
.adm-pc-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--edu-text); color: var(--edu-bg); padding: 10px 18px; border-radius: var(--edu-pill);
  font-size: 13px; box-shadow: var(--edu-shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 50;
}
.adm-pc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Panneau « Documents » (publication hors parcours) — layout fonctionnel, tokens natifs.
   Polish visuel fin -> [GRAPHISME] (ticket au BACKLOG). */
.adm-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius); padding: 10px 14px; box-shadow: var(--edu-shadow-sm);
}
.adm-doc-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.adm-doc-label { font-weight: 600; font-size: 14.5px; color: var(--edu-text); overflow-wrap: anywhere; }
.adm-doc-zone {
  font-family: var(--edu-font-mono); font-size: 10.5px; letter-spacing: .03em;
  color: var(--edu-muted); text-transform: uppercase;
}
.adm-doc-ctrl { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.adm-doc-badge { font-size: 12px; color: var(--edu-muted); }
.adm-doc-badge.is-on { color: var(--edu-ok); font-weight: 600; }

@media (max-width: 640px) {
  .adm-pc-head { flex-wrap: wrap; }
  .adm-pc-label { flex-basis: 100%; order: -1; }
  .adm-doc-row { flex-direction: column; align-items: stretch; }
  .adm-doc-ctrl { justify-content: space-between; }
}

/* Interrupteur antenne/vitrine dans le pied de sidebar (CONTROL_PLANE_MODEL §2). */
/* ⚑ **L'INTERRUPTEUR D'ANTENNE N'A PLUS DE STYLE À LUI** (23/08, unification de la barre). Il était
   un bandeau à deux lignes (état gris + pastille cernée) : c'était la **seconde langue** que Gabriel
   a relevée le 22/08. Il est devenu **une rangée plate** comme le reste de la barre — l'emoji dit
   l'état, le libellé dit l'action, `.shell-nav-badge` écrit l'état en toutes lettres.
   ⛔ **Ces trois règles ont été SUPPRIMÉES, pas neutralisées** : `display: contents` sur le `<form>`
   (`chrome.css`) les rendait déjà sans effet, et un style mort qui décrit un filet inexistant fait
   raisonner faux le prochain qui lit la feuille. La classe `adm-antenne` reste sur le `<form>` :
   c'est la prise qui le désigne, ⛔ plus un porteur de style. */

/* Mode STUDIO LOCAL (ticket studio-local) — bandeau permanent + 2 boutons dans le pied de sidebar.
   Local-only (rendu vide en conteneur). Namespacé adm-studio-*, tokens natifs, aucun re-style. */
.adm-studio {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0; margin: 2px 0; border-top: 1px solid var(--edu-border);
}
.adm-studio-band { display: flex; flex-direction: column; gap: 3px; }
.adm-studio-line { font-size: 11.5px; color: var(--edu-faint); display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.adm-studio-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--edu-muted); }
.adm-studio-line code { font-family: var(--edu-font-mono); font-size: 11px; color: var(--edu-muted); }
.adm-studio-ok { color: var(--edu-ok); font-weight: 600; }
.adm-studio-warn { color: var(--edu-warn); font-weight: 600; }
.adm-studio-ko { color: var(--edu-danger); font-weight: 600; }
.adm-studio-muted { color: var(--edu-muted); }
.adm-studio-actions { display: flex; flex-direction: column; gap: 5px; }
.adm-studio-actions button { width: 100%; }
.adm-studio-note { font-size: 11.5px; color: var(--edu-faint); font-style: italic; }
.adm-studio-msg {
  font-size: 11.5px; line-height: 1.45; color: var(--edu-text);
  background: color-mix(in srgb, var(--edu-warn) 10%, var(--edu-surface-2));
  border: 1px solid var(--edu-warn); border-radius: var(--edu-radius-sm); padding: 7px 9px;
}
.adm-studio-conflit { margin-top: 2px; }
.adm-studio-warnbox .adm-studio-actions { margin-top: 2px; }
.adm-studio-warnbox p { margin: 0; }
.adm-studio-warnbox {
  font-size: 11.5px; line-height: 1.5; color: var(--edu-text);
  background: color-mix(in srgb, var(--edu-danger) 9%, var(--edu-surface-2));
  border: 1px solid var(--edu-danger); border-radius: var(--edu-radius-sm);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
}
.adm-studio-warnbox button { width: 100%; }
.adm-studio-out {
  font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: var(--edu-surface-2); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius-sm); padding: 8px 10px; margin: 0; max-height: 220px; overflow: auto;
  font-family: var(--edu-font-mono); color: var(--edu-muted);
}

/* ---- L'ÉCRAN DE RELECTURE = L'ÉCRAN D'ENVOI (T3c, D13) — namespace `envoi-*` -------------------
   Un seul écran, une seule colonne, un seul bouton en bas. Rien que des tokens `--edu-*` : le
   thème clair ET le sombre suivent par construction, aucune couleur en dur. */
.envoi {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 780px; margin: 0 auto;
}
.envoi-tete {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius); padding: 12px 14px;
}
.envoi-kv { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: start; }
.envoi-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--edu-muted); padding-top: 6px;
}
.envoi-v { font-size: 13px; color: var(--edu-text); display: flex; flex-direction: column; gap: 3px; }
/* La valeur reste UN item de la colonne : sans elle, chaque <b> — et jusqu'au séparateur
   « · » — devenait une ligne à part (vu à l'écran sur la liste des copies). */
.envoi-val { display: block; line-height: 1.5; word-break: break-word; }
.envoi-v b { font-weight: 600; }
.envoi-vide { color: var(--edu-faint); font-style: italic; }
.envoi-hint { font-size: 11.5px; line-height: 1.45; color: var(--edu-faint); }

.envoi-f { display: flex; flex-direction: column; gap: 5px; }
.envoi-in {
  width: 100%; font: inherit; font-size: 13px; color: var(--edu-text);
  background: var(--edu-surface); border: 1px solid var(--edu-border-strong);
  border-radius: var(--edu-radius-sm); padding: 8px 10px;
}
.envoi-in::placeholder { color: var(--edu-faint); }
.envoi-in:focus {
  outline: 2px solid var(--edu-accent); outline-offset: 1px; border-color: var(--edu-accent);
}
.envoi-corps {
  font-family: var(--edu-font-ui); line-height: 1.55; resize: vertical; min-height: 260px;
}

/* Les pièces jointes : le NOM et la TAILLE. Une pièce à 0 o se signale (danger), c'est tout
   l'intérêt de l'afficher avant le clic. */
.envoi-pjs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.envoi-pj { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.envoi-pj-t { font-size: 11.5px; color: var(--edu-muted); font-family: var(--edu-font-mono); }
.envoi-pj.is-vide .envoi-pj-t { color: var(--edu-danger); font-weight: 700; }

/* Les options de CONTENU d'un acte (T7) : des cases qui recomposent le message. Volontairement
   SOBRES — ni aplat d'accent (réservé au bloc de l'agent, qui est l'élément « puissance »), ni
   encadré fort : ce sont deux cases, pas une machine. Elles se posent juste au-dessus du message
   qu'elles réécrivent, pour que le lien de cause à effet se voie. */
.envoi-opts {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--edu-surface); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius); padding: 10px 12px;
}
.envoi-opts-row { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.envoi-opt {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: var(--edu-text); cursor: pointer;
}
.envoi-opt input { accent-color: var(--edu-accent); cursor: pointer; margin: 0; }
.envoi-opt-l { font-weight: 600; }
.envoi-opt .envoi-hint { flex: 1 1 100%; padding-left: 21px; }
.envoi-opt:focus-within .envoi-opt-l { text-decoration: underline; }

/* Le dos de l'agent, AVANT le clic (D12 bis) — lu de `redacteur.etat()`, jamais re-décidé. */
.envoi-agent {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--edu-accent-soft); border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius); padding: 10px 12px;
}
.envoi-agent-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.envoi-agent-dos { font-size: 12.5px; font-weight: 700; color: var(--edu-accent-ink); }
.envoi-agent-cout { font-size: 11.5px; color: var(--edu-muted); margin-left: auto; }
.envoi-agent-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.envoi-agent-p { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--edu-muted); }
.envoi-agent-p .envoi-in { width: auto; cursor: pointer; }
.envoi-agent-cons { flex: 1 1 220px; min-width: 180px; }
.envoi-why { color: var(--edu-warn); }

.envoi-bloque {
  font-size: 12.5px; line-height: 1.5; color: var(--edu-text); margin: 0;
  background: color-mix(in srgb, var(--edu-warn) 12%, var(--edu-surface-2));
  border: 1px solid var(--edu-warn); border-radius: var(--edu-radius-sm); padding: 9px 11px;
}
.envoi-actions {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  border-top: 1px solid var(--edu-border); padding-top: 12px;
}
/* L'ACCUSÉ DE L'ENVOI — dans le flux, sous la barre d'actions, à quarante pixels du bouton qu'on
   vient de presser. ⛔ JAMAIS `sticky` ni `fixed` : rendu flottant pour être « toujours visible »,
   il recouvrait le bouton « Envoyer » sur 31 des 40 px de sa hauteur, et `elementFromPoint` au
   centre du bouton renvoyait l'accusé (mesuré au navigateur). Un accusé ne recouvre jamais une
   commande, ni au clic ni au regard. */
.envoi-msg {
  font-size: 12.5px; padding: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: opacity .18s ease;
}
.envoi-msg.is-on {
  opacity: 1; max-height: 120px; padding: 9px 11px; border-radius: var(--edu-radius-sm);
  background: var(--edu-surface-2); border: 1px solid var(--edu-border); color: var(--edu-text);
}
/* L'ACCUSÉ DE COMPOSITION — cocher une case ou faire rédiger agit sur LE CORPS DU MESSAGE, qui
   est ~1 200 px plus bas que la barre d'actions : répondre là-bas revenait à ne rien répondre.
   Il vit donc dans le libellé « Message », qui existe déjà — donc à l'endroit exact où l'effet se
   produit, sans occuper la moindre surface quand il est vide. */
/* ⛔ Pas de `display: none` quand il est vide : il POUSSAIT le corps du message de 23 px en
   apparaissant, et le reprenait 6 s plus tard — pendant qu'on relit un mail qu'on s'apprête à
   envoyer, à côté d'un bouton irréversible. La ligne est donc toujours là et fait toujours UNE
   ligne : `nowrap` l'y tient quel que soit le message, et une coupe porte sa marque (ellipse)
   plutôt que de passer à la ligne — le texte entier reste dans le DOM pour `aria-live`. */
.envoi-compo { font-size: 12px; font-weight: 600; color: var(--edu-muted);
  line-height: 1.35; min-height: 1.35em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.envoi-compo.is-ok { color: var(--edu-ok-ink); }
.envoi-compo.is-ko { color: var(--edu-danger-ink); }
/* `-ink` : les tokens sémantiques bruts tombent sous WCAG AA en petit texte sur fond clair
   (--edu-ok 3,84:1, --edu-danger 4,44:1). Cf. `core/ui/tokens.css`. */
.envoi-msg.is-ok { border-color: var(--edu-ok); color: var(--edu-ok-ink); font-weight: 600; }
.envoi-msg.is-ko { border-color: var(--edu-danger); color: var(--edu-danger-ink); font-weight: 600; }
.envoi-msg.is-wait { color: var(--edu-muted); }

@media (max-width: 560px) {
  .envoi-kv { grid-template-columns: 1fr; gap: 2px; }
  .envoi-k { padding-top: 0; }
  .envoi-actions { flex-direction: column-reverse; align-items: stretch; }
}