/* ═══════════════════════════════════════════════════════════════════════════
   App-Cap — Thème unique (clair + sombre). Chargé EN DERNIER : c'est la source de vérité.
   1. Jetons de design      2. Alias des anciennes variables (--c-*, --fm-*, --bs-*)
   3. Utilitaires Tailwind en mode sombre      4. Corrections de composants tiers
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --ui-bg: #f4f6fb;
  --ui-bg-2: #eaeef6;            /* zones en creux (champs, entêtes de tableau) */
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafd;       /* surface secondaire (cartes imbriquées) */
  --ui-border: #e3e8f2;
  --ui-border-strong: #cfd7e6;
  --ui-text: #0e1a2f;
  --ui-text-2: #33415c;
  --ui-muted: #5a6a86;
  --ui-primary: #4f46e5;         /* accent (liens, icônes, bordures actives) */
  --ui-primary-rgb: 79, 70, 229;
  --ui-primary-solid: #4f46e5;   /* fond des boutons */
  --ui-primary-solid-hover: #4338ca;
  --ui-on-primary: #ffffff;
  --ui-accent-2: #7c3aed;
  /* Couleur d'icône "primaire" du système d'iconographie (§6.6) : cyan profond,
     distincte de l'indigo des actions, lisible sur fond clair */
  --ui-ico-primary: #0891b2;
  /* Action ambre (exam-expert : enregistrer / production / mode groupe) */
  --ui-amber-action: #ffc107; --ui-amber-fg: #212529;
  --ui-ok: #15803d;  --ui-ok-bg: rgba(22,163,74,.12);
  --ui-ok-rgb: 22, 163, 74;
  --ui-warn: #b45309; --ui-warn-bg: rgba(217,119,6,.14);
  --ui-warn-rgb: 217, 119, 6;
  --ui-bad: #b91c1c;  --ui-bad-bg: rgba(220,38,38,.11);
  --ui-bad-rgb: 220, 38, 38;
  --ui-info: #0e7490; --ui-info-bg: rgba(8,145,178,.12);
  --ui-info-rgb: 8, 145, 178;
  --ui-radius: 14px; --ui-radius-sm: 10px;
  --ui-shadow-xs: 0 1px 2px rgba(15,26,47,.05);
  --ui-shadow-sm: 0 1px 3px rgba(15,26,47,.07), 0 1px 2px rgba(15,26,47,.04);
  --ui-shadow-md: 0 10px 28px rgba(15,26,47,.10);
  --ui-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), .25);
  --ui-sidebar-bg: #0f172a; --ui-sidebar-text: #cbd5e1; --ui-sidebar-muted: #64748b;
  --ui-header-bg: rgba(255,255,255,.86);
  --ui-code-bg: #f1f4fa;
  --ui-scrim: rgba(10, 16, 32, .5);
  /* Console de logs : jetons dédiés (fond sombre permanent, texte lisible) */
  --ui-console-bg: #101828;
  --ui-console-header-bg: #16203a;
  --ui-console-border: #26324d;
  --ui-console-fg: #d6e2f5;
  --ui-console-dim: #8fa2c2;
  --ui-console-accent: #38bdf8;
  --ui-console-error: #fca5a5;
  --ui-console-warn: #fde047;
  --ui-console-ok: #86efac;
  --ui-console-info: #93c5fd;
}
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0a0f1e;
  --ui-bg-2: #0d1426;
  --ui-surface: #111a2f;
  --ui-surface-2: #16213a;
  --ui-border: #232f4b;
  --ui-border-strong: #324468;
  --ui-text: #e8edf9;
  --ui-text-2: #c3cee6;
  --ui-muted: #93a3c4;
  --ui-primary: #8f95ff;
  --ui-primary-rgb: 143, 149, 255;
  --ui-primary-solid: #5b54f0;
  --ui-primary-solid-hover: #6d67f5;
  --ui-ok: #4ade80;  --ui-ok-bg: rgba(74,222,128,.14);
  --ui-ok-rgb: 74, 222, 128;
  --ui-warn: #fbbf24; --ui-warn-bg: rgba(251,191,36,.15);
  --ui-warn-rgb: 251, 191, 36;
  --ui-bad: #f87171;  --ui-bad-bg: rgba(248,113,113,.15);
  --ui-bad-rgb: 248, 113, 113;
  --ui-info: #38bdf8; --ui-info-bg: rgba(56,189,248,.14);
  --ui-info-rgb: 56, 189, 248;
  /* Icône primaire : cyan éclairci pour rester lisible sur fond sombre */
  --ui-ico-primary: #22d3ee;
  /* Action ambre : identique (l'ambre est lisible dans les deux modes) */
  --ui-amber-action: #ffc107; --ui-amber-fg: #212529;
  --ui-shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --ui-shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --ui-shadow-md: 0 12px 32px rgba(0,0,0,.5);
  --ui-sidebar-bg: #070b17; --ui-sidebar-text: #c3cee6; --ui-sidebar-muted: #6b7a99;
  --ui-header-bg: rgba(10,15,30,.82);
  --ui-code-bg: #0d1426;
  --ui-scrim: rgba(0, 0, 0, .65);
  /* Console de logs : fond sombre permanent (identique au thème clair) */
  --ui-console-bg: #101828;
  --ui-console-header-bg: #16203a;
  --ui-console-border: #26324d;
  --ui-console-fg: #d6e2f5;
  --ui-console-dim: #8fa2c2;
  --ui-console-accent: #38bdf8;
  --ui-console-error: #fca5a5;
  --ui-console-warn: #fde047;
  --ui-console-ok: #86efac;
  --ui-console-info: #93c5fd;
}

