/* Cockpit Live enseignant — feuille de style des composants Figma validés.
   Les valeurs viennent des maquettes, pas d'une appréciation : hauteurs 56 / 64 / 40 / 86 / 42 / 34,
   colonne gauche 900 px, colonnes de triage 150 / 190 / 300 / 90 / 120, jauge de 3 px.
   Aucun nuancier parallèle : tous les fonds et toutes les encres sont des jetons existants. */

/* ---------- En-tête de séance (14:91) — 64 px, UNIQUE ---------- */
.t21-head{display:flex;align-items:center;gap:var(--sp-5);height:64px;padding:var(--sp-1) var(--sp-6);
 background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.t21-head-id{width:320px;flex-shrink:0;min-width:0;display:flex;flex-direction:column}
.t21-overline{margin:0;font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;
 text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-head-id h2{margin:0;font-size:var(--fs-18);font-weight:600;line-height:24px;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-head-meta{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--sp-3)}
/* La fraîcheur cède la place avant le reste : c'est la seule métadonnée reconstituable d'un coup
   d'œil. Le compte « connectés · élèves concernés » garde sa largeur — il porte un dénominateur. */
.t21-head-fresh{flex:1 1 0;min-width:0;margin:0;font-size:var(--fs-14);line-height:22px;color:var(--muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-head-count{flex:0 0 auto;margin:0;font-size:var(--fs-14);line-height:22px;color:var(--ink-2);white-space:nowrap}
@media(max-width:1365px){.t21-head-id{width:260px}}
@media(max-width:1439px){.t21-head-fresh{display:none}}
/* Le groupe d'actions garde sa largeur naturelle : les quatre gestes restent toujours visibles. */
.t21-head-actions{flex-shrink:0;display:flex;align-items:center;gap:var(--sp-2)}

/* ---------- Boutons du cockpit ---------- */
.t21-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;
 border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);
 font:600 var(--fs-14)/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.t21-btn svg{width:18px;height:18px;flex-shrink:0}
.t21-btn.is-qlive{background:var(--question-live);border-color:var(--question-live);color:var(--ink-inverse)}
.t21-btn.is-live{background:var(--live);border-color:var(--live);color:var(--ink-inverse)}
.t21-btn.is-small{height:32px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-13)}
.t21-btn.is-icon{width:36px;padding:0;border-radius:var(--r-sm)}
.t21-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Badge de statut (7:92) ---------- */
.t21-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
 border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg-sunken);
 font-size:var(--fs-12);font-weight:600;color:var(--ink-2);white-space:nowrap}
.t21-badge svg{width:14px;height:14px;flex-shrink:0}
.t21-badge.is-live{background:var(--live-soft);border-color:var(--live);color:var(--live-text)}
.t21-badge.is-network{background:var(--network-soft);border-color:var(--network);color:var(--network-text)}
.t21-badge.is-warning{background:var(--warning-soft);border-color:var(--warning);color:var(--warning-text)}
.t21-badge.is-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text)}
.t21-badge.is-success{background:var(--success-soft);border-color:var(--success);color:var(--success-text)}

/* ---------- Onglets (9:102) — une seule barre ---------- */
.t21-tabs{display:flex;align-items:flex-end;gap:var(--sp-1);height:40px;padding:var(--sp-1) var(--sp-6);
 background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:29}
.t21-tabs button{height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-sm);
 background:transparent;font:600 var(--fs-14)/1 var(--font-sans);color:var(--muted);cursor:pointer}
.t21-tabs button[aria-selected="true"]{background:var(--paper);border-color:var(--line);color:var(--ink)}
.t21-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Contenu ---------- */
.t21-content{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6) var(--sp-5)}
.t21-kpis{display:flex;gap:var(--sp-3);align-items:stretch}

