/* ═══════════════════════════════════════════════════════════════════════════
   Seval — Thème « Moderne » (chargé après theme.css)
   Neutres froids et calmes, un seul accent indigo électrique, dégradé réservé à la
   marque et à l'action principale, surfaces aérées, barre latérale claire en mode clair.
   Les feuilles existantes suivent ces jetons via les alias définis dans theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ui-bg: #f6f7fb;
  --ui-bg-2: #eef0f5;
  --ui-surface: #ffffff;
  --ui-surface-2: #f9fafc;
  --ui-border: #e6e8ef;
  --ui-border-strong: #d4d8e3;
  --ui-text: #0b1220;
  --ui-text-2: #353e52;
  --ui-muted: #5d6679;
  --ui-primary: #4f46e5;
  --ui-primary-rgb: 79, 70, 229;
  --ui-primary-solid: #4f46e5;
  --ui-primary-solid-hover: #4338ca;
  --ui-accent-2: #6d28d9;
  --ui-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #06b6d4 120%);
  /* Couleurs sémantiques assez sombres pour un texte lisible (WCAG AA) sur fond blanc ou teinté */
  --ui-ok: #166534; --ui-ok-rgb: 22, 163, 74;
  --ui-warn: #92400e; --ui-warn-rgb: 217, 119, 6;
  --ui-bad: #b91c1c; --ui-bad-rgb: 220, 38, 38;
  --ui-info: #155e75; --ui-info-rgb: 8, 145, 178;
  --ui-ico-primary: #0e7490;
  /* Action « ambre » de l'éditeur d'examen : orangé foncé, texte blanc lisible */
  --ui-amber-action: #c2410c; --ui-amber-fg: #ffffff;
  --ui-radius: 16px; --ui-radius-sm: 10px;
  --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
  --ui-shadow-md: 0 4px 10px rgba(16, 24, 40, .05), 0 18px 40px rgba(16, 24, 40, .08);
  --ui-ring: 0 0 0 4px rgba(var(--ui-primary-rgb), .18);
  --ui-sidebar-bg: #ffffff;
  --ui-sidebar-text: #353e52;
  --ui-sidebar-muted: #6b7385;
  --ui-sidebar-hover: #f2f3f8;
  --ui-sidebar-border: #e6e8ef;
  --ui-header-bg: rgba(246, 247, 251, .78);
}
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0a0d14;
  --ui-bg-2: #0e121b;
  --ui-surface: #11151f;
  --ui-surface-2: #161b27;
  --ui-border: #222838;
  --ui-border-strong: #2f374b;
  --ui-text: #eef1f7;
  --ui-text-2: #c4cbdb;
  --ui-muted: #8d97ad;
  --ui-primary: #8b8cff;
  --ui-primary-rgb: 139, 140, 255;
  --ui-primary-solid: #4f46e5;
  --ui-primary-solid-hover: #5b54ee;
  --ui-amber-action: #c2410c; --ui-amber-fg: #ffffff;
  --ui-ok: #4ade80; --ui-warn: #fbbf24; --ui-bad: #f87171; --ui-info: #38bdf8;
  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .25);
  --ui-shadow-md: 0 18px 44px rgba(0, 0, 0, .5);
  --ui-sidebar-bg: #0d1018;
  --ui-sidebar-text: #c4cbdb;
  --ui-sidebar-muted: #8b95ab;
  --ui-sidebar-hover: #161b27;
  --ui-sidebar-border: #1c2230;
  --ui-header-bg: rgba(10, 13, 20, .78);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html body { font-family: var(--ui-font); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
html body :is(h1, h2, h3, .h1, .h2, .h3) { letter-spacing: -.022em; font-weight: 700; }
html body ::selection { background: rgba(var(--ui-primary-rgb), .2); }
html body :is(a, button, .btn, .nav-link, .card, .kpi, .panel) { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .2s ease; }

/* ── Barre latérale ───────────────────────────────────────────────────── */
html body .app-sidebar {
  background: var(--ui-sidebar-bg); border-right: 1px solid var(--ui-sidebar-border); box-shadow: none;
}
html body .app-sidebar .sidebar-header { border-bottom: 1px solid var(--ui-sidebar-border); }
html body .app-sidebar .brand-icon { background: var(--ui-gradient); box-shadow: 0 4px 14px rgba(99, 102, 241, .35); border-radius: 10px; }
html body .app-sidebar .brand-text { color: var(--ui-text); font-weight: 800; letter-spacing: -.02em; }
html body .app-sidebar .sidebar-section { color: var(--ui-sidebar-muted); font-size: .64rem; letter-spacing: .12em; }
html body .app-sidebar .sidebar-nav .nav-link { color: var(--ui-sidebar-text); border-radius: 10px; font-weight: 500; position: relative; }
html body .app-sidebar .sidebar-nav .nav-link i { color: var(--ui-sidebar-muted) !important; }
html body .app-sidebar .sidebar-nav .nav-link:hover { background: var(--ui-sidebar-hover); color: var(--ui-text); }
html body .app-sidebar .sidebar-nav .nav-link:hover i { color: var(--ui-text-2) !important; }
html body .app-sidebar .sidebar-nav .nav-link.active {
  background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-primary); font-weight: 600;
}
html body .app-sidebar .sidebar-nav .nav-link.active i { color: var(--ui-primary) !important; }
html body .app-sidebar .sidebar-nav .nav-link.active::after {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-gradient);
}
html body .app-sidebar .nav-sub .nav-link::before { background: var(--ui-sidebar-border); }
html body .app-sidebar .sidebar-pin-btn { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-muted); box-shadow: var(--ui-shadow-sm); }