/* ── 2. Alias : toutes les anciennes feuilles suivent désormais les jetons ── */
:root, :root[data-bs-theme="dark"], :root[data-bs-theme="light"], html body, html body[class] {
  /* index.css (--c-*) */
  --c-primary: var(--ui-primary); --c-primary-rgb: var(--ui-primary-rgb); --c-primary-light: var(--ui-primary);
  --c-primary-dark: var(--ui-primary-solid-hover);
  --c-bg: var(--ui-bg); --c-body-bg: var(--ui-bg); --c-content-bg: var(--ui-bg);
  --c-surface: var(--ui-surface); --c-surface-hover: var(--ui-surface-2);
  --c-pane: var(--ui-surface-2); --c-pane-alt: var(--ui-bg-2); --c-bg-alt: var(--ui-bg-2);
  --c-border: var(--ui-border); --c-border-light: var(--ui-border);
  --c-text: var(--ui-text); --c-text-secondary: var(--ui-text-2); --c-text-soft: var(--ui-muted); --c-text-muted: var(--ui-muted);
  --c-success: var(--ui-ok); --c-warning: var(--ui-warn); --c-danger: var(--ui-bad); --c-info: var(--ui-info);
  --c-sidebar-bg: var(--ui-sidebar-bg); --c-sidebar-text: var(--ui-sidebar-text); --c-inverse: var(--ui-sidebar-bg);
  --c-header-text: var(--ui-text);
  --card-shadow: var(--ui-shadow-sm);
  /* formateur.css (--fm-*) */
  --fm-body-bg: var(--ui-bg); --fm-bg: var(--ui-bg); --fm-bg-alt: var(--ui-surface-2);
  --fm-surface: var(--ui-surface); --fm-surface-hover: var(--ui-surface-2); --fm-surface-raised: var(--ui-surface);
  --fm-border: var(--ui-border); --fm-text: var(--ui-text); --fm-text-secondary: var(--ui-text-2); --fm-text-muted: var(--ui-muted);
  --fm-primary: var(--ui-primary); --fm-primary-bg: rgba(var(--ui-primary-rgb), .12);
  --fm-success: var(--ui-ok); --fm-warning: var(--ui-warn); --fm-danger: var(--ui-bad);
  /* Bootstrap 5.3 */
  --bs-body-bg: var(--ui-bg); --bs-body-color: var(--ui-text); --bs-emphasis-color: var(--ui-text);
  --bs-secondary-color: var(--ui-muted); --bs-secondary-bg: var(--ui-surface-2); --bs-tertiary-bg: var(--ui-surface-2);
  --bs-tertiary-color: var(--ui-muted); --bs-border-color: var(--ui-border); --bs-border-color-translucent: var(--ui-border);
  --bs-link-color: var(--ui-primary); --bs-link-hover-color: var(--ui-primary);
  --bs-link-color-rgb: var(--ui-primary-rgb); --bs-link-hover-color-rgb: var(--ui-primary-rgb);
  --bs-primary: var(--ui-primary-solid); --bs-primary-rgb: var(--ui-primary-rgb);
  --bs-heading-color: var(--ui-text); --bs-code-color: var(--ui-accent-2);
  --bs-card-bg: var(--ui-surface); --bs-card-border-color: var(--ui-border); --bs-card-cap-bg: transparent;
  --bs-modal-bg: var(--ui-surface); --bs-modal-border-color: var(--ui-border);
  --bs-dropdown-bg: var(--ui-surface); --bs-dropdown-color: var(--ui-text); --bs-dropdown-border-color: var(--ui-border);
  --bs-dropdown-link-color: var(--ui-text); --bs-dropdown-link-hover-bg: var(--ui-surface-2);
  --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border);
  --bs-list-group-bg: var(--ui-surface); --bs-list-group-color: var(--ui-text); --bs-list-group-border-color: var(--ui-border);
  --bs-nav-tabs-link-active-bg: var(--ui-surface); --bs-nav-tabs-link-active-color: var(--ui-text);
  --bs-form-control-bg: var(--ui-surface); --bs-pagination-bg: var(--ui-surface); --bs-pagination-color: var(--ui-text);
  --bs-pagination-border-color: var(--ui-border); --bs-pagination-hover-bg: var(--ui-surface-2);
  --bs-accordion-bg: var(--ui-surface); --bs-accordion-color: var(--ui-text);
  --bs-popover-bg: var(--ui-surface); --bs-toast-bg: var(--ui-surface);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html body { background: var(--ui-bg); color: var(--ui-text); }
html body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { color: var(--ui-text); }
html body .text-muted, html body .text-secondary, html body .small.text-muted { color: var(--ui-muted) !important; }
html body .text-dark, html body .text-body { color: var(--ui-text) !important; }
html body a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):not(.list-row):not(.module-card *):not(.section-tabs a):not(.mc-next):not(.kpi):not(.heat):not(.ev):not(.icon-btn)) { color: var(--ui-primary); }
html body .bg-white, html body .bg-light { background-color: var(--ui-surface) !important; color: var(--ui-text); }
html body .bg-body, html body .bg-body-tertiary { background-color: var(--ui-surface-2) !important; }
html body .border, html body .border-top, html body .border-bottom, html body .border-start, html body .border-end { border-color: var(--ui-border) !important; }
html body hr { border-color: var(--ui-border); opacity: 1; }
html body :is(code, pre, kbd, samp) { background: var(--ui-code-bg); color: var(--ui-text); border-color: var(--ui-border); }
html body pre { border: 1px solid var(--ui-border); border-radius: 10px; }
html body .app-main { background: var(--ui-bg); }
html body .app-header { background: var(--ui-header-bg); border-bottom-color: var(--ui-border); }
html body .app-sidebar { background: var(--ui-sidebar-bg); }
html body .btn-primary { background: var(--ui-primary-solid); border-color: var(--ui-primary-solid); color: var(--ui-on-primary); background-image: none; }
html body .btn-primary:hover:not(:disabled) { background: var(--ui-primary-solid-hover); border-color: var(--ui-primary-solid-hover); filter: none; }
html body .btn-outline-primary { color: var(--ui-primary); border-color: rgba(var(--ui-primary-rgb), .55); background: transparent; }
html body .btn-outline-primary:hover { background: rgba(var(--ui-primary-rgb), .14); color: var(--ui-primary); border-color: var(--ui-primary); }
html body .btn-outline-secondary, html body .btn-light, html body .btn-outline-dark { color: var(--ui-text-2); border-color: var(--ui-border-strong); background: transparent; }
html body .btn-light { background: var(--ui-surface); }
html body .btn-outline-secondary:hover, html body .btn-light:hover, html body .btn-outline-dark:hover { background: var(--ui-surface-2); color: var(--ui-text); border-color: var(--ui-border-strong); }
html body .btn-close { filter: none; }
:root[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html body :is(.form-control, .form-select, .input-group-text, textarea, select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])) {
  background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong);
}
html body .form-control::placeholder, html body textarea::placeholder { color: var(--ui-muted); opacity: .75; }
html body .form-control:disabled, html body .form-select:disabled, html body .form-control[readonly] { background-color: var(--ui-bg-2); color: var(--ui-muted); }
html body .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a3c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html body .input-group-text { background: var(--ui-bg-2); }
html body .form-check-input { background-color: var(--ui-surface); border-color: var(--ui-border-strong); }
html body .form-check-input:checked { background-color: var(--ui-primary-solid); border-color: var(--ui-primary-solid); }
html body .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--ui-surface-2); --bs-table-hover-bg: rgba(var(--ui-primary-rgb), .07); color: var(--ui-text); }
html body .table > :not(caption) > * > * { border-bottom-color: var(--ui-border); }
html body .table > thead > tr > th { background: var(--ui-bg-2); color: var(--ui-muted); }
html body .card, html body .modal-content, html body .dropdown-menu, html body .list-group-item, html body .accordion-item, html body .popover, html body .offcanvas {
  background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
}
html body .card-header, html body .card-footer, html body .modal-header, html body .modal-footer { background: transparent; border-color: var(--ui-border); }
html body .dropdown-item { color: var(--ui-text); }
html body .dropdown-item:hover, html body .dropdown-item:focus { background: var(--ui-surface-2); color: var(--ui-text); }
html body .dropdown-divider { border-color: var(--ui-border); }
html body .dropdown-header { color: var(--ui-muted); }
html body .nav-tabs { border-bottom-color: var(--ui-border); }
html body .nav-tabs .nav-link { color: var(--ui-muted); }
html body .nav-tabs .nav-link:hover { border-color: transparent transparent var(--ui-border); color: var(--ui-text); }
html body .nav-tabs .nav-link.active { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border) var(--ui-border) var(--ui-surface); }
html body .nav-pills .nav-link { color: var(--ui-text-2); }
html body .nav-pills .nav-link.active { background: var(--ui-primary-solid); color: var(--ui-on-primary); }
html body .page-link { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
html body .page-item.active .page-link { background: var(--ui-primary-solid); border-color: var(--ui-primary-solid); color: var(--ui-on-primary); }
html body .page-item.disabled .page-link { background: var(--ui-bg-2); color: var(--ui-muted); }
html body .breadcrumb-item, html body .breadcrumb-item a { color: var(--ui-muted); }
html body .progress { background: var(--ui-bg-2); }
html body .progress-bar { background-color: var(--ui-primary-solid); }
html body .alert { border-color: var(--ui-border); }
html body .alert-info { background: var(--ui-info-bg); color: var(--ui-info); }
html body .alert-success { background: var(--ui-ok-bg); color: var(--ui-ok); }
html body .alert-warning { background: var(--ui-warn-bg); color: var(--ui-warn); }
html body .alert-danger { background: var(--ui-bad-bg); color: var(--ui-bad); }
html body .badge.bg-light, html body .badge.text-bg-light { background: var(--ui-bg-2) !important; color: var(--ui-text-2) !important; }
html body .badge.bg-secondary { background: var(--ui-bg-2) !important; color: var(--ui-text-2); }
html body .modal-backdrop { --bs-backdrop-bg: #000; }
html body .toast, html body .tooltip-inner { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); }
html body .tooltip { --bs-tooltip-bg: var(--ui-text); --bs-tooltip-color: var(--ui-bg); }
html body .tooltip-inner { background: var(--ui-text); color: var(--ui-bg); border: 0; }
html body .list-group-item-action:hover { background: var(--ui-surface-2); color: var(--ui-text); }
html body .accordion-button { background: var(--ui-surface); color: var(--ui-text); }
html body .accordion-button:not(.collapsed) { background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-text); }
html body .accordion-button::after { filter: var(--ui-chevron-filter, none); }
:root[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.5); }
/* Pastilles sémantiques */
html body .pill.ok { background: var(--ui-ok-bg); color: var(--ui-ok); }
html body .pill.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
html body .pill.bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
html body .pill.info { background: var(--ui-info-bg); color: var(--ui-info); }
html body .pill { background: var(--ui-bg-2); color: var(--ui-text-2); }
html body .pill.brand { background: rgba(var(--ui-primary-rgb), .14); color: var(--ui-primary); }
html body .kpi.ok .kpi-ico { background: var(--ui-ok-bg); color: var(--ui-ok); }
html body .kpi.warn .kpi-ico { background: var(--ui-warn-bg); color: var(--ui-warn); }
html body .kpi.bad .kpi-ico { background: var(--ui-bad-bg); color: var(--ui-bad); }
html body .section-tabs a.active, html body .section-tabs a.active:hover { background: var(--ui-primary-solid); color: var(--ui-on-primary); }
html body .section-tabs .count { background: rgba(127,140,170,.2); }
html body .mini-stats > div, html body .lib-card .lc-exam { background: var(--ui-surface-2); }
html body .panel > .panel-head { color: var(--ui-text); }
html body .icon-btn { color: var(--ui-muted); border-color: var(--ui-border); }
html body .empty-state { background: var(--ui-surface); border-color: var(--ui-border-strong); }