/* ---------- Indicateur (20:219) — 86 px, jauge de 3 px ---------- */
.t21-kpi{flex:1 1 0;min-width:0;display:flex;flex-direction:column;min-height:86px;background:var(--paper);
 border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden}
.t21-kpi-inner{flex:1 0 auto;display:flex;flex-direction:column;gap:var(--sp-1);
 padding:var(--sp-3) var(--sp-3) var(--sp-1)}
.t21-kpi-top{display:flex;align-items:center;gap:var(--sp-2)}
/* La couleur ne décore pas : elle vit ici et dans la jauge. Le chiffre reste à l'encre neutre. */
.t21-kpi-chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
 border-radius:var(--r-sm);background:var(--progress-soft);color:var(--progress-text);flex-shrink:0}
.t21-kpi-chip svg{width:16px;height:16px}
.t21-kpi-label{flex:1 1 0;min-width:0;margin:0;font-size:var(--fs-13);font-weight:500;line-height:18px;
 color:var(--muted);overflow-wrap:anywhere}
.t21-kpi-info{display:inline-flex;width:14px;height:14px;color:var(--muted);flex-shrink:0;cursor:help}
.t21-kpi-info svg{width:14px;height:14px}
.t21-kpi-info:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.t21-kpi-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1);min-width:0}
.t21-kpi-value{font-size:var(--fs-30);font-weight:700;line-height:34px;color:var(--ink);white-space:nowrap}
.t21-kpi-unit{font-size:var(--fs-16);line-height:24px;color:var(--muted);white-space:nowrap}
.t21-kpi-spacer{flex:1 1 0;min-width:0}
/* Le détail reste sur la ligne du chiffre tant qu'il y tient ; en dessous il passe à la ligne
   entière plutôt que d'être tronqué. Une métrique ne doit jamais perdre son dénominateur écrit. */
.t21-kpi-detail{flex:0 1 auto;min-width:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);
 text-align:end;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1439px){.t21-kpi-detail{flex:1 1 100%;text-align:start;white-space:normal}
 .t21-kpi-spacer{display:none}}
.t21-kpi-track{height:3px;background:var(--bg-sunken);display:flex}
.t21-kpi-track i{display:block;height:3px;background:var(--progress)}
.t21-kpi.is-network .t21-kpi-chip{background:var(--network-soft);color:var(--network-text)}
.t21-kpi.is-network .t21-kpi-track i{background:var(--network)}
.t21-kpi.is-success .t21-kpi-chip{background:var(--success-soft);color:var(--success-text)}
.t21-kpi.is-success .t21-kpi-track i{background:var(--success)}
.t21-kpi.is-danger .t21-kpi-chip{background:var(--danger-soft);color:var(--danger-text)}
.t21-kpi.is-danger .t21-kpi-track i{background:var(--danger)}
.t21-kpi.is-qlive .t21-kpi-chip{background:var(--question-live-soft);color:var(--question-live-text)}
.t21-kpi.is-qlive .t21-kpi-track i{background:var(--question-live)}

/* ---------- Colonnes : 900 px à gauche, le reste à droite ---------- */
.t21-cols{display:flex;gap:var(--sp-5);align-items:flex-start}
/* Le Figma dessine 900 px à gauche sur une largeur totale de 1366. Le produit garde une barre de
   destinations à gauche : la proportion est donc conservée (900 / 398 ≈ 2,26) plutôt que la
   largeur absolue, et la colonne de droite reçoit un plancher pour ne jamais être écrasée. */
.t21-col-main{flex:900 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.t21-col-side{flex:398 1 0;min-width:300px;display:flex;flex-direction:column;gap:var(--sp-4)}
@media(min-width:1600px){.t21-col-main{flex:0 0 900px}.t21-col-side{flex:1 1 0;min-width:0}}

/* ---------- Carte : tête 40 px + corps ---------- */
.t21-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
 box-shadow:var(--shadow-1);overflow:hidden}