/* ── En-tête ──────────────────────────────────────────────────────────── */
html body .app-header {
  background: var(--ui-header-bg); border-bottom: 1px solid var(--ui-border);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
}
html body .header-user-adminty .avatar { background: var(--ui-gradient); }
html body .header-lang-adminty a.active { background: rgba(var(--ui-primary-rgb), .1); color: var(--ui-primary); }

/* ── Titres de page ───────────────────────────────────────────────────── */
html body .page-head .ph-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
html body .page-head .ph-sub { font-size: .92rem; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
html body .btn { border-radius: 10px; font-weight: 600; letter-spacing: -.005em; }
html body :is(.btn-primary, .db-btn-primary, .btn-studio-primary) {
  background: var(--ui-primary-solid); border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .14);
}
html body :is(.btn-primary, .db-btn-primary, .btn-studio-primary):hover:not(:disabled) {
  background: var(--ui-primary-solid-hover); box-shadow: 0 6px 18px rgba(var(--ui-primary-rgb), .32); transform: translateY(-1px);
}
html body :is(.btn-primary, .db-btn-primary, .btn-studio-primary):active:not(:disabled) { transform: translateY(0); }
html body :is(.btn-outline-secondary, .btn-light) { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text-2); }
html body :is(.btn-outline-secondary, .btn-light):hover:not(:disabled) { background: var(--ui-surface-2); border-color: var(--ui-border-strong); color: var(--ui-text); }

/* ── Formulaires ──────────────────────────────────────────────────────── */
html body :is(.form-control, .form-select) { border-radius: 10px; border-color: var(--ui-border); }
html body :is(.form-control, .form-select):hover:not(:focus):not(:disabled) { border-color: var(--ui-border-strong); }
html body :is(.form-control, .form-select):focus { border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
html body .form-check-input:checked { background-color: var(--ui-primary-solid); border-color: var(--ui-primary-solid); }

/* ── Cartes, panneaux, chiffres clés ─────────────────────────────────── */
html body :is(.card, .panel, .kpi) { border-radius: var(--ui-radius); border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
html body a.card:hover, html body .card.hoverable:hover { box-shadow: var(--ui-shadow-md); transform: translateY(-2px); }
html body .kpi { padding: 18px 20px; }
html body .kpi .kpi-ico { border-radius: 12px; }
html body .kpi .kpi-val { font-size: clamp(1.15rem, 1.5vw, 1.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }

/* ── Onglets de section ───────────────────────────────────────────────── */
html body .section-tabs { border-radius: 12px; background: var(--ui-bg-2); border-color: transparent; }
html body .section-tabs a.active { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sm); }
html body .section-tabs a.active .count { background: rgba(var(--ui-primary-rgb), .12); color: var(--ui-primary); }

/* ── Tableaux ─────────────────────────────────────────────────────────── */
html body .table > thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-muted);
  background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-border);
}
html body .table > tbody > tr:hover > * { background: var(--ui-surface-2); }

/* ── Pastilles, badges ────────────────────────────────────────────────── */
html body .pill { font-weight: 600; letter-spacing: .01em; }
html body .badge { border-radius: 999px; font-weight: 600; }

/* ── Menus, modales, notifications ───────────────────────────────────── */
html body :is(.dropdown-menu, .modal-content, .popover, .toast) { border-radius: 14px; border-color: var(--ui-border); box-shadow: var(--ui-shadow-md); }
html body .dropdown-item { border-radius: 8px; }
html body .dropdown-menu { padding: 6px; }
html body .modal-backdrop.show { backdrop-filter: blur(2px); }

