/* ─────────────────────────────────────────────────────────────────────────────
   Police Geist — EMBARQUÉE avec l'application : aucun appel à Google Fonts ni à
   un quelconque service tiers, donc aucune donnée utilisateur ne sort du serveur
   (cf. audit RGPD : « aucun traceur tiers »). Licence SIL Open Font License 1.1,
   texte conservé dans app/static/fonts/OFL-Geist.txt.
   Fichier variable : une seule requête de 68 Ko couvre toutes les graisses.
   Déclarée ici ; elle ne sera APPLIQUÉE qu'avec le nouvel habillage (styles-v2.css).
   ───────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Geist";
  src:url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* ── Deux polices, deux rôles (v2.57) ────────────────────────────────────────
   ARCHIVO pour les titres et les grands nombres : chasse variable, c'est son
   ÉTROITESSE qui donne le caractère — pas le gras. Ne pas dépasser 650 de
   graisse, au-delà le rendu devient lourd.
   ATKINSON HYPERLEGIBLE pour tout le reste. Dessinée par le Braille Institute
   pour les lecteurs malvoyants : les formes ambiguës (I / l / 1, O / 0, b / d)
   sont différenciées. Sur un outil où des stagiaires en remise à niveau passent
   des tests, ce n'est pas un choix esthétique.
   Les deux sont sous licence SIL OFL 1.1, embarquées — aucun appel à un service
   extérieur, l'audit RGPD affirme « aucun traceur tiers ».
   ──────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Archivo";
  src:url("/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/AtkinsonHyperlegible-400.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/AtkinsonHyperlegible-700.woff2") format("woff2");
  font-weight:700;
  font-display:swap;
}
:root{
  --bg:#f4f8fb;--panel:#fff;--ink:#0b2240;--muted:#58708a;--line:#d7e5ee;
  --primary:#16446f;--primary-dark:#071f3a;--accent:#12b6b0;--green:#76bf43;--yellow:#f6c343;
  --ok:#157347;--warn:#b54708;--ko:#b42318;--shadow:0 18px 42px rgba(7,31,58,.10)
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f7fbfd,#edf4f8)}
button,input,select{font:inherit}
button{border:0;border-radius:14px;padding:12px 15px;background:linear-gradient(135deg,var(--primary),#0b2f52);color:white;font-weight:700;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}
.landing{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,rgba(246,195,67,.24),transparent 30%),linear-gradient(135deg,#071f3a,#16446f)}
.landing-card{width:min(950px,100%);background:white;border-radius:32px;padding:42px;box-shadow:0 38px 90px rgba(3,18,34,.34)}
.brand-row{display:flex;align-items:center;gap:18px;margin-bottom:30px}.logo{width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,var(--accent),var(--green),var(--yellow));display:grid;place-items:center;color:#071f3a;font-weight:900;font-size:36px}.logo.mini{width:48px;height:48px;font-size:26px;border-radius:17px}
.landing h1{margin:0;font-size:42px}.landing p{color:var(--muted)}.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.access-card{min-height:185px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;padding:28px;border-radius:24px}.access-card strong{font-size:28px}.access-card span{font-size:16px;line-height:1.55}.admin-card{background:linear-gradient(135deg,#071f3a,#16446f)}.learner-card{background:linear-gradient(135deg,#008c86,#12b6b0,#2f8f46)}.notice{margin-top:22px;padding:14px;background:#f6fffd;border:1px solid #c7ebe7;border-radius:16px}
.modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(7,31,58,.55);padding:20px}.modal-card{background:white;border-radius:24px;padding:28px;position:relative;box-shadow:var(--shadow)}.small-modal{width:min(520px,100%)}.close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;padding:0}
.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:292px;background:linear-gradient(180deg,#071f3a,#0b2f52,#103f68);color:white;padding:24px;display:flex;flex-direction:column;gap:26px;border-right:4px solid var(--accent)}.brand-mini{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mini span{display:block;color:#d8f3ef;font-size:13px;margin-top:4px}
nav{display:grid;gap:10px}nav button,.sidebar-footer button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);text-align:left}nav button.active,nav button:hover{background:white;color:#071f3a;box-shadow:inset 4px 0 0 var(--accent)}.sidebar-footer{margin-top:auto;display:grid;gap:10px}.logout{background:#fff6df!important;color:#7a4a00!important;border:1px solid var(--yellow)!important;text-align:center!important}
.main{margin-left:292px;width:calc(100% - 292px);padding:32px 38px}.page-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:26px}.page-header h1{font-size:38px;margin:0 0 8px}.page-header p{color:var(--muted)}.pill{background:white;border:1px solid #bfe9e4;border-radius:999px;padding:12px 16px;box-shadow:var(--shadow);white-space:nowrap}.pill strong{color:#008c86}
.admin-view,.learner-view{display:none}.admin-view.active,.learner-view.active{display:block}.panel,.kpis article,.item{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.panel{padding:26px;margin-bottom:22px}.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}.kpis article{padding:22px;position:relative;overflow:hidden}.kpis article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--accent),var(--green))}.kpis span{display:block;color:var(--muted);font-size:14px}.kpis strong{display:block;font-size:32px;color:var(--primary);margin-top:8px}.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.toolbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.form{display:grid;gap:14px}label{font-weight:700;color:#344054;font-size:14px}input,select{width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:white;color:var(--ink)}input:focus,select:focus{outline:3px solid rgba(18,182,176,.22);border-color:var(--accent)}.list{display:grid;gap:13px}.item{padding:18px}.item-title{font-weight:800;font-size:17px}.small{font-size:13px;color:var(--muted)}.alert{background:#fdecea;color:var(--ko);padding:10px;border-radius:12px}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.badge,.type-badge,.role-pill{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;margin:7px 7px 0 0}.badge{background:#e6f7f5;color:#006c67}.ok,.score-ok{background:#e8f5ee!important;color:var(--ok)!important}.warn,.score-warn{background:#fff4e5!important;color:var(--warn)!important}.ko,.score-ko{background:#fdecea!important;color:var(--ko)!important}.type-rncp{background:#e6f7f5;color:#006c67}.type-diplome{background:#eaf2ff;color:#16446f}.type-rs{background:#f4f8e8;color:#4d7c0f}.type-transversal{background:#fff4e5;color:#b54708}.role-super{background:#fef3c7;color:#92400e}.role-admin{background:#dbeafe;color:#1e40af}
.chart-row{display:grid;grid-template-columns:160px 1fr 52px;gap:12px;align-items:center;margin:12px 0}.chart-bar{height:16px;background:#e8eef5;border-radius:999px;overflow:hidden}.chart-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--green))}
.comparison-wrapper{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}.comparison-table{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:13px}.comparison-table th,.comparison-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px;text-align:center}.comparison-table th{background:#f8fafc}.comparison-table th:first-child,.comparison-table td:first-child{position:sticky;left:0;background:white;text-align:left;z-index:2;min-width:220px}.comparison-table th:first-child{background:#f8fafc}.score-cell{display:inline-flex;min-width:58px;justify-content:center;border-radius:10px;padding:5px 8px;font-weight:800}.score-empty{background:#f2f4f7;color:#667085}
.learner-question{background:#fbfdff;border:1px solid var(--line);border-radius:18px;padding:20px;margin:18px 0}.learner-choice{display:block;width:100%;text-align:left;background:white;color:var(--ink);border:1px solid var(--line);margin-top:10px;box-shadow:none}.learner-choice.selected{outline:3px solid rgba(18,182,176,.25);border-color:var(--accent)}.adaptive-status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.adaptive-status div{border:1px solid var(--line);border-radius:14px;padding:12px;background:white}.adaptive-status span{display:block;color:var(--muted);font-size:12px}.adaptive-status strong{display:block;margin-top:5px;color:var(--primary)}.difficulty-pill{display:inline-flex;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800}.diff-1{background:#e8f5ee;color:#157347}.diff-2{background:#fff4e5;color:#b54708}.diff-3{background:#fdecea;color:#b42318}.adaptive-path{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.adaptive-path-row{display:grid;grid-template-columns:60px 90px 1fr 90px;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px;align-items:center}.adaptive-path-row:nth-child(odd){background:#fbfdff}
.rgpd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.danger-button{background:#b42318!important}.warning-button{background:#fff6df!important;color:#7a4a00!important;border:1px solid var(--yellow)!important}.time-spent-pill{display:inline-flex;border-radius:999px;padding:5px 10px;background:#eaf2ff;color:#16446f;font-size:12px;font-weight:800;margin:7px 7px 0 0}.timer-box{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:#fff4e5;color:#b54708;font-weight:800;margin:8px 0}.timer-box.warning{background:#fdecea;color:#b42318}
.subject-pill{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;margin:7px 7px 0 0}.subject-francais{background:#eaf2ff;color:#16446f}.subject-mathematiques{background:#e8f5ee;color:#157347}.subject-raisonnement,.subject-raisonnement_logique{background:#fff4e5;color:#b54708}.subject-anglais{background:#e0f2fe;color:#0369a1}.subject-numerique{background:#ecfdf5;color:#065f46}.subject-comecrite{background:#fef3c7;color:#92400e}.level-pill{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;background:#f4f8e8;color:#4d7c0f;margin:7px 7px 0 0}
.metric-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.metric-table th,.metric-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.metric-table th{background:#f8fafc}.block-card,.recommendation-box{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdff;margin-bottom:13px}.recommendation-summary{border-left:4px solid var(--accent);padding:10px 12px;background:#f6fffd;border-radius:12px}
@media(max-width:1050px){.sidebar{position:static;width:auto}.main{margin-left:0;width:auto;padding:22px}.grid-2,.kpis,.toolbar,.adaptive-status,.adaptive-path-row{grid-template-columns:1fr}.access-grid{grid-template-columns:1fr}.page-header{display:grid}}


/* =====================================================
   THEME POSITioNN LOGO 2026
   Modification strictement visuelle : couleurs, logo, relief,
   arrondis et rendu premium SaaS. Aucune fonctionnalité modifiée.
   ===================================================== */