.t21-card-head{display:flex;align-items:center;gap:var(--sp-2);min-height:40px;
 padding:var(--sp-1) var(--sp-4);border-bottom:1px solid var(--line)}
.t21-card-head h3{flex-shrink:0;margin:0;font-size:var(--fs-14);font-weight:600;line-height:22px;color:var(--ink)}
.t21-card-note{flex:1 1 0;min-width:0;margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);
 text-align:end;overflow:hidden;text-overflow:ellipsis}
.t21-card-body{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---------- Entonnoir (13:55) ---------- */
.t21-funnel{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.t21-funnel-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.t21-funnel-label{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le nombre et le pourcentage restent sur une seule ligne, jamais cassés verticalement. */
.t21-funnel-row{margin:0;display:flex;align-items:baseline;gap:var(--sp-2);white-space:nowrap}
.t21-funnel-row b{font-size:var(--fs-20);font-weight:600;line-height:26px;color:var(--ink)}
.t21-funnel-row span{font-size:var(--fs-13);font-weight:500;line-height:18px;color:var(--muted)}
.t21-funnel-track{display:block;height:5px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden}
.t21-funnel-track i{display:block;height:5px;border-radius:var(--r-pill);background:var(--progress)}
.t21-funnel-step.is-neutre .t21-funnel-track i{background:var(--unobserved)}
.t21-funnel-step.is-succes .t21-funnel-track i{background:var(--success)}
.t21-funnel-sep{flex-shrink:0;font-size:var(--fs-16);line-height:24px;color:var(--muted)}

/* ---------- Triage (13:74) — cinq colonnes à largeur fixe ---------- */
.t21-triage{display:flex;flex-direction:column}
.t21-triage-head,.t21-triage-row{display:flex;align-items:center;width:100%;min-width:0}
.t21-triage-head{height:32px;border-bottom:1px solid var(--line)}
/* La maquette donne 42 px. Un signal plus long que celui du Figma ne doit pas être tronqué :
   la ligne grandit, elle ne coupe pas. Un libellé illisible n'est pas une différence mineure. */
.t21-triage-row{min-height:42px;padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line);
 background:var(--paper);flex-wrap:nowrap}
.t21-th,.t21-td{padding:0 var(--sp-2);min-width:0;display:flex;align-items:center;gap:var(--sp-2)}
.t21-th{font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;color:var(--muted);
 text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Largeurs du Figma (150 / 190 / 300 / 90 / 120) tant que la place le permet. Le produit garde
   une barre de destinations que la maquette n'a pas : les colonnes acceptent donc de se réduire
   jusqu'à un plancher lisible, en tronquant, plutôt que de se chevaucher. */
.is-eleve{flex:0 1 150px;min-width:132px}
.is-signal{flex:1 1 190px;min-width:150px}
.is-question{flex:1 1 300px;min-width:110px}
.is-depuis{flex:0 0 70px;min-width:56px}
.is-action{flex:0 1 120px;min-width:92px;justify-content:flex-end}
/* Texte tronqué par ellipse, jamais cassé verticalement. */
.t21-td b,.t21-td span:not(.t21-badge):not(.t21-avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:var(--fs-14);line-height:22px}
.t21-td.is-eleve b{font-weight:600;color:var(--ink)}
/* Le badge de signal ne déborde jamais de sa colonne : il tronque, comme les autres cellules. */
.t21-td.is-signal{overflow:hidden}
.t21-td.is-signal .t21-badge{min-width:0;max-width:100%}
.t21-td.is-signal .t21-badge{height:auto;min-height:26px;padding-top:2px;padding-bottom:2px}
.t21-td.is-signal .t21-badge>span{white-space:normal;overflow-wrap:anywhere;line-height:16px}
/* Le sélecteur d'année absorbé reste lisible sans voler la place des quatre gestes. */
.t21-head-actions .ux-year-select select{max-width:150px}
.t21-td.is-question span{color:var(--ink)}
.t21-td.is-depuis span{color:var(--muted)}
.t21-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
 border-radius:var(--r-pill);background:var(--bg-sunken);color:var(--muted)}
.t21-avatar svg{width:16px;height:16px}
/* Les destinataires sans donnée forment un bloc distinct : c'est une question de collecte,
   jamais une difficulté d'élève. */
.t21-uncovered{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;margin:0;
 padding:var(--sp-2) var(--sp-3);background:var(--bg-sunken);border-top:1px solid var(--line);
 font-size:var(--fs-14);line-height:22px;color:var(--ink-2)}
.t21-uncovered b{flex:1 1 0;min-width:0;font-weight:400}
.t21-uncovered button{border:0;background:none;padding:0;font:600 var(--fs-14)/22px var(--font-sans);
 color:var(--progress-text);cursor:pointer;white-space:nowrap}

/* ---------- Heatmap (7:113) ---------- */
/* En dessous de la largeur de la maquette, la grille élèves × étapes défile horizontalement
   plutôt que de tronquer les noms d'étapes : un libellé coupé ne dit plus de quelle étape il
   s'agit. Le conteneur est focusable pour rester atteignable au clavier. */
/* `min-width:0` est indispensable : sans lui, un enfant de conteneur flex garde sa largeur de
   contenu et le conteneur à défilement ne rogne rien — la page entière défilait alors
   horizontalement à 320 et 390 px. */
.t21-grid-scroll{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.t21-grid-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.t21-grid{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
@media(max-width:1279px){.t21-grid{min-width:560px}.t21-grid-col{min-width:88px}}
.t21-grid-row{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.t21-grid-head{font-size:var(--fs-12);font-weight:600;line-height:16px;letter-spacing:.8px;
 color:var(--muted);text-transform:uppercase}
.t21-grid-name{width:150px;flex-shrink:0;min-width:0;font-size:var(--fs-14);line-height:22px;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-grid-col{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-heat{flex:1 1 0;min-width:46px;height:34px;display:flex;align-items:center;justify-content:center;
 border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--not-concerned-soft);cursor:pointer}
.t21-heat svg{width:14px;height:14px}
.t21-heat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.t21-heat.is-inobserve{background:var(--unobserved-soft);border-color:var(--unobserved);color:var(--muted)}
.t21-heat.is-encours{background:var(--progress-soft);border-color:var(--progress);color:var(--progress-text)}
.t21-heat.is-verifier{background:var(--warning-soft);border-color:var(--warning);color:var(--warning-text)}
.t21-heat.is-difficile{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text)}
.t21-heat.is-termine{background:var(--success-soft);border-color:var(--success);color:var(--success-text)}
/* « Non concerné » est hors échelle : hachuré, jamais confondu avec « non observé ». */
.t21-heat.is-hors{background:repeating-linear-gradient(45deg,var(--not-concerned-soft),
 var(--not-concerned-soft) 4px,var(--bg-sunken) 4px,var(--bg-sunken) 8px);cursor:default}
.t21-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;padding:0;list-style:none;
 font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.t21-legend li{display:flex;align-items:center;gap:6px}
.t21-legend i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-strong);
 background:var(--not-concerned-soft);flex-shrink:0}
.t21-legend li[data-tone="grey"] i{background:var(--unobserved-soft);border-color:var(--unobserved)}
.t21-legend li[data-tone="blue"] i{background:var(--progress-soft);border-color:var(--progress)}
.t21-legend li[data-tone="orange"] i{background:var(--warning-soft);border-color:var(--warning)}
.t21-legend li[data-tone="red"] i{background:var(--danger-soft);border-color:var(--danger)}
.t21-legend li[data-tone="green"] i{background:var(--success-soft);border-color:var(--success)}

/* ---------- Carte « Difficulté dominante » ---------- */
.t21-hard-title{margin:0;font-size:var(--fs-18);font-weight:600;line-height:24px;color:var(--ink)}
.t21-hard-note{margin:0;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.t21-hard-row{margin:0;display:flex;align-items:baseline;gap:var(--sp-2)}
.t21-hard-row b{font-size:var(--fs-30);font-weight:700;line-height:34px;color:var(--warning-text)}
.t21-hard-row span{font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.t21-hard-track{display:block;height:6px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden}
.t21-hard-track i{display:block;height:6px;border-radius:var(--r-pill);background:var(--warning)}
.t21-kv{margin:0;display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);line-height:22px}
.t21-kv>span:first-child{flex:1 1 0;min-width:0;color:var(--muted)}
.t21-kv>span:last-child,.t21-kv>b{font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------- Tablette 1024 (35:268) : une seule colonne sous les indicateurs ---------- */
@media(max-width:1279px){
 .t21-cols{flex-direction:column}
 .t21-col-main,.t21-col-side{width:100%;flex:0 0 auto}
 .t21-kpis{flex-wrap:wrap}
 .t21-kpi{flex:1 1 200px}
}
/* ---------- Tablette 768 (37:2) : navigation compacte explicite, colonnes empilées ---------- */
@media(max-width:1279px){
 .t21-head{height:auto;min-height:64px;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);position:static}
 .t21-head-id{width:100%;flex:1 1 100%}
 .t21-head-meta{flex:1 1 100%;flex-wrap:wrap;gap:var(--sp-2)}
 .t21-head-fresh,.t21-head-count{flex:0 1 auto}
 .t21-head-actions{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
 .t21-tabs{position:static;padding:var(--sp-1) var(--sp-4);overflow-x:auto;scrollbar-width:thin}
 .t21-tabs button{flex-shrink:0}
 .t21-content{padding:var(--sp-3) var(--sp-4) var(--sp-5)}
 .t21-kpi{flex:1 1 220px}
 /* Le tableau de triage passe en cartes : cinq colonnes fixes ne tiennent pas à 768 px. */
 .t21-triage-head{display:none}
 .t21-triage-row{flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-2)}
 .t21-td{padding:0}
 .is-eleve{width:auto;flex:1 1 55%;min-width:0}
 /* En carte, le signal prend sa propre ligne et se replie : un badge long ne doit jamais
    élargir la page — c'est ce qui créait un défilement horizontal à 320 et 390 px. */
 .is-signal{width:auto;flex:1 1 100%;min-width:0}
 .is-question{flex:1 1 100%;min-width:0}
 .is-depuis{width:auto;flex:0 0 auto;min-width:0}
 .is-action{width:auto;flex:1 1 auto;min-width:0;justify-content:flex-end}
 .t21-td.is-signal .t21-badge{max-width:100%}
 .t21-grid-name{width:110px}
 /* Format tactile : la cellule de heatmap passe de 34 px (maquette bureau) à 44 px (§18). */
 .t21-heat{height:44px;min-width:44px}
 .live-heat-cell{min-height:44px}
}
@media(max-width:767px){
 .t21-kpis{flex-direction:column}
 .t21-kpi{flex:0 0 auto}
 .t21-funnel{flex-wrap:wrap;gap:var(--sp-2)}
 .t21-funnel-step{flex:1 1 40%}
 .t21-funnel-sep{display:none}
 /* Sur un téléphone, la maquette enseignant n'existe pas : la plus étroite est la tablette 768.
    Plutôt que d'y tronquer les deux seules phrases qui nomment la séance et le dénominateur
    d'un indicateur, on les laisse passer à la ligne. Un titre de séance coupé au milieu et un
    dénominateur illisible seraient des défauts de lecture, pas des différences mineures. */
 .t21-head-id h2{white-space:normal;overflow:visible;text-overflow:clip}
 .t21-card-head{flex-wrap:wrap;padding-block:var(--sp-2)}
 .t21-card-head h3{flex:1 1 100%}
 .t21-card-note{flex:1 1 100%;text-align:start;white-space:normal;overflow:visible;text-overflow:clip}
}

/* ==================================================================
   Tiroir · détail élève — Figma 33:1904 (composant 15:180)
   420 px ancrés à droite, jamais une page. La hiérarchie de la maquette : identité, synthèse,
   quatre compteurs, compétences, questions à reprendre, historique replié, quatre gestes.
   Les états portent une icône ET un libellé (le badge de statut les rend tous deux) : jamais
   la couleur seule.
   ================================================================== */
.ux-drawer[data-live-pupil-drawer]{width:min(420px,100%)}
.ux-drawer[data-live-pupil-drawer] .ux-drawer-identity{flex:1 0 0;min-width:0;overflow:hidden}
.ux-drawer[data-live-pupil-drawer] .ux-drawer-identity h2{
 font-size:20px;line-height:26px;font-weight:600;margin:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-drawer-sub{margin:0;font-size:12px;line-height:16px;color:var(--muted)}
.t21-drawer-section{padding:12px 16px 0}
.t21-drawer-section h3{
 margin:0 0 4px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.8px;
 text-transform:uppercase;color:var(--muted)}
.t21-drawer-section p{margin:0 0 4px;font-size:14px;line-height:22px;color:var(--ink-2,var(--ink))}
.t21-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.t21-stat{border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--bg-sunken,var(--bg));padding:8px;min-width:0}
.t21-stat p{margin:0;font-size:12px;line-height:16px;color:var(--muted)}
.t21-stat b{display:block;font-size:18px;line-height:24px;font-weight:600;color:var(--ink)}
.t21-stat[data-tone="succes"] b{color:var(--success-text,#15803d)}
.t21-stat[data-tone="alerte"] b{color:var(--danger-text,#b91c1c)}
.t21-drawer-rows{display:flex;flex-direction:column}
.t21-drawer-row{display:flex;align-items:center;gap:8px;padding:4px;border-bottom:1px solid var(--line);min-width:0}
.t21-drawer-row:last-child{border-bottom:0}
/* Le nom de la compétence absorbe la place ; le badge et le volume gardent la leur, donc le
   compte d'observations reste lisible même sur un libellé long. */
.t21-drawer-name{flex:1 0 0;min-width:0;font-size:14px;line-height:22px;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-drawer-obs{flex:0 0 48px;text-align:end;font-size:12px;line-height:16px;color:var(--muted)}
.t21-drawer-fold{margin:12px 16px 16px;border:1px solid var(--line);border-radius:var(--r-sm,8px)}
.t21-drawer-fold>summary{padding:4px 12px;min-height:var(--tap,44px);display:flex;align-items:center;
 font-size:13px;line-height:18px;font-weight:500;color:var(--ink-2,var(--ink));cursor:pointer}
.t21-drawer-fold>*:not(summary){padding:0 12px 12px}
.t21-drawer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.t21-drawer-actions .t21-btn{width:100%;justify-content:center;min-height:var(--tap,44px)}
.live-open-pupil{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:start}
.live-open-pupil:hover,.live-open-pupil:focus-visible{text-decoration:underline}
/* La ligne est cliquable à la souris ; le chemin clavier passe par son bouton d'action, qui
   ouvre le même tiroir. Elle n'est donc pas focusable : un contrôle dans un contrôle casse la
   navigation clavier et le mode lecture des lecteurs d'écran. */
.t21-triage-row[data-live-triage-row]{cursor:pointer}
.t21-triage-row[data-live-triage-row]:hover{background:var(--bg-sunken,var(--bg))}
.t21-triage-row:focus-within{outline:2px solid var(--focus,var(--live));outline-offset:-2px}
@media(max-width:479px){
 .t21-drawer-actions,.t21-stat-grid{grid-template-columns:minmax(0,1fr)}
}