/* ── Barre latérale : identique dans les deux modes ─────────────────────── */
html body .app-sidebar .sidebar-nav .nav-link { color: var(--ui-sidebar-text); }
html body .app-sidebar .sidebar-section { color: var(--ui-sidebar-muted); }

/* ── Bouton de bascule du thème ──────────────────────────────────────────── */
.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text-2); cursor: pointer; }
.theme-toggle:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.theme-toggle .bi-sun-fill { display: none; }
:root[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }
:root[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; }

/* ── Contrôles d'en-tête : icône + libellé (texte seul sur petit écran) ───── */
html body :is(.theme-toggle, .header-btn-adminty) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 38px; height: 38px; padding-inline: 11px; border-radius: 10px; }
html body .header-hamburger { gap: 7px; width: auto; padding-inline: 10px; border-radius: 10px; }
html body :is(.hdr-label, .hdr-label-hb) { font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
html body .hdr-label-hb { font-size: .68rem; }
html body .header-lang-adminty .hdr-lang-ico { color: var(--ui-muted); font-size: .8rem; }
@media (max-width: 1199.98px) {
  html body .hdr-label { display: none; }
  html body :is(.theme-toggle, .header-btn-adminty) { width: 38px; padding-inline: 0; }
}
@media (max-width: 575.98px) { html body .hdr-label-hb { display: none; } }

/* ── 3. Utilitaires Tailwind (Formateur / Analytique) en mode sombre ────── */
.bg-white { background-color: var(--ui-surface) !important; }
:root[data-bs-theme="dark"] {
  /* fonds pastel clairs → teintes translucides lisibles */
  & .bg-\[\#d1fae5\], & .bg-\[\#f0fdfa\], & .bg-\[rgba\(16\,185\,129\,0\.1\)\] { background-color: var(--ui-ok-bg) !important; }
  & .bg-\[\#fef3c7\], & .bg-\[\#fffbeb\] { background-color: var(--ui-warn-bg) !important; }
  & .bg-\[\#fee2e2\], & .bg-\[\#fef2f2\] { background-color: var(--ui-bad-bg) !important; }
  & .bg-\[\#dbeafe\], & .bg-\[\#ecfeff\] { background-color: var(--ui-info-bg) !important; }
  & .bg-\[\#e0e7ff\], & .bg-\[\#ede9fe\], & .bg-\[\#fce7f3\] { background-color: rgba(var(--ui-primary-rgb), .16) !important; }
  & .bg-\[\#e2e8f0\], & .bg-\[\#f1f5f9\] { background-color: var(--ui-bg-2) !important; }
  & .border-\[\#e2e8f0\], & .border-\[\#bbf7d0\], & .border-\[\#d1fae5\], & .border-\[\#fed7aa\] { border-color: var(--ui-border-strong) !important; }
  /* textes foncés pensés pour fonds pastel */
  & .text-\[\#1e293b\], & .text-\[\#334155\], & .text-\[\#475569\], & .text-\[\#505458\] { color: var(--ui-text-2) !important; }
  & .text-\[\#166534\], & .text-\[\#059669\] { color: var(--ui-ok) !important; }
  & .text-\[\#78350f\], & .text-\[\#9a3412\], & .text-\[\#b45309\], & .text-\[\#c2410c\], & .text-\[\#d97706\], & .text-\[\#ea580c\] { color: var(--ui-warn) !important; }
  & .text-\[\#dc2626\], & .text-\[\#d32f2f\], & .text-\[\#be185d\] { color: var(--ui-bad) !important; }
  & .text-\[\#1d4ed8\], & .text-\[\#2563eb\], & .text-\[\#0891b2\], & .text-\[\#2b579a\] { color: var(--ui-info) !important; }
  & .text-\[\#3730a3\], & .text-\[\#4338ca\], & .text-\[\#6d28d9\], & .text-\[\#4f46e5\], & .text-\[\#6366f1\], & .text-\[\#7c3aed\] { color: var(--ui-primary) !important; }
  & .text-\[\#6c757d\] { color: var(--ui-muted) !important; }
}

/* ── 4. Composants tiers ─────────────────────────────────────────────────── */
:root[data-bs-theme="dark"] .fc { --fc-border-color: var(--ui-border); --fc-page-bg-color: var(--ui-surface); --fc-neutral-bg-color: var(--ui-surface-2); --fc-today-bg-color: rgba(var(--ui-primary-rgb), .12); --fc-list-event-hover-bg-color: var(--ui-surface-2); }
:root[data-bs-theme="dark"] .fc :is(.fc-col-header-cell-cushion, .fc-daygrid-day-number, .fc-toolbar-title) { color: var(--ui-text); }
html body .fc .fc-button-primary { background: var(--ui-primary-solid); border-color: var(--ui-primary-solid); }
html body canvas { max-width: 100%; }
:root[data-bs-theme="dark"] img.invert-dark { filter: invert(1) hue-rotate(180deg); }
/* Sélection */
::selection { background: rgba(var(--ui-primary-rgb), .3); }

/* ── Feuilles de document (aperçu A4, copies, énoncés) : toujours blanches, comme à l'impression ── */
:is(.a4-page, .cover-page, .doc-page, .paper, .exam-sheet, .pdf-page, .preview-page, .page-a4) {
  color-scheme: light;
  --ui-surface: #ffffff; --ui-surface-2: #f8fafd; --ui-bg-2: #eef1f7; --ui-border: #e3e8f2;
  --ui-text: #111827; --ui-text-2: #374151; --ui-muted: #6b7280;
  background: #ffffff; color: #111827;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Correctifs design (audit 2026) — neutralise l'héritage Adminty :
   palette unique, aplats au lieu de dégradés, dark mode réparé.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Accent unique : supprime le duo indigo→cyan ─────────────────────── */
html body :is(.header-lang-adminty a.active, .header-user-adminty .avatar,
  .db-btn-primary, .btn-studio-primary, .fab-mobile,
  .stat-adminty.blue .stat-icon) {
  background: var(--ui-primary-solid) !important;
  background-image: none !important;
  color: var(--ui-on-primary) !important;
}
html body :is(.db-btn-primary:hover, .btn-studio-primary:hover):not(:disabled) {
  background: var(--ui-primary-solid-hover) !important;
  background-image: none !important;
  filter: none; transform: none;
  box-shadow: var(--ui-shadow-sm);
}
/* Titre dégradé Formateur : illisible en dark, remplacé par aplat */
html body .fm-navbar-brand-text {
  background: none !important;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-primary) !important;
}
/* Pastille rose #ff7588 (notifs, "new") → danger du thème */
html body :is(.header-btn-adminty .badge-count,
  .app-sidebar .sidebar-nav .nav-link .badge-new) {
  background: var(--ui-bad) !important; color: var(--ui-on-primary) !important; border-color: var(--ui-surface) !important;
}

/* ── 5.2 Boutons : hover cohérent, fini l'effet "jouet" ──────────────────── */
html body .btn:hover:not(:disabled) { transform: none; }
html body .btn:active:not(:disabled) { transform: none; }
/* Hover aberrant indigo→teal (#019a9c) hérité d'index.css */
html body :is(.btn-primary:hover, .btn-adminty.blue:hover):not(:disabled) {
  background: var(--ui-primary-solid-hover) !important;
  background-image: none !important;
  border-color: var(--ui-primary-solid-hover) !important;
  color: var(--ui-on-primary) !important;
  filter: none; transform: none;
  box-shadow: var(--ui-shadow-sm);
}
html body .btn-primary {
  background: var(--ui-primary-solid) !important;
  background-image: none !important;
  border-color: var(--ui-primary-solid) !important;
  box-shadow: var(--ui-shadow-xs);
}
html body .btn-link:hover { color: var(--ui-primary-solid-hover) !important; }
/* Familles btn-grad-* : 7 dégradés → 4 aplats sémantiques */
html body :is(.btn-grad-blue, .btn-grad-purple, .btn-grad-teal) {
  background: var(--ui-primary-solid) !important; background-image: none !important; color: var(--ui-on-primary) !important;
}
html body :is(.btn-grad-green) {
  background: var(--ui-ok) !important; background-image: none !important; color: var(--ui-on-primary) !important;
}
html body :is(.btn-grad-red, .btn-grad-rose) {
  background: var(--ui-bad) !important; background-image: none !important; color: var(--ui-on-primary) !important;
}
html body :is(.btn-grad-amber) {
  background: var(--ui-warn-bg) !important; background-image: none !important;
  color: var(--ui-warn) !important; border: 1px solid transparent !important;
  box-shadow: none !important;
}
html body :is(.btn-grad-blue:hover, .btn-grad-purple:hover, .btn-grad-teal:hover):not(:disabled) {
  background: var(--ui-primary-solid-hover) !important; filter: none; transform: none;
}
html body .fab-mobile.active { background: var(--ui-bad) !important; transform: none; }

/* ── 5.3 Badges : aplats teintés lisibles, contraste AA ──────────────────── */
html body .badge-adminty { background-image: none !important; box-shadow: none !important; }
html body .badge-adminty.blue { background: rgba(var(--ui-primary-rgb), .14) !important; color: var(--ui-primary) !important; }
html body .badge-adminty.green { background: var(--ui-ok-bg) !important; color: var(--ui-ok) !important; }
html body .badge-adminty.yellow { background: var(--ui-warn-bg) !important; color: var(--ui-warn) !important; }
html body .badge-adminty.red { background: var(--ui-bad-bg) !important; color: var(--ui-bad) !important; }
html body .badge-adminty.purple { background: rgba(var(--ui-primary-rgb), .14) !important; color: var(--ui-primary) !important; }
html body :is(.badge-type-video, .badge-status-completed, .badge-status-ready) {
  background: var(--ui-ok-bg) !important; background-image: none !important; color: var(--ui-ok) !important;
}
html body :is(.badge-type-exam, .badge-status-failed) {
  background: var(--ui-bad-bg) !important; background-image: none !important; color: var(--ui-bad) !important;
}
html body :is(.badge-type-doc_rapide, .badge-status-generating) {
  background: var(--ui-warn-bg) !important; background-image: none !important; color: var(--ui-warn) !important;
  animation: none !important;
}
html body :is(.badge-type-exam_expert, .badge-type-doc_expert, .badge-type-expert, .badge-status-correction) {
  background: rgba(var(--ui-primary-rgb), .14) !important; background-image: none !important; color: var(--ui-primary) !important;
}
html body .badge-status-generating { animation: none !important; }
html body .badge-status-draft { background: var(--ui-bg-2) !important; background-image: none !important; color: var(--ui-muted) !important; }

/* ── 5.4 Sidebar : une seule vérité, fini les rayures ────────────────────── */
html body .app-sidebar {
  background: var(--ui-sidebar-bg) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .05);
  box-shadow: none;
}
html body .app-sidebar .sidebar-header { background: transparent !important; }
html body .app-sidebar .sidebar-nav .nav-link {
  border-bottom: 0 !important; border-radius: 8px !important;
  margin: 1px 8px !important;
}
html body .app-sidebar .sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, .06) !important; color: var(--ui-on-primary) !important; }
html body .app-sidebar .sidebar-nav .nav-link.active {
  background: rgba(var(--ui-primary-rgb), .22) !important; color: var(--ui-on-primary) !important;
  box-shadow: none !important; font-weight: 600;
}
html body .admin-sidebar { background: var(--ui-sidebar-bg) !important; }
html body .admin-sidebar .admin-sidebar-body .nav-link.active {
  background: rgba(var(--ui-primary-rgb), .18) !important; color: var(--ui-on-primary) !important;
  border-left-color: var(--ui-primary) !important;
}

/* ── 5.5 Cartes legacy : radius + ombres unifiés ─────────────────────────── */
html body :is(.stat-adminty, .widget-card, .project-card, .project-card-adminty, .db-card, .db-kpi) {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
html body :is(.stat-adminty:hover, .widget-card:hover, .project-card:hover, .project-card-adminty:hover, .db-kpi:hover) {
  box-shadow: var(--ui-shadow-md) !important;
  transform: translateY(-1px);
}
/* Icônes stat-adminty : aplats teintés au lieu de 7 dégradés */
html body .stat-adminty .stat-icon { background-image: none !important; color: var(--ui-on-primary) !important; }
html body .stat-adminty.green .stat-icon { background: var(--ui-ok) !important; }
html body .stat-adminty.yellow .stat-icon { background: var(--ui-warn) !important; }
html body .stat-adminty.red .stat-icon { background: var(--ui-bad) !important; }
html body .stat-adminty.teal .stat-icon { background: var(--ui-info) !important; }
html body .stat-adminty.purple .stat-icon, html body .stat-adminty.orange .stat-icon { background: var(--ui-primary-solid) !important; }
html body .stat-adminty.green .stat-value { color: var(--ui-ok) !important; }
html body .stat-adminty.yellow .stat-value { color: var(--ui-warn) !important; }
html body .stat-adminty.red .stat-value { color: var(--ui-bad) !important; }
html body .stat-adminty.teal .stat-value { color: var(--ui-info) !important; }
html body .stat-adminty.blue .stat-value, html body .stat-adminty.purple .stat-value, html body .stat-adminty.orange .stat-value { color: var(--ui-primary) !important; }
html body .stat-adminty .stat-footer, html body .stat-adminty .stat-info .stat-label { color: var(--ui-muted) !important; }
/* Titres : pas de capitalize imposée (FR + noms propres) */
html body :is(.page-header-adminty h1, .page-header-adminty p) { text-transform: none !important; }
html body .page-header-adminty h1 { color: var(--ui-text) !important; }
html body :is(.db-welcome h1, .db-card-header h6, .db-activity-title) { color: var(--ui-text) !important; }
html body .db-welcome h1 span { color: var(--ui-primary) !important; }
html body :is(.db-welcome p, .db-kpi-sub, .db-activity-meta, .db-stat-label, .db-maturity-text) { color: var(--ui-muted) !important; }
html body .db-kpi-label { color: var(--ui-text-2) !important; }

/* ── 5.6 Dark mode : répare les composants restés en dur ─────────────────── */
:root[data-bs-theme="dark"] :is(.stat-adminty, .db-kpi, .db-card, .widget-card,
  .project-card, .project-card-adminty, .filter-bar-adminty, .db-stat-item,
  .table-adminty tbody td, .db-activity-item, .fm-kpi-card, .fm-card-sm) {
  background-color: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
}
:root[data-bs-theme="dark"] :is(.stat-adminty .stat-info .stat-value, .db-kpi-value, .db-stat-number) { color: var(--ui-text); }
:root[data-bs-theme="dark"] :is(.db-activity-item, .table-adminty tbody td) { border-bottom-color: var(--ui-border); }
:root[data-bs-theme="dark"] :is(.db-maturity-track, .progress-adminty, .progress-thin, .progress-micro, .fm-progress-track, .fm-progress-track-sm) {
  background: var(--ui-bg-2) !important;
}
:root[data-bs-theme="dark"] :is(.filter-bar-adminty .filter-input, .filter-bar-adminty .filter-select) {
  background: var(--ui-surface-2); border-color: var(--ui-border-strong); color: var(--ui-text);
}
:root[data-bs-theme="dark"] :is(.btn-adminty.outline) {
  background: transparent !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text-2) !important;
}
:root[data-bs-theme="dark"] :is(.project-card-adminty .card-tags .tag) { background: var(--ui-bg-2) !important; color: var(--ui-text-2) !important; }
/* Cartes vert pastel du planificateur : illisibles en dark */
:root[data-bs-theme="dark"] :is(.pf-guide-card, .pf-config-card) {
  background: var(--ui-ok-bg) !important; background-image: none !important; border-color: var(--ui-border) !important;
}
:root[data-bs-theme="dark"] :is(.pf-summary-title, .pf-summary-sub) { color: var(--ui-ok) !important; }
:root[data-bs-theme="dark"] :is(.pf-config-header) { border-bottom-color: var(--ui-border) !important; }
/* Pastels Tailwind résiduels de formateur.css */
:root[data-bs-theme="dark"] :is(.bg-\[\#f0fdfa\], .bg-\[\#f0fdf4\], .bg-\[\#eef2ff\], .bg-\[\#fffbeb\],
  .bg-\[\#ecfeff\], .bg-\[\#f5f3ff\], .bg-\[\#faf5ff\], .bg-\[\#e0e7ff\], .bg-\[\#fee2e2\], .bg-\[\#fef2f2\], .bg-\[\#eff6ff\]) {
  background-color: var(--ui-surface-2) !important;
}
:root[data-bs-theme="dark"] :is(.bloom-1, .bloom-2, .bloom-3, .bloom-4, .bloom-5, .bloom-6) { filter: saturate(.85) brightness(.92); }
:root[data-bs-theme="dark"] .gt-table td { border-bottom-color: var(--ui-border) !important; }
/* ── 5.7 Dark mode : aplats pleins, texte blanc sur teintes assombries (AA) ── */
/* En sombre, les jetons sémantiques s'éclaircissent (lisibles comme texte) :
   ils ne peuvent plus servir de fond à du texte blanc. On réassombrit ici. */
:root[data-bs-theme="dark"] :is(.btn-grad-green) { background: #15803d !important; }
:root[data-bs-theme="dark"] :is(.btn-grad-red, .btn-grad-rose) { background: #b91c1c !important; }
:root[data-bs-theme="dark"] :is(.header-btn-adminty .badge-count, .app-sidebar .sidebar-nav .nav-link .badge-new) { background: #dc2626 !important; }
:root[data-bs-theme="dark"] .s-primary { background: var(--ui-primary-solid) !important; }
:root[data-bs-theme="dark"] .stat-adminty.green .stat-icon { background: #15803d !important; }
:root[data-bs-theme="dark"] .stat-adminty.yellow .stat-icon { background: #b45309 !important; }
:root[data-bs-theme="dark"] .stat-adminty.red .stat-icon { background: #b91c1c !important; }
:root[data-bs-theme="dark"] .stat-adminty.teal .stat-icon { background: #0e7490 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Font Awesome + icônes colorées (bi et fa partagent le même système)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6.1 Base FA : alignement compatible avec bi ─────────────────────────── */
html body :is(.fa-solid, .fa-regular, .fa-brands) { line-height: 1; vertical-align: -.125em; }
html body .app-sidebar .sidebar-nav .nav-link > :is(i, svg),
html body .mobile-bottom-nav .mobile-nav-item > :is(i, svg) { width: 20px; text-align: center; }
/* Bascule de thème : mêmes règles pour bi et fa */
.theme-toggle :is(.bi-sun-fill, .fa-sun) { display: none; }
:root[data-bs-theme="dark"] .theme-toggle :is(.bi-moon-stars-fill, .bi-moon-stars, .fa-moon) { display: none; }
:root[data-bs-theme="dark"] .theme-toggle :is(.bi-sun-fill, .fa-sun) { display: inline; }

/* ── 6.2 Utilitaires de couleur d'icône (gagnent sur les contextes) ──────── */
html body :is(i, svg).ico-primary { color: var(--ui-primary) !important; }
html body :is(i, svg).ico-ok { color: var(--ui-ok) !important; }
html body :is(i, svg).ico-warn { color: var(--ui-warn) !important; }
html body :is(i, svg).ico-bad { color: var(--ui-bad) !important; }
html body :is(i, svg).ico-info { color: var(--ui-info) !important; }
html body :is(i, svg).ico-muted { color: var(--ui-muted) !important; }
/* Domaines : Documents ambre · Vidéos cyan · Examens rose · Modules violet */
html body :is(i, svg).ico-doc { color: var(--ui-warn) !important; }
html body :is(i, svg).ico-video { color: var(--ui-info) !important; }
html body :is(i, svg).ico-exam { color: var(--ui-bad) !important; }
html body :is(i, svg).ico-module { color: var(--ui-primary) !important; }

/* ── 6.3 Garde : icône blanche sur aplats pleins ─────────────────────────── */
/* Toute surface dont le fond est plein (bouton de couleur, badge plein, fab…)
   impose le blanc pour rester lisible ; la couleur sémantique ne s'applique
   qu'aux boutons neutres/outline (fond clair). */
html body :is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-secondary,
  .btn-adminty.blue, .btn-adminty.green, .btn-adminty.red, .btn-adminty.purple,
  .btn-grad-blue, .btn-grad-green, .btn-grad-red, .btn-grad-rose, .btn-grad-purple, .btn-grad-teal,
  .db-btn-primary, .btn-studio-primary, .fab-mobile, .stat-adminty .stat-icon,
  .gt-num-badge, .pf-chapter-num, .header-user-adminty .avatar,
  .header-lang-adminty a.active, .badge-count,
  .badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-info, .badge.bg-dark,
  [class*="bg-gradient"]) :is(i, svg) { color: var(--ui-on-primary) !important; }
/* Ambre (btn-warning / badge bg-warning) : texte foncé, comme Bootstrap —
   une icône blanche serait illisible sur fond jaune. */
html body :is(.btn-warning, .badge.bg-warning, .badge.text-bg-warning) :is(i, svg) { color: var(--ui-amber-fg) !important; }
/* Boutons à aplat plein repérés au markup (classe bg-*) : icône blanche. */
html body .btn[class*="bg-"]:is(.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-dark, .bg-secondary) :is(i, svg) { color: var(--ui-on-primary) !important; }

/* ── 6.4 Sidebar : une couleur par domaine, blanc au survol/actif ────────── */
html body .app-sidebar .sidebar-section { color: #8494b3 !important; }
html body .app-sidebar .sidebar-nav .nav-link > :is(i, svg) { color: var(--nav-ico, #94a3b8) !important; }
html body .app-sidebar .sidebar-nav .nav-link:hover > :is(i, svg) { color: var(--ui-on-primary) !important; }
html body .app-sidebar .sidebar-nav .nav-link.active > :is(i, svg) { color: var(--ui-on-primary) !important; }

/* ── 6.4b Onglets : l'icône épouse la couleur de l'onglet ──────────────────── */
/* Inactif : teinte douce. Actif sur fond clair (nav-tabs) : couleur de rôle.
   Actif à fond plein (nav-pills / section-tabs : bg primaire) : BLANC,
   sinon icône primaire sur fond primaire = invisible. */
html body :is(.nav-tabs, .nav-pills, .section-tabs) .nav-link:not(.active) > :is(i, svg) { color: var(--ui-muted); }
html body .nav-tabs .nav-link.active > :is(i, svg) { color: var(--ui-primary); }
html body :is(.nav-pills, .section-tabs) a.active > :is(i, svg),
html body :is(.nav-pills, .section-tabs) .nav-link.active > :is(i, svg) { color: var(--ui-on-primary); }

/* ── 6.5 Contextes : l'icône prend la couleur sémantique du parent ───────── */
/* En-têtes de cartes/panneaux */
html body :is(.card-header, .panel-head, .widget-card .widget-header h6, .db-card-header h6) > :is(i, svg),
html body :is(.card-header, .panel-head, .widget-card .widget-header h6, .db-card-header h6) :is(i, svg):first-child { color: var(--ui-primary); }
/* KPI : variantes info/violet en plus de ok/warn/bad */
html body .kpi.info .kpi-ico { background: var(--ui-info-bg); color: var(--ui-info); }
html body .kpi.violet .kpi-ico { background: rgba(var(--ui-primary-rgb), .14); color: var(--ui-primary); }
/* Pastille violette */
html body .pill.violet { background: rgba(var(--ui-primary-rgb), .14); color: var(--ui-primary); }
/* Lignes cliquables : variantes warn/info (+ ok existant) */
html body .list-row .lr-ico.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
html body .list-row .lr-ico.info { background: var(--ui-info-bg); color: var(--ui-info); }
/* Bibliothèque : granularité par type (bi + fa) */
html body .lib-card[data-kind="video_expert"] .lc-type :is(i, svg) { color: var(--ui-primary); }
html body .lib-card[data-kind="doc_rapide"] .lc-type :is(i, svg) { color: var(--ui-warn); }
html body .lib-card[data-kind="doc_expert"] .lc-type :is(i, svg) { color: var(--ui-primary); }
html body .lib-card[data-kind="exam_expert"] .lc-type :is(i, svg) { color: var(--ui-primary); }
/* Menus déroulants : icônes atténuées par défaut, primaires au survol */
html body .dropdown-item > :is(i, svg):first-child { color: var(--ui-muted); }
html body .dropdown-item:hover > :is(i, svg):first-child { color: var(--ui-primary); }
html body .dropdown-item > :is(i, svg)[class*="text-"] { color: inherit; }
/* Items Formateur : avatar et lignes de doc */
html body .doc-item-icon :is(i, svg) { color: var(--ui-primary); }
html body .icon-avatar :is(i, svg) { color: var(--ui-primary); }
/* Étapes vides / astuces : teinte douce, jamais noire */
html body :is(.empty-state-icon, .fm-search-item .si-icon) { color: var(--ui-muted); }

/* ── 6.6 Auto-coloration sémantique : chaque icône FA porte sa couleur de rôle ── */
/* Préfixe commun : s'applique à TOUTE icône FA sans classe de couleur explicite
   (ico-*) et hors contextes qui pilotent déjà la couleur du contenu (panneaux,
   KPI, menus, états vides). Boutons/badges/alertes/tabs NE sont PLUS exclus :
   leurs icônes prennent la couleur de rôle ; les aplats pleins restent en blanc
   via la garde §6.3 (!important). */
html body :is(.fa-solid, .fa-regular, .fa-brands) { transition: color .15s ease, transform .12s ease, filter .15s ease; }
/* ── Survol : l'icône s'éclaire sans changer de teinte ; clic : léger enfoncement.
   S'applique aux icônes d'éléments interactifs (liens, boutons, onglets). */
html body :is(a, button):hover > :is(i, svg):not([class*="text-"]) { filter: brightness(1.18) saturate(1.08); }
html body :is(a, button):active > :is(i, svg):not([class*="text-"]) { transform: scale(.9); }
:root[data-bs-theme="dark"] html body :is(a, button):hover > :is(i, svg):not([class*="text-"]) { filter: brightness(1.3); }

/* Vert succès : validations, contrôles cochés, lecture */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-circle-check, .fa-check, .fa-check-double, .fa-square-check, .fa-user-check, .fa-play, .fa-circle-play) { color: var(--ui-ok); }

/* Rouge danger : suppressions, erreurs, arrêts, déconnexions */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-trash-can, .fa-circle-xmark, .fa-xmark, .fa-ban, .fa-circle-minus, .fa-circle-stop, .fa-circle-exclamation, .fa-user-slash, .fa-user-xmark, .fa-user-minus, .fa-power-off, .fa-right-from-bracket, .fa-location-dot) { color: var(--ui-bad); }

/* Ambre attention + documents : avertissements, attentes, dossiers, fichiers */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-triangle-exclamation, .fa-clock, .fa-hourglass, .fa-hourglass-half, .fa-hourglass-start, .fa-pause, .fa-circle-pause, .fa-stopwatch, .fa-bell, .fa-star, .fa-award, .fa-medal, .fa-trophy, .fa-gem, .fa-flag, .fa-note-sticky, .fa-file, .fa-file-lines, .fa-file-pdf, .fa-file-word, .fa-file-excel, .fa-file-powerpoint, .fa-file-image, .fa-file-csv, .fa-file-zipper, .fa-file-video, .fa-file-arrow-up, .fa-file-arrow-down, .fa-file-import, .fa-folder, .fa-folder-open, .fa-box-archive) { color: var(--ui-warn); }

/* Cyan information + médias + agenda : aide, contenus, calendriers, réseau */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-circle-info, .fa-circle-question, .fa-magnifying-glass, .fa-eye, .fa-lightbulb, .fa-bullhorn, .fa-comment-dots, .fa-message, .fa-inbox, .fa-hashtag, .fa-clock-rotate-left, .fa-calendar, .fa-calendar-day, .fa-calendar-days, .fa-calendar-week, .fa-calendar-check, .fa-calendar-plus, .fa-calendar-xmark, .fa-video, .fa-film, .fa-clapperboard, .fa-photo-film, .fa-camera, .fa-image, .fa-images, .fa-microphone, .fa-volume-high, .fa-headphones, .fa-music, .fa-globe, .fa-language, .fa-cloud, .fa-wifi, .fa-network-wired, .fa-hard-drive, .fa-tower-broadcast, .fa-signs-post, .fa-tablet, .fa-display, .fa-phone, .fa-link) { color: var(--ui-info); }

/* Indigo primaire : création, actions, personnes, sécurité, IA, modules */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-plus, .fa-circle-plus, .fa-pen, .fa-pen-nib, .fa-pen-ruler, .fa-highlighter, .fa-pen-to-square, .fa-file-pen, .fa-wand-magic-sparkles, .fa-screwdriver-wrench, .fa-sliders, .fa-palette, .fa-layer-group, .fa-diagram-project, .fa-puzzle-piece, .fa-rocket, .fa-bolt, .fa-bullseye, .fa-paper-plane, .fa-thumbtack, .fa-arrows-rotate, .fa-rotate, .fa-rotate-left, .fa-rotate-right, .fa-floppy-disk, .fa-upload, .fa-download, .fa-cloud-arrow-up, .fa-cloud-arrow-down, .fa-copy, .fa-print, .fa-house, .fa-tag, .fa-tags, .fa-list-check, .fa-users, .fa-user, .fa-user-plus, .fa-user-gear, .fa-user-lock, .fa-circle-user, .fa-graduation-cap, .fa-person-chalkboard, .fa-chalkboard-user, .fa-book, .fa-book-open, .fa-book-bookmark, .fa-bookmark, .fa-shield-halved, .fa-lock, .fa-lock-open, .fa-key, .fa-robot, .fa-microchip, .fa-terminal, .fa-code) { color: var(--ui-ico-primary); }

/* Rose évaluations : famille correction/copie (domaine examens, cf. .ico-exam) */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-clipboard, .fa-clipboard-list, .fa-clipboard-check, .fa-clipboard-question, .fa-file-circle-check, .fa-file-circle-plus) { color: var(--ui-bad); }

/* Gris neutre : réglages, tableaux, barres d'outils éditeur, commandes de vue */
html body :is(.fa-solid, .fa-regular, .fa-brands):not(:where([class*="ico-"], .dropdown-item *, .list-group-item *, .page-link *, .progress-bar *, .card-header *, .panel-head *, .widget-header *, .db-card-header *, .kpi *, .lr-ico *, .lc-type *, .doc-item-icon, .doc-item-icon *, .icon-avatar, .icon-avatar *, .empty-state-icon, .empty-state-icon *)):is(.fa-gear, .fa-table, .fa-table-columns, .fa-table-cells, .fa-table-list, .fa-list, .fa-list-ol, .fa-filter, .fa-scissors, .fa-eraser, .fa-bold, .fa-italic, .fa-font, .fa-markdown, .fa-barcode, .fa-eye-slash, .fa-face-smile, .fa-expand, .fa-compress, .fa-crop, .fa-grip-vertical, .fa-infinity) { color: var(--ui-muted); }

/* Bascule de thème : lune indigo, soleil ambre */
html body .theme-toggle .fa-moon { color: #818cf8; }
html body .theme-toggle .fa-sun { color: #f59e0b; }
/* Header : hamburger neutre, bleu au survol */
html body .header-hamburger { color: var(--ui-muted); }
html body .header-hamburger:hover { color: var(--ui-primary); }

/* ── 6.7 Exam-expert : actions ambre (enregistrement, production, mode groupe) ── */
/* Fond ambre forcé. Le texte/icône est passé en #212529 (foncé) : les boutons
   portent du texte blanc en dur (inline ou .text-white) qui serait illisible
   sur l'ambre ; le foncé garantit le contraste dans les deux thèmes. */
html body #saveBtnTb,
html body #tbProduction,
html body .navbar-tb-btn[onclick*="setGroupModeUI"]:not([style*="--ui-muted"]) {
  background: var(--ui-amber-action) !important;
  color: var(--ui-amber-fg) !important;
}
/* Onglet de groupe actif : ambre, texte foncé, ombre assortie */
html body .grp-btn.active {
  background: linear-gradient(135deg, var(--ui-amber-action), #d97706) !important;
  color: var(--ui-amber-fg) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, .35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Échelle typographique + compacité globales (thème ultra-pro homogène)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --font-h1: 1.4rem; --font-h2: 1.1rem; --font-h3: 1rem;
  --font-body: .9rem; --font-small: .8rem; --font-mini: .72rem;
}

/* ── 7.1 Neutralise les écraseurs de titres (formateur.css:1500-1501) ────── */
html body #page-content-wrapper h1.ph-title { font-size: var(--font-h1) !important; font-weight: 700 !important; letter-spacing: -.02em; }
html body .fm-content .fs-1 { font-size: var(--font-h1) !important; }

/* ── 7.2 Échelle des titres ──────────────────────────────────────────────── */
html body .page-head .ph-title { font-size: var(--font-h1); }
html body .page-head .ph-sub { font-size: .85rem; }
html body .page-head { margin-bottom: 16px; }
html body .fm-section-title { font-size: var(--font-h2) !important; font-weight: 700; }
html body .card-title { font-size: var(--font-h3); font-weight: 600; }
html body .panel > .panel-head { font-size: var(--font-body); }
html body .modal-title { font-size: 1.05rem; }
html body .empty-state h4 { font-size: 1rem; }
html body .empty-state p { font-size: var(--font-small); }

/* ── 7.3 Compacité : paddings, gaps, marges ──────────────────────────────── */
html body .kpi-row { gap: 12px; margin-bottom: 16px; }
html body .kpi { padding: 14px 16px; gap: 12px; }
html body .kpi .kpi-val { font-size: 1.4rem; }
html body .panel > .panel-body { padding: 14px 16px; }
html body .panel > .panel-head { padding: 12px 16px; }
html body .modal-body { padding: 16px 18px; }
html body .modal-header { padding: 14px 18px; }
html body .modal-footer { padding: 12px 18px; }
html body .list-row { padding: 9px 16px; }
html body .filter-bar { margin-bottom: 14px; padding: 8px 12px; }
html body .table-modern td { padding: 10px 14px; }
html body .table-modern th { padding: 8px 14px; }
html body .qa-grid { margin-bottom: 16px; }
html body .form-section { margin-top: 14px; }
html body .field { margin-bottom: 12px; }
@media (min-width: 992px) { html body .app-main .container-page { padding: 20px 24px 36px; } }
/* Compteurs et micro-textes : plancher lisible */
html body .section-tabs .count { font-size: var(--font-mini); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. Accessibilité + finitions (focus, mouvement réduit, scrollbars, thème)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Focus clavier : anneau cohérent sur tous les éléments interactifs ── */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-primary) !important;
  outline-offset: 2px;
}
/* Les contrôles de formulaire gardent leur anneau natif Bootstrap (ring) */
html body :is(.form-control, .form-select):focus-visible { outline-offset: 0; box-shadow: var(--ui-ring); }
/* Supprime l'anneau par défaut sur les éléments déjà pourvus d'un fond plein */
html body :is(.btn-primary, .btn-danger, .btn-success, .btn-info, .btn-dark):focus-visible { outline-color: var(--ui-on-primary); }

/* ── 8.2 Mouvement réduit : respecte la préférence système (WCAG 2.3.3) ──── */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 8.3 Scrollbars : pistes fines, pouce arrondi (WebKit + Firefox) ─────── */
html body * { scrollbar-color: var(--ui-border-strong) transparent; scrollbar-width: thin; }
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html body ::-webkit-scrollbar-thumb:hover { background: var(--ui-muted); background-clip: content-box; }
html body ::-webkit-scrollbar-corner { background: transparent; }

/* ── 8.4 Bascule de thème : transition douce, sans scintillement ─────────── */
html body :is(.app-main, .app-header, .app-sidebar, .card, .modal-content, .dropdown-menu) {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ── 8.5 Impression : masque la chrome, garde le contenu, fonds blancs ───── */
@media print {
  html body :is(.app-sidebar, .app-header, .mobile-bottom-nav, .fm-mobile-nav, .sidebar-overlay,
    .header-hamburger, .theme-toggle, .fab-mobile, .toast, .btn, .no-print) { display: none !important; }
  html body .app-main { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html body .card, html body .panel {
    box-shadow: none !important; border-color: #dee2e6 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  html body a[href]::after { content: none !important; }
  @page { margin: 12mm; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Couche utilitaire — remplace les style="" inline des templates.
   Règle : TOUT style="..." statique se décompose en classes de cette section.
   Les valeurs réellement dynamiques (barres de progression, largeurs calculées
   par JS) restent en inline mais pilotées par variables CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Échelle de texte fine (les .x-small de partout, enfin centralisées) ── */
html body :is(.x-xs, .t-4xs) { font-size: .5rem; }        /* micro : unités, suffixes */
html body :is(.t-3xs) { font-size: .55rem; }              /* badges serrés */
html body :is(.x-small, .t-2xs) { font-size: .6rem; }     /* labels de toolbar */
html body :is(.t-xs) { font-size: .65rem; }               /* mini-labels */
html body :is(.t-sm) { font-size: .7rem; }
html body :is(.t-caption) { font-size: .72rem; }   /* texte de carte par défaut */
html body :is(.t-body-sm) { font-size: .75rem; }
html body :is(.t-base) { font-size: .8rem; }
html body :is(.t-md) { font-size: .9rem; }
html body :is(.t-lg) { font-size: 1rem; }
html body :is(.t-xl) { font-size: 1.1rem; }
html body :is(.t-2xl) { font-size: 1.25rem; }

/* ── 9.2 Texte : rôles sémantiques (couleur + graisse) ────────────────────── */
html body .t-muted { color: var(--ui-muted); }
html body .t-2 { color: var(--ui-text-2); }
html body .t-strong { color: var(--ui-text); }
html body .t-ok { color: var(--ui-ok); }
html body .t-warn { color: var(--ui-warn); }
html body .t-bad { color: var(--ui-bad); }
html body .t-info { color: var(--ui-info); }
html body .t-primary { color: var(--ui-primary); }
html body .t-on { color: var(--ui-on-primary); }
html body .t-upper { text-transform: uppercase; }
html body .t-tight { letter-spacing: .04em; }
html body .t-wide { letter-spacing: 1px; }
html body .t-nowrap { white-space: nowrap; }
html body .t-wrap { white-space: normal; }

/* ── 9.3 Surfaces : fond + bordure + arrondi regroupés ────────────────────── */
html body .s-surface { background: var(--c-surface); }
html body .s-pane { background: var(--c-pane); }
html body .s-sunken { background: var(--ui-bg-2); }
html body .s-primary { background: var(--ui-primary); color: var(--ui-on-primary); }
html body .s-primary-soft { background: rgba(var(--ui-primary-rgb), .12); color: var(--ui-primary); }
html body .s-onprimary-soft { background-color: rgba(0, 0, 0, .6); color: #fff; }
html body .s-bordered { border: 1px solid var(--ui-border); }
html body .s-card { border: 1px solid var(--c-border); background: var(--c-surface); }
html body .s-flat { border-radius: var(--ui-radius); box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
html body .s-flat-lg { border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
html body .s-pill { border-radius: 24px; }
html body .s-sq0 { border-radius: 0; }

/* ── 9.4 Boîtes : dimensions standardisées ────────────────────────────────── */
html body .w-full { width: 100%; }          /* largeur pleine SANS !important (compatible JS) */
html body .box-28 { width: 28px; height: 28px; }
html body .box-32 { width: 32px; height: 32px; }
html body .box-38 { height: 38px; }
html body .dot-8 { width: 8px; height: 8px; }
html body .h-4 { height: 4px; }
html body .h-5 { height: 5px; }
html body .h-6 { height: 6px; }

/* ── 9.5 Mise en page inline récurrente ───────────────────────────────────── */
html body .row-c { display: inline-flex; align-items: center; }
html body .col-c { display: flex; flex-direction: column; align-items: center; }
html body .gap-4 { gap: 4px; }
html body .gap-8 { gap: 8px; }
html body .mr-4 { margin-right: 4px; }
html body .tbl-full { width: 100%; border-collapse: collapse; }
html body .va-mid { vertical-align: middle; }
html body .ov-x { overflow-x: auto; }

/* ── 9.6 Contrôles : états partagés (curseur, bordure de champ) ──────────── */
html body .ctl-click { cursor: pointer; }
html body .ctl-move { cursor: move; }
html body .cb-lean { transform: scale(.7); margin-top: 0; }
html body .z-pop { z-index: 1070; }

/* ── 9.7 Label checkbox fin (pattern massif de exam-expert, ~150 occurrences) ── */
html body .chk-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ui-border); background: var(--ui-surface);
  font-size: var(--font-mini); color: var(--ui-text-2);
  transition: background .15s ease, border-color .15s ease;
}
html body .chk-chip:hover { background: var(--ui-surface-2); border-color: var(--ui-border-strong); }
html body .chk-chip .form-check-input { transform: scale(.7); margin-top: 0; }

/* ── 9.8 Barre de progression : hauteur pilotée par classe, pas en inline ─── */
html body .progress { height: 6px; }
html body .progress.h4 { height: 4px; }
html body .progress.h5 { height: 5px; }
html body .progress.h6 { height: 6px; }

/* ── 9.9 Barre d'outils : hauteur et libellés enfin homogènes ────────────── */
html body .navbar-tb-btn { height: 38px; }