/* ── Barres de défilement discrètes ───────────────────────────────────── */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
html body ::-webkit-scrollbar-track { background: transparent; }

/* ── Priorités : les anciennes règles de la barre latérale sombre utilisent !important ── */
html body .app-sidebar { background: var(--ui-sidebar-bg) !important; border-right: 1px solid var(--ui-sidebar-border) !important; }
html body .app-sidebar .sidebar-header .brand-icon { background: var(--ui-gradient) !important; color: #fff !important; }
html body .app-sidebar .sidebar-header .brand-icon i { color: #fff !important; }
html body .app-sidebar .sidebar-header .brand-text { color: var(--ui-text) !important; }
html body .app-sidebar .sidebar-nav .nav-link { color: var(--ui-sidebar-text) !important; margin: 1px 10px !important; border-radius: 10px !important; }
html body .app-sidebar .sidebar-nav .nav-link > :is(i, svg) { color: var(--ui-sidebar-muted) !important; }
html body .app-sidebar .sidebar-nav .nav-link:hover { background: var(--ui-sidebar-hover) !important; color: var(--ui-text) !important; }
html body .app-sidebar .sidebar-nav .nav-link:hover > :is(i, svg) { color: var(--ui-text-2) !important; }
html body .app-sidebar .sidebar-nav .nav-link.active {
  background: rgba(var(--ui-primary-rgb), .1) !important; color: var(--ui-primary) !important; box-shadow: none !important;
}
html body .app-sidebar .sidebar-nav .nav-link.active > :is(i, svg) { color: var(--ui-primary) !important; }
html body .admin-sidebar { background: var(--ui-sidebar-bg) !important; border-right: 1px solid var(--ui-sidebar-border); }
html body .admin-sidebar .admin-sidebar-body .nav-link { color: var(--ui-sidebar-text) !important; }
html body .admin-sidebar .admin-sidebar-body .nav-link.active { background: rgba(var(--ui-primary-rgb), .1) !important; color: var(--ui-primary) !important; }

/* ── Iconographie plus sobre : les icônes de contenu suivent le texte secondaire ── */
html body :is(.card-body, .panel-body, .table, .list-group-item) :is(.fa-solid, .fa-regular):not([class*="text-"]):not([style*="color"]) { color: var(--ui-muted); }

@media (prefers-reduced-motion: reduce) {
  html body * { transition: none !important; transform: none !important; }
}

/* ── Éditeurs ─────────────────────────────────────────────────────────── */
html body #markdownEditor { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace !important; font-size: .9rem; line-height: 1.75; }

/* ── Iconographie : une icône prend la couleur de son contexte (bouton, lien, pastille, carte) ──
   Remplace le coloriage global « arc-en-ciel » de theme.css, source de bruit visuel. */
html body .fa-solid.fa-solid, html body .fa-regular.fa-regular, html body .fa-brands.fa-brands { color: inherit; }
html body .fa-solid.fa-solid.ico-ok, html body .text-success > .fa-solid { color: var(--ui-ok); }

/* ── Boutons d'outils de l'en-tête : sobres, la couleur reste sur l'icône ── */
html body .navbar-tb-btn:is(.btn-grad-green, .btn-grad-red, .btn-grad-purple, .btn-grad-blue, .btn-grad-orange) {
  background: var(--ui-surface) !important; background-image: none !important; color: var(--ui-text-2) !important;
  border: 1px solid var(--ui-border) !important; box-shadow: none !important;
}
html body .navbar-tb-btn:is(.btn-grad-green, .btn-grad-red, .btn-grad-purple, .btn-grad-blue, .btn-grad-orange):hover {
  background: var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important;
}
html body .navbar-tb-btn.navbar-tb-btn.btn-grad-green > i.fa-solid { color: #16a34a !important; }
html body .navbar-tb-btn.navbar-tb-btn.btn-grad-red > i.fa-solid { color: #dc2626 !important; }
html body .navbar-tb-btn.navbar-tb-btn:is(.btn-grad-purple, .btn-grad-blue) > i.fa-solid { color: var(--ui-primary) !important; }
html body .navbar-tb-btn.navbar-tb-btn.btn-grad-orange > i.fa-solid { color: #d97706 !important; }

/* ── En-tête : le fil d'Ariane se tronque, les actions (recherche, compte) restent toujours visibles ── */
html body .app-header .header-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
html body .app-header .header-breadcrumb { min-width: 0; overflow: hidden; white-space: nowrap; }
html body .app-header .header-breadcrumb > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .app-header .header-actions { flex: 0 0 auto; gap: 6px; }
html body .app-header .cmdk-trigger { flex: none; }
@media (max-width: 1279.98px) {
  html body .app-header .cmdk-trigger span, html body .app-header .cmdk-trigger kbd { display: none !important; }
}

/* ── Avertissements : texte sombre sur fond ambre (lisible) ── */
html body :is(.btn-warning, .badge.bg-warning, .text-bg-warning, .bg-warning.badge) { color: #1f1300 !important; }
html body .badge[style*="251, 191, 36"], html body .badge[style*="#fbbf24"] { color: #1f1300 !important; }

/* ── Chiffres clés : jamais de débordement (valeurs longues comme « 2 CC · 1 EFM ») ── */
html body .kpi { min-width: 0; }
html body .kpi > div { min-width: 0; }
html body .kpi .kpi-val { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  html body .kpi .kpi-val { white-space: normal; overflow-wrap: anywhere; font-size: 1.2rem; }
  html body .kpi { padding: 12px; gap: 10px; }
}
@media (max-width: 575.98px) { html body .header-user-adminty > .fa-chevron-down { display: none; } }

/* ── Boutons d'action dans les tableaux et listes : une seule apparence, couleur réservée au danger ── */
html body :is(table, .list-row, .lib-card .lc-actions) .btn-sm:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-light) {
  background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text-2);
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html body :is(table, .list-row, .lib-card .lc-actions) .btn-sm:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-light):hover {
  background: var(--ui-surface-2); border-color: var(--ui-border-strong); color: var(--ui-primary);
}
html body :is(table, .list-row, .lib-card .lc-actions) .btn-sm.btn-outline-danger {
  background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-bad);
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
}
html body :is(table, .list-row, .lib-card .lc-actions) .btn-sm.btn-outline-danger:hover { background: var(--ui-bad); border-color: var(--ui-bad); color: #fff; }
html body .table td .d-flex.gap-1, html body .table td .btn-group { gap: 6px !important; }

/* ── Listes déroulantes compactes : place pour la flèche, texte jamais coupé ── */
html body .form-select-sm { padding-right: 2rem; text-overflow: ellipsis; }

/* ── Flèche des listes déroulantes : taille et position uniques partout ── */
html body .form-select { background-size: 12px 10px !important; background-position: right .75rem center !important; padding-right: 2.25rem !important; }
html body .form-select.form-select-sm { background-position: right .6rem center !important; padding-right: 2rem !important; }


/* ── Utilitaires Bootstrap à couleur fixe : ils suivent désormais le thème (textes invisibles en sombre) ── */
html body .bg-white { background-color: var(--ui-surface) !important; }
html body .bg-light { background-color: var(--ui-surface-2) !important; }
html body :is(.text-dark, .text-black, .text-body) { color: var(--ui-text) !important; }
html body .border-light { border-color: var(--ui-border) !important; }
html body .bg-dark:not(.badge) { background-color: var(--ui-sidebar-bg) !important; color: var(--ui-text) !important; }
html body :is(.text-success) { color: var(--ui-ok) !important; }
html body :is(.text-warning) { color: var(--ui-warn) !important; }
html body :is(.text-danger) { color: var(--ui-bad) !important; }
html body :is(.text-info) { color: var(--ui-info) !important; }
html body :is(.text-primary) { color: var(--ui-primary) !important; }
html body .header-btn-adminty .badge-count { background: #dc2626 !important; color: #fff !important; }

html body .app-sidebar .sidebar-section { color: var(--ui-sidebar-muted) !important; }
html body #notifBadge, html body .badge-count { background: #dc2626 !important; color: #fff !important; }
html body .section-tabs .count { color: var(--ui-text-2); background: rgba(15, 23, 42, .07); }
html body[data-bs-theme="dark"] .section-tabs .count, :root[data-bs-theme="dark"] .section-tabs .count { background: rgba(255,255,255,.08); color: var(--ui-text-2); }

:root[data-bs-theme="dark"] { --ui-accent-2: #c4b5fd; }
html body .btn-warning, html body .btn-warning:hover { background: var(--ui-warn) !important; border-color: var(--ui-warn) !important; color: #fff !important; }
html body .doc-page-ordre-badge { color: var(--ui-primary) !important; }

html body .alert .pill.bad { color: #991b1b; }