:root{
  --bg:#f7f7ff;
  --panel:#ffffff;
  --ink:#111036;
  --muted:#6d6b8f;
  --line:#e7e3f5;
  --primary:#3217d9;
  --primary-dark:#17106d;
  --accent:#7d2cff;
  --accent-2:#d733ff;
  --accent-pink:#ff2f8a;
  --accent-orange:#ff7b2f;
  --green:#16a56f;
  --yellow:#ffb545;
  --ok:#16a56f;
  --warn:#f28a1a;
  --ko:#e8325d;
  --shadow:0 22px 58px rgba(45,22,139,.12);
  --soft-shadow:0 12px 34px rgba(23,16,109,.08);
}

body{
  background:
    radial-gradient(circle at 92% 0%, rgba(125,44,255,.10), transparent 31%),
    radial-gradient(circle at 0% 100%, rgba(255,123,47,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7f6ff 100%);
  color:var(--ink);
}

.logo{
  width:68px;
  height:68px;
  border-radius:22px;
  object-fit:cover;
  background:#fff;
  box-shadow:0 18px 42px rgba(50,23,217,.22), inset 0 0 0 1px rgba(255,255,255,.65);
  display:block;
}
.logo.mini{
  width:52px;
  height:52px;
  border-radius:16px;
  font-size:0;
}

.landing{
  background:
    radial-gradient(ellipse at 70% 10%, rgba(99,102,241,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(139,92,246,.14) 0%, transparent 45%),
    linear-gradient(160deg,#f0f4ff 0%,#fafafa 55%,#f5f3ff 100%);
}
.landing-card{
  background:#ffffff;
  border:1px solid rgba(99,102,241,.15);
  box-shadow:0 8px 48px rgba(79,70,229,.12), 0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:none;
}
.landing h1{
  color:#1e1b4b;
  letter-spacing:-.03em;
}
.landing p{
  color:#5E5E6B;
}
.access-card{
  box-shadow:0 6px 24px rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .2s ease;
}
.access-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.20);
}
.admin-card,.centre-card{
  background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 60%,#4f46e5 100%);
}
.learner-card,.student-card{
  background:linear-gradient(135deg,#6d28d9 0%,#7c3aed 50%,#a855f7 100%);
}
.notice{
  background:#f9fafb;
  border-color:#e5e7eb;
  color:#5E5E6B;
}
.info-box{
  background:#f0f7ff;
  border:1px solid #bdd9f5;
  border-left:4px solid #3b82f6;
  border-radius:8px;
  padding:10px 14px;
  font-size:12px;
  line-height:1.7;
  color:#1e3a5f;
  margin-bottom:10px;
}
.info-box strong{ color:#1d4ed8; }
.info-box .info-kpi{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:#dbeafe;
  border-radius:6px;
  padding:2px 8px;
  font-weight:700;
  font-size:13px;
  color:#1d4ed8;
}
.admin-discreet-row{
  text-align:center;
  margin-top:10px;
}
.btn-admin-discreet{
  background:none;
  border:none;
  color:#b0b8d0;
  font-size:12px;
  font-weight:400;
  padding:4px 10px;
  cursor:pointer;
  border-radius:8px;
  opacity:.7;
  transition:opacity .15s;
}
.btn-admin-discreet:hover{
  opacity:1;
  background:rgba(0,0,0,.06);
  color:#444;
}

.sidebar{
  background:#ffffff;
  border-right:1px solid #e5e7eb;
  box-shadow:2px 0 12px rgba(0,0,0,.06);
  padding:16px 14px 60px;
  gap:10px;
  color:#374151;
}
nav{
  gap:3px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  min-height:0;
  scrollbar-width:none;
  align-content:start;
}
nav::-webkit-scrollbar{
  display:none;
}
nav button{
  padding:9px 12px;
  font-size:13px;
}
.brand-mini{
  border-bottom:1px solid #e5e7eb;
  padding-bottom:12px;
}
.brand-mini strong{
  letter-spacing:-.02em;
  color:#111827;
}
.brand-mini span{
  color:#5E5E6B;
}
nav button,.sidebar-footer button{
  background:transparent;
  border:none;
  color:#374151;
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
  font-weight:500;
}
nav button:hover{
  background:#f3f4f6;
  color:#111827;
}
nav button.active{
  background:#eef2ff;
  color:#3730a3;
  box-shadow:inset 3px 0 0 #4f46e5;
  font-weight:600;
}
.logout{
  background:transparent!important;
  color:#5E5E6B!important;
  border:1px solid #e5e7eb!important;
}
.logout:hover{
  background:#fef2f2!important;
  color:#B42318!important;
  border-color:#fca5a5!important;
}

.main{
  background:
    radial-gradient(circle at 86% 0%, rgba(125,44,255,.05), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f8f7ff 100%);
}
.page-header h1{
  color:#111036;
  letter-spacing:-.04em;
}
.page-header p,.small{
  color:var(--muted);
}
.pill{
  background:#f9fafb;
  border-color:#e5e7eb;
  box-shadow:none;
  color:#374151;
}
.pill strong{
  color:#4f46e5;
}

.panel,.kpis article,.item,.modal-card{
  background:rgba(255,255,255,.96);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.panel,.kpis article,.item{
  border-radius:26px;
}
.kpis article:before{
  background:linear-gradient(180deg,#3217d9,#d733ff,#ff7b2f);
}
.kpis strong{
  color:#17106d;
}

button{
  background:linear-gradient(135deg,#3217d9,#7d2cff);
  box-shadow:0 12px 26px rgba(50,23,217,.18);
}
button:hover{
  filter:saturate(1.08) brightness(1.03);
}

input,select{
  border-color:#dfdcf0;
  background:#fff;
}
input:focus,select:focus{
  outline:4px solid rgba(125,44,255,.16);
  border-color:#7d2cff;
}

.badge{
  background:#f0eaff;
  color:#3217d9;
}

/* ── Grille multi-colonnes pour la vue "Score par bloc" ── */
.bloc-heatmap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
  align-items:start;
}
/* ── Heatmap blocs/compétences ── */
.heat-bloc{
  margin-bottom:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e8e4f5;
  break-inside:avoid;
}
.heat-bloc-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:10px 14px;
  background:#f7f4ff;
  font-weight:700;
  font-size:15px;
  gap:12px;
}
.heat-bloc-title{ flex:1; }
.heat-bloc-score{ font-size:18px; font-weight:800; }
.heat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:2px;
  background:#e8e4f5;
}
.heat-cell{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:10px 12px;
  min-height:72px;
  cursor:default;
  transition:filter .15s;
}
.heat-cell:hover{ filter:brightness(1.06); }
.heat-cell-empty{ background:#f3f3f3 !important; color:#5E5E6B !important; }
.heat-cell-score{
  font-size:20px;
  font-weight:800;
  line-height:1;
}
.heat-cell-label{
  font-size:11px;
  line-height:1.3;
  /* Texte blanc posé sur une case dont la couleur va du rouge au vert : aucune
     couleur de texte unique ne convient à toutes, et mesuré sur les teintes
     claires on tombait à 3,62:1. On ne compte pas sur une ombre portée — elle
     aide l'œil mais ne compte pas comme un contraste. On pose donc un voile
     sombre DERRIÈRE l'étiquette : le contraste devient mesurable et constant,
     quelle que soit la couleur de la case. */
  opacity:1;
  background:rgba(0,0,0,.42);
  border-radius:4px;
  padding:2px 6px;
  align-self:flex-start;
  margin-top:4px;
}
/* Une cellule VIDE n'a pas de couleur de chaleur : son fond est gris clair et
   son texte gris depuis la passe RGAA. Le voile sombre, prévu pour du texte
   blanc sur couleur, y faisait tomber le contraste à 1,92:1. On le retire là.
   (Interaction entre deux correctifs, trouvée à la mesure — pas à l'œil.) */
.heat-cell-empty .heat-cell-label{background:transparent;color:var(--muted)}


/* ── Badge résultat individuel large ── */
.result-badge-large{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  border-radius:14px;
  padding:12px 20px;
  margin:8px 0;
  min-width:160px;
  text-align:center;
}
.result-badge-large.result-ok{
  background:#e8f8f1;
  border:2px solid #0b8f5d;
  color:#07603d;
}
.result-badge-large.result-warn{
  background:#fff8e8;
  border:2px solid #f59e0b;
  color:#92590a;
}
.result-badge-large.result-ko{
  background:#fff0f0;
  border:2px solid #dc2626;
  color:#991b1b;
}
.result-pct{
  font-size:36px;
  font-weight:900;
  line-height:1;
}
.result-status{
  font-size:13px;
  font-weight:700;
  margin-top:4px;
}
.result-rank{
  font-size:11px;
  margin-top:6px;
  opacity:.75;
  background:rgba(0,0,0,.06);
  border-radius:999px;
  padding:2px 8px;
}
/* Radar dans carte individuelle */
.learner-card-inner{
  display:flex;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.learner-card-inner svg{
  flex-shrink:0;
}
/* Histogramme */
.histogram-box{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.histogram-box svg{
  display:block;
}
.histogram-legend{
  display:flex;
  gap:12px;
  font-size:10px;
  color:#5E5E6B;
  margin-top:4px;
}
.histogram-legend span{
  display:flex;
  align-items:center;
  gap:4px;
}
.histogram-legend span::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:2px;
}
.badge-site{
  background:#e8f4ff;
  color:#0b5394;
  font-size:12px;
  margin-bottom:4px;
  display:inline-block;
}
.ok,.score-ok{
  background:#e8f8f1!important;
  color:#0A6B45!important;
}
.warn,.score-warn{
  background:#fff2df!important;
  color:#c16700!important;
}
.ko,.score-ko{
  background:#ffe7f0!important;
  color:#cf1c5e!important;
}

.type-rncp{
  background:#ede8ff;
  color:#3217d9;
}
.type-diplome{
  background:#f7e8ff;
  color:#8a18d8;
}
.type-rs{
  background:#fff0f7;
  color:#c21873;
}
.type-transversal{
  background:#fff1e7;
  color:#d55b00;
}

.chart-bar{
  background:#eeeaf8;
}
.chart-bar span{
  background:linear-gradient(90deg,#3217d9 0%,#7d2cff 45%,#d733ff 76%,#ff7b2f 100%);
}
.comparison-wrapper{
  border-color:#ece8f8;
  box-shadow:var(--soft-shadow);
}
.comparison-table th{
  background:#f8f6ff;
  color:#111036;
}
.comparison-table th:first-child{
  background:#f8f6ff;
}
.comparison-table td:first-child{
  background:#fff;
}

/* ── Parcours multi-tests ── */
.session-tests-block{
  background:#f8f6ff;
  border:1px solid #e4dfff;
  border-radius:10px;
  padding:10px 14px;
  margin:10px 0;
}
.session-tests-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.session-tests-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.session-test-item{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #ece8f8;
  border-radius:6px;
  padding:6px 10px;
  font-size:13px;
}
.session-test-num{
  background:#3217d9;
  color:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.session-test-name{
  flex:1;
  font-weight:600;
}
.session-test-dur{
  color:#5E5E6B;
  font-size:12px;
}
.btn-icon{
  background:none;
  border:1px solid currentColor;
  border-radius:4px;
  cursor:pointer;
  font-size:11px;
  padding:2px 6px;
  line-height:1.4;
}
.btn-icon.btn-danger{ color:#cf1c5e; }
.btn-icon.btn-danger:hover{ background:#ffe7f0; }

/* ── Multi-test : vue stagiaire ── */
.multi-test-banner{
  background:#f0f7ff;
  border:1px solid #bdd9f5;
  border-radius:8px;
  padding:10px 14px;
  margin-bottom:14px;
  font-size:13px;
}
.mt-steps{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
}
.mt-step{
  white-space:nowrap;
}
.mt-results-summary{
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:14px;
}
.mt-results-summary h3{
  margin:0 0 10px;
  font-size:15px;
  color:#166534;
}
.mt-result-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.mt-result-label{
  font-weight:600;
  min-width:180px;
  font-size:13px;
}

/* ── Résultats multi-tests (vue admin) ── */
.multi-result-test-block{
  background:#f8f6ff;
  border:1px solid #e4dfff;
  border-radius:10px;
  padding:10px 14px;
  margin:8px 0;
}
.multi-result-test-header{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.trans-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:900px){
  .trans-two-col{ grid-template-columns:1fr; }
}

/* ── Dashboard redesign ── */
.dash-alert-group{ margin:0; }
.dash-alert-title{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#5E5E6B;
  margin-bottom:8px;
}
.dash-alert-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #f3f0ff;
  font-size:13px;
}
.dash-alert-row:last-child{ border-bottom:none; }
.dash-alert-icon{ font-size:16px; flex-shrink:0; }
.dash-skill-bar-mini{
  width:60px;
  height:8px;
  background:#e5e7eb;
  border-radius:4px;
  overflow:hidden;
  flex-shrink:0;
}
.dash-session-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid #f3f0ff;
}
.dash-session-row:last-child{ border-bottom:none; }
.dash-recent-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid #f3f0ff;
  font-size:13px;
}
.dash-recent-row:last-child{ border-bottom:none; }

.learner-question,.student-question{
  background:linear-gradient(180deg,#ffffff,#fbf9ff);
  border-color:#eee9ff;
}
.learner-choice,.student-choice{
  border-color:#e6e0f5;
}
.learner-choice:hover,.student-choice:hover{
  border-color:#7d2cff;
}
.learner-choice.selected,.student-choice.selected{
  outline:4px solid rgba(125,44,255,.18);
  border-color:#7d2cff;
}
.adaptive-status div{
  border-color:#eee9ff;
}
.difficulty-pill.diff-1,.diff-1{
  background:#e9f8ef;
  color:#148955;
}
.difficulty-pill.diff-2,.diff-2{
  background:#fff0f7;
  color:#c21873;
}
.difficulty-pill.diff-3,.diff-3{
  background:#fff0e5;
  color:#d95c00;
}
.timer-box{
  background:#fff0e5;
  color:#d95c00;
}
.timer-box.warning{
  background:#ffe7f0;
  color:#cf1c5e;
}
.time-spent-pill{
  background:#ede8ff;
  color:#3217d9;
}

.recommendation-box{
  background:linear-gradient(180deg,#ffffff,#fbf9ff);
  border-color:#eee9ff;
}
.recommendation-summary{
  background:#fff7fb;
  border-left-color:#d733ff;
}
.block-card{
  background:linear-gradient(180deg,#ffffff,#fbf9ff);
  border-color:#eee9ff;
}
.metric-table{
  border-color:#eee9ff;
}
.metric-table th{
  background:#f8f6ff;
}

.subject-francais{
  background:#ede8ff;
  color:#3217d9;
}
.subject-mathematiques{
  background:#f7e8ff;
  color:#8a18d8;
}
.subject-raisonnement{
  background:#fff0e5;
  color:#d95c00;
}
/* Rétrocompatibilité ancienne classe */
.subject-raisonnement_logique{
  background:#fff0e5;
  color:#d95c00;
}
.subject-anglais{
  background:#e0f2fe;
  color:#0369a1;
}
.subject-numerique{
  background:#ecfdf5;
  color:#065f46;
}
.subject-comecrite{
  background:#fef3c7;
  color:#92400e;
}
.level-pill{
  background:#fff0f7;
  color:#c21873;
}

.alert{
  background:#ffe7f0;
  color:#cf1c5e;
}
.close{
  background:linear-gradient(135deg,#3217d9,#d733ff);
}

@media(max-width:1050px){
  .sidebar{box-shadow:none}
}
.sync-box{
  margin-top:18px;
  padding:18px;
  border:1px solid #e4defd;
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#f7f3ff);
}
.sync-box h3{margin:0 0 6px 0;color:#05083f;}
.sync-box input[type="file"]{
  border:1px dashed #b9a8ff;
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.sync-status-banner{
  background:#f0ebff;
  border:1px solid #d4c8ff;
  border-radius:14px;
  padding:10px 14px;
  margin:0 0 14px 0;
  line-height:1.55;
}
.sync-status-banner .sync-ok{color:#0a7c4a;font-weight:500;}
.sync-status-banner .sync-warn{color:#a23a00;font-weight:500;}

/* v17 : la sélection d'une certification et la création de test doivent être visibles immédiatement. */
.cert-card{cursor:pointer;}
.cert-card .always-visible-actions{margin:10px 0 12px;}
.cert-card:focus{outline:3px solid rgba(122,43,255,.45);outline-offset:3px;}
#selectedCertificationPanel{border:2px solid rgba(122,43,255,.25);box-shadow:0 12px 28px rgba(38,14,92,.10);}

/* ─── Banque de questions ───────────────────────────────────────── */
.question-item{padding:14px;border:1px solid #e4defd;border-radius:14px;background:#fff;margin-bottom:10px;}
.question-header{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.question-text{font-size:15px;color:#05083f;margin-bottom:6px;line-height:1.45;}
.question-meta{color:#5a4f7a;margin-bottom:10px;}
.question-actions{display:flex;gap:6px;}
.badge-qcm{background:#eee9ff;color:#4a3aae;}
.badge-vf{background:#dde9ff;color:#1e3a87;}
.badge-multi{background:#ffd9ed;color:#7d2851;}
.badge-text{background:#d8f3e6;color:#1d6b4a;}
.badge-published{background:#d8f0e2;color:#0a7c4a;}
.badge-draft{background:#f0eee5;color:#5e5a4d;}
.btn-small{padding:5px 12px;font-size:12px;border-radius:8px;}
.btn-danger{background:#fff;color:#a23a00;border:1px solid #f0c0a8;}
.btn-danger:hover{background:#fbeae0;}
.btn-primary{background:#5a37e0;color:#fff;border:none;}
.btn-primary:hover{background:#4525c2;}
.role-gestionnaire{background:#fff7e0;color:#86570b;border:1px solid #f0d488;}

/* Modale grande pour l'éditeur */
.modal-card{max-width:680px;}
.modal-card-wide{max-width:960px;overflow-x:auto;}
.form h2{margin:0 0 2px;}
.form-row{display:flex;gap:12px;}
.form-row label{flex:1;}

/* Choix multiples côté stagiaire */
.learner-choices{display:flex;flex-direction:column;gap:8px;margin:14px 0;}
.learner-choice-multi{display:flex;align-items:center;gap:10px;padding:12px 16px;border:2px solid #e0d8f8;border-radius:14px;cursor:pointer;background:#fff;transition:all .15s;}
.learner-choice-multi:hover{border-color:#a89cf0;background:#f8f5ff;}
.learner-choice-multi input[type=checkbox]{width:20px;height:20px;cursor:pointer;}
.learner-choice-multi input:checked + span{font-weight:500;color:#05083f;}
.learner-choice-multi:has(input:checked){border-color:#5a37e0;background:#f3eeff;}
.learner-question-helper{color:#5a4f7a;font-size:14px;margin:0 0 12px 0;font-style:italic;}
.learner-text-answer{width:100%;padding:14px 16px;font-size:16px;border:2px solid #e0d8f8;border-radius:14px;background:#fff;transition:all .15s;box-sizing:border-box;}
.learner-text-answer:focus{outline:none;border-color:#5a37e0;background:#f8f5ff;}

/* ── Dossiers longitudinaux ──────────────────────────────────────────────── */
.dossier-suggest-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:var(--shadow);}
.dossier-suggest-item{padding:10px 14px;cursor:pointer;background:white;border-bottom:1px solid var(--line);}
.dossier-suggest-item:last-child{border-bottom:none;}
.dossier-suggest-item:hover{background:#f4f8fb;}
.dossier-timeline{display:flex;flex-direction:column;gap:10px;}
.dossier-pos-card{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white;}
.dossier-pos-badge{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);padding:12px 8px;color:#fff;font-size:10px;font-weight:700;text-align:center;flex-shrink:0;min-width:32px;}
.dossier-pos-body{flex:1;padding:12px 14px;}

/* ── RGPD avancé ─────────────────────────────────────────────────────────── */
.rgpd-session-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:white;margin-bottom:10px;flex-wrap:wrap;}
.rgpd-session-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.rgpd-session-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rgpd-session-counts{display:flex;flex-direction:column;gap:3px;align-items:flex-end;min-width:140px;}
.rgpd-progress{width:120px;height:6px;background:#e8eef5;border-radius:999px;overflow:hidden;}
.rgpd-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:999px;transition:width .3s;}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — Interface stagiaire optimisée (écrans ≤ 480px)
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ─── Layout général ─── */
  .main{ padding:10px; }
  .panel{ padding:14px; margin-bottom:14px; border-radius:16px; }
  .page-header{ gap:8px; margin-bottom:12px; }
  .page-header h1{ font-size:20px; margin:0 0 4px; }
  .page-header p{ font-size:12px; }
  .pill{ font-size:11px; padding:8px 10px; }

  /* ─── Landing ─── */
  .landing-card{ padding:20px; border-radius:20px; }
  .landing h1{ font-size:26px; }
  .access-card{ min-height:auto; padding:18px; }
  .access-card strong{ font-size:20px; }
  .access-card span{ font-size:13px; }

  /* ─── Sidebar stagiaire en mode mobile (en haut, horizontal) ─── */
  .learner-sidebar{ padding:12px 14px; gap:10px; }
  .learner-sidebar .brand-mini{ padding-bottom:10px; }
  .learner-sidebar nav{ display:flex; gap:6px; flex-wrap:wrap; }
  .learner-sidebar nav button{ flex:1; min-width:100px; padding:9px 8px; font-size:12px; text-align:center; }
  .learner-sidebar .sidebar-footer{ flex-direction:row; gap:6px; flex-wrap:wrap; margin-top:0; }
  .learner-sidebar .sidebar-footer button{ flex:1; padding:9px 8px; font-size:11px; }

  /* ─── Modales ─── */
  .modal{ padding:10px; }
  .modal-card{ padding:16px; border-radius:18px; max-width:100% !important; }
  .small-modal{ width:calc(100vw - 20px) !important; }
  .close{ width:36px; height:36px; font-size:18px; top:8px; right:8px; }
  .modal-card input, .modal-card select{
    min-height:44px; font-size:16px; /* Évite le zoom iOS */
  }
  .modal-card button[type=submit]{ padding:13px; font-size:15px; width:100%; }

  /* ─── Modal consentement IA : boutons en colonne ─── */
  #aiConsentModal .button-row{ flex-direction:column; gap:8px; }
  #aiConsentModal .button-row button{ width:100%; padding:13px; font-size:14px; }

  /* ─── Zone de test — écran d'accueil ─── */
  #learnerTestZone h2{ font-size:17px; }
  #learnerTestZone p, #learnerTestZone li{ font-size:13px; line-height:1.6; }
  #learnerTestZone ul{ padding-left:16px; }

  /* ─── Question (CRITIQUE) ─── */
  .learner-question{ padding:12px; margin:10px 0; border-radius:14px; }

  /* Statut adaptatif : 2 colonnes au lieu de 4 */
  .adaptive-status{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px;
    margin:10px 0;
  }
  .adaptive-status div{ padding:8px; border-radius:10px; }
  .adaptive-status span{ font-size:10px; }
  .adaptive-status strong{ font-size:12px; margin-top:3px; }

  /* Timer */
  .timer-box{ font-size:12px; padding:6px 10px; margin:6px 0; }

  /* Texte d'aide */
  .learner-question-helper{ font-size:12px; }

  /* Texte de la question */
  .learner-question h3{ font-size:16px; line-height:1.5; margin:10px 0; }

  /* Boutons de réponse QCM unique */
  .learner-choice{
    padding:13px 12px;
    font-size:14px;
    min-height:50px;
    border-radius:12px;
    margin-top:8px;
    white-space:normal;
    word-break:break-word;
    line-height:1.4;
  }

  /* Labels QCM multiple */
  .learner-choice-multi{
    padding:11px 12px;
    gap:10px;
    min-height:50px;
    font-size:13px;
    border-radius:12px;
  }
  .learner-choice-multi input[type=checkbox]{ width:20px; height:20px; flex-shrink:0; }
  .learner-choice-multi span{ word-break:break-word; line-height:1.4; }

  /* Bouton Valider */
  #answerBtn{ width:100%; padding:14px; font-size:15px; margin-top:10px; border-radius:14px; }

  /* ─── Résultats ─── */
  #learnerResultZone h2{ font-size:17px; }
  #learnerResultZone p{ font-size:13px; line-height:1.6; word-break:break-word; }

  /* Barre de résultat : 1 colonne sur mobile */
  .chart-row{
    grid-template-columns:1fr !important;
    gap:4px;
    margin:10px 0;
  }
  .chart-row strong{ font-size:13px; }
  .chart-bar{ height:12px; width:100%; }
  .chart-row > span{ font-size:12px; font-weight:700; }

  /* Récap multi-tests */
  .mt-result-row{ flex-direction:column; gap:3px; }
  .mt-result-label{ min-width:auto !important; font-size:12px; }

  /* ─── Satisfaction ─── */
  #satisfactionSurveyZone .panel{ padding:12px; }
  #satisfactionSurveyZone h2{ font-size:16px; }
  #satisfactionSurveyZone button{
    width:100%; padding:12px; font-size:14px;
    margin-top:8px !important; margin-left:0 !important;
  }

  /* ─── Boutons génériques ─── */
  .btn-primary{ font-size:14px; padding:11px 14px; }
  .button-row{ flex-direction:column; gap:8px; }
  .button-row button{ width:100%; }
}

/* ── Archivage sessions ──────────────────────────────────────────────────── */
.item-archived{opacity:.75;background:#f9fbfd!important;border-style:dashed!important;}
.item-archived .item-title{color:#58708a;}

/* ── Identité organisme ──────────────────────────────────────────────────── */
.org-identity-grid{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;}
@media(max-width:700px){.org-identity-grid{grid-template-columns:1fr;}}
.org-logo-zone{display:flex;flex-direction:column;align-items:center;gap:6px;}
.org-logo-preview{width:180px;height:140px;border:2px dashed var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden;padding:8px;}
.org-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;}
.org-contact-form{display:grid;gap:12px;}

/* ── Module Organisation & Antennes ─────────────────────────────────────── */
.antenna-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:white;margin-bottom:8px;}
.antenna-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.antenna-name{font-weight:700;font-size:14px;flex:1;}
.antenna-code{font-size:12px;color:#5E5E6B;background:#f0f4f8;border-radius:8px;padding:2px 8px;}
.antenna-status{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;}
.antenna-status.active{background:#e8f5ee;color:#157347;}
.antenna-status.inactive{background:#fdecea;color:#b42318;}
/* Avis de saisie et volet de modification : ils occupent la largeur sous la
   ligne, d'ou le flex-wrap sur .antenna-row. */
.antenna-row{flex-wrap:wrap;}
/* Le nom garde une largeur minimale : sans elle il se brisait mot par mot
   (« Antenne / de / Cannes ») des que la pastille a remplace le point. */
.antenna-name{flex:1 1 150px;min-width:150px;}
.antenna-actions{display:flex;gap:6px;margin-left:auto;}

.antenna-avis{
  flex:0 0 100%;
  margin:2px 0 0;
  font-size:12px;
  line-height:1.5;
  color:#8A4500;
  background:#FFF8E6;
  border:1px solid #F3DFA8;
  border-radius:8px;
  padding:7px 10px;
}
.antenna-edit{flex:0 0 100%;}
.antenna-edit>summary{
  font-size:12px;
  color:#5E5E6B;
  cursor:pointer;
  padding:4px 0 0;
  width:fit-content;
}
.antenna-edit>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.antenna-edit-corps{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  padding:10px 0 2px;
}
.antenna-edit-corps label{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px;
  color:#5E5E6B;
}
.antenna-edit-corps input[type=text]{width:120px;}
.antenna-edit-corps input[type=color]{width:40px;height:32px;padding:2px;border-radius:4px;cursor:pointer;}
.antenna-edit-note{margin:0 0 2px;color:#5E5E6B;font-size:11px;}
.antenna-apercu-ligne{display:flex;align-items:center;gap:8px;margin-top:2px;}
.antenna-apercu{display:inline-flex;align-items:center;}


.antenna-stats-table{width:100%;border-collapse:collapse;font-size:13px;}
.antenna-stats-table th{text-align:left;padding:8px 10px;background:#f4f8fb;border-bottom:2px solid var(--line);font-size:12px;color:var(--muted);}
.antenna-stats-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.antenna-stats-table tr:last-child td{border-bottom:none;}
.antenna-stats-table tr:hover td{background:#f9fbfd;}

.antenna-bar-wrap{display:inline-block;width:80px;height:8px;background:#e8eef5;border-radius:999px;overflow:hidden;vertical-align:middle;margin-right:6px;}
.antenna-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:999px;}


/* ── Robustesse mot de passe ─────────────────────────────────────────────── */
.pwd-strength-hint{display:block;font-size:12px;margin-top:4px;min-height:16px;font-weight:500;}
.pwd-strength-hint.weak{color:#b42318;}
.pwd-strength-hint.medium{color:#c2410c;}
.pwd-strength-hint.strong{color:#157347;}

/* ── Admin interface — mobile responsive ────────────────────────────────── */
@media(max-width:768px){
  /* Empêche le débordement horizontal global */
  .main{ overflow-x:hidden; padding:14px; }

  /* Cartes de certification : titres longs */
  .cert-card .item-title{ font-size:13px; word-break:break-word; line-height:1.4; }

  /* Boutons de la carte cert : 2 colonnes sur mobile */
  .cert-card .button-row.always-visible-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .cert-card .button-row.always-visible-actions button{
    font-size:11px;
    padding:5px 6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Badges statut : autorisent le retour à la ligne */
  .cert-card .type-badge,
  .cert-card .badge{ font-size:10px; padding:2px 7px; }

  /* Filtres certifications : 1 colonne */
  .sync-box .toolbar{ grid-template-columns:1fr; gap:8px; }
  #certSearch, #certTypeFilter, #certStatusFilter{ width:100%; box-sizing:border-box; }

  /* Panneaux admin : padding réduit */
  .panel{ padding:14px; }

  /* Tableaux comparatifs : scroll horizontal */
  .table-scroll-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width:500px; }

  /* Toolbar général admin */
  .toolbar{ flex-wrap:wrap; gap:8px; }
  .toolbar button, .toolbar input, .toolbar select{ flex:1 1 auto; min-width:120px; }
}

/* ── Apprenants & Banque de questions — mobile ──────────────────────────── */
@media(max-width:768px){
  /* Formulaires apprenants : contenu dans la largeur disponible */
  #learnerForm, #learnerForm input, #learnerForm select,
  #csvImportPanel, #csvImportPanel input, #csvImportPanel select{
    max-width:100%; box-sizing:border-box;
  }
  /* Import CSV : inputs et selects pleine largeur */
  #csvAntennaFilter, #csvSession{ width:100%; box-sizing:border-box; }

  /* Panneau IA Banque de questions : empiler verticalement */
  #aiGeneratorPanel .form-row{
    flex-direction:column;
    gap:10px;
  }
  #aiGeneratorPanel .form-row label{ flex:unset !important; width:100%; }
  #aiGeneratorPanel .form-row select,
  #aiGeneratorPanel .form-row input{ width:100%; box-sizing:border-box; }
  #aiGeneratorPanel .form-row #aiCount{ width:100%; }
  #aiGeneratorPanel .form-row #aiGenerateBtn{
    width:100%; align-self:unset; margin-top:4px;
  }

  /* Toolbars banque de questions : 1 colonne */
  #questions .toolbar{
    flex-direction:column; gap:8px;
  }
  #questions .toolbar select,
  #questions .toolbar input,
  #questions .toolbar button{
    width:100%; min-width:unset !important; box-sizing:border-box;
  }
}

/* ── KPI Qualiopi 5 colonnes — responsive ───────────────────────────────── */
.kpis-5{ grid-template-columns:repeat(5,1fr); }
@media(max-width:768px){
  .kpis-5{ grid-template-columns:repeat(2,1fr); }
  .kpis-5 article:last-child{ grid-column:1 / -1; }
}

/* ── Badge type CQP / certifications manuelles ──────────────────────────── */
.type-cqp{ background:#fef3c7; color:#92400e; border:1px solid #fbbf24; }

/* ── Modal scrollable quand le contenu dépasse la fenêtre ───────────────── */
.modal-card{
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}
/* Modal création certification : plus large pour afficher les blocs IA */
#createCertModal .modal-card{
  width: min(600px, 100%);
}

/* ═════════════════════════════════════════════════════════════════════════════
   COUCHE REFONTE 2026 — habillage servi quand POSITIONN_UI=2
   ─────────────────────────────────────────────────────────────────────────────
   Tout ce qui précède est la feuille historique, reprise telle quelle : aucun
   écran ne peut se retrouver sans style. Cette couche la recouvre.

   Règles de la charte (docs : DESIGN.md) :
     · fond neutre, cartes blanches à bordure fine, ombres quasi absentes ;
     · UNE couleur d'accent, réservée à ce qui est cliquable ou actif ;
     · EXCEPTION : la palette sémantique (acquis / à consolider / non acquis)
       est conservée — dans PositioNN, ces couleurs portent du sens et les
       seuils sont paramétrables par session ;
     · pas de dégradé (sauf aucun), pas de barre colorée décorative, pas de halo ;
     · deux rayons : 8 px (boutons, champs, pastilles de nav) et 12 px (cartes).
   ═════════════════════════════════════════════════════════════════════════════ */

:root{
  /* Surfaces et texte */
  /* Le fond était à 3 % du blanc des cartes : les blocs se fondaient les uns dans
     les autres, on ne distinguait plus où commençait une fiche. Porté à ~6 %, et
     le filet des cartes assombri d'autant. Un trait qu'on ne voit pas ne sépare
     rien — la sobriété ne doit pas se payer en lisibilité. */
  --bg:#EDEDF2;
  --panel:#FFFFFF;
  --surface-muted:#F4F4F7;
  --ink:#16161D;
  --muted:#5E5E6B;
  --subtle:#6B6B78;
  --line:#D8D8E1;
  --line-subtle:#EAEAF0;
  --line-input:#DCDCE3;

  /* Accent unique — interactif, actif, lien */
  --primary:#5B3BE8;
  --primary-dark:#4A2FD0;
  --accent:#5B3BE8;
  --accent-soft:rgba(91,59,232,.09);

  /* Couleurs de SENS — résultats et statuts (conservées) */
  --ok:#116A33;   /* 4,47:1 sur --ok-bg : juste sous le seuil, assombri à 5,97:1 */      --ok-bg:#E8F5EE;
  --warn:#9A4A00;    --warn-bg:#FFF1DE;
  --ko:#B42318;      --ko-bg:#FDECEA;

  /* Ces variables étaient utilisées comme décor : on les neutralise */
  --accent-2:#5B3BE8; --accent-pink:#5B3BE8; --accent-orange:#9A4A00;
  --green:#15803D;    --yellow:#9A4A00;

  /* Relief : presque rien */
  --shadow:0 1px 2px rgba(22,22,29,.06);
  --soft-shadow:0 1px 2px rgba(22,22,29,.05);

  --radius-sm:8px;
  --radius-md:12px;
  --font:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body{
  background:var(--bg);
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* Les titres passent en Archivo condensé. La graisse reste modérée : sur une
   police à chasse variable, c'est l'étroitesse qui porte le caractère, et au-delà
   de 650 le rendu devient épais. */
h1,h2,h3,h4{font-family:var(--display);font-stretch:78%;letter-spacing:-.005em}
h1{font-weight:620;line-height:1.06}
h2{font-weight:620}
h3,h4{font-weight:600}
/* Les grands nombres aussi : c'est là que la condensation se voit le mieux, et
   les chiffres s'alignent d'une ligne à l'autre. */
.kpis strong,.a-traiter-nombre,.score-big,.num{
  font-family:var(--display);
  font-stretch:72%;
  font-weight:620;
  font-variant-numeric:tabular-nums;
}
a{color:var(--accent)}
.small{color:var(--muted);font-size:12.5px}
.txt,.strong{letter-spacing:normal}

/* ── Barre latérale : blanche, discrète, actif en accent doux ──────────────── */
.sidebar{
  background:var(--panel);
  color:var(--ink);
  border-right:1px solid var(--line);
  padding:20px 14px;
  gap:18px;
}
.brand-mini{border-bottom:1px solid var(--line);padding-bottom:16px}
.brand-mini span{color:var(--subtle)}
.logo{
  background:var(--accent);
  color:#fff;
  border-radius:9px;
  font-weight:700;
  font-size:17px;
  width:34px;height:34px;
}
.logo.mini{width:34px;height:34px;font-size:17px;border-radius:9px}
nav{gap:2px}
nav button,.sidebar-footer button{
  background:transparent;
  border:0;
  color:var(--ink);
  font-weight:500;
  font-size:14px;
  border-radius:var(--radius-sm);
  padding:0 10px;
  min-height:40px;
  box-shadow:none;
}
nav button:hover,.sidebar-footer button:hover{background:var(--surface-muted);color:var(--ink)}
nav button.active{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
  box-shadow:none;
}
.sidebar-footer button{color:var(--muted)}
.logout{
  background:var(--panel)!important;
  color:var(--muted)!important;
  border:1px solid var(--line-input)!important;
  border-radius:var(--radius-sm)!important;
  font-weight:500!important;
}

/* ── Menu groupé et icônes au trait (posés par habillerNavigation) ─────────── */
/* Le menu suivait l'ordre du code ; il suit maintenant le déroulé du travail.
   Les icônes sont dessinées dans app.js et prennent la couleur du texte, donc
   elles restent lisibles en contraste renforcé — ce que les émojis ne font pas. */
.nav-groupe{display:grid;gap:2px}
.nav-groupe + .nav-groupe{margin-top:12px}
.nav-groupe-titre{
  margin:0 0 2px;
  padding:0 10px;
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--subtle);
}
/* 36 px : les six intitulés de groupe ajoutent de la hauteur, les quinze
   entrées doivent continuer à tenir sans ascenseur sur un portable 1440×860. */
.sidebar nav button{display:flex;align-items:center;gap:10px;text-align:left;min-height:36px}
.nav-icone{
  width:18px;
  height:18px;
  flex:0 0 18px;      /* sans cela l'icône s'étire à la hauteur du bouton */
  opacity:.7;
}
.sidebar nav button:hover .nav-icone{opacity:.9}
.sidebar nav button.active .nav-icone{opacity:1}
/* Compteurs (validations en attente, contestations) : sobres, poussés à droite */
.nav-badge{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  border-radius:999px!important;
  padding:1px 7px!important;
  font-size:11px!important;
  font-weight:600;
  margin-left:auto!important;
}
.nav-badge-retard{background:var(--ko)!important;color:#fff!important}

/* ── « À traiter » : la première chose qu'on lit en arrivant ───────────────── */
/* Posée avant les indicateurs, parce qu'un devoir passe avant une statistique.
   Sobre volontairement : si tout criait, plus rien ne ressortirait. Seule une
   ligne vraiment en retard porte une couleur. */
.a-traiter{margin-bottom:22px}
.a-traiter h2{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.a-traiter-total{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:999px;
  padding:1px 9px;
  font-size:12px;
  font-weight:600;
}
.a-traiter-liste{list-style:none;margin:0;padding:0}
.a-traiter-ligne{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-top:1px solid var(--line-subtle);
}
.a-traiter-ligne:first-child{border-top:0}
.a-traiter-nombre{
  flex:0 0 38px;
  text-align:right;
  font-size:21px;
  font-weight:600;
  font-variant-numeric:tabular-nums;   /* les nombres s'alignent d'une ligne à l'autre */
  color:var(--ink);
}
.a-traiter-ligne.urgent .a-traiter-nombre{color:var(--ko)}
.a-traiter-texte{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.a-traiter-texte strong{font-size:14px;font-weight:500;color:var(--ink)}
.a-traiter-texte .small{color:var(--muted);font-size:12.5px}
.a-traiter-action{flex-shrink:0}
.a-traiter-vide{margin:0;font-size:15px;color:var(--ink);font-weight:500}
.a-traiter-vide-detail{margin:4px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .a-traiter-ligne{flex-wrap:wrap}
  .a-traiter-nombre{flex-basis:auto}
  .a-traiter-action{margin-left:52px}
}

/* ── Listes denses : une ligne par personne, les actions sur demande ───────── */
/* Une fiche apprenant prenait ~290 px pour trois informations, avec six boutons
   presque toujours inutilisés qui occupaient plus de place que le contenu.
   Vingt apprenants = cinq écrans de défilement. Ici la ligne tient en ~46 px et
   <details> révèle les actions quand on en a besoin. */
.apprenant{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  margin-bottom:6px;
}
.apprenant[open]{border-color:var(--accent)}
.apprenant-tete{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;          /* on remplace le triangle par notre propre marqueur */
  min-height:46px;
}
.apprenant-tete::-webkit-details-marker{display:none}
.apprenant-tete:hover{background:var(--surface-muted)}
.apprenant-tete:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Marqueur d'ouverture dessiné au trait, qui pivote : il indique l'état sans
   dépendre d'un caractère dont le rendu varie d'un système à l'autre. */
.apprenant-tete::before{
  content:"";
  flex:0 0 8px;
  height:8px;
  border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);
  transform:rotate(-45deg);
  transition:transform .15s ease;
  margin-right:2px;
}
.apprenant[open] .apprenant-tete::before{transform:rotate(45deg)}
.apprenant-nom{font-weight:600;font-size:14px;color:var(--ink);flex:0 0 auto}
.apprenant-identifiant{
  font-size:12.5px;
  color:var(--muted);
  background:transparent;
  padding:0;
}
.apprenant-courriel{font-size:12.5px;color:var(--subtle)}
.apprenant-session,.apprenant-badge{
  margin-left:auto;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42%;
}
.apprenant-badge{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:999px;
  padding:2px 10px;
  font-weight:500;
  flex:0 0 auto;
}
.apprenant-detail{
  padding:4px 14px 14px;
  border-top:1px solid var(--line-subtle);
}
.apprenant-inscription{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  flex-wrap:wrap;
}
.apprenant-inscription + .apprenant-inscription{border-top:1px solid var(--line-subtle)}
.apprenant-inscription-nom{flex:1;min-width:180px;font-size:13px;color:var(--ink)}
@media (max-width:720px){
  .apprenant-tete{flex-wrap:wrap;gap:8px}
  .apprenant-session,.apprenant-badge{margin-left:0;max-width:100%}
}

/* ── Sessions : même principe, une ligne par session ───────────────────────── */
/* La fiche faisait ~452 px. Un SEUL état est affiché, le plus engageant : six
   badges côte à côte et plus rien ne ressortait. */
.session-ligne{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  margin-bottom:6px;
}
.session-ligne[open]{border-color:var(--accent)}
.session-ligne.archivee{background:var(--surface-muted)}
.session-tete{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  min-height:46px;
}
.session-tete::-webkit-details-marker{display:none}
.session-tete:hover{background:var(--surface-muted)}
.session-tete:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.session-tete::before{
  content:"";
  flex:0 0 8px;
  height:8px;
  border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);
  transform:rotate(-45deg);
  transition:transform .15s ease;
  margin-right:2px;
}
.session-ligne[open] .session-tete::before{transform:rotate(45deg)}
.session-nom{
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  flex:1 1 auto;
  min-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ── Repère d'antenne : un carré plein et un liseré, rien de plus ───────────
   La couleur sert à REGROUPER du regard avant la lecture, pas à décorer. Elle
   n'occupe donc que deux endroits minuscules : un carré de 26 px qui porte le
   code de l'antenne, et le bord gauche de la ligne.
   Règle à tenir : la couleur ne doit JAMAIS être le seul porteur de
   l'information — le carré affiche toujours le code, et le nom complet est
   écrit à côté. C'est un critère RGAA, et c'est aussi la seule façon que ça
   marche pour un daltonien.
   La couleur du texte du carré est calculée par couleurTexteSur() : elle est
   choisie librement par l'administrateur, on ne peut pas présumer du blanc. */
.session-carre{
  flex:0 0 auto;
  /* Pas un carré strict : les codes font deux à quatre lettres (FRJ, CAM, MUY).
     Une largeur fixe les écraserait ou les couperait. */
  min-width:26px;height:26px;padding:0 6px;
  border-radius:4px;
  display:grid;place-items:center;
  font-family:var(--display);
  font-stretch:74%;
  font-weight:680;
  font-size:12px;
  letter-spacing:.02em;
}
.session-antenne{
  flex:0 0 auto;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}
/* Le liseré n'existe que si l'antenne est déclarée : sa couleur est posée en
   style direct sur la ligne. */
.session-ligne.situee{border-left-width:3px}
.session-type,.session-compte{
  flex:0 0 auto;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
}
.session-etat{
  flex:0 0 auto;
  font-size:12px;
  padding:2px 10px;
  border-radius:999px;
  white-space:nowrap;
  background:var(--surface-muted);
  color:var(--muted);
}
.session-etat.attente{background:var(--warn-bg);color:var(--warn)}
.session-etat.faite{background:var(--ok-bg);color:var(--ok)}
.session-detail{padding:4px 14px 14px;border-top:1px solid var(--line-subtle)}
.session-certification{font-size:13px;color:var(--ink);margin:10px 0}
.session-periode{color:var(--muted);margin-left:10px}
.session-aide{color:var(--muted);margin:6px 0 0;font-size:11.5px}
@media (max-width:860px){
  .session-tete{flex-wrap:wrap;gap:8px}
  .session-nom{flex-basis:100%}
}

/* Pied de liste du catalogue : ce qui reste, et comment aller plus vite. */
.certs-suite{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 0 4px;
}
.certs-suite .small{color:var(--muted)}

/* Boîte d'outils super-admin : ce sont des actions de maintenance (synchroniser,
   tester, enrichir), pas six actions principales. Sans cette règle elles héritent
   toutes de l'accent et la boîte devient un mur violet où plus rien ne ressort.
   Seule celle qui porte .btn-primary — « Créer une certification » — garde
   l'accent, parce que c'est la seule qui crée quelque chose. */
.sync-box button{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line-input);
  font-weight:500;
}
.sync-box button:hover{background:var(--surface-muted)}

/* ── Contenu ──────────────────────────────────────────────────────────────── */
.main{padding:32px 40px}
.page-header{margin-bottom:22px;align-items:flex-end}
.page-header h1{font-size:26px;font-weight:600;margin:0 0 4px}
.page-header p{color:var(--muted);font-size:14px}
.pill{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:none;
  padding:9px 14px;
  font-size:13px;
  color:var(--muted);
}
.pill strong{color:var(--ink)}

/* ── Cartes : bordure fine, pas d'ombre marquée ───────────────────────────── */
/* .centre-card et .student-card sont EXCLUES de cette règle : leur texte est
   prévu pour un fond sombre, les repeindre en clair ici les rendait illisibles
   (carte « Espace professionnel » blanche sur blanc). Elles sont traitées plus
   bas, fond ET texte posés ensemble. */
.panel,.item,.block-card,.recommendation-box,.info-box,.cert-card,
.learner-card-inner,.dossier-pos-card,.multi-result-test-block{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  /* Pas « aucune ombre » mais l'ombre la plus discrète de la charte : sans elle,
     une carte blanche sur fond presque blanc ne se détachait pas et les blocs
     se confondaient dans une liste. Un tout petit relief vaut mieux qu'un écran
     illisible. */
  box-shadow:var(--shadow);
  background:var(--panel);
}
.panel{padding:20px}
.item{padding:16px 18px}
.item-title{font-weight:600;font-size:15px}
.recommendation-summary{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm)}

/* ── Bandeau d'indicateurs : une grille, séparée par des filets ────────────── */
.kpis,.kpis-5{
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  gap:1px;
  margin-bottom:22px;
}
.kpis article,.kpis-5 article{
  background:var(--panel);
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:18px 20px;
}
.kpis article:before,.kpis-5 article:before{display:none}
.kpis span,.kpis-5 span{color:var(--muted);font-size:13px}
.kpis strong,.kpis-5 strong{
  font-size:30px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}

/* ── Boutons : un principal plein, des secondaires sobres ─────────────────── */
button{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:9px;
  font-weight:600;
  font-size:13.5px;
  padding:0 16px;
  min-height:40px;
}
button:hover{background:var(--primary-dark)}
.btn-small,.btn-icon,.btn-admin-discreet,.warning-button,.admin-discreet-row button{
  background:var(--panel)!important;
  color:var(--ink)!important;
  border:1px solid var(--line-input)!important;
  border-radius:var(--radius-sm)!important;
  font-weight:500!important;
  min-height:36px;
  font-size:13px;
}
.btn-small:hover,.btn-icon:hover{background:var(--surface-muted)!important}
.btn-primary{background:var(--accent)!important;color:#fff!important;border:0!important;font-weight:600!important}

/* ── Boutons d'action : la forme dit la nature de l'action ─────────────────── */
/* Ces classes doublent des couleurs encore posées EN LIGNE dans index.html et
   app.js. C'est volontaire et temporaire : le style en ligne reste la seule
   source de couleur pour les instances en habillage 1, qui ignorent ces classes
   — d'où le !important ici. Le ménage des styles en ligne se fera quand les
   trois instances seront passées en habillage 2, pas avant. */
.btn-ia,.btn-neutre,.btn-ghost,.btn-warn{
  border-radius:var(--radius-sm)!important;
  box-shadow:none!important;
}
/* Action assistée par l'IA : accent en aplat léger. Volontairement distincte de
   .btn-primary (accent plein) — les deux se côtoient à la création d'un test,
   et l'œil doit pouvoir dire laquelle est la voie principale. */
.btn-ia{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  border:1px solid transparent!important;
  font-weight:600!important;
}
.btn-ia:hover{background:rgba(91,59,232,.16)!important}
/* Action informative : consulter, imprimer, ouvrir. */
.btn-neutre{
  background:var(--panel)!important;
  color:var(--ink)!important;
  border:1px solid var(--line-input)!important;
  font-weight:500!important;
}
.btn-neutre:hover{background:var(--surface-muted)!important}
/* Retrait : annuler, revenir, fermer. Jamais une couleur, c'est une sortie. */
.btn-ghost{
  background:transparent!important;
  color:var(--muted)!important;
  border:1px solid var(--line-input)!important;
  font-weight:500!important;
}
.btn-ghost:hover{background:var(--surface-muted)!important;color:var(--ink)!important}
/* Prudence : réinitialiser un mot de passe, suspendre un compte. L'ambre est ici
   porté par le TEXTE et le filet, pas par un aplat : la palette de sens reste
   réservée aux résultats, conformément à la charte. */
.btn-warn{
  background:var(--panel)!important;
  color:var(--warn)!important;
  border:1px solid #E3C49E!important;
  font-weight:500!important;
}
.btn-warn:hover{background:var(--warn-bg)!important}

/* Destructif : au repos, du texte rouge sur fond clair ; plein seulement au
   survol et au clavier. Une liste d'apprenants affiche un « Retirer » par ligne :
   en aplat rouge, l'écran entier criait au danger et le rouge ne voulait plus
   rien dire. Le rouge doit signaler le MOMENT du danger, pas l'état de repos. */
.btn-danger{
  background:var(--panel)!important;
  color:var(--ko)!important;
  border:1px solid #E8B4AE!important;
  font-weight:500!important;
}
.btn-danger:hover,.btn-danger:focus-visible{
  background:var(--ko)!important;
  color:#fff!important;
  border-color:var(--ko)!important;
}
/* Action de LIGNE dans une liste : même marquée btn-primary dans le gabarit, ce
   n'est pas l'action principale de la page. En aplat d'accent répété à chaque
   ligne, elle écrasait le contenu qu'elle est censée servir. */
.item .btn-small.btn-primary,
.dash-session-row .btn-small.btn-primary{
  background:var(--panel)!important;
  color:var(--accent)!important;
  border:1px solid var(--accent)!important;
  font-weight:500!important;
}
.item .btn-small.btn-primary:hover,
.dash-session-row .btn-small.btn-primary:hover{
  background:var(--accent-soft)!important;
}
/* .btn-danger est traité plus haut, en « rouge au repos, plein au survol ».
   .danger-button reste en aplat : c'est le bouton de confirmation d'une boîte de
   dialogue destructive, là où le danger est justement le propos du moment. */
.danger-button{background:var(--ko)!important;color:#fff!important;border:0!important}
.button-row{gap:8px;margin:12px 0}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
label{font-weight:500;color:var(--ink);font-size:13px}
input,select,textarea{
  border:1px solid var(--line-input);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--ink);
  font-size:14px;
  padding:10px 12px;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent-soft);
  border-color:var(--accent);
}
.form{gap:12px}
/* Le formulaire est une grille, et .grid-2 etire ses deux colonnes a la meme
   hauteur : quand le panneau voisin est plus haut (ecran Administration avec
   beaucoup de comptes), les lignes AUTO se partagent l'espace restant et chaque
   champ se retrouve seul en haut d'une ligne de 158 px au lieu de 66.
   Visuellement : ~90 px de vide entre chaque champ, et un formulaire qui a
   l'air casse. align-content:start garde les champs groupes en haut et laisse
   le vide en bas, la ou il ne gene pas.
   NE SE VOIT QU'EN DEUX COLONNES : sous le point de bascule la grille passe a
   une colonne, plus rien n'etire, et le defaut disparait. */
.form{align-content:start;}
/* ── Reste a valider (ecran Resultats) ───────────────────────────────────
   Le compteur et le filtre sont le seul endroit qui repond a « ai-je fini ? ».
   L'ambre signale un travail en cours, pas une erreur : TEINTE_MOYEN #8A4500
   sur #FFF8E6, 6,76:1. Non gate — c'est un defaut d'usage sur une obligation
   reglementaire (IA Act Art. 14), pas de l'habillage. */
.barre-validation{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.validation-etat{font-size:13px;border-radius:999px;padding:5px 12px;font-weight:600;}
.validation-reste{color:#8A4500;background:#FFF8E6;border:1px solid #F3DFA8;}
.validation-finie{color:#116A33;background:#E8F5EE;border:1px solid #BFE3CE;}
.badge-a-valider{background:#FFF8E6;color:#8A4500;border:1px solid #F3DFA8;font-weight:700;}



/* ── Pastilles et badges : rayon 6, sans gras excessif ────────────────────── */
.badge,.type-badge,.role-pill,.subject-pill,.level-pill,.difficulty-pill,
.time-spent-pill,.dossier-pos-badge,.badge-site{
  border-radius:6px;
  font-weight:600;
  font-size:12px;
  padding:3px 8px;
  background:var(--surface-muted);
  color:var(--muted);
}
.type-rncp,.type-diplome,.type-rs,.type-cqp,.type-transversal,
.role-super,.role-admin,.role-gestionnaire,
.subject-francais,.subject-mathematiques,.subject-raisonnement,
.subject-raisonnement_logique,.subject-anglais,.subject-numerique,
.subject-comecrite,.level-pill{
  background:var(--surface-muted);
  color:var(--muted);
}
/* Sens conservé : résultats, difficulté, statuts */
.ok,.score-ok,.result-ok,.sync-ok,.diff-1,.badge-published{background:var(--ok-bg)!important;color:var(--ok)!important}
.warn,.score-warn,.result-warn,.sync-warn,.diff-2,.badge-draft{background:var(--warn-bg)!important;color:var(--warn)!important}
.ko,.score-ko,.result-ko,.diff-3{background:var(--ko-bg)!important;color:var(--ko)!important}
.alert{background:var(--ko-bg);color:var(--ko);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px}

/* ── Tableaux : en-tête discret, chiffres alignés ──────────────────────────── */
.comparison-table,.metric-table,.antenna-stats-table{
  font-size:13px;
  border-color:var(--line);
  border-radius:var(--radius-md);
  font-variant-numeric:tabular-nums;
}
.comparison-table th,.metric-table th,.antenna-stats-table th{
  background:#FAFAFB;
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
}
.comparison-table td,.comparison-table th,.metric-table td,.metric-table th{border-color:var(--line-subtle)}
.comparison-wrapper,.table-scroll-wrap{border:1px solid var(--line);border-radius:var(--radius-md)}
.score-cell{border-radius:6px;font-weight:600}
.score-empty{background:var(--surface-muted);color:var(--subtle)}

/* ── Graphiques simples ───────────────────────────────────────────────────── */
.chart-bar{background:#EDEDF2;border-radius:999px;height:6px}
.chart-bar span{background:var(--accent)}
.antenna-bar{background:var(--accent)}
.rgpd-progress-bar,.dash-skill-bar-mini{background:var(--accent)}

/* ── Écran d'accueil (connexion) : à plat ─────────────────────────────────── */
.landing{background:var(--bg)}
.landing-card{
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(22,22,29,.08);
  padding:36px;
}
.landing h1{font-size:30px;font-weight:600}
.access-card{border-radius:var(--radius-md);padding:24px;min-height:160px}
.access-card strong{font-size:20px;font-weight:600}
.access-card span{font-size:14px}
.admin-card{background:var(--accent)}
/* Les deux portes d'entrée : une claire, une sombre, pour qu'on les distingue
   d'un coup d'œil. Le texte est posé explicitement sur chacune — c'est ce qui
   manquait et rendait « Espace professionnel » invisible hors survol. */
.centre-card{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.centre-card strong,.centre-card span{color:var(--ink)}
.centre-card span{color:var(--muted)}
.centre-card:hover{background:var(--surface-muted);border-color:var(--accent)}
.learner-card,.student-card{background:#16161D;border:1px solid #16161D;color:#fff}
.learner-card strong,.learner-card span,
.student-card strong,.student-card span{color:#fff}
.notice{background:var(--surface-muted);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px}

/* ── Fenêtres modales ─────────────────────────────────────────────────────── */
.modal{background:rgba(22,22,29,.45)}
.modal-card{border-radius:var(--radius-md);box-shadow:0 12px 40px rgba(22,22,29,.14);padding:24px}
.close{border-radius:var(--radius-sm);background:var(--surface-muted);color:var(--ink);width:36px;height:36px}
.close:hover{background:var(--line)}

/* ── Espace stagiaire : lisibilité d'abord ────────────────────────────────── */
.learner-question,.student-question{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px;
}
.question-text{font-size:17px;line-height:1.5}
.learner-choice,.student-choice,.learner-choice-multi{
  background:var(--panel);
  border:1px solid var(--line-input);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-weight:400;
  font-size:15px;
  min-height:48px;
  padding:12px 14px;
  box-shadow:none;
}
.learner-choice:hover,.student-choice:hover{background:var(--surface-muted)}
.learner-choice.selected,.student-choice.selected{
  border-color:var(--accent);
  background:var(--accent-soft);
  outline:none;
}
.learner-text-answer{border:1px solid var(--line-input);border-radius:var(--radius-sm)}
.adaptive-status div{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel)}
.adaptive-status strong{color:var(--ink);font-variant-numeric:tabular-nums}
.adaptive-path,.adaptive-path-row{border-color:var(--line-subtle)}
.adaptive-path-row:nth-child(odd){background:#FAFAFB}
.timer-box{border-radius:var(--radius-sm);background:var(--surface-muted);color:var(--muted);font-weight:600}
.timer-box.warning{background:var(--warn-bg);color:var(--warn)}
/* Message d'erreur de réponse : porté par role="alert", donc lu dès qu'il
   apparaît. Vide, il ne doit pas réserver d'espace ni créer de saut. */
.learner-erreur{
  margin:10px 0 0;
  font-size:14px;
  color:var(--ko);
  font-weight:500;
}
.learner-erreur:empty{display:none}
/* Le focus doit être VISIBLE sur l'écran de passation : c'est là qu'on navigue
   au clavier, et la seule bordure d'accent de l'état sélectionné ne suffit pas
   à dire où l'on se trouve. */
.learner-choice:focus-visible,.learner-choice-multi:focus-within,.learner-text-answer:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.result-pct,.result-badge-large{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── Tableau de bord : alertes et lignes ──────────────────────────────────── */
.dash-alert-group,.dash-alert-row,.dash-session-row,.dash-recent-row{border-color:var(--line-subtle)}
.dash-alert-icon{background:var(--surface-muted);border-radius:10px;color:var(--muted)}
.dash-alert-title{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.info-kpi,.sync-status-banner,.info-box{border-radius:var(--radius-md);border:1px solid var(--line);background:var(--panel)}

/* ── Divers : plus de relief résiduel ─────────────────────────────────────── */
.session-tests-block,.session-test-item,.question-item,.dossier-suggest-list,
.heat-grid,.heat-bloc,.histogram-box,.org-logo-zone,.rgpd-session-row,
.antenna-row,.mt-step,.multi-test-banner{
  border-radius:var(--radius-sm);
  border-color:var(--line);
  box-shadow:none;
}
.mt-steps,.mt-results-summary{gap:8px}
.heat-cell{border-radius:6px}

@media(max-width:1050px){
  .main{padding:20px}
  .page-header h1{font-size:22px}
}

/* ── Champ de recherche à liste filtrée ──────────────────────────────────────
   Une liste déroulante de 6526 entrées ne se tape pas, elle se fait défiler :
   autant dire qu'elle est inutilisable. Ce champ filtre à la frappe.
   L'entrée visée au clavier est marquée .vise — pas seulement par la couleur,
   elle porte aussi aria-selected, lu par les lecteurs d'écran. */
.champ-recherche{position:relative;display:block}
.champ-recherche > ul{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  max-height:290px;overflow-y:auto;margin:0;padding:4px;
  list-style:none;background:var(--panel);
  border:1px solid var(--line-input);border-radius:var(--radius-md);
  box-shadow:0 12px 30px rgba(22,22,29,.14);
}
.champ-recherche > ul li{
  padding:8px 10px;border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--ink);cursor:pointer;
}
.champ-recherche > ul li.vise{background:var(--accent-soft);color:var(--accent);font-weight:700}
.champ-recherche > ul li.aucun{color:var(--muted);cursor:default}

/* Sessions en cours du tableau de bord : même repère que la liste des sessions.
   Le liseré n'apparaît que si l'antenne est déclarée — sinon toutes les lignes
   porteraient le même bord et le repère ne repérerait rien. */
.dash-session-row{display:flex;align-items:center;gap:11px;border-left:3px solid transparent}
.dash-session-row.situee{padding-left:9px}

/* En-tête de l'écran Résultats : rappelle quelle session et quel site on
   regarde. Une seule pastille — l'écran est cadré sur une session, la répéter
   sur chaque apprenant ne distinguerait rien. */
.resultat-entete{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--line-subtle);
}
.resultat-session{font-family:var(--display);font-stretch:80%;font-weight:620;font-size:16px;color:var(--ink)}
.resultat-site{font-size:12.5px;color:var(--muted)}

/* La ligne d'inscription d'un apprenant porte sa pastille. */
.apprenant-inscription .session-carre{flex:0 0 auto}