/* ---- Badges unifiés ---- */
/* Système de badges standardisé - Remplace progressivement sg-badge-* et avis-chip-* */

/* Base badge - Taille standard */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  word-break: break-word;
  white-space: nowrap;
}

/* Variantes de couleur - Succès/Validation */
.badge--success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Variantes de couleur - Attention/Avertissement */
.badge--warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Variantes de couleur - Danger/Erreur */
.badge--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Variantes de couleur - Info/Primaire */
.badge--info {
  background: rgba(30, 95, 189, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(30, 95, 189, 0.2);
}

/* Variantes de couleur - Secondaire/Neutre */
.badge--secondary {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Taille petite pour les tableaux denses */
.badge--sm {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  gap: 0.2rem;
}

/* Taille mini pour les indicateurs */
.badge--xs {
  font-size: 0.6rem;
  padding: 0.05rem 0.3rem;
  gap: 0.15rem;
}

/* Badge avec icône seulement */
.badge--icon {
  padding: 0.2rem;
}

/* Badge pour les chips d'avis (compatible avec avis-chip) */
.badge--avis {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  word-break: break-word;
}

.badge--avis.badge--success { background: rgba(16, 185, 129, 0.15); color: var(--green-light); border: 1px solid rgba(16, 185, 129, 0.3); }
.badge--avis.badge--danger { background: rgba(239, 68, 68, 0.12); color: var(--red-light); border: 1px solid rgba(239, 68, 68, 0.25); }
.badge--avis.badge--warning { background: rgba(245, 158, 11, 0.14); color: var(--orange); border: 1px solid rgba(245, 158, 11, 0.3); }

/* Badge pour les habilitations (compatible avec habils-chip) */
.badge--habilitation {
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(30, 95, 189, 0.15);
  color: var(--blue-light);
  border: 1px solid rgba(30, 95, 189, 0.2);
}

/* Compatibilité descendante - Alias des anciennes classes */
.sg-badge { /* Maintenir pour compatibilité */ }
.sg-badge-blue { background: rgba(30,95,189,0.15); color: #60a5fa; }
.sg-badge-green { background: rgba(16,185,129,0.15); color: #34d399; }
.sg-badge-red { background: rgba(239,68,68,0.15); color: #f87171; }
.sg-badge-orange { background: rgba(245,158,11,0.18); color: #fbbf24; }
.sg-badge-gray { background: rgba(148,163,184,0.15); color: #94a3b8; }

.avis-chip { /* Maintenir pour compatibilité */ }
.avis-chip.favorable { background: rgba(16,185,129,0.15); color: var(--green-light); border: 1px solid rgba(16,185,129,0.3); }
.avis-chip.defavorable { background: rgba(239,68,68,0.12); color: var(--red-light); border: 1px solid rgba(239,68,68,0.25); }
.avis-chip.en-cours { background: rgba(245,158,11,0.14); color: var(--orange); border: 1px solid rgba(245,158,11,0.3); }

.habils-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.habils-chip {
  /* Maintenir pour compatibilité */
  padding: 0.1rem 0.4rem; border-radius: 99px;
  font-size: 0.65rem; font-weight: 800;
  background: rgba(30,95,189,0.15); color: var(--blue-light);
  border: 1px solid rgba(30,95,189,0.2);
}

/* Animations pour les badges */
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.badge--pulse {
  animation: badgePulse 2s ease-in-out infinite;
}
/* ============================================================
   PROQUELEC — Système d'Évaluation des Habilitations Électriques
   Style Sheet — Version 2026 · Design premium institutionnel
============================================================ */

/* ---- Variables ---- */
:root {
  --navy: #050d18;
  --navy-mid: #0a1524;
  --navy-light: #122033;
  --blue-primary: #1a74e0;
  --blue-light: #5aa3f5;
  --blue-glow: rgba(26, 116, 224, 0.28);
  --gold: #c9a227;
  --gold-light: #e8c56a;
  --gold-glow: rgba(201, 162, 39, 0.22);
  --purple: #3d5a80;
  --purple-light: #5b7a9d;
  --green: #0f9f6e;
  --green-light: #34c48b;
  --red: #e04b4b;
  --red-light: #f07171;
  --orange: #e0892a;
  --gray-100: #f8fafc;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --white: #ffffff;
  --text-primary: #f2f6fb;
  --text-secondary: #8fa3bb;
  --text-dark: #1e293b;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-light: rgba(0, 0, 0, 0.1);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.075);
  --surface-elevated: linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 64px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 8px 32px var(--gold-glow);
  --transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  --font-main: 'Plus Jakarta Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: 'Sora', 'Plus Jakarta Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Hauteur réservée sous la navbar fixe (réajustée dynamiquement en JS) */
  --nav-offset: 4.25rem;
  --journey-offset: 0px;
  /* Hauteur de la barre d'état (témoin de synchronisation), épinglée sous la
     navbar. Valeur de repli : si le JS ne s'exécute pas, la place reste
     réservée (aucun contenu masqué). syncChromeOffsets() la remplace par la
     hauteur réellement mesurée, et par 0 quand la barre est masquée
     (Dashboard, mode stagiaire). */
  --syncbar-offset: 2.15rem;
  --chrome-offset: calc(var(--nav-offset) + var(--syncbar-offset));
  --theme-name: 'institutionnel';
}

/* Thème 2 — Bleu électrique × Or mariés */
html.theme-volt,
html.theme-volt body,
body.theme-volt {
  --navy: #02101f;
  --navy-mid: #06182c;
  --navy-light: #0c2744;
  --blue-primary: #00a3ff;
  --blue-light: #5cc8ff;
  --blue-glow: rgba(0, 163, 255, 0.38);
  --gold: #f0b429;
  --gold-light: #ffd666;
  --gold-glow: rgba(240, 180, 41, 0.32);
  --purple: #1e4d7b;
  --purple-light: #3d7ab0;
  --text-primary: #f5f9ff;
  --text-secondary: #9eb6d4;
  --border: rgba(92, 200, 255, 0.14);
  --border-strong: rgba(255, 214, 102, 0.28);
  --surface: rgba(0, 163, 255, 0.06);
  --surface-hover: rgba(0, 163, 255, 0.11);
  --surface-elevated: linear-gradient(165deg, rgba(0,163,255,0.12) 0%, rgba(240,180,41,0.05) 55%, rgba(255,255,255,0.02) 100%);
  --shadow: 0 1px 0 rgba(92, 200, 255, 0.1), 0 14px 40px rgba(0, 40, 80, 0.45);
  --shadow-lg: 0 1px 0 rgba(255, 214, 102, 0.12), 0 28px 64px rgba(0, 30, 60, 0.55);
  --shadow-gold: 0 8px 36px var(--gold-glow);
  --theme-name: 'volt';
}

html.theme-volt body,
body.theme-volt {
  background:
    radial-gradient(1000px 520px at 10% -6%, rgba(0, 163, 255, 0.28), transparent 55%),
    radial-gradient(820px 460px at 92% 6%, rgba(240, 180, 41, 0.16), transparent 52%),
    radial-gradient(640px 360px at 50% 100%, rgba(0, 163, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #031525 0%, #02101f 45%, #010a14 100%);
}
html.theme-volt .navbar,
body.theme-volt .navbar {
  background: rgba(2, 16, 31, 0.78);
  border-bottom-color: rgba(240, 180, 41, 0.2);
}
html.theme-volt .navbar.scrolled,
body.theme-volt .navbar.scrolled {
  background: rgba(2, 16, 31, 0.94);
}
html.theme-volt .navbar::after,
body.theme-volt .navbar::after {
  background: linear-gradient(90deg, transparent, rgba(0,163,255,0.55), rgba(240,180,41,0.65), rgba(0,163,255,0.4), transparent);
}
html.theme-volt .brand-sub,
body.theme-volt .brand-sub {
  color: var(--gold-light);
}
html.theme-volt .btn-primary,
body.theme-volt .btn-primary {
  background: linear-gradient(135deg, #00a3ff 0%, #0077cc 55%, #c9a227 160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 10px 28px var(--blue-glow);
}
html.theme-volt .auth-btn-submit,
body.theme-volt .auth-btn-submit {
  background: linear-gradient(135deg, #00a3ff 0%, #0a5fa8 50%, #c9a227 140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 10px 28px var(--blue-glow);
}
html.theme-volt .auth-glass-card::before,
body.theme-volt .auth-glass-card::before {
  background: linear-gradient(90deg, var(--gold), var(--blue-primary), var(--gold-light));
}
html.theme-volt .hero-brand-mark span,
body.theme-volt .hero-brand-mark span {
  background: linear-gradient(120deg, #5cc8ff, #ffd666 45%, #00a3ff);
  -webkit-background-clip: text;
  background-clip: text;
}
html.theme-volt .ux-journey-bar,
body.theme-volt .ux-journey-bar {
  background: rgba(2, 16, 31, 0.92);
  border-bottom-color: rgba(0, 163, 255, 0.2);
}

/* Thème 3 — Blanc × Bleu France (épuré, panneaux premium) */
html.theme-tricolore,
html.theme-tricolore body,
body.theme-tricolore {
  --navy: #f4f8fc;
  --navy-mid: #ffffff;
  --navy-light: #e8f0f8;
  --blue-primary: #0055a4;
  --blue-light: #3d8fd4;
  --blue-glow: rgba(0, 85, 164, 0.2);
  --gold: #ce1126;
  --gold-light: #e83a4a;
  --gold-glow: rgba(206, 17, 38, 0.14);
  --purple: #003a70;
  --purple-light: #1a5a96;
  --text-primary: #0c2340;
  --text-secondary: #3d5670;
  --text-dark: #0c2340;
  --white: #ffffff;
  --border: rgba(0, 85, 164, 0.14);
  --border-strong: rgba(0, 85, 164, 0.28);
  --border-light: rgba(12, 35, 64, 0.08);
  --surface: rgba(0, 85, 164, 0.05);
  --surface-hover: rgba(0, 85, 164, 0.1);
  --surface-elevated: linear-gradient(155deg, #1a6fc2 0%, #0055a4 48%, #003a70 100%);
  --shadow: 0 8px 28px rgba(0, 58, 112, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 58, 112, 0.14);
  --shadow-gold: 0 8px 24px var(--gold-glow);
  --fr-panel: linear-gradient(155deg, #1a6fc2 0%, #0055a4 48%, #003a70 100%);
  --fr-panel-soft: linear-gradient(165deg, #ffffff 0%, #eef4fb 100%);
  --fr-ink: #0c2340;
  --theme-name: 'tricolore';
}

html.theme-tricolore body,
body.theme-tricolore {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 55%, #eaf1f8 100%);
  color: var(--fr-ink);
}
html.theme-tricolore body::before,
body.theme-tricolore::before {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(0, 85, 164, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 164, 0.04) 1px, transparent 1px);
}

/* ---- Menu / chrome ---- */
html.theme-tricolore .navbar,
body.theme-tricolore .navbar {
  background: linear-gradient(180deg, #0055a4 0%, #003a70 100%);
  border-bottom: none;
  box-shadow: 0 8px 24px rgba(0, 58, 112, 0.18);
  overflow: hidden;
}
html.theme-tricolore .navbar.scrolled,
body.theme-tricolore .navbar.scrolled {
  background: linear-gradient(180deg, #0055a4 0%, #002e5c 100%);
  box-shadow: 0 10px 28px rgba(0, 58, 112, 0.22);
}
html.theme-tricolore .navbar::after,
body.theme-tricolore .navbar::after {
  height: 3px;
  background: linear-gradient(90deg, #0055a4 0%, #0055a4 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ce1126 66.6%, #ce1126 100%);
  opacity: 1;
}
html.theme-tricolore .nav-category,
body.theme-tricolore .nav-category {
  border-left-color: rgba(255, 255, 255, 0.16);
}
html.theme-tricolore .nav-link,
body.theme-tricolore .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
}
html.theme-tricolore .nav-link:hover,
body.theme-tricolore .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
html.theme-tricolore .nav-link.active,
body.theme-tricolore .nav-link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html.theme-tricolore .hamburger,
body.theme-tricolore .hamburger {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
html.theme-tricolore .brand-main,
html.theme-tricolore .brand-sub,
html.theme-tricolore .nav-link,
html.theme-tricolore .nav-category-label,
html.theme-tricolore .nav-link-help,
body.theme-tricolore .brand-main,
body.theme-tricolore .brand-sub,
body.theme-tricolore .nav-link,
body.theme-tricolore .nav-category-label,
body.theme-tricolore .nav-link-help {
  color: #ffffff !important;
}
html.theme-tricolore .brand-sub,
body.theme-tricolore .brand-sub {
  opacity: 0.9;
  color: #d6e8f8 !important;
}
html.theme-tricolore .nav-category-label,
body.theme-tricolore .nav-category-label {
  color: #9ec5e8 !important;
}
html.theme-tricolore .nav-category,
body.theme-tricolore .nav-category {
  border-left-color: rgba(255, 255, 255, 0.15);
}
html.theme-tricolore .nav-link:hover,
html.theme-tricolore .nav-link.active,
body.theme-tricolore .nav-link:hover,
body.theme-tricolore .nav-link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html.theme-tricolore .nav-link.active,
body.theme-tricolore .nav-link.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
html.theme-tricolore .nav-logo-wrap,
body.theme-tricolore .nav-logo-wrap {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
}
html.theme-tricolore .nav-cta,
body.theme-tricolore .nav-cta {
  background: linear-gradient(135deg, #ce1126, #a50d1e);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25);
}
html.theme-tricolore .hamburger span,
body.theme-tricolore .hamburger span {
  background: #ffffff;
}
html.theme-tricolore .mobile-menu,
body.theme-tricolore .mobile-menu {
  background: linear-gradient(180deg, #0055a4 0%, #003a70 100%);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
html.theme-tricolore .mobile-link,
body.theme-tricolore .mobile-link {
  color: #e8f2fa !important;
}
html.theme-tricolore .mobile-link:hover,
body.theme-tricolore .mobile-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}
html.theme-tricolore .ux-journey-bar,
body.theme-tricolore .ux-journey-bar {
  background: linear-gradient(90deg, #eaf3fb 0%, #ffffff 50%, #eaf3fb 100%);
  border-bottom: 1px solid rgba(0, 85, 164, 0.14);
  box-shadow: none;
}
html.theme-tricolore .ux-breadcrumb-home,
html.theme-tricolore .ux-breadcrumb-current,
html.theme-tricolore .ux-density-label,
body.theme-tricolore .ux-breadcrumb-home,
body.theme-tricolore .ux-breadcrumb-current,
body.theme-tricolore .ux-density-label {
  color: var(--fr-ink) !important;
}
html.theme-tricolore .ux-density-select,
html.theme-tricolore .ux-nav-theme-select,
body.theme-tricolore .ux-density-select,
body.theme-tricolore .ux-nav-theme-select {
  background: #ffffff;
  color: var(--fr-ink);
  border: 1px solid rgba(0, 85, 164, 0.22);
}
html.theme-tricolore .ux-nav-theme-wrap,
body.theme-tricolore .ux-nav-theme-wrap {
  color: #ffffff;
}
html.theme-tricolore .ux-nav-theme-label,
body.theme-tricolore .ux-nav-theme-label {
  color: rgba(255, 255, 255, 0.85);
}
html.theme-tricolore .ux-nav-theme-select,
body.theme-tricolore .ux-nav-theme-select {
  background: rgba(255, 255, 255, 0.95);
  color: var(--fr-ink);
}

/* ---- Titres de page ---- */
html.theme-tricolore .section-title,
html.theme-tricolore h1,
html.theme-tricolore h2,
html.theme-tricolore .page-title,
body.theme-tricolore .section-title,
body.theme-tricolore h1,
body.theme-tricolore h2,
body.theme-tricolore .page-title {
  color: var(--fr-ink) !important;
}

/* ---- Panneaux premium bleu France ---- */
html.theme-tricolore .info-card,
html.theme-tricolore .kpi-card,
html.theme-tricolore .ms-glass-card,
html.theme-tricolore .help-card,
html.theme-tricolore .system-panel,
html.theme-tricolore .form-section,
html.theme-tricolore .formula-box,
html.theme-tricolore .rules-box,
html.theme-tricolore .module-selector,
html.theme-tricolore .cockpit-kpi-card,
html.theme-tricolore .cockpit-panel,
html.theme-tricolore .cockpit-card,
html.theme-tricolore .hab-card,
html.theme-tricolore .audit-fold,
html.theme-tricolore details.audit-fold,
html.theme-tricolore .ux-empty-state,
html.theme-tricolore .ms-sub-card,
html.theme-tricolore .ms-code-neon,
html.theme-tricolore .archive-folder,
html.theme-tricolore .archive-folder-summary,
html.theme-tricolore .modal-content,
html.theme-tricolore .auth-glass-card,
html.theme-tricolore .pratique-panel,
html.theme-tricolore .report-card,
html.theme-tricolore .session-card,
html.theme-tricolore .stagiaire-card,
html.theme-tricolore .dash-panel,
html.theme-tricolore .card-panel,
body.theme-tricolore .info-card,
body.theme-tricolore .kpi-card,
body.theme-tricolore .ms-glass-card,
body.theme-tricolore .help-card,
body.theme-tricolore .system-panel,
body.theme-tricolore .form-section,
body.theme-tricolore .formula-box,
body.theme-tricolore .rules-box,
body.theme-tricolore .module-selector,
body.theme-tricolore .cockpit-kpi-card,
body.theme-tricolore .cockpit-panel,
body.theme-tricolore .cockpit-card,
body.theme-tricolore .hab-card,
body.theme-tricolore .audit-fold,
body.theme-tricolore details.audit-fold,
body.theme-tricolore .ux-empty-state,
body.theme-tricolore .ms-sub-card,
body.theme-tricolore .ms-code-neon,
body.theme-tricolore .archive-folder,
body.theme-tricolore .archive-folder-summary,
body.theme-tricolore .modal-content,
body.theme-tricolore .auth-glass-card,
body.theme-tricolore .pratique-panel,
body.theme-tricolore .report-card,
body.theme-tricolore .session-card,
body.theme-tricolore .stagiaire-card,
body.theme-tricolore .dash-panel,
body.theme-tricolore .card-panel {
  background: var(--fr-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 28px rgba(0, 58, 112, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.theme-tricolore .info-card:hover,
html.theme-tricolore .kpi-card:hover,
html.theme-tricolore .ms-glass-card:hover,
html.theme-tricolore .help-card:hover,
body.theme-tricolore .info-card:hover,
body.theme-tricolore .kpi-card:hover,
body.theme-tricolore .ms-glass-card:hover,
body.theme-tricolore .help-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 58, 112, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: linear-gradient(155deg, #2a7bc4 0%, #0055a4 48%, #003a70 100%) !important;
}

/* Texte lisible dans les panneaux bleus */
html.theme-tricolore .info-card *,
html.theme-tricolore .kpi-card *,
html.theme-tricolore .ms-glass-card *,
html.theme-tricolore .help-card *,
html.theme-tricolore .system-panel *,
html.theme-tricolore .form-section *,
html.theme-tricolore .formula-box *,
html.theme-tricolore .rules-box *,
html.theme-tricolore .cockpit-kpi-card *,
html.theme-tricolore .hab-card *,
html.theme-tricolore .audit-fold *,
html.theme-tricolore .ms-sub-card *,
html.theme-tricolore .ms-code-neon *,
html.theme-tricolore .auth-glass-card *,
html.theme-tricolore .modal-content *,
html.theme-tricolore .ux-empty-state *,
body.theme-tricolore .info-card *,
body.theme-tricolore .kpi-card *,
body.theme-tricolore .ms-glass-card *,
body.theme-tricolore .help-card *,
body.theme-tricolore .system-panel *,
body.theme-tricolore .form-section *,
body.theme-tricolore .formula-box *,
body.theme-tricolore .rules-box *,
body.theme-tricolore .cockpit-kpi-card *,
body.theme-tricolore .hab-card *,
body.theme-tricolore .audit-fold *,
body.theme-tricolore .ms-sub-card *,
body.theme-tricolore .ms-code-neon *,
body.theme-tricolore .auth-glass-card *,
body.theme-tricolore .modal-content *,
body.theme-tricolore .ux-empty-state * {
  color: #ffffff;
}
html.theme-tricolore .card-title,
html.theme-tricolore .card-label,
html.theme-tricolore .card-detail,
html.theme-tricolore .card-desc,
html.theme-tricolore .kpi-label,
html.theme-tricolore .kpi-value,
html.theme-tricolore .ms-card-title,
html.theme-tricolore .ms-card-subtitle,
html.theme-tricolore .help-card h3,
html.theme-tricolore .help-card p,
html.theme-tricolore .form-section-header h3,
html.theme-tricolore .form-label,
html.theme-tricolore .system-panel-title,
html.theme-tricolore .formula-text,
html.theme-tricolore .formula-label,
html.theme-tricolore .formula-note,
body.theme-tricolore .card-title,
body.theme-tricolore .card-label,
body.theme-tricolore .card-detail,
body.theme-tricolore .card-desc,
body.theme-tricolore .kpi-label,
body.theme-tricolore .kpi-value,
body.theme-tricolore .ms-card-title,
body.theme-tricolore .ms-card-subtitle,
body.theme-tricolore .help-card h3,
body.theme-tricolore .help-card p,
body.theme-tricolore .form-section-header h3,
body.theme-tricolore .form-label,
body.theme-tricolore .system-panel-title,
body.theme-tricolore .formula-text,
body.theme-tricolore .formula-label,
body.theme-tricolore .formula-note {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
html.theme-tricolore .kpi-blue .kpi-value,
html.theme-tricolore .kpi-green .kpi-value,
html.theme-tricolore .kpi-orange .kpi-value,
html.theme-tricolore .kpi-red .kpi-value,
html.theme-tricolore .kpi-purple .kpi-value,
html.theme-tricolore .kpi-gold .kpi-value,
body.theme-tricolore .kpi-blue .kpi-value,
body.theme-tricolore .kpi-green .kpi-value,
body.theme-tricolore .kpi-orange .kpi-value,
body.theme-tricolore .kpi-red .kpi-value,
body.theme-tricolore .kpi-purple .kpi-value,
body.theme-tricolore .kpi-gold .kpi-value {
  color: #ffffff !important;
}
html.theme-tricolore .card-detail,
html.theme-tricolore .card-desc,
html.theme-tricolore .kpi-label,
html.theme-tricolore .ms-card-subtitle,
html.theme-tricolore .help-card p,
html.theme-tricolore .form-label,
html.theme-tricolore .formula-note,
body.theme-tricolore .card-detail,
body.theme-tricolore .card-desc,
body.theme-tricolore .kpi-label,
body.theme-tricolore .ms-card-subtitle,
body.theme-tricolore .help-card p,
body.theme-tricolore .form-label,
body.theme-tricolore .formula-note {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Champs dans panneaux : fond clair, texte sombre */
html.theme-tricolore .form-input,
html.theme-tricolore .form-select,
html.theme-tricolore textarea,
html.theme-tricolore select,
html.theme-tricolore input[type="text"],
html.theme-tricolore input[type="password"],
html.theme-tricolore input[type="email"],
html.theme-tricolore input[type="number"],
html.theme-tricolore input[type="date"],
html.theme-tricolore input[type="search"],
html.theme-tricolore .ux-density-select,
body.theme-tricolore .form-input,
body.theme-tricolore .form-select,
body.theme-tricolore textarea,
body.theme-tricolore select,
body.theme-tricolore input[type="text"],
body.theme-tricolore input[type="password"],
body.theme-tricolore input[type="email"],
body.theme-tricolore input[type="number"],
body.theme-tricolore input[type="date"],
body.theme-tricolore input[type="search"],
body.theme-tricolore .ux-density-select {
  background: #ffffff !important;
  color: var(--fr-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
html.theme-tricolore .form-input:focus,
html.theme-tricolore .form-select:focus,
html.theme-tricolore textarea:focus,
body.theme-tricolore .form-input:focus,
body.theme-tricolore .form-select:focus,
body.theme-tricolore textarea:focus {
  background: #ffffff !important;
  border-color: #9ec5e8 !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
html.theme-tricolore .form-input::placeholder,
body.theme-tricolore .form-input::placeholder {
  color: #7a90a8 !important;
}
html.theme-tricolore .form-select option,
html.theme-tricolore .form-input option,
html.theme-tricolore .form-input optgroup,
html.theme-tricolore .form-input optgroup option,
body.theme-tricolore .form-select option,
body.theme-tricolore .form-input option,
body.theme-tricolore .form-input optgroup,
body.theme-tricolore .form-input optgroup option {
  background: #ffffff;
  color: #0c2340;
}

/* Critères / onglets / boutons secondaires */
html.theme-tricolore .criterion-item,
html.theme-tricolore .tab-btn,
html.theme-tricolore .filter-btn,
html.theme-tricolore .btn-outline,
html.theme-tricolore .btn-outline-sm,
html.theme-tricolore .btn-sm-sel,
html.theme-tricolore .mod-checkbox-label,
html.theme-tricolore .appr-row,
html.theme-tricolore .pratique-mode-btn,
html.theme-tricolore .pratique-serie-btn,
body.theme-tricolore .criterion-item,
body.theme-tricolore .tab-btn,
body.theme-tricolore .filter-btn,
body.theme-tricolore .btn-outline,
body.theme-tricolore .btn-outline-sm,
body.theme-tricolore .btn-sm-sel,
body.theme-tricolore .mod-checkbox-label,
body.theme-tricolore .appr-row,
body.theme-tricolore .pratique-mode-btn,
body.theme-tricolore .pratique-serie-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
html.theme-tricolore .btn-primary,
html.theme-tricolore .auth-btn-submit,
body.theme-tricolore .btn-primary,
body.theme-tricolore .auth-btn-submit {
  background: linear-gradient(135deg, #ce1126 0%, #a50d1e 100%);
  color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 20px rgba(206, 17, 38, 0.28);
}
html.theme-tricolore .btn-secondary,
body.theme-tricolore .btn-secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Cockpit / barres / timelines — plus de zones sombres */
html.theme-tricolore .cockpit-bar,
html.theme-tricolore #cockpit-top-bar,
html.theme-tricolore #cockpit-status-bar,
html.theme-tricolore .cockpit-sidebar,
html.theme-tricolore .cockpit-main-content,
html.theme-tricolore .timeline-step,
html.theme-tricolore .decision-timeline .timeline-step,
body.theme-tricolore .cockpit-bar,
body.theme-tricolore #cockpit-top-bar,
body.theme-tricolore #cockpit-status-bar,
body.theme-tricolore .cockpit-sidebar,
body.theme-tricolore .cockpit-main-content,
body.theme-tricolore .timeline-step,
body.theme-tricolore .decision-timeline .timeline-step {
  background: var(--fr-panel) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 24px rgba(0, 58, 112, 0.12);
}
html.theme-tricolore .cockpit-bar-val,
html.theme-tricolore .cockpit-bar-item,
html.theme-tricolore .timeline-step-title,
html.theme-tricolore .timeline-step-status,
body.theme-tricolore .cockpit-bar-val,
body.theme-tricolore .cockpit-bar-item,
body.theme-tricolore .timeline-step-title,
body.theme-tricolore .timeline-step-status {
  color: #ffffff !important;
}
html.theme-tricolore .auth-glass-card::before,
body.theme-tricolore .auth-glass-card::before {
  background: linear-gradient(90deg, #0055a4, #ffffff, #ce1126);
}
html.theme-tricolore .hero-brand-mark span,
body.theme-tricolore .hero-brand-mark span {
  background: linear-gradient(120deg, #0055a4, #2a7bc4 45%, #ce1126);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html.theme-tricolore .ms-glass-card::before,
html.theme-tricolore .info-card::before,
body.theme-tricolore .ms-glass-card::before,
body.theme-tricolore .info-card::before {
  background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.15), rgba(206,17,38,0.55));
  height: 3px;
}
html.theme-tricolore .ms-code-digits,
body.theme-tricolore .ms-code-digits {
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
}
html.theme-tricolore .ms-share-copy,
html.theme-tricolore .ms-share-print,
body.theme-tricolore .ms-share-copy,
body.theme-tricolore .ms-share-print {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html.theme-tricolore .mod-checkbox-label.active .mod-badge,
html.theme-tricolore .mod-checkbox-label.ht.active .mod-badge,
html.theme-tricolore .qcm-item.correct .qcm-num,
html.theme-tricolore .ms-share-whatsapp,
html.theme-tricolore .ms-share-sms,
body.theme-tricolore .mod-checkbox-label.active .mod-badge,
body.theme-tricolore .mod-checkbox-label.ht.active .mod-badge,
body.theme-tricolore .qcm-item.correct .qcm-num,
body.theme-tricolore .ms-share-whatsapp,
body.theme-tricolore .ms-share-sms {
  color: #ffffff !important;
}

/* Tables / matrices / zones encore sombres en dur */
html.theme-tricolore [style*="background: rgba(15"],
html.theme-tricolore [style*="background:rgba(15"],
html.theme-tricolore [style*="background: #0f172a"],
html.theme-tricolore [style*="background:#0f172a"],
body.theme-tricolore [style*="background: rgba(15"],
body.theme-tricolore [style*="background:rgba(15"],
body.theme-tricolore [style*="background: #0f172a"],
body.theme-tricolore [style*="background:#0f172a"] {
  background: var(--fr-panel) !important;
  color: #ffffff !important;
}
html.theme-tricolore .rapport-types-table th,
html.theme-tricolore table th,
body.theme-tricolore .rapport-types-table th,
body.theme-tricolore table th {
  background: rgba(0, 58, 112, 0.55) !important;
  color: #ffffff !important;
}
html.theme-tricolore table td,
body.theme-tricolore table td {
  color: var(--fr-ink);
}
html.theme-tricolore .info-card table td,
html.theme-tricolore .form-section table td,
html.theme-tricolore .ms-glass-card table td,
html.theme-tricolore .audit-fold table td,
body.theme-tricolore .info-card table td,
body.theme-tricolore .form-section table td,
body.theme-tricolore .ms-glass-card table td,
body.theme-tricolore .audit-fold table td {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Footers / overlays / empty — pas de noir opaque */
html.theme-tricolore .footer,
html.theme-tricolore footer,
html.theme-tricolore .ux-loading-overlay,
html.theme-tricolore .modal-overlay,
body.theme-tricolore .footer,
body.theme-tricolore footer,
body.theme-tricolore .ux-loading-overlay,
body.theme-tricolore .modal-overlay {
  background: rgba(0, 58, 112, 0.88) !important;
  color: #ffffff;
}
html.theme-tricolore ::-webkit-scrollbar-thumb,
body.theme-tricolore ::-webkit-scrollbar-thumb {
  background: rgba(0, 85, 164, 0.35);
}
html.theme-tricolore ::-webkit-scrollbar-thumb:hover,
body.theme-tricolore ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 85, 164, 0.55);
}

/* Cockpit / dashboard — fond clair + panneaux bleus */
html.theme-tricolore .cockpit-page-wrapper,
body.theme-tricolore .cockpit-page-wrapper {
  background: linear-gradient(180deg, #f5f9fd 0%, #eaf1f8 100%) !important;
  background-image: none !important;
}
html.theme-tricolore .cockpit-page-wrapper::before,
body.theme-tricolore .cockpit-page-wrapper::before {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(0, 85, 164, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 164, 0.05) 1px, transparent 1px);
}
html.theme-tricolore .cockpit-sidebar,
body.theme-tricolore .cockpit-sidebar {
  background: var(--fr-panel) !important;
  border-right-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 8px 0 28px rgba(0, 58, 112, 0.14) !important;
}
html.theme-tricolore .cockpit-sidebar::after,
body.theme-tricolore .cockpit-sidebar::after {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.35), transparent);
}
html.theme-tricolore .cockpit-nav-item,
html.theme-tricolore button.cockpit-nav-item,
html.theme-tricolore a.cockpit-nav-item,
body.theme-tricolore .cockpit-nav-item,
body.theme-tricolore button.cockpit-nav-item,
body.theme-tricolore a.cockpit-nav-item {
  color: #e8f2fa !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html.theme-tricolore .cockpit-nav-item:hover,
html.theme-tricolore .cockpit-nav-item.active,
body.theme-tricolore .cockpit-nav-item:hover,
body.theme-tricolore .cockpit-nav-item.active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
html.theme-tricolore .cockpit-section-title,
html.theme-tricolore .cockpit-section-head,
body.theme-tricolore .cockpit-section-title,
body.theme-tricolore .cockpit-section-head {
  color: var(--fr-ink) !important;
  -webkit-text-fill-color: var(--fr-ink) !important;
}
html.theme-tricolore .cockpit-section-tag,
body.theme-tricolore .cockpit-section-tag {
  background: var(--fr-panel) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(0, 85, 164, 0.3) !important;
}
html.theme-tricolore .ux-journey-bar .btn-outline-sm,
html.theme-tricolore .ux-journey-bar .btn-outline,
body.theme-tricolore .ux-journey-bar .btn-outline-sm,
body.theme-tricolore .ux-journey-bar .btn-outline {
  background: var(--fr-panel) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html.theme-tricolore .audit-accred-banner,
html.theme-tricolore .audit-section-tag,
html.theme-tricolore .rapport-entreprise-banner,
html.theme-tricolore .rapport-types-table-wrap,
html.theme-tricolore .ms-network-notice,
body.theme-tricolore .audit-accred-banner,
body.theme-tricolore .audit-section-tag,
body.theme-tricolore .rapport-entreprise-banner,
body.theme-tricolore .rapport-types-table-wrap,
body.theme-tricolore .ms-network-notice {
  background: var(--fr-panel) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 58, 112, 0.12);
}
html.theme-tricolore .audit-accred-banner *,
html.theme-tricolore .rapport-entreprise-banner *,
html.theme-tricolore .ms-network-notice *,
body.theme-tricolore .audit-accred-banner *,
body.theme-tricolore .rapport-entreprise-banner *,
body.theme-tricolore .ms-network-notice * {
  color: #ffffff !important;
}
html.theme-tricolore .rapport-types-table,
body.theme-tricolore .rapport-types-table {
  color: #ffffff !important;
}
html.theme-tricolore .rapport-types-table td,
body.theme-tricolore .rapport-types-table td {
  color: rgba(255, 255, 255, 0.92) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
html.theme-tricolore .text-secondary,
html.theme-tricolore .muted,
html.theme-tricolore .section-subtitle,
html.theme-tricolore .rapport-table-hint,
body.theme-tricolore .text-secondary,
body.theme-tricolore .muted,
body.theme-tricolore .section-subtitle,
body.theme-tricolore .rapport-table-hint {
  color: var(--text-secondary) !important;
}
html.theme-tricolore .info-card .text-secondary,
html.theme-tricolore .kpi-card .text-secondary,
html.theme-tricolore .rules-box .text-secondary,
html.theme-tricolore .form-section .text-secondary,
html.theme-tricolore .help-card .text-secondary,
html.theme-tricolore .ms-glass-card .text-secondary,
html.theme-tricolore .programme-box .text-secondary,
html.theme-tricolore .sg-card .text-secondary,
html.theme-tricolore .cockpit-kpi-card .text-secondary,
html.theme-tricolore .muted,
body.theme-tricolore .info-card .text-secondary,
body.theme-tricolore .kpi-card .text-secondary,
body.theme-tricolore .rules-box .text-secondary,
body.theme-tricolore .form-section .text-secondary,
body.theme-tricolore .help-card .text-secondary,
body.theme-tricolore .ms-glass-card .text-secondary,
body.theme-tricolore .programme-box .text-secondary,
body.theme-tricolore .sg-card .text-secondary,
body.theme-tricolore .cockpit-kpi-card .text-secondary {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

/* ============================================================
   AUDIT CONTRASTE THEME FR — fonds sombres/blancs + textes
============================================================ */
html.theme-tricolore .sg-card,
html.theme-tricolore .stag-folder-container,
html.theme-tricolore .programme-box,
html.theme-tricolore .alertes-box,
html.theme-tricolore .filters-bar,
html.theme-tricolore .stats-strip,
html.theme-tricolore .sessions-groupes-header,
html.theme-tricolore .habil-inst-card,
html.theme-tricolore .cockpit-footer-bar,
html.theme-tricolore #cockpit-status-bar,
html.theme-tricolore .mobile-sticky-progress-bar,
html.theme-tricolore .archive-folder,
html.theme-tricolore .archive-folder-summary,
html.theme-tricolore .modal-box,
html.theme-tricolore .modal-dialog,
html.theme-tricolore .modal-apercu-header,
html.theme-tricolore .chart-card,
html.theme-tricolore .chart-wrap,
html.theme-tricolore .rule-item,
html.theme-tricolore .rule-global,
html.theme-tricolore .admin-card,
html.theme-tricolore .admin-panel,
html.theme-tricolore .admin-box,
html.theme-tricolore .qcm-item,
html.theme-tricolore .tc-total-box,
html.theme-tricolore .module-card,
html.theme-tricolore .eval-panel,
html.theme-tricolore .eval-box,
html.theme-tricolore .controle-card,
html.theme-tricolore .controle-panel,
html.theme-tricolore .notice-box,
html.theme-tricolore .sandbox-box,
html.theme-tricolore .rapport-card,
html.theme-tricolore .rapport-box,
html.theme-tricolore .stagiaires-kpi-bar > *,
html.theme-tricolore .dashboard-dynamic-metrics > div,
html.theme-tricolore .ux-fold,
html.theme-tricolore .ux-alert-box,
html.theme-tricolore .empty-state,
html.theme-tricolore .ux-empty-state,
html.theme-tricolore details:not(.mobile-details),
html.theme-tricolore summary,
html.theme-tricolore .pratique-subst-q,
html.theme-tricolore .pratique-grid-row,
html.theme-tricolore .ms-results-panel,
html.theme-tricolore .ms-access-panel,
html.theme-tricolore .ms-filter-bar,
html.theme-tricolore .table-wrap,
html.theme-tricolore .data-table-wrap,
html.theme-tricolore .stag-table-wrap,
html.theme-tricolore .cockpit-stag-table-wrap,
html.theme-tricolore .cockpit-widget,
html.theme-tricolore .cockpit-block,
html.theme-tricolore .cockpit-card-wide,
html.theme-tricolore .hab-inst-grid > *,
body.theme-tricolore .sg-card,
body.theme-tricolore .stag-folder-container,
body.theme-tricolore .programme-box,
body.theme-tricolore .alertes-box,
body.theme-tricolore .filters-bar,
body.theme-tricolore .stats-strip,
body.theme-tricolore .sessions-groupes-header,
body.theme-tricolore .habil-inst-card,
body.theme-tricolore .cockpit-footer-bar,
body.theme-tricolore #cockpit-status-bar,
body.theme-tricolore .mobile-sticky-progress-bar,
body.theme-tricolore .archive-folder,
body.theme-tricolore .archive-folder-summary,
body.theme-tricolore .modal-box,
body.theme-tricolore .modal-dialog,
body.theme-tricolore .modal-apercu-header,
body.theme-tricolore .chart-card,
body.theme-tricolore .chart-wrap,
body.theme-tricolore .rule-item,
body.theme-tricolore .rule-global,
body.theme-tricolore .admin-card,
body.theme-tricolore .admin-panel,
body.theme-tricolore .admin-box,
body.theme-tricolore .qcm-item,
body.theme-tricolore .tc-total-box,
body.theme-tricolore .module-card,
body.theme-tricolore .eval-panel,
body.theme-tricolore .eval-box,
body.theme-tricolore .controle-card,
body.theme-tricolore .controle-panel,
body.theme-tricolore .notice-box,
body.theme-tricolore .sandbox-box,
body.theme-tricolore .rapport-card,
body.theme-tricolore .rapport-box,
body.theme-tricolore .stagiaires-kpi-bar > *,
body.theme-tricolore .dashboard-dynamic-metrics > div,
body.theme-tricolore .ux-fold,
body.theme-tricolore .ux-alert-box,
body.theme-tricolore .empty-state,
body.theme-tricolore .ux-empty-state,
body.theme-tricolore details:not(.mobile-details),
body.theme-tricolore summary,
body.theme-tricolore .pratique-subst-q,
body.theme-tricolore .pratique-grid-row,
body.theme-tricolore .ms-results-panel,
body.theme-tricolore .ms-access-panel,
body.theme-tricolore .ms-filter-bar,
body.theme-tricolore .table-wrap,
body.theme-tricolore .data-table-wrap,
body.theme-tricolore .stag-table-wrap,
body.theme-tricolore .cockpit-stag-table-wrap,
body.theme-tricolore .cockpit-widget,
body.theme-tricolore .cockpit-block,
body.theme-tricolore .cockpit-card-wide,
body.theme-tricolore .hab-inst-grid > * {
  background: var(--fr-panel) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 58, 112, 0.12) !important;
}

/* Styles inline encore sombres / translucides → bleu FR */
html.theme-tricolore [style*="background:rgba(15,23,42"],
html.theme-tricolore [style*="background: rgba(15,23,42"],
html.theme-tricolore [style*="background:rgba(15, 23, 42"],
html.theme-tricolore [style*="background: rgba(15, 23, 42"],
html.theme-tricolore [style*="background:#0f172a"],
html.theme-tricolore [style*="background: #0f172a"],
html.theme-tricolore [style*="background:#1e293b"],
html.theme-tricolore [style*="background: #1e293b"],
html.theme-tricolore [style*="background:#0b1329"],
html.theme-tricolore [style*="background: #0b1329"],
html.theme-tricolore [style*="background:rgba(5,13,24"],
html.theme-tricolore [style*="background: rgba(5,13,24"],
html.theme-tricolore [style*="background:rgba(5, 13, 24"],
html.theme-tricolore [style*="background: rgba(5, 13, 24"],
html.theme-tricolore [style*="background:rgba(8,47,73"],
html.theme-tricolore [style*="background: rgba(8,47,73"],
html.theme-tricolore [style*="background:rgba(30,41,59"],
html.theme-tricolore [style*="background: rgba(30,41,59"],
html.theme-tricolore [style*="background:rgba(255,255,255,0.03"],
html.theme-tricolore [style*="background: rgba(255,255,255,0.03"],
html.theme-tricolore [style*="background:rgba(255,255,255,0.04"],
html.theme-tricolore [style*="background: rgba(255,255,255,0.04"],
html.theme-tricolore [style*="background:rgba(255,255,255,0.05"],
html.theme-tricolore [style*="background: rgba(255,255,255,0.05"],
html.theme-tricolore [style*="background:rgba(255,255,255,0.06"],
html.theme-tricolore [style*="background: rgba(255,255,255,0.06"],
html.theme-tricolore [style*="background:rgba(255,255,255,0.08"],
html.theme-tricolore [style*="background: rgba(255,255,255,0.08"],
html.theme-tricolore [style*="background:rgba(229,231,235,0.15"],
html.theme-tricolore [style*="background: rgba(229,231,235,0.15"],
html.theme-tricolore [style*="background:linear-gradient(135deg, rgba(15"],
html.theme-tricolore [style*="background: linear-gradient(135deg, rgba(15"],
html.theme-tricolore [style*="background:linear-gradient(145deg, rgba(15"],
html.theme-tricolore [style*="background: linear-gradient(145deg, rgba(15"],
body.theme-tricolore [style*="background:rgba(15,23,42"],
body.theme-tricolore [style*="background: rgba(15,23,42"],
body.theme-tricolore [style*="background:rgba(15, 23, 42"],
body.theme-tricolore [style*="background: rgba(15, 23, 42"],
body.theme-tricolore [style*="background:#0f172a"],
body.theme-tricolore [style*="background: #0f172a"],
body.theme-tricolore [style*="background:#1e293b"],
body.theme-tricolore [style*="background: #1e293b"],
body.theme-tricolore [style*="background:#0b1329"],
body.theme-tricolore [style*="background: #0b1329"],
body.theme-tricolore [style*="background:rgba(5,13,24"],
body.theme-tricolore [style*="background: rgba(5,13,24"],
body.theme-tricolore [style*="background:rgba(5, 13, 24"],
body.theme-tricolore [style*="background: rgba(5, 13, 24"],
body.theme-tricolore [style*="background:rgba(8,47,73"],
body.theme-tricolore [style*="background: rgba(8,47,73"],
body.theme-tricolore [style*="background:rgba(30,41,59"],
body.theme-tricolore [style*="background: rgba(30,41,59"],
body.theme-tricolore [style*="background:rgba(255,255,255,0.03"],
body.theme-tricolore [style*="background: rgba(255,255,255,0.03"],
body.theme-tricolore [style*="background:rgba(255,255,255,0.04"],
body.theme-tricolore [style*="background: rgba(255,255,255,0.04"],
body.theme-tricolore [style*="background:rgba(255,255,255,0.05"],
body.theme-tricolore [style*="background: rgba(255,255,255,0.05"],
body.theme-tricolore [style*="background:rgba(255,255,255,0.06"],
body.theme-tricolore [style*="background: rgba(255,255,255,0.06"],
body.theme-tricolore [style*="background:rgba(255,255,255,0.08"],
body.theme-tricolore [style*="background: rgba(255,255,255,0.08"],
body.theme-tricolore [style*="background:rgba(229,231,235,0.15"],
body.theme-tricolore [style*="background: rgba(229,231,235,0.15"],
body.theme-tricolore [style*="background:linear-gradient(135deg, rgba(15"],
body.theme-tricolore [style*="background: linear-gradient(135deg, rgba(15"],
body.theme-tricolore [style*="background:linear-gradient(145deg, rgba(15"],
body.theme-tricolore [style*="background: linear-gradient(145deg, rgba(15"] {
  background: var(--fr-panel) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 58, 112, 0.12) !important;
}

/* Descendants des panneaux bleus : texte blanc (sauf champs) */
html.theme-tricolore .info-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .kpi-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .ms-glass-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .help-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .system-panel *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .form-section *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .formula-box *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .rules-box *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .programme-box *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .sg-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .stag-folder-container *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .cockpit-kpi-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .habil-inst-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .alertes-box *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .audit-fold *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .auth-glass-card *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .modal-content *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .navbar *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .cockpit-sidebar *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore .cockpit-bar *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore [style*="background:rgba(15,23,42"] *:not(input):not(select):not(textarea):not(option),
html.theme-tricolore [style*="background: rgba(15,23,42"] *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .info-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .kpi-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .ms-glass-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .help-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .system-panel *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .form-section *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .formula-box *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .rules-box *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .programme-box *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .sg-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .stag-folder-container *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .cockpit-kpi-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .habil-inst-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .alertes-box *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .audit-fold *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .auth-glass-card *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .modal-content *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .navbar *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .cockpit-sidebar *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore .cockpit-bar *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore [style*="background:rgba(15,23,42"] *:not(input):not(select):not(textarea):not(option),
body.theme-tricolore [style*="background: rgba(15,23,42"] *:not(input):not(select):not(textarea):not(option) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Page blanche : texte en encre (jamais blanc / gris pâle) */
html.theme-tricolore .section > .container > .section-header,
html.theme-tricolore .section > .container > .section-header .section-title,
html.theme-tricolore .section > .container > .section-header .section-desc,
html.theme-tricolore .section > .container > .section-header h1,
html.theme-tricolore .section > .container > .section-header h2,
html.theme-tricolore .section > .container > .section-header h3,
html.theme-tricolore .section > .container > .section-header p,
html.theme-tricolore #vue-modeles h2,
html.theme-tricolore .section-title,
html.theme-tricolore .section-desc,
html.theme-tricolore .ux-journey-bar,
html.theme-tricolore .ux-journey-bar .ux-breadcrumb-home,
html.theme-tricolore .ux-journey-bar .ux-breadcrumb-current,
html.theme-tricolore .ux-journey-bar .ux-density-label,
html.theme-tricolore .ux-journey-bar .ux-breadcrumb-sep,
body.theme-tricolore .section > .container > .section-header,
body.theme-tricolore .section > .container > .section-header .section-title,
body.theme-tricolore .section > .container > .section-header .section-desc,
body.theme-tricolore .section > .container > .section-header h1,
body.theme-tricolore .section > .container > .section-header h2,
body.theme-tricolore .section > .container > .section-header h3,
body.theme-tricolore .section > .container > .section-header p,
body.theme-tricolore #vue-modeles h2,
body.theme-tricolore .section-title,
body.theme-tricolore .section-desc,
body.theme-tricolore .ux-journey-bar,
body.theme-tricolore .ux-journey-bar .ux-breadcrumb-home,
body.theme-tricolore .ux-journey-bar .ux-breadcrumb-current,
body.theme-tricolore .ux-journey-bar .ux-density-label,
body.theme-tricolore .ux-journey-bar .ux-breadcrumb-sep {
  color: var(--fr-ink) !important;
  -webkit-text-fill-color: var(--fr-ink) !important;
}
/* Titres dans un panneau bleu restent blancs */
html.theme-tricolore .info-card .section-title,
html.theme-tricolore .rules-box .section-title,
html.theme-tricolore .form-section .section-title,
html.theme-tricolore .ms-glass-card .section-title,
html.theme-tricolore .kpi-card .section-title,
html.theme-tricolore .help-card .section-title,
body.theme-tricolore .info-card .section-title,
body.theme-tricolore .rules-box .section-title,
body.theme-tricolore .form-section .section-title,
body.theme-tricolore .ms-glass-card .section-title,
body.theme-tricolore .kpi-card .section-title,
body.theme-tricolore .help-card .section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.theme-tricolore .section-tag,
body.theme-tricolore .section-tag {
  color: var(--blue-primary) !important;
  -webkit-text-fill-color: var(--blue-primary) !important;
  background: rgba(0, 85, 164, 0.08);
  border: 1px solid rgba(0, 85, 164, 0.18);
}

/* Tableaux cockpit / stagiaires : texte blanc sur fond bleu */
html.theme-tricolore .cockpit-stag-table,
html.theme-tricolore .cockpit-stag-table td,
html.theme-tricolore .cockpit-stag-table th,
html.theme-tricolore .cockpit-stag-table .stag-name,
html.theme-tricolore .cockpit-stag-table .stag-meta,
html.theme-tricolore table.data-table,
html.theme-tricolore table.data-table td,
html.theme-tricolore table.data-table th,
html.theme-tricolore .stagiaires-table td,
html.theme-tricolore .stagiaires-table th,
body.theme-tricolore .cockpit-stag-table,
body.theme-tricolore .cockpit-stag-table td,
body.theme-tricolore .cockpit-stag-table th,
body.theme-tricolore .cockpit-stag-table .stag-name,
body.theme-tricolore .cockpit-stag-table .stag-meta,
body.theme-tricolore table.data-table,
body.theme-tricolore table.data-table td,
body.theme-tricolore table.data-table th,
body.theme-tricolore .stagiaires-table td,
body.theme-tricolore .stagiaires-table th {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
html.theme-tricolore .cockpit-stag-table,
html.theme-tricolore .stagiaires-table,
html.theme-tricolore table.data-table,
body.theme-tricolore .cockpit-stag-table,
body.theme-tricolore .stagiaires-table,
body.theme-tricolore table.data-table {
  background: transparent !important;
}

/* Champs / selects toujours lisibles (fond blanc, encre) */
html.theme-tricolore input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.theme-tricolore select,
html.theme-tricolore textarea,
html.theme-tricolore .form-input,
html.theme-tricolore .form-select,
body.theme-tricolore input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
body.theme-tricolore select,
body.theme-tricolore textarea,
body.theme-tricolore .form-input,
body.theme-tricolore .form-select {
  background: #ffffff !important;
  color: #0c2340 !important;
  border: 1px solid rgba(0, 85, 164, 0.28) !important;
  -webkit-text-fill-color: #0c2340;
}
html.theme-tricolore input::placeholder,
html.theme-tricolore textarea::placeholder,
body.theme-tricolore input::placeholder,
body.theme-tricolore textarea::placeholder {
  color: #7a90a8 !important;
  -webkit-text-fill-color: #7a90a8;
}

/* Boutons verts / actions : texte blanc garanti */
html.theme-tricolore .btn-primary,
html.theme-tricolore .btn-secondary,
html.theme-tricolore .btn-outline,
html.theme-tricolore .btn-outline-sm,
html.theme-tricolore button.btn-primary,
html.theme-tricolore [class*="btn-"],
body.theme-tricolore .btn-primary,
body.theme-tricolore .btn-secondary,
body.theme-tricolore .btn-outline,
body.theme-tricolore .btn-outline-sm,
body.theme-tricolore button.btn-primary,
body.theme-tricolore [class*="btn-"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
html.theme-tricolore .btn-secondary,
body.theme-tricolore .btn-secondary {
  background: rgba(0, 85, 164, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Badges / labels colorés : garder contraste sur bleu */
html.theme-tricolore .badge-state-5,
html.theme-tricolore .state-favorable,
html.theme-tricolore .state-defavorable,
html.theme-tricolore .state-incomplet,
html.theme-tricolore .state-a-verifier,
html.theme-tricolore .state-non-evalue,
html.theme-tricolore .stag-expire,
html.theme-tricolore .stag-pending,
html.theme-tricolore .stag-ok,
html.theme-tricolore .rule-badge,
body.theme-tricolore .badge-state-5,
body.theme-tricolore .state-favorable,
body.theme-tricolore .state-defavorable,
body.theme-tricolore .state-incomplet,
body.theme-tricolore .state-a-verifier,
body.theme-tricolore .state-non-evalue,
body.theme-tricolore .stag-expire,
body.theme-tricolore .stag-pending,
body.theme-tricolore .stag-ok,
body.theme-tricolore .rule-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Bandeaux verts d’aide : passer en bleu FR aussi (lisibilité) */
html.theme-tricolore [style*="background:rgba(16,185,129"],
html.theme-tricolore [style*="background: rgba(16,185,129"],
html.theme-tricolore [style*="background:rgba(52,211,153"],
html.theme-tricolore [style*="background: rgba(52,211,153"],
body.theme-tricolore [style*="background:rgba(16,185,129"],
body.theme-tricolore [style*="background: rgba(16,185,129"],
body.theme-tricolore [style*="background:rgba(52,211,153"],
body.theme-tricolore [style*="background: rgba(52,211,153"] {
  background: var(--fr-panel) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Sections / titres restants encore pensés pour fond sombre */
html.theme-tricolore .section-dark,
body.theme-tricolore .section-dark {
  background: transparent !important;
}
html.theme-tricolore .rules-title,
html.theme-tricolore .rules-box .rules-title,
html.theme-tricolore .alertes-box-header,
html.theme-tricolore .sessions-groupes-header h3,
html.theme-tricolore .habil-inst-title,
html.theme-tricolore .habil-inst-val,
html.theme-tricolore .habil-inst-pct,
html.theme-tricolore .programme-box h3,
html.theme-tricolore .programme-box p,
html.theme-tricolore .sg-card *,
html.theme-tricolore .stag-folder-container *,
body.theme-tricolore .rules-title,
body.theme-tricolore .rules-box .rules-title,
body.theme-tricolore .alertes-box-header,
body.theme-tricolore .sessions-groupes-header h3,
body.theme-tricolore .habil-inst-title,
body.theme-tricolore .habil-inst-val,
body.theme-tricolore .habil-inst-pct,
body.theme-tricolore .programme-box h3,
body.theme-tricolore .programme-box p,
body.theme-tricolore .sg-card *,
body.theme-tricolore .stag-folder-container * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
html.theme-tricolore .sg-card input,
html.theme-tricolore .sg-card select,
html.theme-tricolore .sg-card textarea,
html.theme-tricolore .stag-folder-container input,
html.theme-tricolore .stag-folder-container select,
html.theme-tricolore .programme-box input,
html.theme-tricolore .programme-box select,
body.theme-tricolore .sg-card input,
body.theme-tricolore .sg-card select,
body.theme-tricolore .sg-card textarea,
body.theme-tricolore .stag-folder-container input,
body.theme-tricolore .stag-folder-container select,
body.theme-tricolore .programme-box input,
body.theme-tricolore .programme-box select {
  color: #0c2340 !important;
  -webkit-text-fill-color: #0c2340;
  background: #ffffff !important;
}

/* Parcours stagiaire ouvert par QR/SMS : aucune navigation formateur. */
html.mobile-candidat-preload,
html.mobile-candidat-preload body { background: #0f172a; }
html.mobile-candidat-preload body > *:not(#mobile-stagiaire) {
  visibility: hidden !important;
}
html.mobile-candidat-preload body::before {
  content: 'Ouverture de votre espace stagiaire…';
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #e2e8f0;
  background: #0f172a;
  font: 600 1rem/1.5 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Orientation stagiaire AVANT la saisie du code.
   start_url de la PWA = /?mode=mobile-stagiaire : le stagiaire ouvre donc
   l'application installee en tombant directement sur cette URL, sans code. Sans
   cette regle, il voit l'application formateur par-dessus son ecran : sessions
   avec statistiques, « Mode Candidats » avec le choix de theme, alertes
   « aucune session groupee », etats de chargement.
   On masque la navigation formateur et le bandeau d'alerte (position: fixed,
   donc par-dessus tout), mais PAS #pwa-install-banner : ce bandeau est cree en
   JavaScript et. insertion dans body, il est donc hors de ces selecteurs.
   Il reste affiche, comme voulu, pour proposer l'installation au stagiaire. */
html.orientation-stagiaire body > section:not(#mobile-stagiaire),
html.orientation-stagiaire .navbar,
html.orientation-stagiaire .mobile-menu,
html.orientation-stagiaire .footer,
html.orientation-stagiaire #alerte-bandeau,
html.orientation-stagiaire #ux-journey-bar,
html.orientation-stagiaire #ux-smart-alerts,
html.orientation-stagiaire #ux-loading-overlay,
html.orientation-stagiaire #cockpit-top-bar,
html.orientation-stagiaire #cockpit-status-bar,
html.orientation-stagiaire #proquelec-banniere-brouillons,
html.orientation-stagiaire #proquelec-banniere-lecture-seule,
/* La regle ci-dessus ne vise que les <section> de premier niveau. Les modales
   sont des <div> enfants de body : sans ce complement, la modale dossier
   stagiaire reste affichee en bas de l'ecran avec son etat vide
   (« — », croix de fermeture, « Chargement... »). */
html.orientation-stagiaire #dossier-stagiaire-modal,
html.orientation-stagiaire #evalupro-auth-overlay,
html.orientation-stagiaire #file-mode-banner {
  display: none !important;
}

/* A l'interieur de l'interface mobile, masquer tout le chrome formateur
   SAUF le formulaire d'acces stagiaire (#mobile-groupe-creation) et
   le lien de sortie. Le bandeau #pwa-install-banner reste visible (hors
   de #mobile-stagiaire, dans body). */
html.orientation-stagiaire #mobile-stagiaire {
  display: block !important;
  min-height: 100dvh;
  width: 100vw;
  padding: 0;
}
html.orientation-stagiaire #mobile-stagiaire > .container > .section-header,
html.orientation-stagiaire #mobile-stagiaire .nav-tabs,
html.orientation-stagiaire #mobile-stagiaire .tabs,
html.orientation-stagiaire #mobile-stagiaire .tab-content > .tab-pane:not(#mobile-stagiaire-sessions):not(#mobile-stagiaire-evaluer):not(#mobile-stagiaire-rapports),
html.orientation-stagiaire #mobile-stagiaire #mobile-stagiaire-sessions > *:not(#mobile-groupe-creation),
html.orientation-stagiaire #mobile-stagiaire #mobile-stagiaire-evaluer,
html.orientation-stagiaire #mobile-stagiaire #mobile-stagiaire-rapports,
html.orientation-stagiaire #mobile-stagiaire .alert,
html.orientation-stagiaire #mobile-stagiaire .theme-controls,
html.orientation-stagiaire #mobile-stagiaire .density-controls,
html.orientation-stagiaire #mobile-stagiaire .sessions-toolbar,
html.orientation-stagiaire #mobile-stagiaire #mobile-groupe-details {
  display: none !important;
}
html.orientation-stagiaire #mobile-stagiaire #mobile-groupe-creation {
  display: block !important;
}
html.orientation-stagiaire .sortie-formateur {
  display: block !important;
}
body.mobile-candidat-mode {
  min-width: 0;
  background: #0f172a;
  width: 100vw;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: 0;
}
body.mobile-candidat-mode .navbar,
body.mobile-candidat-mode .mobile-menu,
body.mobile-candidat-mode .footer,
body.mobile-candidat-mode > section:not(#mobile-stagiaire),
body.mobile-candidat-mode #mobile-groupe-creation,
body.mobile-candidat-mode #mobile-groupe-details,
body.mobile-candidat-mode #mobile-stagiaire > .container > .section-header,
body.mobile-candidat-mode #alerte-bandeau,
body.mobile-candidat-mode #file-mode-banner,
body.mobile-candidat-mode #ux-journey-bar,
body.mobile-candidat-mode #ux-smart-alerts,
body.mobile-candidat-mode #ux-loading-overlay,
body.mobile-candidat-mode #cockpit-top-bar,
body.mobile-candidat-mode #cockpit-status-bar,
body.mobile-candidat-mode #proquelec-banniere-brouillons,
body.mobile-candidat-mode #proquelec-banniere-lecture-seule,
body.mobile-candidat-mode #mobile-session-subtabs {
  display: none !important;
}
/* Le questionnaire candidat vit dans l'onglet « Aperçu » : en orientation
   candidat, cet onglet est toujours visible (la barre d'onglets est masquée). */
body.mobile-candidat-mode #panneau-mobile-apercu {
  display: block !important;
}
body.mobile-candidat-mode #mobile-stagiaire {
  display: block !important;
  min-height: 100dvh;
  width: 100vw;
  padding: 0;
}
body.mobile-candidat-mode #mobile-stagiaire > .container,
body.mobile-candidat-mode #mobile-groupe-access,
body.mobile-candidat-mode #mobile-groupe-access .mobile-card {
  width: 100%;
  max-width: none;
}
body.mobile-candidat-mode #mobile-stagiaire > .container { padding: 0; }
body.mobile-candidat-mode #mobile-groupe-access {
  max-width: 680px;
  margin: 0 auto;
}
body.mobile-candidat-mode #mobile-groupe-access .mobile-card {
  margin-top: 0 !important;
  padding: 1rem 0.75rem 1.5rem;
  border-radius: 0;
}
body.mobile-candidat-mode #mobile-groupe-access .mobile-panel-title {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
body.mobile-candidat-mode #mobile-groupe-candidat-form {
  margin-top: 1rem !important;
}
body.mobile-candidat-mode #mobile-stagiaire > .container > *:not(#mobile-groupe-access) {
  display: none !important;
}
.mobile-candidat-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  margin: -1rem -0.75rem 1rem;
  padding: 0.7rem 0.75rem;
  color: var(--white);
  background: rgba(15, 23, 42, 0.98);
  border-bottom: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.mobile-candidat-sticky-label {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-candidat-sticky-header strong {
  overflow: hidden;
  color: var(--white);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-submission-confirmation {
  margin-top: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #14532d;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 12px;
}
.mobile-confirmation-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #16a34a;
  font-size: 1.75rem;
  font-weight: 700;
}
.mobile-submission-confirmation h3 {
  margin-bottom: 0.5rem;
  color: #166534;
}
.mobile-submission-confirmation p {
  margin: 0.35rem 0;
}
.mobile-confirmation-note {
  font-size: 0.85rem;
}
body.mobile-candidat-mode .mobile-question-list,
body.mobile-candidat-mode .mobile-question-list table {
  width: 100%;
  max-width: 100%;
}
body.mobile-candidat-mode .mobile-question-list {
  overflow-x: hidden;
}
body.mobile-candidat-mode .mobile-question-list .qcm-table-wrapper.mobile-carousel-empty {
  display: none;
}
body.mobile-candidat-mode .mobile-question-list .qcm-table-wrapper:not(.mobile-carousel-empty) {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.mobile-candidat-mode .mobile-question-list .qcm-paper-header,
body.mobile-candidat-mode .mobile-question-list .qcm-paper-table thead {
  display: none;
}
body.mobile-candidat-mode .mobile-question-list .qcm-paper-table,
body.mobile-candidat-mode .mobile-question-list .qcm-paper-table tbody,
body.mobile-candidat-mode .mobile-question-list .qcm-paper-table tr {
  display: block;
  width: 100%;
}
body.mobile-candidat-mode .mobile-question-list .qcm-question-tr:not(.mobile-carousel-current) {
  display: none;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current > td {
  display: block;
  width: 100% !important;
  padding: 1rem;
  border: 0;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .td-question {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5;
  background: rgba(30, 95, 189, 0.14);
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .td-choices {
  padding-top: 0.75rem;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .qcm-choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .qcm-row-choice {
  min-height: 48px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .td-note {
  padding-top: 0;
  text-align: left;
}
body.mobile-candidat-mode .mobile-question-list .mobile-carousel-current .note-cell-box {
  display: inline-flex;
}
.mobile-carousel-controls {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  background: rgba(15, 23, 42, 0.96);
  border-top: 1px solid var(--border);
}
.mobile-carousel-progress { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }
.mobile-carousel-buttons { display: flex; gap: 0.5rem; }
.mobile-carousel-hint { flex-basis: 100%; color: #fbbf24; font-size: 0.8rem; }
body.mobile-candidat-mode .mobile-carousel-controls button:disabled { opacity: 0.45; cursor: not-allowed; }
.mobile-carousel-page { min-height: 70dvh; display: flex; flex-direction: column; }
.mobile-chapter-page,
.mobile-question-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0.5rem 2rem;
}
.mobile-chapter-page { text-align: center; align-items: center; }
.mobile-chapter-page h3,
.mobile-question-page h3 { color: var(--white); font-size: 1.2rem; line-height: 1.45; }
.mobile-chapter-page p { color: var(--text-secondary); max-width: 34rem; }
.mobile-chapter-kicker { color: var(--blue-light); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mobile-page-choices { display: flex; flex-direction: column; gap: 0.65rem; }
.mobile-page-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.45;
}
.mobile-page-choice.selected { border-color: #34d399; background: rgba(16, 185, 129, 0.16); color: var(--white); }
.mobile-choice-check { flex: 0 0 1.35rem; color: var(--text-secondary); font-size: 1.2rem; line-height: 1.2; }
.mobile-page-choice.selected .mobile-choice-check { color: #34d399; }
body.mobile-candidat-mode .mobile-carousel-page .mobile-carousel-controls { margin-top: auto; }
body.mobile-candidat-mode .mobile-question-list button,
body.mobile-candidat-mode .mobile-question-list input,
body.mobile-candidat-mode .mobile-question-list select {
  min-height: 42px;
}
@media (max-width: 600px) {
  body.mobile-candidat-mode .form-grid-2 {
    grid-template-columns: 1fr;
  }
  body.mobile-candidat-mode .mobile-actions .btn-primary {
    width: 100%;
  }
}

.mobile-analysis-modal .mobile-analysis-content {
  color: #1e293b;
  background: #ffffff;
}
.mobile-analysis-modal .mobile-analysis-content h3,
.mobile-analysis-modal .mobile-analysis-content strong {
  color: #1e293b;
}
.mobile-analysis-modal .mobile-analysis-content table {
  color: #1e293b;
  background: #ffffff;
}
.mobile-analysis-modal .mobile-analysis-content td,
.mobile-analysis-modal .mobile-analysis-content th {
  color: #1e293b;
}
@media (max-width: 600px) {
  .mobile-analysis-modal {
    padding: 0.5rem;
  }
  .mobile-analysis-modal .mobile-analysis-content {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
  }
  .mobile-analysis-modal .mobile-analysis-content table {
    font-size: 0.78rem;
  }
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: calc(var(--chrome-offset) + 12px); }
body {
  font-family: var(--font-main);
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(26, 116, 224, 0.2), transparent 55%),
    radial-gradient(900px 480px at 92% 4%, rgba(201, 162, 39, 0.1), transparent 52%),
    radial-gradient(700px 400px at 50% 100%, rgba(15, 159, 110, 0.05), transparent 60%),
    linear-gradient(180deg, #071422 0%, var(--navy) 42%, #040a12 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  /* Contenu sous la navbar (+ barre parcours si visible) */
  padding-top: var(--chrome-offset);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, select, textarea { font-family: inherit; outline: none; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }

/* ---- Typography ---- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 650; line-height: 1.18; letter-spacing: -0.03em; }

/* ============================================================
   NAVBAR — barre horizontale premium, 1 ligne, sans débordement
============================================================ */
/* ====================================================
   NAVBAR — Design Premium v2
==================================================== */
@keyframes navbarLineShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes navCategoryPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  min-height: var(--nav-offset);
  height: auto;
  background:
    linear-gradient(180deg,
      rgba(12, 26, 48, 0.92) 0%,
      rgba(5, 13, 24, 0.88) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
  backdrop-filter: blur(32px) saturate(1.7) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 6px 32px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(26, 116, 224, 0.08);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  padding-top: env(safe-area-inset-top);
  overflow: visible;
}
/* Ligne décorative animée en bas de la navbar */
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 116, 224, 0.4) 15%,
    rgba(232, 197, 106, 0.9) 40%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(232, 197, 106, 0.9) 60%,
    rgba(26, 116, 224, 0.4) 85%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: navbarLineShimmer 5s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}
/* Ambient glow strip top */
.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(232, 197, 106, 0.35) 50%, transparent 90%);
  pointer-events: none;
}
.nav-cta {
    background: linear-gradient(45deg, var(--gold-light), var(--blue-primary));
    color: var(--navy);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s var(--ease-out), background 0.3s var(--ease-out);
}

.nav-cta:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(45deg, var(--blue-primary), var(--gold-light));
}

.navbar.scrolled {
    background: rgba(5, 13, 24, 0.97);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 20px 48px rgba(0, 0, 0, 0.52), 0 2px 12px rgba(26, 116, 224, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.13);
    transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.nav-container {
  min-height: 100%;
  height: auto;
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.35rem 1.1rem;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 13rem;
  text-decoration: none;
  transition: transform 0.25s var(--ease-spring), opacity 0.2s ease;
  position: relative;
}
.nav-brand:hover {
  transform: translateY(-1px) scale(1.01);
}
.nav-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05));
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 0 0 1px rgba(26, 116, 224, 0.2),
    0 0 20px rgba(26, 116, 224, 0.32),
    0 4px 14px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out), transform 0.28s var(--ease-spring);
}
.nav-brand:hover .nav-logo-wrap {
  border-color: rgba(232, 197, 106, 0.6);
  box-shadow:
    0 0 0 1px rgba(232, 197, 106, 0.3),
    0 0 24px rgba(201, 162, 39, 0.48),
    0 6px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transform: rotate(-2deg) scale(1.05);
}
.nav-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.brand-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.93rem;
  color: var(--white);
  letter-spacing: 0.09em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.brand-sub {
  font-size: 0.52rem;
  color: var(--gold-light);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
  text-shadow: 0 0 14px rgba(201, 162, 39, 0.4);
  margin-top: 0.08rem;
}

/* ----  Groupes de liens de navigation ---- */
.nav-links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.18rem;
  margin-left: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  height: auto;
  padding: 0.25rem 0;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links > * { flex: 0 0 auto; }
.nav-category {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.18rem 0.4rem 0.22rem;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.018);
  border-radius: 10px;
  overflow: visible;
  transition: background 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
/* Séparateur vertical lumineux entre catégories */
.nav-category + .nav-category::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 197, 106, 0.22), transparent);
  pointer-events: none;
}
.nav-category:hover {
  background: rgba(255, 255, 255, 0.042);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-category:first-child {
  border-left: 0;
}
.nav-category-label {
  display: block;
  padding: 0 0.35rem;
  color: var(--gold-light);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}
.nav-category:hover .nav-category-label {
  opacity: 1;
}
.nav-category-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  overflow: visible;
}
.nav-link {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0.42rem 0.72rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.018em;
  color: rgba(200, 218, 238, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  line-height: 1.25;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.2s var(--ease-out);
  cursor: pointer;
}
.nav-link:hover {
  color: var(--white);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(26, 116, 224, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width 0.25s var(--ease-out);
}
.nav-link:hover::after {
  width: 80%;
}
.nav-link.active {
  color: var(--gold-light);
  background: linear-gradient(135deg,
    rgba(201, 162, 39, 0.25) 0%,
    rgba(26, 116, 224, 0.15) 100%);
  border-color: rgba(232, 197, 106, 0.52);
  box-shadow:
    0 0 0 1px rgba(232, 197, 106, 0.15),
    0 0 16px rgba(201, 162, 39, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-weight: 720;
}
/* Petit indicateur actif en bas du lien */
.nav-link.active::before {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), rgba(232, 197, 106, 1), rgba(201, 162, 39, 0.6));
  box-shadow: 0 0 8px rgba(232, 197, 106, 0.8);
}
.nav-link-help {
  color: rgba(90, 163, 245, 0.88);
}
.nav-link-help:hover {
  color: var(--white);
  background: linear-gradient(135deg, rgba(26, 116, 224, 0.22) 0%, rgba(96, 165, 250, 0.12) 100%);
  border-color: rgba(96, 165, 250, 0.38);
  box-shadow: 0 0 16px rgba(26, 116, 224, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.2rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: #ce1126;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(206, 17, 38, 0.6);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  min-width: 0;
  overflow: visible;
}
.nav-cta {
  padding: 0.48rem 1.1rem;
  background: linear-gradient(135deg,
    #1e80f0 0%,
    #1463cc 45%,
    #c9a227 160%);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--white);
  transition: all 0.25s var(--ease-spring);
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 14px rgba(26, 116, 224, 0.45),
    0 1px 3px rgba(0,0,0,0.25);
  border: 1px solid rgba(255, 255, 255, 0.26);
  letter-spacing: 0.03em;
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 100%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s ease, right 0.5s ease;
}
.nav-cta:hover::before {
  left: 100%; right: -100%;
}
.nav-cta:hover {
  transform: translateY(-1.5px) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 10px 28px rgba(26, 116, 224, 0.58),
    0 2px 6px rgba(0,0,0,0.3);
  border-color: rgba(232, 197, 106, 0.55);
}
/* --- Animation globale au clic des boutons --- */
button:not(:disabled):active,
.btn-primary:not(:disabled):active,
.btn-secondary:not(:disabled):active,
.btn-outline:not(:disabled):active,
.btn-outline-sm:not(:disabled):active,
.btn-green:not(:disabled):active,
.btn-green-sm:not(:disabled):active,
.btn-red:not(:disabled):active,
.btn-red-sm:not(:disabled):active,
.btn-del-sm:not(:disabled):active,
.btn-view-sm:not(:disabled):active,
.btn-blue:not(:disabled):active,
.btn-success:not(:disabled):active,
.nav-link:not(:disabled):active,
.nav-cta:not(:disabled):active {
  transform: scale(0.97);
  filter: brightness(0.98);
}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-sm,
.btn-green,
.btn-green-sm,
.btn-red,
.btn-red-sm,
.btn-del-sm,
.btn-view-sm,
.btn-blue,
.btn-success,
.nav-link,
.nav-cta {
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Réduction du mouvement pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  .btn-primary:not(:disabled):active,
  .btn-secondary:not(:disabled):active,
  .btn-outline:not(:disabled):active,
  .btn-outline-sm:not(:disabled):active,
  .btn-green:not(:disabled):active,
  .btn-green-sm:not(:disabled):active,
  .btn-red:not(:disabled):active,
  .btn-red-sm:not(:disabled):active,
  .btn-del-sm:not(:disabled):active,
  .btn-view-sm:not(:disabled):active,
  .btn-blue:not(:disabled):active,
  .btn-success:not(:disabled):active,
  .nav-link:not(:disabled):active,
  .nav-cta:not(:disabled):active {
    transform: none;
    filter: none;
  }
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-outline-sm,
  .btn-green,
  .btn-green-sm,
  .btn-red,
  .btn-red-sm,
  .btn-del-sm,
  .btn-view-sm,
  .btn-blue,
  .btn-success,
  .nav-link,
  .nav-cta {
    transition: none;
  }
}
.nav-lock-btn {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: #fca5a5;
  border-radius: 999px;
  padding: 0.45rem 0.82rem;
  font-size: 0.8rem;
  font-weight: 720;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nav-lock-btn:hover { background: rgba(239, 68, 68, 0.28); color: #fff; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  padding: 0.42rem 0.48rem;
  position: relative;
  z-index: 1001;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mobile-menu-overlay.visible { display: block; }
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-offset);
  left: 0; right: 0;
  z-index: 999;
  background: var(--navy-mid);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  padding: 0.75rem;
  max-height: calc(100dvh - var(--nav-offset));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-menu.open { display: flex; opacity: 1; transform: translateY(0); }
.mobile-link {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 560;
  color: var(--text-secondary);
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-link:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.mobile-category { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-category:last-child { border-bottom: 0; }
.mobile-category-label { padding: 0.25rem 1rem 0.15rem; color: var(--gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.help-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: var(--transition);
}
.help-card:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, 0.14); }
.help-card-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.85rem;
  border-radius: 7px;
  background: rgba(26, 111, 212, 0.18);
  color: var(--blue-light);
  font-size: 0.72rem;
  font-weight: 800;
}
.help-card h3 { margin-bottom: 0.45rem; color: var(--white); font-size: 1rem; }
.help-card p { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.6; }
.rapport-table-hint { margin: -0.35rem 0 0.7rem; color: var(--text-secondary); font-size: 0.82rem; }
.rapport-types-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.rapport-types-table { width: 100%; min-width: 620px; border-collapse: collapse; color: var(--text-primary); font-size: 0.84rem; }
.rapport-types-table th { padding: 0.65rem 0.75rem; background: rgba(30,95,189,0.18); color: var(--white); text-align: left; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.rapport-types-table td { padding: 0.55rem 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); vertical-align: middle; }
.rapport-types-table td:first-child { width: 24%; color: var(--blue-light); }
.rapport-types-table tr:hover { background: rgba(255,255,255,0.04); }
.rapport-type-check { width: 7rem; text-align: center !important; }
.rapport-type-check label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rapport-type-check input { position: absolute; opacity: 0; pointer-events: none; }
.rapport-checkmark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--border); border-radius: 5px; color: transparent; background: rgba(255,255,255,0.04); font-size: 0; }
.rapport-type-check input:checked + .rapport-checkmark { border-color: #34d399; color: #34d399; background: rgba(16,185,129,0.16); font-size: 1.15rem; }
.rapport-entreprise-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.7rem; padding: 0.75rem; border-left: 3px solid var(--gold); background: rgba(245,166,35,0.1); color: var(--text-secondary); }
.rapport-entreprise-banner strong { color: var(--gold); }
.rapport-entreprise-table { min-width: 0; }
.rapport-activity-ok { color: #34d399; font-weight: 700; }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative; min-height: calc(100vh - var(--chrome-offset));
  display: flex; align-items: center; justify-content: center;
  padding: 2.75rem 2rem 4.5rem;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(26,116,224,0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 60%, rgba(201,162,39,0.08), transparent 65%);
  pointer-events: none;
}
.hero-circuit {
  position: absolute; border: 1px solid rgba(26, 116, 224, 0.14);
  border-radius: 50%;
  animation: pulse-ring 8s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(26, 116, 224, 0.06);
}
.circuit-1 { width: 600px; height: 600px; top: -100px; right: -150px; }
.circuit-2 { width: 400px; height: 400px; bottom: -100px; left: -100px; animation-delay: 2s; }
.circuit-3 { width: 800px; height: 800px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 4s; }
@keyframes pulse-ring {
  0%,100% { opacity: 0.14; transform: scale(1); }
  50% { opacity: 0.32; transform: scale(1.04); }
}
.circuit-3 { animation-name: pulse-ring3; }
@keyframes pulse-ring3 {
  0%,100% { opacity: 0.07; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.16; transform: translate(-50%,-50%) scale(1.025); }
}
@media (max-width: 768px) {
  .hero-circuit { animation: none; }
}
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
  position: absolute; width: 2px; height: 2px;
  background: var(--gold-light); border-radius: 50%;
  animation: float-particle linear infinite;
  opacity: 0;
  box-shadow: 0 0 6px var(--gold-glow);
}
@keyframes float-particle {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.35; }
  100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 900px; text-align: center;
  animation: hero-rise 0.9s var(--ease-out) both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-brand-mark {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--white);
  margin-bottom: 1.1rem;
  text-shadow: 0 0 40px rgba(26,116,224,0.25);
}
.hero-brand-mark span {
  background: linear-gradient(120deg, var(--gold-light), #f0d78a 40%, var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 999px; padding: 0.42rem 1rem;
  font-size: 0.72rem; font-weight: 700; color: var(--gold-light);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.5rem;
  box-shadow: 0 0 24px rgba(201,162,39,0.08);
}
.badge-dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; animation: blink 2.4s ease-in-out infinite; box-shadow: 0 0 8px var(--gold); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero-title {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: 700; color: var(--white);
  margin-bottom: 1rem; line-height: 1.15; letter-spacing: -0.03em;
}
.hero-title-accent {
  background: linear-gradient(120deg, var(--gold-light) 0%, #f0c86a 45%, var(--blue-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 1.05rem; color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 2.5rem;
  line-height: 1.65; font-weight: 450;
}
.hero-stats {
  display: flex; justify-content: center; gap: 2rem;
  margin-bottom: 2.5rem;
  padding: 1.35rem 1.75rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.hero-stat { text-align: center; min-width: 7rem; position: relative; }
.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
}
.stat-number {
  display: block; font-size: 2.25rem; font-weight: 750;
  font-family: var(--font-display);
  color: var(--white);
  letter-spacing: -0.03em;
}
.stat-label { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.hero-actions { display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap; }
.hero-scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 1; opacity: 0.7;
}
.scroll-dot {
  width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%;
  animation: bounce-dot 2.2s ease-in-out infinite;
  box-shadow: 0 0 12px var(--gold-glow);
}
@keyframes bounce-dot { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.4; } }

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.55rem;
  background: linear-gradient(135deg, var(--blue-primary) 0%, #155fba 100%);
  color: var(--white); border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 700;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 10px 28px var(--blue-glow);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 32px var(--blue-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.55rem;
  background: var(--surface-elevated); border: 1px solid var(--border-strong);
  color: var(--white); border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 650;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: var(--surface-hover); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.22); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.55rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-primary); border-radius: var(--radius);
  font-size: 0.9rem; font-weight: 650;
  transition: var(--transition);
}
.btn-outline:hover { background: var(--surface); border-color: rgba(201, 162, 39, 0.45); color: var(--gold-light); transform: translateY(-2px); }

.btn-outline-sm {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text-secondary); border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 500;
  transition: var(--transition);
}
.btn-outline-sm:hover { border-color: var(--blue-primary); color: var(--blue-light); }

.btn-danger-sm {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  color: var(--red-light); border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 500;
  transition: var(--transition);
}
.btn-danger-sm:hover { background: rgba(239,68,68,0.2); }

.mobile-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.mobile-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.mobile-panel-title {
  font-size: 1.1rem; color: var(--white); margin-bottom: 1rem;
}
.mobile-code-row {
  display: flex; align-items: center; gap: 0.75rem;
}
.mobile-code-row .form-input {
  flex: 1;
}
.mobile-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem;
}
.mobile-summary {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(30,95,189,0.08);
  border: 1px solid rgba(30,95,189,0.3);
  color: var(--text-secondary);
  line-height: 1.6;
}
.mobile-question-list {
  display: flex; flex-direction: column; gap: 0.8rem;
}
.mobile-question-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.mobile-question-label {
  font-size: 0.88rem; color: var(--white); margin-bottom: 0.75rem;
}
.mobile-question-options {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.mobile-q-option {
  padding: 0.55rem 0.9rem; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-secondary);
}
.mobile-q-option.selected {
  background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4); color: var(--green-light);
}
.mobile-submission-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.mobile-submission-head, .mobile-submission-footer {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.mobile-submission-meta {
  font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.2rem;
}
.mobile-submission-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 60px; padding: 0.3rem 0.55rem; border-radius: 999px;
  background: rgba(30,95,189,0.15); color: var(--blue-light); font-weight: 700;
}
.mobile-empty-state {
  padding: 1rem; border-radius: var(--radius); border: 1px dashed var(--border); color: var(--text-secondary);
}

@media (max-width: 860px) {
  .mobile-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE SESSION — PREMIUM UI/UX REDESIGN
============================================================ */
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .ms-grid { grid-template-columns: 1fr; } }

.ms-glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg);
  padding: 1.75rem; box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(10px); transition: var(--transition);
  position: relative; overflow: hidden;
}
.ms-glass-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-primary), var(--blue-light), var(--purple-light));
}
.ms-glass-card.ms-green::before { background: linear-gradient(90deg, #059669, #10b981, #34d399); }
.ms-glass-card.ms-gold::before { background: linear-gradient(90deg, var(--gold), var(--orange)); }
.ms-glass-card:hover { transform: translateY(-2px); box-shadow: 0 12px 48px rgba(0,0,0,0.4); }

.ms-card-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.5rem; }
.ms-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: rgba(30,95,189,0.2); border: 1px solid rgba(30,95,189,0.3);
}
.ms-glass-card.ms-green .ms-card-icon { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.25); }
.ms-glass-card.ms-gold .ms-card-icon { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.25); }
.ms-card-title { font-size: 1rem; font-weight: 700; color: var(--white); }
.ms-card-subtitle { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.15rem; }

.ms-code-neon {
  background: linear-gradient(135deg, rgba(10,15,30,0.9), rgba(30,58,138,0.4));
  border: 2px solid rgba(30,95,189,0.5); border-radius: var(--radius-lg);
  padding: 1.5rem; text-align: center; margin-bottom: 1.25rem;
  box-shadow: 0 0 30px rgba(30,95,189,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ms-code-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue-light); margin-bottom: 0.5rem;
}
.ms-code-digits {
  font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; font-family: 'Courier New', monospace;
  letter-spacing: 0.25em; color: var(--white);
  text-shadow: 0 0 30px rgba(45,125,210,0.6), 0 0 60px rgba(30,95,189,0.3);
  line-height: 1; margin: 0.25rem 0;
}
.ms-code-group-name { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; }
.ms-code-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
  border-radius: 99px; padding: 0.2rem 0.75rem; margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 700; color: var(--green-light);
}
.ms-code-badge.active::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  background: var(--green-light); border-radius: 50%; animation: blink 1.5s ease-in-out infinite;
}
.ms-qr-wrap {
  background: #fff; border-radius: var(--radius); padding: 0.75rem;
  display: inline-block; margin: 0.75rem auto 0; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.ms-share-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.ms-share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; transition: var(--transition);
}
.ms-share-btn:hover { transform: translateY(-2px); }
.ms-share-whatsapp { background: #25d366; color: #fff; }
.ms-share-whatsapp:hover { background: #1da851; box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
.ms-share-sms { background: rgba(59,130,246,0.85); color: #fff; }
.ms-share-sms:hover { background: rgba(59,130,246,1); box-shadow: 0 4px 16px rgba(59,130,246,0.4); }
.ms-share-copy { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: var(--white); }
.ms-share-copy:hover { background: rgba(255,255,255,0.18); }
.ms-share-print { background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.25); color: var(--gold-light); }
.ms-share-print:hover { background: rgba(245,166,35,0.28); box-shadow: 0 4px 16px rgba(245,166,35,0.2); }

.ms-network-notice {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: rgba(245,166,35,0.07); border: 1px solid rgba(245,166,35,0.2);
  border-radius: var(--radius); padding: 0.875rem 1rem; margin-top: 1rem;
  font-size: 0.8rem; color: var(--gold); line-height: 1.5;
}
.ms-network-notice-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.ms-network-notice strong { color: var(--gold-light); }

.ms-sub-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  transition: var(--transition);
}
.ms-sub-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.ms-sub-head { display: flex; align-items: center; gap: 0.75rem; }
.ms-sub-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: var(--white);
}
.ms-sub-info { flex: 1; min-width: 0; }
.ms-sub-name { font-size: 0.9rem; font-weight: 700; color: var(--white); }
.ms-sub-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.1rem; }
.ms-sub-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }

.ms-score-wrap { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; }
.ms-score-pct { font-size: 1.05rem; font-weight: 800; font-family: var(--font-display); min-width: 44px; }
.ms-score-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ms-score-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue-primary), var(--green-light)); transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
.ms-score-fill.bad { background: linear-gradient(90deg, #ef4444, #f87171); }
.ms-score-pts { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }

.ms-avis-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.22rem 0.65rem; border-radius: 99px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
}
.ms-avis-fav { background: rgba(16,185,129,0.18); border: 1px solid rgba(16,185,129,0.35); color: #34d399; }
.ms-avis-def { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }
.ms-avis-pend { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3); color: var(--gold-light); }
.ms-avis-enc { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.35); color: #60a5fa; }

.ms-btn-view {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.ms-btn-view:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.ms-btn-publish {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;
  background: rgba(30,95,189,0.2); border: 1px solid rgba(30,95,189,0.35);
  color: var(--blue-light); cursor: pointer; transition: var(--transition);
}
.ms-btn-publish:hover { background: rgba(30,95,189,0.35); box-shadow: 0 2px 12px rgba(30,95,189,0.25); }
.ms-btn-published {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;
  background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
  color: #34d399; cursor: default;
}
.ms-btn-wa {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;
  background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25);
  color: #25d366; cursor: pointer; transition: var(--transition);
}
.ms-btn-wa:hover { background: rgba(37,211,102,0.25); box-shadow: 0 2px 12px rgba(37,211,102,0.2); }

.ms-results-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.ms-results-title { font-size: 1rem; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 0.5rem; }
.ms-results-count {
  background: rgba(30,95,189,0.2); border: 1px solid rgba(30,95,189,0.3);
  border-radius: 99px; padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 800; color: var(--blue-light);
}
.ms-results-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ms-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ms-btn-action:hover {
  transform: translateY(-1.5px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ms-btn-action:active {
  transform: translateY(0);
}
.ms-subs-list { display: flex; flex-direction: column; gap: 0.4rem; }

/* Ultra-Compact Submission Row */
.ms-compact-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.5rem 0.85rem !important; flex-wrap: wrap;
}

/* ── Numéro d'ordre ── */
.ms-ordre-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 6px;
  font-weight: 800; font-size: 0.78rem; color: #a5b4fc;
  flex-shrink: 0; letter-spacing: 0;
}

/* ── Barre de statistiques du groupe ── */
.ms-stats-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0; margin-bottom: 0.4rem;
}
.ms-stat-chip {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: 20px;
  border: 1px solid transparent; font-size: 0.78rem;
  backdrop-filter: blur(6px);
}
.ms-stat-chip .ms-stat-val { font-weight: 800; font-size: 0.9rem; }
.ms-stat-chip .ms-stat-lbl { font-size: 0.7rem; opacity: 0.85; font-weight: 500; }
.ms-stat-fav  { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); color: #34d399; }
.ms-stat-def  { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); color: #f87171; }
.ms-stat-pend { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); color: #fbbf24; }
.ms-stat-enc { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.3); color: #60a5fa; }
.ms-stat-avg  { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.3); color: #60a5fa; }

/* ── Barre de filtres rapides ── */
.ms-filter-bar {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  padding: 0.35rem 0; margin-bottom: 0.5rem;
}
.ms-filter-btn {
  padding: 0.22rem 0.65rem; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary); font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s ease;
}
.ms-filter-btn:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.ms-filter-btn.ms-filter-active {
  background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.5);
  color: #a5b4fc;
}
.ms-filter-fav.ms-filter-active  { background: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.4); color: #34d399; }
.ms-filter-def.ms-filter-active  { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.4); color: #f87171; }
.ms-filter-pend.ms-filter-active { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); color: #fbbf24; }

/* ── Badge publié ── */
.ms-btn-published {
  padding: 0.25rem 0.5rem; font-size: 0.72rem; border-radius: 6px;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35);
  color: #34d399; font-weight: 700; cursor: default;
}
.ms-sub-user { display: flex; align-items: center; gap: 0.5rem; min-width: 150px; }
.ms-sub-avatar-sm {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800; color: var(--white);
}
.ms-sub-user-details { display: flex; flex-direction: column; min-width: 0; }
.ms-sub-name-sm { font-size: 0.85rem; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-sub-time-sm { font-size: 0.7rem; color: var(--text-secondary); }

.ms-sub-metrics { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ms-sub-metric-pill {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.5rem; border-radius: 6px;
}
.ms-metric-lbl { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; }
.ms-metric-val { font-size: 0.82rem; font-weight: 800; }
.ms-mini-bar { width: 36px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ms-mini-fill { height: 100%; border-radius: 99px; }

.ms-sub-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.ms-sub-btns { display: flex; align-items: center; gap: 0.3rem; }

@media (max-width: 600px) {
  .ms-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0.35rem 0.1rem 0.65rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .ms-filter-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
  }
  .ms-results-actions .ms-btn-action,
  .ms-sub-btns > button {
    min-height: 44px;
  }
}

.ms-access-hero { text-align: center; padding: 1.5rem 1rem 0.75rem; }
.ms-access-icon { font-size: 3rem; margin-bottom: 0.75rem; animation: gentle-bounce 3s ease-in-out infinite; }
@keyframes gentle-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ms-access-title { font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: 0.375rem; }
.ms-access-subtitle { font-size: 0.875rem; color: var(--text-secondary); }

.ms-photo-placeholder {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 2px dashed rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--text-secondary);
  cursor: pointer; transition: var(--transition); margin: 0 auto;
}
.ms-photo-placeholder:hover { border-color: var(--blue-primary); color: var(--blue-light); background: rgba(30,95,189,0.08); }

.ms-sms-contacts {
  background: rgba(30,58,138,0.2); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.ms-sms-title { font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.ms-sms-desc { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.ms-sms-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ms-sms-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.85rem; border-radius: 99px;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25);
  color: #93c5fd; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.ms-sms-btn:hover { background: rgba(59,130,246,0.25); color: #fff; transform: translateY(-1px); }

.ms-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.ms-mode-card { position: relative; cursor: pointer; }
.ms-mode-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ms-mode-label {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.875rem;
  border-radius: var(--radius); border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.03); transition: var(--transition); cursor: pointer;
}
.ms-mode-label:hover { border-color: rgba(30,95,189,0.4); background: rgba(30,95,189,0.06); }
.ms-mode-card input:checked + .ms-mode-label {
  border-color: var(--blue-light); background: rgba(30,95,189,0.12);
  box-shadow: 0 0 0 2px rgba(30,95,189,0.2);
}
.ms-mode-emoji { font-size: 1.2rem; }
.ms-mode-name { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.ms-mode-desc { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.3; }

.ms-switch-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.875rem 1rem;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 0.75rem; cursor: pointer; transition: var(--transition);
}
.ms-switch-wrap:hover { background: rgba(255,255,255,0.06); }
.ms-switch-info { flex: 1; }
.ms-switch-name { font-size: 0.85rem; font-weight: 600; color: var(--white); }
.ms-switch-desc { font-size: 0.73rem; color: var(--text-secondary); margin-top: 0.1rem; }
.ms-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.ms-switch input { opacity: 0; width: 0; height: 0; }
.ms-slider {
  position: absolute; inset: 0; background: rgba(255,255,255,0.12);
  border-radius: 99px; transition: var(--transition); border: 1px solid rgba(255,255,255,0.15);
}
.ms-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: var(--white); border-radius: 50%; transition: var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ms-switch input:checked + .ms-slider { background: var(--blue-primary); border-color: var(--blue-light); }
.ms-switch input:checked + .ms-slider::before { transform: translateX(18px); }

.ms-formateur-strip {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.2);
  border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.ms-formateur-avatar {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ms-formateur-name { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.ms-formateur-role { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }

.ms-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px; padding: 0.2rem 0.65rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
}
.ms-chip.active { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.25); color: var(--green-light); }

.ms-divider {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; margin: 1.25rem 0;
}
.ms-divider::before, .ms-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 860px) { .ms-mode-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SECTIONS
============================================================ */
.section {
  padding: 2.75rem 0 4.5rem;
}
.section-dark { background: rgba(8, 16, 28, 0.55); }
.section-light { background: rgba(14, 26, 42, 0.42); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.75rem; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-tag {
  display: inline-block;
  background: rgba(26, 116, 224, 0.12); border: 1px solid rgba(26, 116, 224, 0.32);
  border-radius: 999px; padding: 0.32rem 0.9rem;
  font-size: 0.7rem; font-weight: 700; color: var(--blue-light);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.95rem;
}
.section-title {
  font-size: clamp(1.65rem, 3.5vw, 2.25rem);
  font-weight: 750; color: var(--white); margin-bottom: 0.75rem;
  letter-spacing: -0.03em;
}
.section-desc { font-size: 0.98rem; color: var(--text-secondary); max-width: 640px; margin: 0 auto; line-height: 1.65; }

/* ============================================================
   INFO CARDS
============================================================ */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.info-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.45rem;
  transition: var(--transition);
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.info-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
}
.card-blue::before { background: linear-gradient(90deg, var(--blue-primary), var(--blue-light)); }
.card-gold::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.card-purple::before { background: linear-gradient(90deg, var(--purple), var(--purple-light)); }
.info-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16); box-shadow: var(--shadow); background: var(--surface-hover); }
.card-icon { font-size: 1.5rem; margin-bottom: 0.65rem; }
.card-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.25rem; }
.card-blue .card-label { color: var(--blue-light); }
.card-gold .card-label { color: var(--gold); }
.card-purple .card-label { color: var(--purple-light); }
.card-title { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; letter-spacing: -0.02em; }
.card-detail { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; }
.card-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

/* ---- Formula Box ---- */
.formula-box {
  background: linear-gradient(135deg, rgba(30,95,189,0.12), rgba(124,58,237,0.08));
  border: 1px solid rgba(30,95,189,0.3);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; text-align: center;
  margin-bottom: 2rem;
}
.formula-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.75rem; }
.formula-text { font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }
.formula-highlight {
  background: linear-gradient(135deg, var(--blue-light), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}
.formula-note { font-size: 0.85rem; color: var(--text-secondary); }

/* ---- Dual System ---- */
.dual-system { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .dual-system { grid-template-columns: 1fr; } }
.system-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem; overflow: hidden;
}
.system-panel-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1rem; font-weight: 700; color: var(--white);
  margin-bottom: 1rem;
}
.panel-icon { font-size: 1.2rem; }
.system-note { margin-top: 0.875rem; padding: 0.75rem; background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.2); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--gold); }

/* ---- Appreciation Table ---- */
.appreciation-table { display: flex; flex-direction: column; gap: 2px; }
.appr-row { display: grid; grid-template-columns: 100px 1fr 130px; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.82rem; }
.appr-header { background: rgba(255,255,255,0.05); font-weight: 700; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.appr-excellent { background: rgba(16,185,129,0.12); color: var(--green-light); }
.appr-tres-bien { background: rgba(16,185,129,0.08); color: #6ee7b7; }
.appr-bien { background: rgba(30,95,189,0.12); color: var(--blue-light); }
.appr-assez-bien { background: rgba(30,95,189,0.08); color: #93c5fd; }
.appr-passable { background: rgba(245,166,35,0.1); color: var(--gold-light); }
.appr-insuffisant { background: rgba(249,115,22,0.1); color: var(--orange); }
.appr-faible { background: rgba(239,68,68,0.1); color: var(--red-light); }

/* ---- Rules Box ---- */
.rules-box {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
}
.rules-title { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 1.25rem; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.rule-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem; border-radius: var(--radius);
  font-size: 0.85rem; line-height: 1.5;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.rule-badge {
  flex-shrink: 0; padding: 0.2rem 0.6rem;
  border-radius: 99px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.05em;
}
.rule-b1 .rule-badge { background: rgba(30,95,189,0.2); color: var(--blue-light); border: 1px solid rgba(30,95,189,0.3); }
.rule-b2 .rule-badge { background: rgba(245,166,35,0.15); color: var(--gold); border: 1px solid rgba(245,166,35,0.3); }
.rule-br .rule-badge { background: rgba(124,58,237,0.15); color: var(--purple-light); border: 1px solid rgba(124,58,237,0.3); }
.rule-bc .rule-badge { background: rgba(16,185,129,0.12); color: var(--green-light); border: 1px solid rgba(16,185,129,0.2); }
.rule-global { font-size: 0.85rem; color: var(--text-secondary); padding: 0.75rem; background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); margin-top: 0.5rem; }

/* ============================================================
   FORM
============================================================ */
.eval-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  overflow: hidden;
}
/* ---- Module Selector ---- */
.module-selector-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.module-selector-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.module-selector-title { font-size: 1rem; font-weight: 700; color: var(--white); }
.module-selector-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.2rem; }
.module-selector-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-sm-sel {
  padding: 0.3rem 0.75rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
  transition: var(--transition); cursor: pointer;
}
.btn-sm-sel:hover { background: rgba(30,95,189,0.2); color: var(--white); border-color: var(--blue-primary); }
.btn-sm-reset:hover { background: rgba(239,68,68,0.2); color: var(--red-light); border-color: rgba(239,68,68,0.3); }

.module-checkboxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.625rem;
}
.mod-checkbox-label {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.875rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--border);
  cursor: pointer; transition: var(--transition); -webkit-user-select: none; user-select: none;
  font-size: 0.82rem; color: var(--text-secondary);
}
.mod-checkbox-label:hover { background: rgba(255,255,255,0.08); }
.mod-checkbox-label.active {
  background: rgba(30,95,189,0.12); border-color: rgba(30,95,189,0.4);
  color: var(--white); font-weight: 600;
}
.mod-checkbox-label.ht.active {
  background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.4);
}
.mod-icon { font-size: 1rem; }
.mod-name { flex: 1; font-weight: 700; }
.mod-badge {
  font-size: 0.65rem; font-weight: 800; padding: 0.1rem 0.35rem;
  border-radius: 4px; background: rgba(255,255,255,0.1); color: var(--text-secondary);
}
.mod-checkbox-label.active .mod-badge { background: var(--blue-primary); color: var(--white); }
.mod-checkbox-label.ht.active .mod-badge { background: var(--purple); color: var(--white); }

/* ---- Form Sections ---- */
.form-section-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.form-section-blue { border-left: 3px solid var(--blue-primary); padding-left: 1rem; }
.form-section-gold { border-left: 3px solid var(--gold); padding-left: 1rem; }
.form-section-purple { border-left: 3px solid var(--purple); padding-left: 1rem; }
.form-section-header h3 { font-size: 1rem; font-weight: 700; color: var(--white); }
.form-section-icon { font-size: 1.25rem; }
.pts-badge {
  display: inline-block; padding: 0.15rem 0.5rem;
  background: rgba(30,95,189,0.2); border: 1px solid rgba(30,95,189,0.3);
  border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  color: var(--blue-light); margin-left: 0.5rem;
}
.form-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .form-grid-4 { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.form-input, .form-select {
  padding: 0.625rem 0.875rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--white);
  font-size: 1rem; transition: var(--transition);
}
.form-input:focus, .form-select:focus { border-color: var(--blue-primary); background: rgba(30,95,189,0.1); box-shadow: 0 0 0 3px var(--blue-glow); }
.form-input::placeholder { color: var(--gray-500); }
.form-select option { background: var(--navy-mid); color: var(--white); }
.form-input option { background: var(--navy-mid); color: var(--white); }
.form-input optgroup { background: var(--navy-mid); color: var(--gold-light); font-weight: 700; font-style: normal; }
.form-input optgroup option { background: var(--navy-mid); color: var(--white); font-weight: 400; }

/* ---- Criteria Grid ---- */
.criteria-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0.75rem; margin-bottom: 1rem;
}
.criterion-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--border);
  cursor: pointer; transition: var(--transition); -webkit-user-select: none; user-select: none;
}
.criterion-item:hover { background: rgba(255,255,255,0.08); }
.criterion-item.acquired {
  background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3);
}
.criterion-check {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 2px solid var(--gray-600);
  font-size: 0.9rem; transition: var(--transition);
}
.criterion-item.acquired .criterion-check {
  background: var(--green); border-color: var(--green);
  color: var(--white);
}
.criterion-code { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.criterion-item.acquired .criterion-code { color: var(--green-light); }
.criterion-label { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.3; }
.criterion-item.acquired .criterion-label { color: var(--white); }

/* ---- Score Bar ---- */
.score-bar-container { margin-top: 0.5rem; }
.score-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.375rem; }
.score-bar { height: 8px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue-primary), var(--blue-light)); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; }
.bar-gold { background: linear-gradient(90deg, var(--gold), var(--orange)); }
.bar-purple { background: linear-gradient(90deg, var(--purple), var(--purple-light)); }

/* ---- TC Total ---- */
.tc-total-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.75rem;
  background: linear-gradient(135deg, rgba(30,95,189,0.15), rgba(30,95,189,0.05));
  border: 1px solid rgba(30,95,189,0.3); border-radius: var(--radius-lg);
}
.tc-total-label { font-size: 0.9rem; font-weight: 700; color: var(--blue-light); }
.tc-total-value { font-size: 1.5rem; font-weight: 800; color: var(--white); }
.tc-total-pct { font-size: 1rem; font-weight: 700; color: var(--gold); }

/* ---- Tabs ---- */
.modules-tabs { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tabs-header { display: flex; border-bottom: 1px solid var(--border); }
.tab-btn {
  flex: 1; padding: 0.875rem;
  background: transparent; color: var(--text-secondary);
  font-size: 0.875rem; font-weight: 600; border-bottom: 3px solid transparent;
  transition: var(--transition);
}
.tab-btn:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.tab-btn.active { color: var(--white); background: rgba(255,255,255,0.06); border-bottom-color: var(--blue-primary); }
.tab-content { display: none; padding: 1.5rem; }
.tab-content.active { display: block; }

/* ---- Sub-tabs (Stagiaires) ---- */
.sub-tabs-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
}
.sub-tab-btn {
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(15,23,42,0.6);
  color: #cbd5e1;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.sub-tab-btn:hover {
  background: rgba(30,58,138,0.4);
  border-color: rgba(96,165,250,0.5);
  color: #fff;
}
.sub-tab-btn.active {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.sub-tab-panel {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- QCM Grid ---- */
.qcm-explainer { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.qcm-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.qcm-badge-std { padding: 0.15rem 0.5rem; background: rgba(30,95,189,0.15); border: 1px solid rgba(30,95,189,0.3); border-radius: 99px; font-size: 0.7rem; font-weight: 700; color: var(--blue-light); }
.qcm-badge-fond { padding: 0.15rem 0.5rem; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); border-radius: 99px; font-size: 0.7rem; font-weight: 700; color: var(--red-light); }
.qcm-badge-seuil { padding: 0.15rem 0.5rem; background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.4); border-radius: 99px; font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.qcm-exam-selector { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.qcm-exam-btn {
  flex: 1 1 220px;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.qcm-exam-btn:hover { border-color: rgba(30,95,189,0.4); color: var(--text-primary); }
.qcm-exam-btn.active {
  background: linear-gradient(135deg, rgba(30,95,189,0.25), rgba(30,95,189,0.08));
  border-color: var(--blue-light);
  color: var(--blue-light);
  box-shadow: 0 0 0 1px rgba(30,95,189,0.3);
}
.qcm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.qcm-item {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.875rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--border);
  cursor: pointer; transition: var(--transition); -webkit-user-select: none; user-select: none;
}
.qcm-item:hover { background: rgba(255,255,255,0.08); }
.qcm-item.correct { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); }
.qcm-item.fond { border-left: 3px solid rgba(239,68,68,0.5); }
.qcm-item.fond.correct { border-left-color: var(--green); }
.qcm-num {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.8rem; font-weight: 800;
  background: rgba(255,255,255,0.06); color: var(--text-secondary);
  transition: var(--transition);
}
.qcm-item.correct .qcm-num { background: var(--green); color: var(--white); }
.qcm-item.fond .qcm-num { background: rgba(239,68,68,0.15); color: var(--red-light); }
.qcm-item.fond.correct .qcm-num { background: var(--green); color: var(--white); }
.qcm-info { flex: 1; }
.qcm-label { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.3; }
.qcm-item.correct .qcm-label { color: var(--white); }
.qcm-pts { font-size: 0.7rem; font-weight: 700; color: var(--gray-500); margin-top: 0.2rem; }
.qcm-item.fond .qcm-pts { color: var(--red-light); }

/* ---- Form Actions ---- */
.form-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================
   RESULTS
============================================================ */
.result-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.report-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(10,15,30,0.8), rgba(30,95,189,0.08));
  border-bottom: 1px solid var(--border);
}
.report-logo { display: flex; align-items: center; gap: 1rem; }
.report-logo-img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid var(--blue-primary); }
.report-org-name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--white); }
.report-org-sub { font-size: 0.78rem; color: var(--text-secondary); margin: 0.1rem 0; }
.report-org-ref { font-size: 0.7rem; color: var(--gold); font-weight: 600; letter-spacing: 0.08em; }
.report-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.report-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.meta-label { font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
.meta-value { font-size: 0.85rem; font-weight: 600; color: var(--white); }

/* Identity */
.report-identity {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.75rem 2rem; border-bottom: 1px solid var(--border);
}
.identity-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue-primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; color: var(--white);
}
.identity-name { font-size: 1.3rem; font-weight: 800; color: var(--white); margin-bottom: 0.25rem; }
.identity-details { font-size: 0.85rem; color: var(--text-secondary); }
.identity-score-global { margin-left: auto; text-align: right; }
.sg-value { display: block; font-size: 2.5rem; font-weight: 800; font-family: var(--font-display); }
.sg-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Modules Results */
.modules-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 1.75rem 2rem; }
.module-result-card {
  border-radius: var(--radius-lg); padding: 1.25rem;
  border: 1.5px solid var(--border);
  transition: var(--transition);
}
.module-result-card:hover { transform: translateY(-3px); }
.mr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.mr-name { font-size: 0.9rem; font-weight: 800; }
.mr-badge { padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; }
.mr-score { font-size: 1.75rem; font-weight: 800; font-family: var(--font-display); margin-bottom: 0.25rem; }
.mr-pct { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.875rem; }
.mr-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.mr-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.mr-appreciation { font-size: 0.78rem; margin-top: 0.625rem; font-weight: 600; }
.mr-attribution { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; }

/* Avis */
.avis-section { padding: 1.75rem 2rem; border-top: 1px solid var(--border); }
.avis-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem; border-radius: var(--radius-lg);
  border: 2px solid var(--border);
}
.avis-card.favorable { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.3); }
.avis-card.favorable-reserve { background: rgba(245,166,35,0.07); border-color: rgba(245,166,35,0.3); }
.avis-card.defavorable { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.3); }
.avis-icon { font-size: 2rem; flex-shrink: 0; }
.avis-title { font-size: 1.15rem; font-weight: 800; color: var(--white); margin-bottom: 0.375rem; }
.avis-text { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; line-height: 1.6; }
.avis-habils { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avis-expiration { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.habil-tag {
  padding: 0.25rem 0.875rem; border-radius: 99px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em;
  background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
  color: var(--green-light);
}

.recommandation-box {
  margin: 0 2rem 1.5rem;
  padding: 1.25rem; border-radius: var(--radius);
  background: rgba(30,95,189,0.08); border: 1px solid rgba(30,95,189,0.2);
}
.reco-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.375rem; }
.reco-text { font-size: 0.875rem; color: var(--text-secondary); }

.nfc-notice {
  margin: 0 2rem 1.5rem;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.2);
  font-size: 0.82rem; color: var(--gold);
}
.report-actions {
  display: flex; flex-wrap: wrap; gap: 0.875rem;
  padding: 1.5rem 2rem; border-top: 1px solid var(--border);
}

/* ============================================================
   SESSIONS TABLE
============================================================ */
/* ============================================================
   SESSIONS & TABLES (PREMIUM UI ENHANCEMENTS)
============================================================ */
.filters-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1.1rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.filter-btn {
  padding: 0.4rem 0.9rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.filter-btn:hover { color: var(--white); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
.filter-btn.active { background: rgba(30,95,189,0.25); border-color: #60a5fa; color: var(--white); box-shadow: 0 0 12px rgba(96,165,250,0.2); }
.sessions-tab-btn {
  padding: 0.55rem 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  letter-spacing: 0.01em;
}
.sessions-tab-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.sessions-tab-btn.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(5,150,105,0.1) 100%);
  border-color: rgba(16,185,129,0.5);
  color: #34d399;
  box-shadow: 0 0 12px rgba(16,185,129,0.15);
}
.sessions-groupes-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sessions-groupes-header h3 { margin: 0; font-size: 1.1rem; color: var(--white); }

/* ── Carte Session Individuelle — Design Premium ────────────── */
.sg-card {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15,23,42,0.7) 0%, rgba(17,24,39,0.85) 100%);
  margin-bottom: 0.875rem;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sg-card:hover {
  border-color: rgba(96,165,250,0.28);
  box-shadow: 0 4px 24px rgba(30,95,189,0.13);
  transform: translateY(-1px);
}
.sg-card[open] {
  border-color: rgba(96,165,250,0.38);
  box-shadow: 0 6px 32px rgba(30,95,189,0.18);
}

/* Summary (en-tête cliquable) */
.sg-card-summary {
  display: flex;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  min-height: 72px;
  position: relative;
  transition: background 0.2s;
}
.sg-card-summary::marker,
.sg-card-summary::-webkit-details-marker { display: none; }
.sg-card-summary:hover { background: rgba(255,255,255,0.02); }
.sg-card-summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }

/* Accent bar gauche */
.sg-card-summary::before {
  content: '';
  width: 4px;
  background: linear-gradient(180deg, #3b82f6 0%, #6366f1 100%);
  flex-shrink: 0;
  border-radius: 0;
  transition: background 0.3s;
}
.sg-card[open] .sg-card-summary::before {
  background: linear-gradient(180deg, #60a5fa 0%, #818cf8 100%);
}

/* Zone titre + sous-titre */
.sg-card-summary-inner {
  flex: 1;
  padding: 0.85rem 0.75rem 0.85rem 1rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sg-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--white);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sg-card-sub {
  font-size: 0.77rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mini-compteurs dans le header */
.sg-card-counters {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0 0.5rem;
  flex-shrink: 0;
}
.sg-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.sg-counter-val {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-display, monospace);
}
.sg-counter-lbl {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 700;
  margin-top: 0.12rem;
}
.sg-counter.c-total .sg-counter-val { color: #94a3b8; }
.sg-counter.c-fav   .sg-counter-val { color: #34d399; }
.sg-counter.c-def   .sg-counter-val { color: #f87171; }
.sg-counter.c-pend  .sg-counter-val { color: #60a5fa; }

/* Chevron animé */
.sg-card-chevron {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 0.9rem;
  flex-shrink: 0;
  padding-right: 0.75rem;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), color 0.2s;
}
.sg-card[open] .sg-card-chevron {
  transform: rotate(180deg);
  color: #60a5fa;
}
.sg-card-summary:hover .sg-card-chevron { color: #60a5fa; }

/* Séparateur haut du corps */
.sg-card[open] .sg-card-summary {
  border-bottom: 1px solid rgba(96,165,250,0.15);
}

/* Corps ouvert */
.sg-card-content { padding: 1.1rem 1.25rem 1.25rem 1.5rem; }
.sg-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.85rem; margin-bottom: 0.85rem;
}
.sg-card-title-legacy { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.sg-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
  /* Selecteur de modules (modale d edition de session).
   * Les couleurs viennent des variables de theme : une puce codee en dur
   * (#fff) donnait un texte clair sur fond clair, donc invisible. */
  .mod-select {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .mod-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.6rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text-primary);
    font-size: 0.8rem; font-weight: 600; user-select: none;
    transition: border-color var(--transition), background var(--transition);
  }
  .mod-chip:hover { background: var(--surface-hover); }
  .mod-chip input { margin: 0; cursor: pointer; accent-color: var(--blue-primary); }
  /* Etat coche visible SANS dependre du rendu natif de la case, qui varie
     selon le navigateur et le theme. */
  .mod-chip.on {
    border-color: var(--blue-primary);
    background: var(--blue-glow);
    color: var(--text-primary);
  }
  .mod-chip.on::after { content: " \2713"; color: var(--blue-light); font-weight: 700; }
  .mod-chip-hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--text-secondary); }
  .mod-chip-hint strong { color: var(--text-primary); }

  /* Badge de perimetre dans la barre de titre d une session. */
  .sg-mod-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem;
    border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text-primary);
  }
  .sg-mod-chip.none { border-color: rgba(224, 139, 42, 0.45); color: var(--gold-light); }

.sg-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px;
  word-break: break-word;
}
.sg-badge-blue { background: rgba(30,95,189,0.15); color: #60a5fa; }
.sg-badge-green { background: rgba(16,185,129,0.15); color: #34d399; }
.sg-badge-red { background: rgba(239,68,68,0.15); color: #f87171; }
.sg-badge-orange { background: rgba(245,158,11,0.18); color: #fbbf24; }
.sg-badge-gray { background: rgba(148,163,184,0.15); color: #94a3b8; }
.sg-empty { text-align: center; padding: 1.5rem; color: var(--text-secondary); font-size: 0.9rem; }
.btn-view-sm { background: rgba(30,95,189,0.15); border: 1px solid rgba(30,95,189,0.4); color: #60a5fa; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.btn-view-sm:hover { background: rgba(30,95,189,0.3); }
.btn-del-sm { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #f87171; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.btn-del-sm:hover { background: rgba(239,68,68,0.25); }
.btn-green-sm { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.4); color: #34d399; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.btn-green-sm:hover { background: rgba(16,185,129,0.3); }
.filter-search { flex: 1; max-width: 280px; }

.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-strip-item {
  padding: 1rem 1.25rem; border-radius: var(--radius);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  text-align: center;
}
.stat-strip-item.stat-green { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.2); }
.stat-strip-item.stat-red { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); }
.stat-strip-item.stat-blue { background: rgba(30,95,189,0.08); border-color: rgba(30,95,189,0.25); }
.stat-strip-value { display: block; font-size: 1.75rem; font-weight: 800; font-family: var(--font-display); color: var(--white); }
.stat-strip-label { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.sessions-table-wrap { border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); }
.sessions-table { width: 100%; border-collapse: collapse; }
#stag-table { min-width: 1280px; }
#stag-table th:last-child, #stag-table td:last-child { min-width: 250px; }
#stag-table .stag-actions { min-width: 230px; align-items: center; }
.sessions-table th {
  background: rgba(255,255,255,0.04); padding: 0.875rem 1rem;
  text-align: left; font-size: 0.75rem; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sessions-table td {
  padding: 0.875rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem; color: var(--text-primary);
  vertical-align: middle;
}
.sg-stagiaires-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.sg-stagiaires-table {
  min-width: 1080px;
}
.sg-stagiaires-table th,
.sg-stagiaires-table td {
  vertical-align: middle;
}
.sg-stagiaires-table th:first-child,
.sg-stagiaires-table td:first-child {
  width: 3.5rem;
  text-align: center;
}
.sg-stagiaires-table th:last-child,
.sg-stagiaires-table td:last-child {
  min-width: 270px;
}
.sg-student-name-cell {
  min-width: 190px;
}
.sg-student-name-cell strong {
  display: inline-block;
  margin-right: 0.35rem;
}
.sg-stagiaire-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}
.sg-student-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 250px;
}
.sg-student-actions > button {
  flex: 0 0 auto;
  min-height: 2rem;
  white-space: normal;
  word-break: break-word;
}
.sessions-table tr:hover td { background: rgba(255,255,255,0.03); }
.sessions-table tr:last-child td { border-bottom: none; }

/* ═══ Dossiers Sessions ════════════════════════════════════════ */
/* Dossier Sessions Actives */
.active-sessions-folder {
  margin: 0 0 0.75rem 0;
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(30,58,138,0.1) 100%);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s;
}
.active-sessions-folder[open] { border-color: rgba(96,165,250,0.38); }

.active-sessions-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  color: #bfdbfe;
  font-weight: 700;
  font-size: 0.95rem;
  user-select: none;
  transition: background 0.2s;
}
.active-sessions-summary::marker,
.active-sessions-summary::-webkit-details-marker { display: none; }
.active-sessions-summary:hover { background: rgba(96,165,250,0.05); }
.active-sessions-summary::after {
  content: '⌄';
  margin-left: auto;
  font-size: 1.2rem;
  color: #60a5fa;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  display: inline-block;
}
.active-sessions-folder[open] .active-sessions-summary::after { transform: rotate(180deg); }
.active-sessions-folder[open] .active-sessions-summary { border-bottom: 1px solid rgba(96,165,250,0.18); }
.active-sessions-summary span { color: #64748b; font-size: 0.82rem; font-weight: 500; }
.active-sessions-body { padding: 0.85rem 0.6rem 0.6rem; }

/* Dossier Archives */
.archive-folder {
  margin: 0.5rem 0 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.15);
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s;
}
.archive-folder[open] { border-color: rgba(148,163,184,0.28); }
.archive-folder-summary {
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  background: rgba(30,41,59,0.6);
  color: #94a3b8;
  font-weight: 700; font-size: 0.9rem;
  list-style: none;
  display: flex; align-items: center; gap: 0.6rem;
  transition: background 0.2s;
  user-select: none;
}
.archive-folder-summary:hover { background: rgba(30,41,59,0.85); color: #cbd5e1; }
.archive-folder-summary::marker,
.archive-folder-summary::-webkit-details-marker { display: none; }
.archive-folder-summary::after {
  content: '⌄';
  margin-left: auto; font-size: 1.1rem;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  display: inline-block;
}
.archive-folder[open] .archive-folder-summary::after { transform: rotate(180deg); }
.archive-folder[open] .archive-folder-summary { border-bottom: 1px solid rgba(148,163,184,0.12); }
.archive-folder-body { padding: 0.75rem 0.5rem 0.5rem; }
.archive-table thead th { font-weight: 600; }
.archive-filter-row .form-input,
#sessions-groupes-filtres .form-input,
.archive-filter-row .form-select,
#sessions-groupes-filtres .form-select {
  color: #f8fafc !important;
  background: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.55) !important;
  color-scheme: dark;
}
.archive-filter-row .form-input::placeholder,
#sessions-groupes-filtres .form-input::placeholder { color: #cbd5e1; opacity: 1; }
.archive-filter-row .form-select option,
#sessions-groupes-filtres .form-select option { color: #f8fafc; background: #0f172a; }

/* Dossier par Projet (sous-dossier dans Sessions Actives) */
.projet-sessions-folder {
  margin: 0 0 0.6rem 0;
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15,23,42,0.45) 0%, rgba(120,53,15,0.08) 100%);
  transition: border-color 0.2s;
}
.projet-sessions-folder[open] { border-color: rgba(245,166,35,0.42); }
.projet-sessions-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: #fcd34d;
  font-weight: 600;
  font-size: 0.88rem;
  user-select: none;
  background: rgba(245,166,35,0.07);
  transition: background 0.18s;
}
.projet-sessions-summary::marker,
.projet-sessions-summary::-webkit-details-marker { display: none; }
.projet-sessions-summary:hover { background: rgba(245,166,35,0.12); }
.projet-sessions-summary::after {
  content: '⌄';
  margin-left: auto;
  font-size: 1.1rem;
  color: #f59e0b;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  display: inline-block;
}
.projet-sessions-folder[open] .projet-sessions-summary::after { transform: rotate(180deg); }
.projet-sessions-folder[open] .projet-sessions-summary { border-bottom: 1px solid rgba(245,166,35,0.15); }
.projet-sessions-body { padding: 0.6rem 0.4rem 0.4rem; }


.avis-chip {
  display: inline-block; padding: 0.2rem 0.625rem;
  border-radius: 99px; font-size: 0.72rem; font-weight: 700;
  word-break: break-word;
}
.avis-chip.favorable { background: rgba(16,185,129,0.15); color: var(--green-light); border: 1px solid rgba(16,185,129,0.3); }
.avis-chip.defavorable { background: rgba(239,68,68,0.12); color: var(--red-light); border: 1px solid rgba(239,68,68,0.25); }
.avis-chip.en-cours { background: rgba(245,158,11,0.14); color: var(--orange); border: 1px solid rgba(245,158,11,0.3); }
.score-chip { font-weight: 700; font-size: 0.9rem; }
.habils-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.habils-chip {
  padding: 0.1rem 0.4rem; border-radius: 99px;
  font-size: 0.65rem; font-weight: 800;
  background: rgba(30,95,189,0.15); color: var(--blue-light);
  border: 1px solid rgba(30,95,189,0.2);
}
.btn-view-sm {
  padding: 0.3rem 0.75rem; border-radius: var(--radius-sm);
  background: rgba(30,95,189,0.15); border: 1px solid rgba(30,95,189,0.2);
  color: var(--blue-light); font-size: 0.75rem; font-weight: 600;
  transition: var(--transition); cursor: pointer;
}
.btn-view-sm:hover { background: rgba(30,95,189,0.25); }
.btn-del-sm {
  padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.1); border: none;
  color: var(--red-light); font-size: 0.75rem;
  transition: var(--transition); cursor: pointer;
}
.btn-del-sm:hover { background: rgba(239,68,68,0.2); }

.no-sessions { text-align: center; padding: 4rem; color: var(--text-secondary); }
.no-sessions-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }

.preloaded-notice {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.25rem;
  background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.15);
  border-radius: var(--radius); font-size: 0.85rem; color: var(--text-secondary);
}
.preloaded-icon { font-size: 1.5rem; }
.preloaded-notice strong { color: var(--gold); }
.preloaded-notice div { flex: 1; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--navy); border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}
.footer-container {
  max-width: 1300px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-logo { width: 40px; height: 40px; border-radius: 8px; }
.footer-brand-name { font-weight: 800; color: var(--white); }
.footer-brand-sub { font-size: 0.75rem; color: var(--text-secondary); }
.footer-center { text-align: center; }
.footer-ref { font-size: 0.8rem; font-weight: 700; color: var(--gold); margin-bottom: 0.3rem; }
.footer-copy { font-size: 0.78rem; color: var(--text-secondary); }
.footer-disclaimer { font-size: 0.72rem; color: var(--gray-600); margin-top: 0.25rem; }
.footer-norms { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.norm-badge {
  padding: 0.2rem 0.625rem; border-radius: 99px;
  background: rgba(30,95,189,0.1); border: 1px solid rgba(30,95,189,0.2);
  font-size: 0.7rem; font-weight: 700; color: var(--blue-light);
}

/* ============================================================
   MODAL
============================================================ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 2rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--navy-mid); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
  max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border-radius: 50%;
  font-size: 0.875rem; color: var(--text-secondary);
  transition: var(--transition);
}
.modal-close:hover { background: rgba(255,255,255,0.15); color: var(--white); }

/* ============================================================
   TOAST
============================================================ */
.toast-container {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 3000;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.toast {
  padding: 0.875rem 1.25rem; border-radius: var(--radius);
  background: var(--navy-mid); border: 1px solid var(--border);
  color: var(--white); font-size: 0.875rem;
  box-shadow: var(--shadow); min-width: 280px;
  animation: slide-in-toast 0.3s ease;
  display: flex; align-items: center; gap: 0.75rem;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid var(--blue-primary); }
.toast.warning { border-left: 3px solid #f59e0b; }
@keyframes slide-in-toast { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================
   PRINT STYLES
============================================================ */
@media print {
  .navbar, .hero, .section-header, .filters-bar, .stats-strip,
  .sessions-table-wrap, .preloaded-notice, .footer, .form-actions,
  .report-actions, .btn-primary, .btn-secondary, .btn-outline,
  .toast-container, .modal-overlay { display: none !important; }
  body { background: white; color: #000; }
  #resultats { display: block !important; }
  .result-card { border: 1px solid #ddd; box-shadow: none; }
  .report-header { background: #f5f5f5; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Menu large : ajustement ergonomique conservant des boutons lisibles */
@media (max-width: 1480px) {
  .nav-category-label { font-size: 0.58rem; opacity: 0.85; }
  .nav-link { font-size: 0.78rem; padding: 0.35rem 0.55rem; }
  .nav-container { gap: 0.45rem; padding-left: 0.75rem; padding-right: 0.75rem; flex-wrap: nowrap; }
  .ux-nav-theme-label { display: inline-block; font-size: 0.6rem; }
}
@media (max-width: 1320px) {
  .nav-brand { max-width: 9.5rem; }
  .nav-cta { padding: 0.4rem 0.8rem; font-size: 0.76rem; }
  .nav-lock-btn { padding: 0.38rem 0.7rem; font-size: 0.74rem; }
  .ux-nav-theme-select { max-width: 6rem; font-size: 0.74rem; padding: 0.3rem 0.45rem; }
  .nav-link { padding: 0.32rem 0.48rem; font-size: 0.75rem; }
  .nav-category { padding: 0.2rem 0.3rem; }
  .nav-links { gap: 0.12rem; flex-wrap: nowrap; }
}
/* Sous 1100px : bascule hamburger — la barre horizontale reste affichee
   jusqu'a 1100px (elle est defilee si la place manque, plus rognee). */
@media (max-width: 1099px) {
  :root { --nav-offset: 3.6rem; }
  .nav-container {
    gap: 0.55rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-brand { max-width: none; }
  .brand-sub { display: block; }
  .hamburger { display: flex; }
}
@media (max-width: 768px) {
  .nav-actions .nav-cta { display: none; }
  .nav-brand-text { display: none; }
  .hero-stats { gap: 1.5rem; }
  .stat-number { font-size: 2rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .form-actions { justify-content: stretch; }
  .form-actions button { flex: 1; }
  .report-actions { flex-direction: column; }
  .modules-results { grid-template-columns: 1fr 1fr; }
  .sessions-table-wrap { overflow-x: auto; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .nav-brand-text { display: none; }
}
@media (max-width: 480px) {
  .hero-stats { flex-direction: column; gap: 1rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .modules-results { grid-template-columns: 1fr; }
  .criteria-grid { grid-template-columns: 1fr 1fr; }
  .help-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BANDEAU ALERTES RENOUVELLEMENT
============================================================ */
.alerte-bandeau {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 999;
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem 2rem;
  background: linear-gradient(90deg, #92400e, #b45309);
  color: #fef3c7; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.alerte-bandeau-icon { font-size: 1.2rem; }
.alerte-bandeau-lien { color: #fde68a; text-decoration: underline; margin-left: auto; white-space: nowrap; }
.alerte-bandeau-close {
  background: none; border: 1px solid rgba(255,255,255,0.3); color: #fef3c7;
  border-radius: 50%; width: 24px; height: 24px; cursor: pointer;
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   NAVBAR BADGE ALERTE
============================================================ */
.nav-alert-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: white; font-size: 0.65rem; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  margin-left: 4px; vertical-align: middle;
  animation: pulse-badge 1.5s ease infinite;
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ============================================================
   MODALES AGRANDIES (Aperçu, Émargement, Attestation)
============================================================ */
.modal-large {
  max-width: 900px !important;
  width: 95vw !important;
  max-height: 90vh;
  overflow-y: auto;
}
#modal-attestation-content { overflow-x: auto; }
.modal-apercu-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.5rem;
  background: var(--navy); border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  flex-wrap: wrap;
}
.modal-apercu-header > div:first-child {
  font-size: 1.1rem; font-weight: 700; color: var(--white);
}
.modal-apercu-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.attestation-options {
  display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.75rem 1.5rem; background: var(--navy-light); border-bottom: 1px solid var(--border);
}
.attestation-options label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.attestation-options input,
.attestation-options select {
  border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.6rem;
  font-size: 0.85rem; color: var(--text-primary); background: var(--navy-mid); min-width: 150px;
}
.attestation-options input[type="checkbox"] { min-width: 0; }
.attestation-identite-note { flex-basis: 100%; font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); }
input.modele-switch { appearance:none; -webkit-appearance:none; cursor:pointer; flex:none; width:2.8rem; height:1.5rem; min-width:0; padding:2px; border:1px solid #94a3b8; border-radius:999px; background:#64748b; transition:background .15s; }
input.modele-switch::before { content:""; display:block; width:1.1rem; height:1.1rem; border-radius:50%; background:white; transition:transform .15s; }
input.modele-switch:checked { background:#2563a8; }
input.modele-switch:checked::before { transform:translateX(1.25rem); }
input.modele-switch:focus-visible { outline:3px solid #f5a623; outline-offset:3px; }
.attestation-options :is(input, select):focus:not(:focus-visible) { outline: none; border-color: var(--blue-primary); }

/* ============================================================
   ALERTES BOX
============================================================ */
.alertes-box {
  margin-bottom: 1.5rem; border-radius: var(--radius);
  border: 1px solid rgba(245,166,35,0.4);
  background: rgba(245,166,35,0.07);
  overflow: hidden;
}
.alertes-box-header {
  padding: 0.75rem 1.25rem;
  background: rgba(245,166,35,0.15);
  font-weight: 700; color: var(--gold);
  font-size: 0.9rem;
}
.alerte-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.25rem; border-top: 1px solid rgba(245,166,35,0.15);
  font-size: 0.85rem; color: var(--text-secondary);
  flex-wrap: wrap;
}
.alerte-item-badge {
  padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700;
}
.badge-expire { background: rgba(239,68,68,0.2); color: #f87171; }
.badge-alerte { background: rgba(245,166,35,0.2); color: var(--gold); }
.badge-valide { background: rgba(16,185,129,0.2); color: #34d399; }

/* ============================================================
   TABLEAU STAGIAIRES — Badges de statut & Design Premium
============================================================ */
.stag-statut {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.7rem; border-radius: 99px;
  font-size: 0.75rem; font-weight: 700;
}
.stag-valide  { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.stag-alerte  { background: rgba(245,166,35,0.15); color: var(--gold); border: 1px solid rgba(245,166,35,0.3); }
.stag-expire  { background: rgba(239,68,68,0.15);  color: #f87171;  border: 1px solid rgba(239,68,68,0.3); }
.stag-pending { background: rgba(148,163,184,0.12); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }

/* ── Dossiers de sessions dans le tableau des Stagiaires ──────── */
.stag-folder-td {
  padding: 0.4rem 0.1rem !important;
  border-bottom: none !important;
  background: transparent !important;
}

.stag-folder-container {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 58, 138, 0.25) 100%);
  backdrop-filter: blur(12px);
  margin: 0.4rem 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.stag-folder-container:hover {
  border-color: rgba(96, 165, 250, 0.38);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.18);
  transform: translateY(-1px);
}

.stag-session-folder-toggle {
  width: 100%;
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: none;
  color: #f8fafc;
  cursor: pointer;
  text-align: left;
  font: inherit;
  user-select: none;
}

.stag-folder-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.stag-folder-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(30, 58, 138, 0.45);
  border: 1px solid rgba(147, 197, 253, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

.stag-folder-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f1f5f9;
  letter-spacing: 0.01em;
}

.stag-folder-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

.stag-folder-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stag-folder-pills {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.stag-pill-count {
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.32);
  font-weight: 700;
  font-size: 0.78rem;
}

.stag-pill-valide {
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.32);
  font-weight: 700;
  font-size: 0.78rem;
}

.stag-pill-alerte {
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.32);
  font-weight: 700;
  font-size: 0.78rem;
}

.stag-pill-pending {
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-weight: 600;
  font-size: 0.78rem;
}

.stag-folder-chevron-wrap {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.3s ease, background-color 0.2s, color 0.2s;
}

.stag-session-folder-toggle:hover .stag-folder-chevron-wrap {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.stag-chevron-svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stag-session-folder-toggle[aria-expanded="true"] .stag-chevron-svg {
  transform: rotate(90deg);
}

.stag-session-folder-toggle[aria-expanded="true"] .stag-folder-container {
  border-color: rgba(96, 165, 250, 0.45);
}

/* ── Lignes des Stagiaires sous chaque dossier ────────────────── */
.stag-row-item td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: rgba(15, 23, 42, 0.35);
  padding: 0.85rem 1rem !important;
  vertical-align: middle;
  transition: background 0.15s ease;
}

.stag-row-item:hover td {
  background: rgba(30, 58, 138, 0.2) !important;
}

.stag-grp-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.stag-metier-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}

.stag-eval-count-btn {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0.3rem 0.65rem !important;
  transition: all 0.2s ease !important;
}

.stag-eval-count-btn:hover {
  background: rgba(52, 211, 153, 0.25) !important;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.25) !important;
}

.stag-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-pdf-sm {
  background: rgba(30, 95, 189, 0.18) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  border-radius: 6px !important;
}

.btn-pdf-sm:hover {
  background: rgba(30, 95, 189, 0.35) !important;
  color: #93c5fd !important;
}

.btn-word-sm {
  background: rgba(245, 166, 35, 0.18) !important;
  color: #f5a623 !important;
  border: 1px solid rgba(245, 166, 35, 0.3) !important;
  border-radius: 6px !important;
}

.btn-word-sm:hover {
  background: rgba(245, 166, 35, 0.35) !important;
  color: #fbbf24 !important;
}

.btn-preview-sm {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 6px !important;
}

.btn-preview-sm:hover {
  background: rgba(16, 185, 129, 0.35) !important;
}

.btn-del-grp-sm {
  background: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  border-radius: 6px !important;
}

/* ============================================================
   DASHBOARD — KPI Cards
============================================================ */
.dashboard-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
}
.kpi-card {
  border-radius: var(--radius-lg);
  padding: 1.45rem 1.2rem;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  transition: var(--transition);
  cursor: default;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.kpi-icon { font-size: 1.65rem; margin-bottom: 0.55rem; }
.kpi-value {
  font-size: 2.15rem; font-weight: 850;
  font-family: 'Sora', var(--font-display), sans-serif;
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: -0.03em;
}
.kpi-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 650; letter-spacing: 0.02em; }

.kpi-blue   .kpi-value { color: #60a5fa; }
.kpi-green  .kpi-value { color: #34d399; }
.kpi-orange .kpi-value { color: var(--gold-light); }
.kpi-red    .kpi-value { color: #f87171; }
.kpi-purple .kpi-value { color: #a78bfa; }
.kpi-gold   .kpi-value { color: var(--gold-light); }

.kpi-blue   { border-color: rgba(96,165,250,0.28); color: #60a5fa; }
.kpi-green  { border-color: rgba(52,211,153,0.28); color: #34d399; }
.kpi-orange { border-color: rgba(201,162,39,0.28); color: var(--gold); }
.kpi-red    { border-color: rgba(239,68,68,0.28); color: #f87171; }
.kpi-purple { border-color: rgba(167,139,250,0.28); color: #a78bfa; }
.kpi-gold   { border-color: rgba(201,162,39,0.28); color: var(--gold); }

/* ============================================================
   DASHBOARD — Graphiques
============================================================ */
.dashboard-charts {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
}
.chart-card {
  flex: 1;
  min-width: min(280px, 100%);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.45rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: var(--transition);
}
.chart-card:hover { border-color: var(--border-strong); }
.chart-title {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--white);
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.chart-wrap {
  position: relative;
  height: 260px;
}

/* Responsive dashboard */
@media (max-width: 768px) {
  .dashboard-charts { flex-direction: column; }
  .kpi-card { padding: 1rem; }
  .kpi-value { font-size: 1.75rem; }
}


/* ============================================================
   MODE RUBRIQUES SÉPARÉES (PAGES DÉDIÉES EN SÉPARATEURS)
   ============================================================ */
.page-rubrique {
  display: none !important;
}
.active-rubrique {
  display: block !important;
  animation: fadeInRubrique 0.25s ease-out;
}
section.hero.active-rubrique {
  display: flex !important;
}
@keyframes fadeInRubrique {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   STYLISATION DES CARTE QCM & CHOIX MULTIPLES (NF C 18-510)
============================================================ */
.qcm-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: var(--transition);
}
.qcm-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow);
}
.qcm-card.qcm-fondamentale {
  border-left: 4px solid var(--gold);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.04), rgba(255, 255, 255, 0.02));
}
.qcm-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.qcm-card-num {
  background: rgba(30, 95, 189, 0.2);
  color: var(--blue-light);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 95, 189, 0.3);
}
.qcm-fondamentale .qcm-card-num {
  background: rgba(245, 166, 35, 0.2);
  color: var(--gold);
  border-color: rgba(245, 166, 35, 0.3);
}
.qcm-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  flex-grow: 1;
}
.qcm-card-pts {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}
.qcm-card-question {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}
.qcm-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.qcm-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}
.qcm-choice:hover {
  background: rgba(30, 95, 189, 0.1);
  border-color: rgba(30, 95, 189, 0.3);
}
.qcm-choice-letter {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.qcm-choice-text {
  font-size: 0.875rem;
  color: var(--text);
}
.qcm-choice.selected {
  background: rgba(30, 95, 189, 0.18);
  border-color: var(--blue-light);
}
.qcm-choice.selected .qcm-choice-letter {
  background: var(--blue-light);
  color: #0f172a;
}
.qcm-choice.correct-answer {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #34d399 !important;
}
.qcm-choice.correct-answer .qcm-choice-letter {
  background: #34d399 !important;
  color: #0f172a !important;
}
.qcm-choice.wrong-answer {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #f87171 !important;
}
.qcm-choice.wrong-answer .qcm-choice-letter {
  background: #f87171 !important;
  color: #ffffff !important;
}
.qcm-explication {
  margin-top: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.qcm-expl-ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #a7f3d0;
}
.qcm-expl-ko {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fecaca;
}

/* ============================================================
   TABLEAU QCM FORMAT OFFICIEL UX (QUESTIONS | CHOIX | NOTE)
============================================================ */
.qcm-table-wrapper {
  margin-bottom: 2.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.qcm-paper-header {
  background: linear-gradient(90deg, #1e3a7a, #0f172a);
  padding: 1rem 1.5rem;
  border-bottom: 2px solid var(--gold);
  text-align: center;
}

.qcm-paper-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.qcm-paper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.qcm-paper-table th {
  background: rgba(30, 58, 122, 0.3);
  color: var(--gold-light);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.qcm-paper-table th.col-q { width: 35%; text-align: left; }
.qcm-paper-table th.col-r { width: 55%; text-align: left; }
.qcm-paper-table th.col-n { width: 10%; text-align: center; }

.qcm-question-tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

/* ---- QCM Grid en 1 seule colonne pleine largeur ---- */
#qcm-grid, .qcm-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  width: 100% !important;
}



/* ============================================================
   GRILLES DE CRITÈRES MODULES — FORMAT QUESTIONNAIRE OFFICIEL
============================================================ */

/* ---- En-tête module ---- */
.qcm-paper-header {
  background: linear-gradient(135deg, var(--navy-mid) 0%, #1a2a4a 100%);
  border: 1px solid rgba(30, 95, 189, 0.4);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1rem 1.5rem;
}
.qcm-paper-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ---- Tableau papier ---- */
.qcm-paper-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10, 15, 30, 0.7);
  border: 1px solid rgba(30, 95, 189, 0.3);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.qcm-paper-table thead tr th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(30, 95, 189, 0.12);
  border-bottom: 1px solid rgba(30, 95, 189, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.qcm-paper-table thead tr th.col-q { width: 38%; text-align: left; }
.qcm-paper-table thead tr th.col-r { width: 54%; text-align: left; }
.qcm-paper-table thead tr th.col-n { width: 8%; text-align: center; }

/* ---- Lignes de question ---- */
.qcm-question-tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}
.qcm-question-tr:hover { background: rgba(30, 95, 189, 0.04); }
.qcm-question-tr:last-child { border-bottom: none; }

/* ---- Cellule question ---- */
.td-question {
  padding: 1rem 1rem 1rem 1.25rem;
  vertical-align: top;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.q-num-title {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.q-num-title strong {
  color: var(--gold-light);
  font-size: 0.85rem;
}

/* ---- Cellule choix ---- */
.td-choices {
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.qcm-choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ---- Colonne note ---- */
.td-note {
  padding: 1rem 0.5rem;
  vertical-align: middle;
  text-align: center;
  min-width: 64px;
}
.note-cell-box {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---- Grille critères 1 colonne ---- */
.criteria-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  width: 100% !important;
}

/* ---- Rangée choix interactive ---- */
.qcm-row-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  -webkit-user-select: none;
  user-select: none;
  background: rgba(255, 255, 255, 0.02);
}
.qcm-row-choice:hover {
  background: rgba(30, 95, 189, 0.12);
  border-color: rgba(30, 95, 189, 0.35);
}
.qcm-row-choice.selected {
  background: rgba(30, 95, 189, 0.22) !important;
  border-color: var(--blue-light) !important;
}
.qcm-row-choice.selected .qcm-checkbox-icon { color: var(--blue-light); }
.qcm-row-choice.correct-answer {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #34d399 !important;
}
.qcm-row-choice.correct-answer .qcm-checkbox-icon { color: #34d399; }
.qcm-row-choice.wrong-answer {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: #f87171 !important;
}
.qcm-row-choice.wrong-answer .qcm-checkbox-icon { color: #f87171; }

.qcm-choice-bullet {
  font-size: 0.82rem;
  color: var(--text-primary);
  flex: 1;
}
.qcm-dots-leader {
  flex-grow: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
  margin: 0 0.5rem;
  height: 12px;
  min-width: 20px;
}
.qcm-checkbox-icon {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

/* ---- Explication après réponse ---- */
.qcm-paper-expl {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.45;
}
.expl-ok {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
}
.expl-ko {
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

/* ============================================================
   CONTRÔLES VRAI / FAUX & OUI / NON (QCM)
============================================================ */
.qcm-answer-box {
  margin-top: 0.75rem;
  padding: 0.875rem;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.qcm-vf-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.qcm-vf-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: left;
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.qcm-vf-table thead th:nth-child(1) { width: 55%; }
.qcm-vf-table thead th:nth-child(2),
.qcm-vf-table thead th:nth-child(3) { width: 22.5%; text-align: center; }
.qcm-vf-table tbody tr:not(:last-child) td {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.qcm-vf-table td {
  padding: 0.5rem 0.25rem;
}
.qcm-vf-proposition {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  padding-right: 0.5rem;
}
.qcm-on-wrap {
  display: flex;
  gap: 0.5rem;
}
.qcm-vf-btn,
.qcm-on-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.qcm-vf-btn {
  width: 100%;
  min-width: 64px;
  padding: 0.45rem 0.35rem;
  border-radius: 6px;
  font-size: 0.75rem;
}
.qcm-on-btn {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
}
.qcm-vf-btn:hover,
.qcm-on-btn:hover {
  border-color: var(--blue-light);
  color: var(--blue-light);
}
.qcm-vf-btn.selected,
.qcm-on-btn.selected {
  background: var(--blue-light);
  border-color: var(--blue-light);
  color: #0f172a;
}
.qcm-vf-btn.correct-answer,
.qcm-on-btn.correct-answer {
  background: rgba(16, 185, 129, 0.15);
  border-color: #34d399;
  color: #34d399;
}
.qcm-vf-btn.wrong-answer,
.qcm-on-btn.wrong-answer {
  background: rgba(239, 68, 68, 0.15);
  border-color: #f87171;
  color: #f87171;
}

/* ============================================================
   ÉPREUVE PRATIQUE — GRILLE A/B/C/D (NF C 18-510, Annexe D)
   ============================================================ */
.pratique-grid th.col-abcd { text-align: center; }

.pratique-radio-cell {
  text-align: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-secondary);
  transition: background 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.pratique-radio-cell:hover { background: rgba(255, 255, 255, 0.06); }
.pratique-radio-cell.selected-A { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.pratique-radio-cell.selected-B { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.pratique-radio-cell.selected-C { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.pratique-radio-cell.selected-D { background: rgba(239, 68, 68, 0.18); color: #f87171; }

.pratique-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pratique-legend-item { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 45%; }
.badge-abcd {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.75rem;
  flex-shrink: 0;
}
.pratique-acceptation {
  padding: 0.7rem 1.25rem;
  background: rgba(16, 185, 129, 0.08);
  border-top: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  color: #34d399;
  line-height: 1.4;
}

/* ---- Bascule de mode : mise en situation réelle ↔ par questions ---- */
.pratique-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pratique-mode-btn {
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.pratique-mode-btn:hover { border-color: var(--blue-light); color: var(--white); }
.pratique-mode-btn.active {
  background: var(--blue-primary);
  border-color: var(--blue-light);
  color: var(--white);
}
.pratique-mode-btn.active .pratique-subst-badge { background: rgba(255, 255, 255, 0.25); color: var(--white); }
.pratique-serie-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pratique-serie-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}
.pratique-serie-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.pratique-serie-btn:hover { border-color: var(--blue-light); color: var(--white); }
.pratique-serie-btn.active {
  background: var(--blue-primary);
  border-color: var(--blue-light);
  color: var(--white);
}
.pratique-serie-btn.active .pratique-subst-badge { background: rgba(255, 255, 255, 0.25); color: var(--white); }
.pratique-subst-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  background: var(--gold);
  color: #1e293b;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* ---- QCM de substitution ---- */
.pratique-subst-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(30, 95, 189, 0.06));
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  font-weight: 700;
  color: var(--white);
  font-size: 0.88rem;
}
.pratique-subst-icon { margin-right: 0.35rem; }
.pratique-subst-eval-toggle {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.pratique-subst-eval-toggle:hover { border-color: var(--blue-light); color: var(--white); }
.pratique-subst-eval-toggle.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: #a78bfa;
  color: #c4b5fd;
}
.pratique-subst-warn {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.4);
}
.pratique-subst-lvl-badge {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  border: 1px solid;
}
.pratique-subst-lvl-badge.lvl-A { color: #34d399; border-color: #34d399; background: rgba(52, 211, 153, 0.12); }
.pratique-subst-lvl-badge.lvl-B { color: #60a5fa; border-color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
.pratique-subst-lvl-badge.lvl-C { color: #fbbf24; border-color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.pratique-subst-lvl-badge.lvl-D { color: #f87171; border-color: #f87171; background: rgba(248, 113, 113, 0.12); }
.pratique-subst-desc { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); line-height: 1.5; }
.pratique-subst-question {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pratique-subst-q-title { font-size: 0.88rem; color: var(--white); margin-bottom: 0.6rem; line-height: 1.5; }
.pratique-subst-eval {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.pratique-subst-eval-label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); margin-right: 0.25rem; }
.pratique-subst-eval-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}
.pratique-subst-eval-btn:hover { border-color: var(--blue-light); color: var(--white); }
.pratique-subst-eval-btn.selected-A { background: rgba(16, 185, 129, 0.25); border-color: #34d399; color: #34d399; }
.pratique-subst-eval-btn.selected-B { background: rgba(59, 130, 246, 0.25); border-color: #60a5fa; color: #60a5fa; }
.pratique-subst-eval-btn.selected-C { background: rgba(245, 158, 11, 0.25); border-color: #fbbf24; color: #fbbf24; }
.pratique-subst-eval-btn.selected-D { background: rgba(239, 68, 68, 0.25); border-color: #f87171; color: #f87171; }
.pratique-subst-verdict {
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.5rem;
}
.pratique-subst-verdict.ok { color: #34d399; }
.pratique-subst-verdict.ko { color: #f87171; }
.pratique-subst-manual {
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  color: #94a3b8;
  border: 1px dashed rgba(148, 163, 184, 0.4);
}
.pratique-subst-manual.yes {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.08);
}
.pratique-subst-bareme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 1.25rem 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.pratique-subst-bareme-title { font-weight: 700; }
.pratique-subst-bareme-item {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pratique-subst-bareme-item.sel {
  outline: 2px solid var(--blue-light);
  color: var(--white);
}
.pratique-subst-bareme-item b.lvl-A { color: #34d399; }
.pratique-subst-bareme-item b.lvl-B { color: #60a5fa; }
.pratique-subst-bareme-item b.lvl-C { color: #fbbf24; }
.pratique-subst-bareme-item b.lvl-D { color: #f87171; }
.pratique-subst-bareme-hint { margin-left: auto; font-weight: 600; }
.pratique-subst-bareme-hint b.lvl-A { color: #34d399; }
.pratique-subst-bareme-hint b.lvl-B { color: #60a5fa; }
.pratique-subst-bareme-hint b.lvl-C { color: #fbbf24; }
.pratique-subst-bareme-hint b.lvl-D { color: #f87171; }

.pratique-subst-bilan {
  margin: 0.9rem 1.25rem 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pratique-subst-bilan.ok { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.07); }
.pratique-subst-bilan.ko { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.07); }
.pratique-subst-bilan-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.pratique-subst-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
.pratique-subst-legend b { margin-right: 0.2rem; }
.pratique-subst-bilan-verdict { font-size: 0.85rem; font-weight: 700; line-height: 1.5; }
.pratique-subst-bilan.ok .pratique-subst-bilan-verdict { color: #34d399; }
.pratique-subst-bilan.ko .pratique-subst-bilan-verdict { color: #f87171; }
.pratique-subst-bilan.pending .pratique-subst-bilan-verdict { color: var(--gold); }
.pratique-subst-override {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.pratique-subst-override input { accent-color: var(--gold); width: 16px; height: 16px; }




.brouillon-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.35);
  border-left: 4px solid var(--gold); color: var(--text-primary);
  padding: 0.7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem;
  font-size: 0.85rem;
}
.brouillon-banner em { color: var(--text-secondary); font-size: 0.75rem; }

.btn-secondary-sm {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary); padding: 0.65rem 1.2rem; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.btn-secondary-sm:hover { background: rgba(255,255,255,0.12); border-color: rgba(96,165,250,0.5); }
.tools-bar { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 0.75rem; }
#modal-content label { display: block; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 0.3rem; }
#modal-content .form-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 1rem; }

.qcm-pts-row { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; font-size:0.8rem; color:#94a3b8; }
.qcm-pts-label { white-space:nowrap; }
.qcm-pts-input { width:64px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:var(--text-primary); border-radius:6px; padding:0.3rem 0.5rem; font-size:1rem; }

/* ============================================================
   MOBILE IMPROVEMENTS — tap targets, overscroll, reduced-motion
============================================================ */

/* B3 — tap targets min 48px */
@media (max-width: 768px) {
  .filter-btn {
    min-height: 44px; padding: 0.5rem 0.875rem;
  }
  .criterion-item {
    min-height: 48px;
  }
  .sessions-tab-btn {
    min-height: 44px;
  }
  /* Cartes sessions — layout compact mobile */
  .sg-card-summary {
    min-height: 60px;
  }
  .sg-card-counters {
    gap: 0.25rem;
    padding: 0 0.25rem;
  }
  .sg-counter {
    min-width: 36px;
    padding: 0.2rem 0.3rem;
    border-radius: 6px;
  }
  .sg-counter-val { font-size: 0.9rem; }
  .sg-counter-lbl { font-size: 0.5rem; }
  .sg-card-chevron { width: 24px; padding-right: 0.5rem; }
  .sg-card-title { font-size: 0.88rem; }
  .sg-card-sub { font-size: 0.7rem; }
  .sg-card-summary-inner { padding: 0.65rem 0.5rem 0.65rem 0.75rem; }
  .sg-card-content { padding: 0.75rem 0.75rem 1rem 1rem; }
  .sg-btns { gap: 0.35rem; }
  .sg-btns button, .sg-btns .btn-secondary, .sg-btns .btn-primary {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.72rem !important;
  }
  .active-sessions-body { padding: 0.5rem 0.3rem 0.3rem; }
}

/* B4 — prevent pull-to-refresh on mobile candidate mode */
body.mobile-candidat-mode {
  overscroll-behavior: contain;
}

/* B4 — prevent rubber-banding on the candidate form */
body.mobile-candidat-mode #mobile-stagiaire {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* B5 — reduced motion: disable transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* C4 — fiches grid responsive override (inline style uses 350px min, too wide for phones) */
@media (max-width: 768px) {
  .fiches-grid,
  .container [style*="minmax(350px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Safe-area: alerte-bandeau at top */
@media (max-width: 768px) {
  .alerte-bandeau {
    top: calc(68px + env(safe-area-inset-top));
  }
  .mobile-menu {
    top: calc(68px + env(safe-area-inset-top));
  }
}

/* ============================================================
   MOBILE TTS & SIGNATURE STYLES
============================================================ */
.btn-mobile-tts {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}
.btn-mobile-tts:hover {
  background: rgba(59, 130, 246, 0.3);
  color: #ffffff;
}
.btn-outline-sm {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f87171;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline-sm:hover {
  background: rgba(248, 113, 113, 0.15);
}
.mobile-signature-box {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   AUTHENTICATION PORTAL — PREMIUM
============================================================ */
.evalupro-auth-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  z-index: 999999;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(26, 116, 224, 0.28), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(201, 162, 39, 0.1), transparent 55%),
    linear-gradient(165deg, #050d18 0%, #0a1628 55%, #040910 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.evalupro-auth-overlay.unlocked {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
  visibility: hidden;
}

.auth-bg-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(26, 116, 224, 0.28), rgba(201, 162, 39, 0.12) 45%, transparent 72%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(70px);
  animation: auth-pulse 7s ease-in-out infinite alternate;
}
@keyframes auth-pulse {
  0% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}

.auth-glass-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 2.35rem 2.1rem;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 2;
  overflow: hidden;
  animation: auth-card-in 0.65s var(--ease-out) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--blue-primary), var(--gold-light));
}

.auth-card-header {
  text-align: center;
  margin-bottom: 1.85rem;
}
.auth-logo-badge {
  width: 78px;
  height: 78px;
  margin: 0 auto 1.1rem;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.auth-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.auth-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}
.auth-badge {
  display: inline-block;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 750;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}
.auth-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.45rem;
  letter-spacing: 0.02em;
}
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-icon {
  position: absolute;
  left: 14px;
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.65;
}
.auth-input {
  width: 100%;
  padding: 0.82rem 1rem 0.82rem 2.7rem;
  background: rgba(5, 13, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  transition: var(--transition);
}
.auth-input:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(26, 116, 224, 0.2);
  background: rgba(5, 13, 24, 0.9);
}
.auth-password-input {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  padding-right: 2.6rem;
  color: var(--gold-light);
  font-weight: 700;
}
.auth-eye-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}
.auth-eye-btn:hover { color: #fff; }

.auth-remember-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.auth-btn-submit {
  width: 100%;
  padding: 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, var(--blue-primary) 0%, #0e4f9e 55%, #0a3d7a 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 28px var(--blue-glow);
  transition: var(--transition);
}
.auth-btn-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 34px var(--blue-glow);
}

.auth-error-msg {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}

.auth-success-msg {
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
}

.auth-shake {
  animation: auth-shake-anim 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes auth-shake-anim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}


/* ============================================================
   UNIVERSAL MOBILE COMPATIBILITY (iPhone iOS Safari & Android)
============================================================ */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px !important; /* Empêche l'auto-zoom de Safari sur iPhone */
    touch-action: manipulation;   /* Supprime le délai de 300ms au toucher sur iOS */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .mobile-candidat-mode {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
  }
}

/* ============================================================
   MOBILE STAGIAIRE ERGONOMICS & STICKY PROGRESS BAR
============================================================ */
.mobile-sticky-progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: all 0.3s ease;
}

.mobile-sticky-progress-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.mobile-sticky-progress-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-sticky-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
}

.mobile-sticky-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #10b981);
  border-radius: 99px;
  transition: width 0.3s ease-in-out;
}

.mobile-groupe-q-option {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.mobile-groupe-q-option:active {
  transform: scale(0.98);
}

.mobile-groupe-q-option.selected {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
}

@keyframes pulseOmission {
  0%, 100% {
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.1);
  }
  50% {
    border-color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
    background: rgba(245, 158, 11, 0.15);
  }
}

.mobile-question-omitted {
  animation: pulseOmission 1.2s ease-in-out infinite !important;
  border-radius: 14px !important;
}

.mobile-receipt-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 58, 138, 0.3));
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  border-radius: 18px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.15);
}

.mobile-receipt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  padding: 0.3rem 0.85rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

/* ============================================================
   AUDIT & CONTRÔLE DU SYSTÈME (NF C 18-510)
============================================================ */
#controle-evaluation {
  overflow-x: clip;
  max-width: 100%;
}
#controle-evaluation .container {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
#controle-evaluation .section-header,
#controle-evaluation .section-title,
#controle-evaluation .section-desc {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.audit-section-tag {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

.audit-accred-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 14px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  min-width: 0;
}
.audit-accred-icon { font-size: 2rem; flex-shrink: 0; }
.audit-accred-body { flex: 1 1 220px; min-width: 0; }
.audit-accred-title {
  margin: 0;
  color: #fff;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.audit-accred-text {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.audit-accred-cta {
  padding: 0.55rem 1rem !important;
  font-size: 0.85rem !important;
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.audit-sim-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.4) 100%);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.audit-sim-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  min-width: 0;
}
.audit-sim-head-text { flex: 1 1 240px; min-width: 0; }
.audit-sim-title {
  color: #fff;
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.audit-sim-desc {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}
.audit-sim-badge {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  flex-shrink: 0;
  white-space: nowrap;
}

.audit-sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  min-width: 0;
}

.audit-sim-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 0;
  max-width: 100%;
}
.audit-sim-card-wide {
  grid-column: 1 / -1;
}

.audit-sim-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audit-sim-select,
.audit-sim-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #0f172a !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.audit-sim-select {
  text-overflow: ellipsis;
}

.audit-sim-run {
  width: 100%;
  justify-content: center;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

.audit-sim-result {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
}

.audit-block {
  margin-bottom: 2.5rem;
  min-width: 0;
  max-width: 100%;
}
.audit-block-title {
  color: #fff;
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  margin: 0 0 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audit-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.audit-matrix-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin-top: 0;
  table-layout: auto;
}

.audit-matrix-table th {
  background: rgba(30, 58, 138, 0.4);
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
  white-space: nowrap;
}

.audit-matrix-table td {
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.audit-matrix-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.audit-rule-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  max-width: 100%;
  min-width: 0;
}

.audit-rule-title {
  color: #f87171;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audit-rule-desc {
  color: #cbd5e1;
  font-size: 0.85rem;
  margin-top: 0.35rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.audit-trace-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 100%;
  min-width: 0;
}
.audit-trace-title {
  color: #fff;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  margin: 0 0 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.audit-trace-intro {
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.audit-trace-list {
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1.7;
  padding-left: 1.25rem;
  margin: 0;
  overflow-wrap: anywhere;
}
.audit-trace-list li { margin-bottom: 0.35rem; }

/* ---- Panneaux pliables (Contrôle & Audit) ---- */
.audit-fold-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  justify-content: flex-end;
}
.audit-fold-toolbar .btn-outline-sm {
  min-height: 40px;
}

.audit-fold {
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  overflow: hidden;
  max-width: 100%;
}
.audit-fold-primary {
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.audit-fold > summary.audit-fold-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  user-select: none;
  transition: background 0.2s ease;
}
.audit-fold > summary.audit-fold-summary::-webkit-details-marker { display: none; }
.audit-fold > summary.audit-fold-summary:hover {
  background: rgba(255, 255, 255, 0.04);
}
.audit-fold[open] > summary.audit-fold-summary {
  border-bottom: 1px solid var(--border);
  background: rgba(26, 116, 224, 0.06);
}
.audit-fold-summary-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 240px;
}
.audit-fold-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.audit-fold-titles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.audit-fold-title {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.08rem);
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.audit-fold-sub {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}
.audit-fold-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.audit-fold-chevron {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out), border-color 0.2s ease;
}
.audit-fold-chevron::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: translateY(-2px) rotate(45deg);
}
.audit-fold[open] > summary .audit-fold-chevron {
  transform: rotate(180deg);
  border-color: rgba(201, 162, 39, 0.45);
}
.audit-fold-body {
  padding: 1.15rem 1.25rem 1.35rem;
  min-width: 0;
  max-width: 100%;
}
.audit-sim-box-inner,
.audit-trace-box-inner {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 1.15rem 1.25rem 1.35rem;
}

.audit-rules-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.audit-rule-fold {
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  overflow: hidden;
}
.audit-rule-fold > summary.audit-rule-fold-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  color: #f87171;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  overflow-wrap: anywhere;
}
.audit-rule-fold > summary.audit-rule-fold-summary::-webkit-details-marker { display: none; }
.audit-rule-fold > summary.audit-rule-fold-summary::after {
  content: '+';
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  line-height: 1;
  color: #fca5a5;
}
.audit-rule-fold[open] > summary.audit-rule-fold-summary::after { content: '−'; }
.audit-rule-fold .audit-rule-desc {
  padding: 0 1rem 0.95rem;
  margin-top: 0;
}

@media (max-width: 768px) {
  .audit-fold > summary.audit-fold-summary { padding: 0.9rem 1rem; }
  .audit-fold-body,
  .audit-sim-box-inner,
  .audit-trace-box-inner { padding: 1rem; }
  .audit-fold-toolbar { justify-content: stretch; }
  .audit-fold-toolbar .btn-outline-sm { flex: 1 1 auto; justify-content: center; }
  .audit-sim-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .audit-sim-card { padding: 0.85rem 1rem; }
  .audit-accred-banner { padding: 1rem 1.15rem; }
  .audit-accred-cta { width: 100%; }
  .audit-matrix-table { min-width: 640px; }
  .audit-matrix-table th,
  .audit-matrix-table td { padding: 0.65rem 0.75rem; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .audit-sim-badge { white-space: normal; }
  .audit-matrix-table { min-width: 560px; }
}

/* ============================================================
   AIDE CENTER STYLING ENHANCEMENTS
============================================================ */
.help-search-container {
  max-width: 600px;
  margin: 0 auto 2rem auto;
  position: relative;
}

.help-search-input {
  width: 100%;
  padding: 0.85rem 1.25rem 0.85rem 3rem;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #fff;
  font-size: 0.95rem;
  backdrop-filter: blur(8px);
}

.help-search-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: #60a5fa;
  font-size: 1.1rem;
}

.help-tabs-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.help-tab-btn {
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-tab-btn.active, .help-tab-btn:hover {
  background: rgba(30, 95, 189, 0.25);
  border-color: #60a5fa;
  color: #fff;
}

/* ============================================================
   COCKPIT DE CERTIFICATION — STYLES SYSTEM UI PROQUELEC V5.2.1
   ============================================================ */
.cockpit-bar {
  background: linear-gradient(90deg, #0b1329, #0f172a);
  border-bottom: 1px solid rgba(96, 165, 250, 0.2);
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #94a3b8;
  position: relative;
  z-index: 90;
  backdrop-filter: blur(10px);
}
.cockpit-bar-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cockpit-bar-val {
  font-weight: 700;
  color: #f1f5f9;
}

/* Témoin de synchronisation VPS (barre d'état) — pastille d'état */
.cockpit-sync-dot {
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  line-height: 1;
  font-size: 1.2em;
  filter: drop-shadow(0 0 8px currentColor);
}
.cockpit-sync-dot--ok {
  color: #34d399;
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
  transform: scale(1.1);
}
.cockpit-sync-dot--attente {
  color: #f59e0b;
  animation: cockpitSyncPulse 2s ease-in-out infinite;
}
.cockpit-sync-dot--syncing {
  color: #38bdf8;
  animation: cockpitSyncPulse 1s ease-in-out infinite;
  transform: scale(1.15);
}
.cockpit-sync-dot--erreur {
  color: #f87171;
  animation: cockpitSyncError 0.5s ease-in-out infinite;
}
@keyframes cockpitSyncPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.95); }
}
@keyframes cockpitSyncError {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit-sync-dot--syncing,
  .cockpit-sync-dot--attente,
  .cockpit-sync-dot--erreur { animation: none; }
}

/* Badges 5 États (Système d'évaluation visuel) */
.badge-state-5 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.state-favorable {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.state-defavorable {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.state-incomplet {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.35);
}
.state-a-verifier {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.state-non-evalue {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Timeline de Décision Stagiaire */
.decision-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 1.5rem 0;
  padding: 1rem 0;
}
.decision-timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(148, 163, 184, 0.2);
  z-index: 1;
}
.timeline-step {
  position: relative;
  z-index: 2;
  background: #0f172a;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.timeline-step.step-ok {
  border-color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}
.timeline-step.step-ko {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}
.timeline-step.step-wait {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.1);
}
.timeline-step-title {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 700;
}
.timeline-step-status {
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 0.25rem;
}

/* Cartes Habilitations Institutionnelles */
.habil-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.habil-inst-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.25s ease;
}
.habil-inst-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.habil-card-b0 { border-top: 4px solid #60a5fa; }
.habil-card-b1 { border-top: 4px solid #f59e0b; }
.habil-card-b2 { border-top: 4px solid #a78bfa; }

/* Bouton / Modale "Pourquoi ?" d'Inspection des Règles */
.btn-pourquoi {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-pourquoi:hover {
  background: rgba(96, 165, 250, 0.25);
  color: #93c5fd;
}

/* ============================================================
   COCKPIT PC — SYSTEME DESIGN ULTRA-PREMIUM (V5.2.1)
   Sidebar Latérale, Carte Glassmorphism, Status Bar & Dashboard
   ============================================================ */

/* Mode Cockpit — navbar fixe conservée + contenu décalé dessous */
body.cockpit-mode #navbar {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
}
body.cockpit-mode #cockpit-top-bar {
  display: none !important;
}
body.cockpit-mode #dashboard,
body.cockpit-mode .cockpit-dashboard-root {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: calc(100vh - var(--chrome-offset));
  min-height: calc(100dvh - var(--chrome-offset));
  position: relative;
  z-index: 1;
}
body.cockpit-mode .cockpit-page-wrapper {
  display: flex !important;
  visibility: visible !important;
  min-height: calc(100vh - var(--chrome-offset));
  min-height: calc(100dvh - var(--chrome-offset));
}
body.cockpit-mode .cockpit-sidebar {
  display: flex !important;
  visibility: visible !important;
}
body.cockpit-mode .cockpit-main-content {
  display: block !important;
  visibility: visible !important;
}

.cockpit-page-wrapper {
  display: flex;
  min-height: calc(100vh - 52px);
  min-height: calc(100dvh - 52px);
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(26, 116, 224, 0.22), transparent 55%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(201, 162, 39, 0.1), transparent 52%),
    linear-gradient(180deg, #050d18 0%, #071422 50%, #040910 100%);
  position: relative;
  font-family: var(--font-main);
}
.cockpit-page-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 15%, transparent 70%);
}

/* ===== SIDEBAR LATÉRALE FIXE ===== */
.cockpit-sidebar {
  width: 268px;
  background: linear-gradient(180deg, rgba(10, 21, 36, 0.98) 0%, rgba(5, 13, 24, 0.99) 100%);
  border-right: 1px solid rgba(201, 162, 39, 0.12);
  padding: 1.5rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45);
  transition: var(--transition);
  position: relative;
}
.cockpit-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,162,39,0.35), rgba(26,116,224,0.25), transparent);
  pointer-events: none;
}

.cockpit-sidebar-actions {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cockpit-sidebar-actions .btn-outline-sm {
  justify-content: center;
  width: 100%;
}
.cockpit-btn-exit {
  border-color: rgba(201, 162, 39, 0.4) !important;
  color: var(--gold-light) !important;
  font-weight: 750 !important;
}
.cockpit-btn-exit:hover {
  background: rgba(201, 162, 39, 0.12) !important;
}

.cockpit-sidebar-header {
  padding: 0 0.5rem 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cockpit-sidebar-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.cockpit-sidebar-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cockpit-sidebar-sub {
  font-size: 0.72rem;
  color: var(--gold-light);
  font-weight: 650;
  letter-spacing: 0.04em;
}

.cockpit-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cockpit-sidebar-group-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.75rem 0.75rem 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cockpit-sidebar-group-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}

/* Style FORCÉ des boutons de navigation sidebar */
button.cockpit-nav-item,
a.cockpit-nav-item,
.cockpit-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  text-align: left !important;
  margin-bottom: 0.2rem !important;
}

button.cockpit-nav-item:hover,
a.cockpit-nav-item:hover,
.cockpit-nav-item:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #f1f5f9 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  transform: translateX(4px) !important;
}

button.cockpit-nav-item.active,
a.cockpit-nav-item.active,
.cockpit-nav-item.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4) 0%, rgba(14, 165, 233, 0.25) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.25) !important;
}

.cockpit-nav-icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.cockpit-nav-badge-warn {
  margin-left: auto;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* ===== CONTENU PRINCIPAL COCKPIT ===== */
.cockpit-main-content {
  flex: 1;
  padding: 2rem 2.5rem 5.5rem 2.5rem;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.cockpit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.cockpit-section-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cockpit-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(37, 99, 235, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== GRILLE DE CARTE KPIS ===== */
.cockpit-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.35rem;
  margin-bottom: 2rem;
}

.cockpit-kpi-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(20, 30, 55, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cockpit-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
}

.cockpit-kpi-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.kpi-icon-blue { background: rgba(59, 130, 246, 0.18); border: 1px solid rgba(59, 130, 246, 0.4); color: #60a5fa; box-shadow: 0 0 15px rgba(59,130,246,0.2); }
.kpi-icon-green { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; box-shadow: 0 0 15px rgba(16,185,129,0.2); }
.kpi-icon-amber { background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; box-shadow: 0 0 15px rgba(245,158,11,0.2); }
.kpi-icon-purple { background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(168, 85, 247, 0.4); color: #c084fc; box-shadow: 0 0 15px rgba(168,85,247,0.2); }
.kpi-icon-red { background: rgba(239, 68, 68, 0.18); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; box-shadow: 0 0 15px rgba(239,68,68,0.2); }

.cockpit-kpi-info { display: flex; flex-direction: column; }
.cockpit-kpi-val { font-size: 2rem; font-weight: 900; color: #ffffff; line-height: 1.1; letter-spacing: -0.02em; }
.cockpit-kpi-label { font-size: 0.8rem; font-weight: 700; color: #94a3b8; margin-top: 0.25rem; }

/* ===== BARRE DE PROGRESSION ===== */
.cockpit-progress-box {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85) 0%, rgba(20, 30, 55, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.cockpit-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.cockpit-progress-title { font-size: 0.95rem; font-weight: 800; color: #f1f5f9; }
.cockpit-progress-pct { font-size: 1.15rem; font-weight: 900; color: #38bdf8; }

.cockpit-progress-track {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.cockpit-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-primary), var(--gold), var(--green-light));
  border-radius: 99px;
  transition: width 0.55s var(--ease-out);
  box-shadow: 0 0 18px rgba(26, 116, 224, 0.45);
}

/* ===== SOUS-PANNEAUX ET CARTE ===== */
.cockpit-sub-panel {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.8) 0%, rgba(20, 30, 55, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

/* Badges 5 États */
.badge-state-5 {
  padding: 0.55rem 1.1rem !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.state-favorable { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; color: #34d399 !important; }
.state-defavorable { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important; }
.state-incomplet { background: rgba(56, 189, 248, 0.15) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; color: #38bdf8 !important; }
.state-a-verifier { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; color: #fbbf24 !important; }
.state-non-evalue { background: rgba(148, 163, 184, 0.15) !important; border: 1px solid rgba(148, 163, 184, 0.4) !important; color: #cbd5e1 !important; }

/* FILTRES & RECHERCHE EN PILULLES */
.cockpit-table-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.cockpit-filter-pills { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

button.cockpit-pill-btn,
.cockpit-pill-btn {
  padding: 0.5rem 1.1rem !important;
  border-radius: 99px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #d1d5db !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

button.cockpit-pill-btn:hover,
.cockpit-pill-btn:hover {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  transform: translateY(-1px) !important;
}

button.cockpit-pill-btn.active,
.cockpit-pill-btn.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(14, 165, 233, 0.4)) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25) !important;
}

.cockpit-search-wrap { position: relative; min-width: 280px; }

.cockpit-search-input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  font-size: 0.88rem;
}

.cockpit-search-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.cockpit-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.95rem;
}

/* ===== TABLEAU DES STAGIAIRES ===== */
.cockpit-stag-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

.cockpit-stag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.cockpit-stag-table thead th {
  padding: 0.85rem 1.1rem;
  background: rgba(11, 19, 41, 0.95);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
}

.cockpit-stag-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.cockpit-stag-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cockpit-stag-table td {
  padding: 0.85rem 1.1rem;
  vertical-align: middle;
  color: #e2e8f0;
}

.cockpit-stag-table td .stag-name { font-weight: 700; color: #ffffff; }
.cockpit-stag-table td .stag-meta { font-size: 0.78rem; color: #64748b; margin-top: 0.1rem; }

/* ===== BARRE DE STATUT PERMANENTE (PIED DE PAGE COCKPIT) ===== */
#dashboard #cockpit-status-bar,
#dashboard .cockpit-footer-bar,
.cockpit-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(5, 13, 24, 0.92);
  border-top: 1px solid rgba(201, 162, 39, 0.22);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.65rem 1.75rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  font-size: 0.82rem;
  color: var(--text-secondary);
}

body.cockpit-mode #dashboard #cockpit-status-bar,
body.cockpit-mode #dashboard .cockpit-footer-bar.visible,
#dashboard #cockpit-status-bar.visible,
#dashboard .cockpit-footer-bar.visible {
  display: flex !important;
}

.cockpit-status-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.cockpit-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: cockpit-blink 2s ease-in-out infinite;
}

@keyframes cockpit-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.cockpit-status-val { font-weight: 900; color: #ffffff; }

/* Animations d'apparition */
@keyframes cockpit-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cockpit-panel-content { animation: cockpit-fade-in 0.35s var(--ease-out); }

/* Distribution B0/B1/B2 (cockpit panel) */
.cockpit-dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.cockpit-dist-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}
.cockpit-dist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0.9;
}
.cockpit-dist-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.dist-b0::before { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
.dist-b1::before { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.dist-b2::before { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.cockpit-dist-val {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 850;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0.35rem 0;
}
.cockpit-dist-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
}
.cockpit-dist-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* Infos session + dossier */
.dossier-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.dossier-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.dossier-info-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(5, 13, 24, 0.45);
  border: 1px solid var(--border);
}
.dossier-info-label {
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.dossier-info-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
}

/* ── Modale « Dossier stagiaire » (overlay + boîte + timeline) ──
   Ouvrée par afficherDossierStagiaire() via la classe .open ; masquée par
   défaut. Sans ces règles, la modale (enfant de <body>) s'affichait à la
   fin de la page et le bouton « Examiner » semblait inerte. */
#dossier-stagiaire-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(2, 6, 23, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
#dossier-stagiaire-modal.open { display: flex; }
.dossier-modal-box {
  background: var(--navy-mid, #0f1b2e);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  border-radius: var(--radius-xl, 18px);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem 1.9rem 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  position: relative;
}
.dossier-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.18));
}
.dossier-modal-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white, #f8fafc);
  letter-spacing: -0.01em;
}
.dossier-modal-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 0.25rem;
}
.dossier-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition, background 0.2s ease, color 0.2s ease);
}
.dossier-modal-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white, #f8fafc);
}
.dossier-modal-body { color: var(--text-secondary, #cbd5e1); }

/* Timeline de décision NF C 18-510 */
.dossier-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.dossier-timeline-item {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm, 10px);
  background: rgba(5, 13, 24, 0.45);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.18));
  border-left: 4px solid var(--text-secondary, #64748b);
}
.dossier-timeline-item.tl-ok { border-left-color: #34d399; }
.dossier-timeline-item.tl-ko { border-left-color: #f87171; }
.dossier-timeline-item.tl-wait { border-left-color: #fbbf24; }
.dossier-tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dossier-tl-label {
  font-weight: 700;
  color: var(--white, #f8fafc);
  font-size: 0.9rem;
}
.dossier-tl-time {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.tl-ok .dossier-tl-time { color: #34d399; }
.tl-ko .dossier-tl-time { color: #f87171; }
.tl-wait .dossier-tl-time { color: #fbbf24; }
.dossier-tl-detail {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* Graphiques analytique */
.cockpit-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 1.35rem;
  margin-bottom: 2rem;
}
.cockpit-chart-panel-wide { grid-column: 1 / -1; }
.cockpit-chart-title {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 750;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.cockpit-chart-wrap {
  position: relative;
  height: 260px;
}
.cockpit-chart-wrap-tall { height: 240px; }

/* États vides */
.cockpit-empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text-secondary);
}
.cockpit-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.65rem;
  opacity: 0.85;
}
.cockpit-empty-text {
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.5;
}

/* Vue métriques (onglet Sessions) */
.vue-dashboard-shell {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.vue-dashboard-inner { padding: 1.35rem 1.5rem 1.75rem; }
.dashboard-metriques-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.dashboard-metriques-title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dashboard-metriques-desc {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 42rem;
}
.dashboard-metriques-refresh {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.82rem !important;
  white-space: nowrap;
}
.dashboard-metriques-subtitle {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.habil-inst-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.habil-inst-title-b0 { color: #60a5fa; }
.habil-inst-title-b1 { color: var(--gold-light); }
.habil-inst-title-b2 { color: #a78bfa; }
.habil-inst-val {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--white);
  margin: 0.5rem 0;
  letter-spacing: -0.03em;
}
.habil-inst-pct {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.habil-inst-card {
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.dashboard-dynamic-metrics {
  min-height: 200px;
  margin-top: 1.5rem;
}
.dashboard-metrics-disabled {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 1rem 0;
}
.dashboard-dynamic-title {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.dashboard-dynamic-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dashboard-dynamic-kpi {
  padding: 1.35rem 1.25rem;
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.dashboard-dynamic-kpi-blue {
  background: linear-gradient(145deg, rgba(26,116,224,0.55), rgba(10,30,60,0.85));
}
.dashboard-dynamic-kpi-cyan {
  background: linear-gradient(145deg, rgba(6,182,212,0.45), rgba(8,51,68,0.85));
}
.dashboard-dynamic-kpi-purple {
  background: linear-gradient(145deg, rgba(124,58,237,0.45), rgba(49,28,90,0.85));
}
.dashboard-dynamic-kpi-val {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.dashboard-dynamic-kpi-label {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  font-weight: 650;
}
.dashboard-dynamic-details {
  background: rgba(5, 13, 24, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  color: var(--text-primary);
}
.dashboard-dynamic-details-title {
  margin: 0 0 0.85rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dashboard-dynamic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.dashboard-dynamic-table td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.dashboard-dynamic-table tr:last-child td { border-bottom: none; }
.dashboard-dynamic-table td:last-child {
  text-align: right;
  color: var(--white);
}

body.cockpit-mode .cockpit-dashboard-root {
  background: transparent;
}

/* Responsive */
@media (max-width: 992px) {
  .cockpit-page-wrapper { flex-direction: column; }
  .cockpit-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(56, 189, 248, 0.15); padding: 1rem; }
  .cockpit-sidebar-group { display: flex; flex-direction: row; overflow-x: auto; gap: 0.5rem; }
  .cockpit-sidebar-group-title { display: none; }
  .cockpit-main-content { padding: 1.25rem 1rem 5rem 1rem; }
}

/* ============================================================
   PREMIUM LAYER 2026 — polish + responsive métier
============================================================ */
.form-input, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: rgba(5, 13, 24, 0.55);
  transition: var(--transition);
}
.form-input:focus, .form-select:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(26, 116, 224, 0.18);
}

.help-card {
  background: var(--surface-elevated);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.help-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.sessions-table-wrap {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  background: rgba(5, 13, 24, 0.35);
}
.sessions-table th {
  background: rgba(26, 116, 224, 0.1);
}

button.cockpit-pill-btn,
.cockpit-pill-btn {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: var(--transition);
}
button.cockpit-pill-btn:hover,
.cockpit-pill-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
button.cockpit-pill-btn.active,
.cockpit-pill-btn.active {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.4);
  color: var(--gold-light);
}

.mobile-card {
  background: var(--surface-elevated);
  border-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1024px) {
  .dashboard-charts { flex-direction: column; }
  .chart-card { min-width: 0; width: 100%; }
}

@media (max-width: 768px) {
  .hero { padding: 5.5rem 1.25rem 3.5rem; min-height: auto; }
  .hero-brand-mark { letter-spacing: 0.12em; margin-bottom: 0.85rem; }
  .hero-stats {
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
  }
  .hero-stat + .hero-stat::before { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-outline { width: 100%; justify-content: center; }

  .dashboard-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .kpi-card { padding: 1rem 0.75rem; }
  .kpi-value { font-size: 1.55rem; }
  .chart-wrap { height: 200px; }

  #dashboard #cockpit-status-bar.visible,
  #dashboard .cockpit-footer-bar.visible {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .cockpit-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
  }

  .stagiaires-kpi-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  #stag-table { min-width: 920px; }

  .auth-glass-card { padding: 1.75rem 1.35rem; border-radius: 18px; }

  #dashboard .cockpit-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  #dashboard .cockpit-kpi-card { padding: 1rem; gap: 0.85rem; }
  #dashboard .cockpit-kpi-val { font-size: 1.55rem; }
  #dashboard .cockpit-kpi-icon { width: 48px; height: 48px; font-size: 1.35rem; }
  #dashboard .cockpit-main-content { padding: 1.25rem 1rem 5.5rem; }
  #dashboard #cockpit-status-bar.visible,
  #dashboard .cockpit-footer-bar.visible { flex-direction: column; align-items: flex-start; }
  .cockpit-chart-grid { grid-template-columns: 1fr; }
  .cockpit-dist-grid { grid-template-columns: 1fr; }
  .vue-dashboard-inner { padding: 1rem; }
  .dashboard-metriques-head { flex-direction: column; align-items: stretch; }
  .dashboard-metriques-refresh { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .dashboard-kpi {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }
  .kpi-card { padding: 0.85rem 0.55rem; }
  .kpi-value { font-size: 1.35rem; }
  .kpi-icon { font-size: 1.2rem; }
  .chart-wrap { height: 160px; }
  .stagiaires-kpi-bar {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   UX PROQUELEC 2026 — couche globale (parcours, densite, a11y)
============================================================ */
.ux-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.65rem 1rem;
  background: var(--blue-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.ux-skip-link:focus {
  left: 0;
}

.ux-journey-bar {
  display: none;
  position: fixed;
  /* Sous la barre de synchronisation, jamais à sa place : sans JS (ou
     avant la première mesure), `--syncbar-offset` vaut 0 et le repli
     reste la hauteur du menu. */
  top: calc(var(--nav-offset) + var(--syncbar-offset));
  left: 0;
  right: 0;
  z-index: 950;
  background: rgba(5, 13, 24, 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ux-journey-bar.visible { display: block; }
.ux-journey-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.ux-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  min-width: 0;
}
.ux-breadcrumb-home {
  background: none;
  border: 0;
  color: var(--gold-light);
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}
.ux-breadcrumb-sep { color: var(--text-secondary); opacity: 0.6; }
.ux-breadcrumb-current {
  color: var(--white);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.ux-parcours-steps {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.ux-parcours-step {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.ux-parcours-step:hover,
.ux-parcours-step.is-active {
  color: var(--white);
  border-color: rgba(26, 116, 224, 0.45);
  background: rgba(26, 116, 224, 0.16);
}
.ux-parcours-step.is-done {
  color: var(--gold-light);
  border-color: rgba(201, 162, 39, 0.35);
}
.ux-parcours-sep {
  color: var(--text-secondary);
  font-size: 0.75rem;
  opacity: 0.5;
}
.ux-journey-tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.ux-density-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ux-density-select {
  background: rgba(5, 13, 24, 0.7);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
}
.ux-quick-btn { font-size: 0.75rem !important; padding: 0.35rem 0.65rem !important; }

.ux-nav-theme-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-left: 0;
  flex-shrink: 0;
  max-width: 8.5rem;
  overflow: hidden;
}
.ux-nav-theme-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
}
.ux-nav-theme-select {
  background: rgba(5, 13, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 650;
  cursor: pointer;
  max-width: 6.2rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ux-nav-theme-select:focus {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .ux-nav-theme-label { display: none; }
  .ux-nav-theme-select { max-width: 5.2rem; font-size: 0.64rem; padding: 0.28rem 0.4rem; }
}

.ux-smart-alerts {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  z-index: 980;
  width: min(320px, calc(100vw - 2rem));
  background: rgba(5, 13, 24, 0.94);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  backdrop-filter: blur(12px);
}
.ux-smart-alerts.visible { display: block; }
.ux-smart-alerts-head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}
.ux-smart-alerts-list { display: flex; flex-direction: column; gap: 0.4rem; }
.ux-smart-alert {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: var(--transition);
}
.ux-smart-alert:hover { background: var(--surface-hover); }
.ux-smart-alert-warn { border-color: rgba(245, 158, 11, 0.4); color: #fcd34d; }
.ux-smart-alert-ok { border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; }
.ux-smart-alert-info { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; }

.ux-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 13, 24, 0.45);
  backdrop-filter: blur(4px);
}
.ux-loading-overlay.visible { display: flex; }
.ux-loading-card {
  background: rgba(10, 20, 36, 0.95);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-lg);
}
.ux-loading-spinner {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold-light);
  animation: ux-spin 0.7s linear infinite;
}
.ux-loading-text { color: var(--white); font-weight: 700; font-size: 0.9rem; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

.ux-empty-state {
  text-align: center;
  padding: 2rem 1.25rem;
  max-width: 28rem;
  margin: 0.5rem auto;
}
.ux-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.ux-empty-title {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.ux-empty-text {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.ux-empty-cta { margin-top: 0.25rem; }

.ux-fold {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  overflow: hidden;
  max-width: 100%;
}
.ux-fold > summary.ux-fold-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  user-select: none;
}
.ux-fold > summary.ux-fold-summary::-webkit-details-marker { display: none; }
.ux-fold[open] > summary.ux-fold-summary {
  border-bottom: 1px solid var(--border);
  background: rgba(26, 116, 224, 0.06);
}
.ux-fold-title {
  color: var(--white);
  font-weight: 750;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ux-fold-chevron {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ux-fold-chevron::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: translateY(-2px) rotate(45deg);
}
.ux-fold[open] > summary .ux-fold-chevron { transform: rotate(180deg); }
.ux-fold-body { padding: 1rem 1.1rem 1.2rem; min-width: 0; }
.ux-fold-body .help-card-icon { margin-bottom: 0.5rem; }

/* Densité */
body.ux-density-compact .section { padding-top: 2rem; padding-bottom: 2.5rem; }
body.ux-density-compact .section-header { margin-bottom: 1.25rem; }
body.ux-density-compact .sessions-table th,
body.ux-density-compact .sessions-table td,
body.ux-density-compact .cockpit-stag-table th,
body.ux-density-compact .cockpit-stag-table td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
body.ux-density-compact .kpi-card,
body.ux-density-compact .cockpit-kpi-card,
body.ux-density-compact .info-card {
  padding: 0.9rem 1rem;
}
body.ux-density-confort .section { padding-top: 3.25rem; }

/* Responsive métier Sessions / Stagiaires / Rapports / Évaluation */
#sessions .container,
#stagiaires .container,
#rapports .container,
#evaluation .container {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
#sessions .tools-bar,
#sessions .sessions-tabs,
#stagiaires .filters-bar {
  max-width: 100%;
}
#stag-table-wrap,
.sessions-table-wrap,
.rapport-types-table-wrap {
  max-width: 100%;
}
@media (max-width: 900px) {
  #stag-table { min-width: 760px; }
  .ux-journey-inner { padding: 0.5rem 0.85rem; }
  .ux-quick-btn { display: none; }
  .ux-smart-alerts { bottom: 5.5rem; right: 0.75rem; left: 0.75rem; width: auto; }
}
@media (max-width: 768px) {
  body.ux-density-compact .section,
  body.ux-density-confort .section {
    padding-left: 0;
    padding-right: 0;
  }
  #evaluation .form-grid-2,
  #evaluation .form-grid-4 {
    grid-template-columns: 1fr !important;
  }
  .rapport-types-table { min-width: 520px; }
  body.mobile-candidat-mode .mobile-page-choice,
  body.mobile-candidat-mode .mobile-carousel-controls button {
    min-height: 48px;
  }
}

/* Focus visible a11y */
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

body.cockpit-mode .ux-journey-bar {
  top: var(--nav-offset);
}
body.has-ux-journey {
  /* chrome-offset déjà calculé en JS = nav + journey */
}
body.cockpit-mode .ux-smart-alerts {
  bottom: 4.75rem;
}

/* Alignement et protection contre les décalages dus aux noms longs sur les cartes stagiaires */
.mobile-submission-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.mobile-submission-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.mobile-submission-head > div:first-child {
  min-width: 0;
  flex: 1;
}
.mobile-submission-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.stag-col-nom,
.cockpit-stag-table .stag-name {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.grille-modal-dialog {
  color: var(--text-primary, #e2e8f0);
}
.grille-modal-dialog [role="tab"] {
  min-height: 44px;
}
.grille-modal-dialog .qcm-row-choice {
  width: 100%;
  min-height: 44px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
}
.grille-modal-dialog .pratique-subst-eval-btn {
  min-width: 44px;
  min-height: 44px;
}
.grille-modal-dialog button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.grille-save-status {
  flex: 1 1 100%;
  min-width: 0;
  color: #cbd5e1;
  font-size: 0.8rem;
}
.grille-save-status:empty {
  display: none;
}
.grille-historique {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font-size: 0.8rem;
}
.grille-historique summary {
  cursor: pointer;
  font-weight: 700;
}
.grille-historique li {
  margin-top: 0.45rem;
}
.grille-historique code {
  color: #93c5fd;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  #modal-saisie-grille-formateur {
    align-items: stretch !important;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom)) !important;
  }
  #modal-saisie-grille-formateur .grille-modal-dialog {
    width: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    min-height: 0;
    border-radius: 12px !important;
  }
  #modal-saisie-grille-content {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  #modal-saisie-grille-formateur [role="tablist"] {
    overflow-x: auto;
    padding-inline: 0.5rem !important;
  }
  #modal-saisie-grille-formateur [role="tab"],
  #modal-saisie-grille-formateur [aria-pressed],
  #modal-saisie-grille-enregistrer,
  #modal-saisie-grille-formateur button[aria-label="Fermer la fiche papier"] {
    min-height: 44px;
  }
  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .toast {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Indicateur de statut réseau et synchronisation
   ========================================================================== */

/* Conteneur de l'indicateur */
#network-status-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10001;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Indicateur réseau */
.network-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: default;
}

.network-online {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.network-offline {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Indicateur de synchronisation en cours */
#sync-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

#sync-status-indicator.hidden {
  display: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Badge de nombre de brouillons */
#brouillons-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

#brouillons-badge.hidden {
  display: none;
}

#brouillons-badge .count {
  font-weight: 800;
  font-size: 0.85rem;
}

/* Barre de statut étendue (optionnelle) */
#status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  z-index: 10000;
}

#status-bar.hidden {
  display: none;
}

#status-bar .status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

#status-bar .status-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
}

#status-bar.online .status-item.online::before { background: #34d399; }
#status-bar.offline .status-item.offline::before { background: #f87171; }

/* ============================================================
   SESSIONS — hiérarchie, filtres lisibles et usage mobile
   Toutes les règles sont limitées à la rubrique Sessions.
============================================================ */
#sessions > .container { max-width: 1480px; }
#sessions .sessions-page-heading {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 0 1.35rem;
  padding: clamp(1.35rem, 2.6vw, 2.3rem);
  overflow: hidden;
  border: 1px solid #2b4566;
  border-radius: 18px;
  background: linear-gradient(118deg, #0d2037 0%, #112b4a 66%, #173b58 100%);
  background-color: #0d2037; /* fond explicite pour le contrôleur de contraste */
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}
#sessions .sessions-page-heading::after {
  content: '';
  position: absolute;
  right: -3.5rem;
  top: -8rem;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(147, 197, 253, 0.13);
  border-radius: 50%;
  pointer-events: none;
}
#sessions .sessions-page-heading > * { position: relative; z-index: 1; min-width: 0; }
#sessions .sessions-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  color: #95d0ff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#sessions .sessions-eyebrow span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #68d7bc;
}
#sessions .sessions-page-heading h2 {
  margin: 0 0 0.45rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.16;
}
#sessions .sessions-page-heading p:not(.sessions-eyebrow) {
  max-width: 44rem;
  margin: 0;
  color: #c7d6e8;
  font-size: 0.97rem;
  line-height: 1.6;
}
#sessions .sessions-page-heading-note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(180, 211, 245, 0.2);
  border-radius: 12px;
  background: #10263c;
  color: #f1f7ff;
}
#sessions .sessions-heading-icon,
#sessions .sessions-tab-icon,
#sessions .sessions-tools-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(139, 190, 248, 0.18);
  border-radius: 11px;
  background: #1b4265;
  font-size: 1.15rem;
  line-height: 1;
}
#sessions .sessions-page-heading-note strong,
#sessions .sessions-page-heading-note small { display: block; }
#sessions .sessions-page-heading-note strong { font-size: 0.8rem; }
#sessions .sessions-page-heading-note small { margin-top: 0.18rem; color: #b8cbdf; font-size: 0.72rem; }

#sessions .sessions-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
}
#sessions .sessions-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  min-height: 4.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #2b405c;
  border-radius: 12px;
  background: #102039;
  color: #e3edf9;
  box-shadow: none;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: left;
}
#sessions .sessions-tab-btn > span:last-child { min-width: 0; }
#sessions .sessions-tab-btn small {
  display: block;
  margin-top: 0.22rem;
  color: #afc0d4;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}
#sessions .sessions-tab-btn:hover { transform: none; background: #18324e; border-color: #54769b; }
#sessions .sessions-tab-btn.active {
  background: #173c67;
  border-color: #73b8ff;
  color: #fff;
  box-shadow: inset 0 -3px 0 #6eb7ff;
}
#sessions .sessions-tab-btn.active small { color: #d1e6fb; }
#sessions .sessions-tab-btn.active .sessions-tab-icon { background: #285781; }

#sessions .sessions-tools {
  margin-bottom: 1.65rem;
  overflow: hidden;
  border: 1px solid #2b405c;
  border-radius: 12px;
  background: #102039;
}
#sessions .sessions-tools > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.5rem;
  padding: 0.7rem 1rem;
  color: #edf5ff;
  cursor: pointer;
  list-style: none;
}
#sessions .sessions-tools > summary::-webkit-details-marker { display: none; }
#sessions .sessions-tools > summary::marker { content: ''; }
#sessions .sessions-tools > summary::after { content: '⌄'; color: #c1d5e9; font-size: 1.2rem; line-height: 1; transition: transform 0.18s ease; }
#sessions .sessions-tools > summary:hover { background: rgba(110, 183, 255, 0.07); }
#sessions .sessions-tools[open] > summary::after { transform: rotate(180deg); }
#sessions .sessions-tools-copy { min-width: 0; }
#sessions .sessions-tools-copy strong,
#sessions .sessions-tools-copy small { display: block; }
#sessions .sessions-tools-copy strong { font-size: 0.88rem; }
#sessions .sessions-tools-copy small { margin-top: 0.15rem; color: #b7c8dc; font-size: 0.74rem; line-height: 1.4; }
#sessions .sessions-tools-more { margin-left: 0; color: #a8d3ff; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
#sessions .sessions-tools-close-label,
#sessions .sessions-tools[open] .sessions-tools-open-label { display: none; }
#sessions .sessions-tools[open] .sessions-tools-close-label { display: inline; }
#sessions .sessions-tools-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.18rem 0.52rem;
  border: 1px solid #34527a;
  border-radius: 999px;
  background: #16304c;
  color: #a9cdf0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#sessions .sessions-tools-actions {
  display: grid;
  gap: 1.05rem;
  margin: 0;
  padding: 1rem 1rem 1.15rem;
  border: 0;
  border-top: 1px solid rgba(172, 198, 227, 0.18);
  border-radius: 0;
  background: rgba(8, 20, 34, 0.32);
}
#sessions .tools-group { display: grid; gap: 0.55rem; min-width: 0; }
#sessions .tools-group + .tools-group { padding-top: 1.05rem; border-top: 1px dashed rgba(172, 198, 227, 0.16); }
#sessions .tools-group-head h4 { margin: 0; color: #f2f8ff; font-size: 0.82rem; line-height: 1.3; }
#sessions .tools-group-head p { margin: 0.2rem 0 0; color: #b3c6da; font-size: 0.76rem; line-height: 1.45; }
#sessions .tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 26rem));
  justify-content: start;
  gap: 0.6rem;
  min-width: 0;
}
#sessions .tool-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: 4.1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #2f4a68;
  border-radius: 11px;
  background: #14253c;
  color: #eff6ff;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#sessions .tool-card:hover { transform: translateY(-1px); border-color: #6aa9e8; background: #1b3452; }
#sessions .tool-card:active { transform: none; }
#sessions .tool-card:focus-visible { outline: 3px solid #9ed4ff; outline-offset: 2px; }
#sessions .tool-card-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(139, 190, 248, 0.22);
  border-radius: 9px;
  background: #1b3d5e;
  font-size: 1rem;
  line-height: 1;
}
#sessions .tool-card-body { min-width: 0; }
#sessions .tool-card-body strong {
  display: block;
  color: #f7fbff;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
}
#sessions .tool-card-body small {
  display: block;
  margin-top: 0.22rem;
  color: #b9cbdd;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.45;
}
/* Action destructrice : volontairement isolée visuellement du reste. */
#sessions .tool-card--danger { border-color: #9a6420; background: #2a1e12; }
#sessions .tool-card--danger .tool-card-icon { border-color: rgba(245, 178, 74, 0.32); background: #42300f; }
#sessions .tool-card--danger:hover { border-color: #e3a33c; background: #362512; }
#sessions .tool-card--danger .tool-card-body strong { color: #ffd9a3; }
#sessions .tool-card--danger .tool-card-body small { color: #e2c9a6; }
/* Réglage à bascule : présenté comme une carte pour rester aligné sur les actions. */
#sessions .tool-card--toggle { position: relative; cursor: pointer; }
#sessions .tool-card--toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#sessions .tool-card--toggle:has(input:checked) { border-color: #3f83bd; background: #172d47; }
#sessions .tool-switch {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 2.6rem;
  height: 1.45rem;
  margin-left: auto;
  border: 1px solid #46617f;
  border-radius: 999px;
  background: #17293d;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#sessions .tool-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #c3d3e4;
  transform: translateY(-50%);
  transition: transform 0.18s ease, background 0.18s ease;
}
#sessions .tool-card--toggle input:checked ~ .tool-switch { border-color: #6eb7ff; background: #1d4f7d; }
#sessions .tool-card--toggle input:checked ~ .tool-switch::after { background: #fff; transform: translate(1.05rem, -50%); }
#sessions .tool-card--toggle input:focus-visible ~ .tool-switch { outline: 3px solid #9ed4ff; outline-offset: 2px; }

@media (max-width: 760px) {
  #sessions .sessions-tools-actions { gap: 0.95rem; padding: 0.85rem 0.8rem 1rem; }
  #sessions .tools-grid { grid-template-columns: 1fr; }
  #sessions .tool-card { min-height: 0; }
  #sessions .tool-card-icon { width: 1.95rem; height: 1.95rem; font-size: 0.92rem; }
}

#sessions .sessions-list-heading {
  align-items: flex-end;
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid #2a3b52;
}
#sessions .sessions-list-heading h3 { margin: 0.2rem 0 0.35rem; color: #f5f9ff; font-size: 1.32rem; line-height: 1.25; }
#sessions .sessions-list-heading p:not(.sessions-content-kicker) { margin: 0; color: #bacbdd; font-size: 0.86rem; line-height: 1.5; }
#sessions .sessions-content-kicker { margin: 0; color: #91c8fa; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.11em; }
#sessions .sessions-list-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.65rem; }
#sessions .sessions-create-button { justify-content: center; min-height: 2.85rem; padding: 0.7rem 1rem; white-space: nowrap; }
#sessions .sessions-create-button > span { font-size: 1.3rem; line-height: 0.9; }
#sessions .sessions-report-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; }
#sessions .sessions-report-actions > span { color: #b7c9dc; font-size: 0.75rem; }
#sessions .sessions-report-actions button { min-height: 2.25rem; }

#sessions #sessions-groupes-filtres {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1.2rem;
  border: 1px solid #334863;
  border-radius: 14px;
  background: #13243b;
  box-shadow: none;
}
#sessions .sessions-filter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
#sessions .sessions-filter-heading h4 { margin: 0 0 0.2rem; color: #f7faff; font-size: 1rem; }
#sessions .sessions-filter-heading p { margin: 0; color: #b9c9dc; font-size: 0.8rem; line-height: 1.45; }
#sessions .sessions-filter-result {
  align-self: center;
  color: #d5e9fc;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}
#sessions .sessions-filter-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
#sessions .sessions-filter-field { min-width: 0; }
#sessions .sessions-filter-search { grid-column: span 2; }
#sessions .sessions-filter-field > label { display: block; margin: 0 0 0.4rem; color: #e0ebf7; font-size: 0.77rem; font-weight: 700; }
#sessions .sessions-filter-field .form-input,
#sessions .sessions-filter-field .form-select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  font-size: 0.87rem;
}
#sessions .sessions-filter-field .form-input:focus,
#sessions .sessions-filter-field .form-select:focus { outline: 2px solid #91cfff; outline-offset: 2px; }
#sessions .sessions-search-wrap { position: relative; }
#sessions .sessions-search-wrap > span { position: absolute; top: 50%; left: 0.85rem; z-index: 1; transform: translateY(-50%); color: #c7daee; font-size: 1.4rem; line-height: 1; pointer-events: none; }
#sessions .sessions-search-wrap .form-input { padding-left: 2.5rem; }
#sessions .sessions-filter-footer { display: flex; justify-content: flex-end; padding-top: 0.1rem; }
#sessions .sessions-reset-button { min-height: 2.5rem; color: #d9eaff; border-color: #59718e; }
#sessions .sessions-filter-empty { display: grid; justify-items: center; gap: 0.65rem; padding: 2.2rem 1rem; color: #d2dfed; }
#sessions .sessions-filter-empty strong { color: #f5f9ff; }
#sessions .sessions-filter-empty button { min-height: 2.7rem; margin-top: 0.2rem; }

#sessions .active-sessions-folder,
#sessions .archive-folder { border-color: #324b68; }
#sessions .active-sessions-summary,
#sessions .archive-folder-summary { min-height: 3.75rem; color: #e6f1fd; font-size: 0.94rem; }
#sessions .active-sessions-summary span { color: #c4d3e4; font-size: 0.8rem; }
#sessions .active-sessions-body { padding: 0.9rem; }
#sessions .sg-card { border-color: #344c68; background: #0d1c2f; }
#sessions .sg-card-summary { align-items: center; min-height: 6rem; }
#sessions .sg-drag-handle { align-self: center; padding-left: 0.65rem; color: #b7cbe0; font-size: 1.15rem; line-height: 1; }
#sessions .sg-card-summary-inner { padding: 1rem; }
#sessions .sg-card-title { color: #f6f9fe; font-size: 1rem; line-height: 1.35; }
#sessions .sg-card-sub { color: #c0cede; font-size: 0.8rem; line-height: 1.6; }
#sessions .sg-card-counters { gap: 0.4rem; }
#sessions .sg-counter { min-width: 5.2rem; min-height: 3.25rem; justify-content: center; padding: 0.35rem 0.55rem; background: #172a42; border-color: #354c67; }
#sessions .sg-counter-val { font-size: 1.05rem; }
#sessions .sg-counter-lbl { margin-top: 0.28rem; color: #cad8e8; font-size: 0.63rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
#sessions .sg-counter.c-total .sg-counter-val { color: #eef5fc; }
#sessions .sg-card-chevron { color: #bbd0e6; }
#sessions .sg-card-content { padding: 1rem 1.2rem 1.25rem; }
#sessions .sg-card-head { gap: 0.85rem; }
#sessions .sg-btns button { min-height: 2.45rem; }
#sessions .sg-stagiaires-table-wrap,
#sessions .sessions-scroll-region { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #354c67; border-radius: 9px; }
#sessions .archive-table { min-width: 840px; }
#sessions .sg-stagiaires-table { min-width: 1080px; }
#sessions .sessions-scroll-hint { display: none; margin: 0.4rem 0; color: #c4d5e7; font-size: 0.76rem; }
#sessions .sessions-table th { color: #c2d2e4; }
#sessions .sessions-table td { color: #e3ebf4; }
#sessions .sessions-tab-btn:focus-visible,
#sessions .sessions-tools > summary:focus-visible,
#sessions .sg-card-summary:focus-visible,
#sessions .active-sessions-summary:focus-visible,
#sessions .archive-folder-summary:focus-visible,
#sessions .sessions-scroll-region:focus-visible,
#sessions .sg-stagiaires-table-wrap:focus-visible { outline: 3px solid #9ed4ff; outline-offset: 2px; }

/* Le thème tricolore impose une encre claire/sombre : harmoniser les champs. */
html.theme-tricolore #sessions .sessions-page-heading h2,
body.theme-tricolore #sessions .sessions-page-heading h2 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.theme-tricolore #sessions-groupes-filtres .form-input,
html.theme-tricolore #sessions-groupes-filtres .form-select,
body.theme-tricolore #sessions-groupes-filtres .form-input,
body.theme-tricolore #sessions-groupes-filtres .form-select {
  background: #fff !important;
  color: #0c2340 !important;
  -webkit-text-fill-color: #0c2340 !important;
  border-color: #a7c4df !important;
  color-scheme: light;
}
html.theme-tricolore #sessions-groupes-filtres .form-input::placeholder,
body.theme-tricolore #sessions-groupes-filtres .form-input::placeholder { color: #52677e !important; -webkit-text-fill-color: #52677e !important; }
html.theme-tricolore #sessions-groupes-filtres .form-select option,
body.theme-tricolore #sessions-groupes-filtres .form-select option { color: #0c2340; background: #fff; }
html.theme-tricolore #sessions .sessions-search-wrap > span,
body.theme-tricolore #sessions .sessions-search-wrap > span { color: #52677e; }
html.theme-tricolore #sessions .sessions-list-heading,
body.theme-tricolore #sessions .sessions-list-heading { padding: 1rem; border-radius: 12px; }

@media (max-width: 950px) {
  #sessions .sessions-page-heading-note { display: none; }
  #sessions .sessions-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sessions .sessions-scroll-hint { display: block; }
}
@media (max-width: 768px) {
  #sessions .sessions-page-heading { padding: 1.25rem; }
  #sessions .sessions-list-heading { align-items: stretch; }
  #sessions .sessions-list-actions { width: 100%; align-items: stretch; }
  #sessions .sessions-create-button { width: 100%; }
  #sessions .sessions-report-actions { justify-content: flex-start; }
  #sessions .sessions-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sessions .sessions-filter-heading { flex-wrap: wrap; }
  #sessions .sessions-filter-result { text-align: left; }
  #sessions .sg-card-summary {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 2rem;
    align-items: start;
    padding-left: 4px;
  }
  #sessions .sg-card-summary::before { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; }
  #sessions .sg-drag-handle { grid-column: 1; grid-row: 1; margin-top: 1.05rem; }
  #sessions .sg-card-summary-inner { grid-column: 2; grid-row: 1; padding: 0.9rem 0.2rem 0.65rem; }
  #sessions .sg-card-chevron { grid-column: 3; grid-row: 1; margin-top: 1.1rem; }
  #sessions .sg-card-counters { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; padding: 0 0.6rem 0.85rem 0; }
  #sessions .sg-counter { flex: 1 1 5.2rem; min-width: 5.2rem; min-height: 3.25rem; }
  #sessions .sg-counter-lbl { font-size: 0.63rem; }
  #sessions .sg-card-content { padding: 0.85rem; }
  #sessions .active-sessions-body { padding: 0.55rem; }
  #sessions .sg-btns button, #sessions .sg-student-actions > button { min-height: 2.75rem; }
}
@media (max-width: 480px) {
  #sessions > .container { padding-left: 0.8rem; padding-right: 0.8rem; }
  #sessions .sessions-tab-btn { gap: 0.5rem; min-height: 4.4rem; padding: 0.6rem; font-size: 0.81rem; }
  #sessions .sessions-tab-icon { width: 2.1rem; height: 2.1rem; }
  #sessions .sessions-tab-btn small { font-size: 0.68rem; }
  #sessions .sessions-tools-more { display: none; }
  #sessions .sessions-tools > summary::after { margin-left: auto; }
  #sessions .sessions-tools-count { display: none; }
  #sessions .tools-grid { grid-template-columns: 1fr; }
  #sessions #sessions-groupes-filtres { padding: 1rem; }
  #sessions .sessions-filter-footer { justify-content: stretch; }
  #sessions .sessions-reset-button { width: 100%; }
  #sessions .active-sessions-summary, #sessions .archive-folder-summary { flex-wrap: wrap; gap: 0.45rem; padding: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  #sessions .sessions-tab-btn,
  #sessions .sg-card,
  #sessions .sessions-tools > summary::after,
  #sessions .tool-card,
  #sessions .tool-card:hover,
  #sessions .tool-switch,
  #sessions .tool-switch::after { transition: none; }
  #sessions .tool-card:hover { transform: none; }
}

/* ============================================================
   ESPACE FORMATION — navigation par objectifs et repères communs
   Les actions et états métier restent ceux de l'application.
============================================================ */
.navbar,
html.theme-tricolore .navbar,
body.theme-tricolore .navbar { overflow: visible; }
.nav-links { overflow: visible; gap: 0.2rem; }
.nav-links > .nav-link { background: transparent; white-space: nowrap; }
.nav-more { position: relative; flex: 0 0 auto; }
.nav-more > summary {
  display: flex; align-items: center; gap: 0.35rem; list-style: none;
  color: #cfdae9; border: 1px solid transparent; border-radius: 9px;
  padding: 0.45rem 0.65rem; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more[open] > summary, .nav-more.has-active > summary, .nav-more > summary:hover {
  color: #fff; background: rgba(88, 157, 255, 0.14); border-color: rgba(147, 197, 253, 0.22);
}
.nav-more-panel {
  position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 1010;
  width: 17.5rem; max-height: min(72vh, 34rem); overflow-y: auto;
  padding: 0.65rem; background: #102238; border: 1px solid #34516f;
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.nav-more-panel .nav-link {
  display: block; width: 100%; padding: 0.58rem 0.65rem;
  text-align: left; white-space: normal; background: transparent; color: #e2eaf5;
  border-radius: 8px; font-size: 0.8rem;
}
.nav-more-label {
  padding: 0.75rem 0.65rem 0.3rem; color: #a9bfd6;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
}
.mobile-link { width: 100%; border: 0; background: transparent; text-align: left; }
.mobile-link.active { background: rgba(96, 165, 250, 0.19); color: #fff; font-weight: 750; }
#network-status-container {
  position: relative; top: auto; right: auto; z-index: 2;
  min-height: 2.15rem; justify-content: flex-end;
  padding: 0.35rem clamp(1rem, 4vw, 3rem) 0;
}
.network-unknown { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
/* Barre d'état (témoin de synchronisation) — ÉPINGLÉE sous le menu.
   Auparavant placée dans le flux, elle passait SOUS la navbar fixe (z-index
   1000 contre 90) : invisible, ou tronquée par le bord haut de l'écran, sur
   toutes les rubriques. Elle est maintenant fixe, juste sous le menu, et
   au-dessus du fil d'Ariane (z-index 950). Sa hauteur est réservée dans la
   page par syncChromeOffsets() (ux-proquelec.js), qui décale le fil d'Ariane
   et le contenu de la valeur exacte mesurée. */
#cockpit-top-bar {
  padding: 0.4rem clamp(1rem, 4vw, 3rem);
  gap: 0.5rem 1rem;
  position: fixed;
  top: var(--nav-offset);
  left: 0;
  right: 0;
  z-index: 960;
}
@media (max-width: 760px) {
  #cockpit-top-bar { padding: 0.3rem 0.75rem; gap: 0.25rem 0.75rem; }
  #cockpit-top-bar .workspace-status-details summary { font-size: 0.72rem; }
  #cockpit-top-bar #cockpit-sync-status { font-size: 0.7rem !important; }
}
.workspace-status-details { min-width: 0; }
.workspace-status-details summary { color: #d7e7f7; cursor: pointer; font-size: 0.77rem; font-weight: 750; }
.workspace-status-details summary span { color: #b5c9dc; font-weight: 500; }
.workspace-status-details p { margin: 0.45rem 0; color: #b5c9dc; font-size: 0.75rem; }
.workspace-status-values { display: flex; gap: 0.5rem 1.1rem; flex-wrap: wrap; padding: 0.35rem 0; font-size: 0.76rem; }
html.theme-tricolore .network-online, body.theme-tricolore .network-online { color: #065f46; background: #d6f5e5; }
html.theme-tricolore .network-offline, body.theme-tricolore .network-offline { color: #991b1b; background: #fee2e2; }
html.theme-tricolore .network-unknown, body.theme-tricolore .network-unknown { color: #334155; background: #e2e8f0; }

/* Accueil : actions, non promesses de données ou d'étapes accomplies. */
.workspace-home {
  min-height: 0; display: block; padding: 1.7rem clamp(1rem, 4vw, 3rem) 3.5rem;
  background: linear-gradient(135deg, #071827, #0b2037 60%, #102842);
  overflow: hidden; text-align: left;
}
.workspace-home-inner { position: relative; z-index: 1; width: min(100%, 1380px); margin: 0 auto; }
.workspace-home-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.workspace-home-copy { padding: clamp(1.5rem, 4vw, 4rem) 0; }
.workspace-eyebrow, .workspace-guide-kicker {
  margin: 0 0 0.8rem; color: #9ac6fc; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em;
}
.workspace-eyebrow span { color: #63d4ba; margin-right: 0.4rem; }
.workspace-home h1 {
  margin: 0; color: #f7fbff; font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 1.08; font-weight: 850; letter-spacing: -0.045em;
}
.workspace-home h1 span { color: #8dc3ff; }
.workspace-lede { max-width: 38rem; margin: 1.2rem 0 0; color: #c4d3e6; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; }
.workspace-home-actions { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.7rem; }
.workspace-home-actions button { min-height: 2.9rem; }
.workspace-guide {
  padding: 1.6rem; background: linear-gradient(155deg, #152c47, #0d1d30);
  border: 1px solid rgba(158, 193, 230, 0.22); border-radius: 20px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.2);
}
.workspace-guide h2 { margin: 0; color: #f8fbff; font-size: 1.2rem; line-height: 1.3; }
.workspace-guide > p:not(.workspace-guide-kicker) { margin: 0.4rem 0 0; color: #bdcde0; font-size: 0.83rem; line-height: 1.55; }
.workspace-guide ol { list-style: none; margin-top: 1.15rem; display: grid; gap: 0.65rem; }
.workspace-guide li { display: flex; gap: 0.75rem; align-items: center; padding: 0.45rem 0; }
.workspace-guide li > span { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: rgba(104, 167, 244, 0.13); color: #a8d0ff; font-size: 0.7rem; font-weight: 800; }
.workspace-guide li strong, .workspace-guide li small { display: block; }
.workspace-guide li strong { color: #f5f9ff; font-size: 0.86rem; }
.workspace-guide li small { color: #b6c8db; font-size: 0.76rem; }
.workspace-shortcuts-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.25rem 0 1rem; }
.workspace-shortcuts-heading .workspace-eyebrow { margin-bottom: 0.3rem; }
.workspace-shortcuts-heading h2 { margin: 0; color: #f5f9ff; font-size: 1.35rem; }
.workspace-shortcuts-heading > p { color: #b9cce0; font-size: 0.84rem; }
.workspace-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.workspace-card {
  display: flex; align-items: flex-start; gap: 0.9rem; min-width: 0; min-height: 112px;
  padding: 1.15rem; border-radius: 14px; border: 1px solid rgba(151, 188, 230, 0.2);
  background: #102339; color: #f7fbff; text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.workspace-card:hover { background: #17324f; border-color: #6ea8eb; transform: translateY(-2px); }
.workspace-card-icon { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 9px; background: rgba(77, 152, 241, 0.18); color: #a7d1ff; font-size: 1.2rem; font-weight: 800; }
.workspace-card > span:nth-child(2) { flex: 1; min-width: 0; }
.workspace-card strong, .workspace-card small { display: block; }
.workspace-card strong { color: #fff; font-size: 0.94rem; line-height: 1.3; }
.workspace-card small { margin-top: 0.35rem; color: #becfe2; font-size: 0.78rem; line-height: 1.5; }
.workspace-card-arrow { flex: none; color: #8cbde9; font-size: 1rem; }
.workspace-home-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; margin-top: 1.5rem; }
.workspace-home-bottom > p { max-width: 53rem; margin: 0; color: #b8cbe0; font-size: 0.79rem; line-height: 1.55; }
.workspace-home-bottom > p strong { color: #e6f0fc; }
.workspace-home-indicators { max-width: 27rem; padding: 0.65rem 0.85rem; border: 1px solid rgba(151, 188, 230, 0.25); border-radius: 10px; background: #102339; color: #d9e8f8; font-size: 0.78rem; }
.workspace-home-indicators summary { cursor: pointer; color: #d5e9ff; font-weight: 750; }
.workspace-home-indicators p { margin: 0.65rem 0 0; color: #bdcde0; line-height: 1.5; }
.workspace-home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-top: 0.85rem; }
.workspace-home-stats strong, .workspace-home-stats span { display: block; }
.workspace-home-stats strong { color: #fff; font-size: 1.1rem; }
.workspace-home-stats span { color: #c2d2e3; font-size: 0.68rem; }
.workspace-resource-links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.workspace-resource-links button { font-size: 0.75rem; padding: 0.45rem 0.65rem; }

/* Titres et zones sensibles : cohérence sans changer les handlers. */
.section .workspace-section-header {
  text-align: left; margin: 0 0 1.5rem; padding: clamp(1.2rem, 2vw, 1.8rem);
  color: #edf6ff; background: linear-gradient(130deg, #142e4b, #102237);
  border: 1px solid rgba(151, 188, 230, 0.24); border-radius: 16px;
}
.section .workspace-section-header .section-tag { color: #a8d0ff; background: rgba(67, 143, 230, 0.15); border: 1px solid rgba(120, 179, 244, 0.22); }
.section .workspace-section-header .section-title { color: #f8fbff; margin: 0.4rem 0; font-size: clamp(1.55rem, 2.4vw, 2rem); }
.section .workspace-section-header .section-desc { color: #c5d7e9; max-width: 65rem; margin: 0; line-height: 1.6; }
html.theme-tricolore .section > .container > .workspace-section-header .section-title,
html.theme-tricolore .section > .container > .workspace-section-header .section-desc,
html.theme-tricolore .section > .container > .workspace-section-header p,
body.theme-tricolore .section > .container > .workspace-section-header .section-title,
body.theme-tricolore .section > .container > .workspace-section-header .section-desc,
body.theme-tricolore .section > .container > .workspace-section-header p { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.theme-tricolore .section .workspace-section-header .section-tag,
body.theme-tricolore .section .workspace-section-header .section-tag { color: #e4f2ff !important; -webkit-text-fill-color: #e4f2ff !important; }
.workspace-danger-zone { padding: 0.6rem 0.8rem; border: 1px solid #a85d5d; border-radius: 9px; background: #2e1c26; color: #ffe4e4; font-size: 0.78rem; }
.workspace-danger-zone summary { cursor: pointer; color: #ffd0d0; font-weight: 800; }
.workspace-danger-zone p { max-width: 38rem; margin: 0.6rem 0; color: #f5d3d3; line-height: 1.5; }
.workspace-danger-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.workspace-recalcul-zone { flex-basis: 100%; }

/* Visibilité clavier : les réglages globaux retirent outline par défaut. */
.workspace-home button:focus-visible, .nav-link:focus-visible, .nav-more summary:focus-visible,
.mobile-link:focus-visible, .hamburger:focus-visible, .workspace-danger-zone summary:focus-visible,
.workspace-status-details summary:focus-visible, .workspace-home-indicators summary:focus-visible, .ux-parcours-step:focus-visible,
.ux-breadcrumb-home:focus-visible { outline: 3px solid #facc70; outline-offset: 3px; }

@media (max-width: 1320px) {
  .nav-more > summary, .nav-links > .nav-link { font-size: 0.72rem; padding-left: 0.38rem; padding-right: 0.38rem; }
}
@media (max-width: 1099px) { .nav-links { display: none; } }
@media (max-width: 900px) {
  .workspace-home-intro { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.7fr); gap: 1rem; }
  .workspace-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-home-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .workspace-home { padding-top: 0.8rem; }
  .workspace-home-intro { display: block; }
  .workspace-home-copy { padding: 1.3rem 0; }
  .workspace-guide { display: none; }
  .workspace-shortcuts-heading { display: block; margin-top: 1.3rem; }
  .workspace-shortcuts-heading > p { margin-top: 0.4rem; }
  .workspace-home h1 { font-size: clamp(2.2rem, 9vw, 3.25rem); }
  .workspace-home-actions button { width: 100%; justify-content: center; }
  .workspace-card { min-height: 100px; padding: 0.9rem; }
}
@media (max-width: 440px) {
  .workspace-shortcuts { grid-template-columns: 1fr; }
  .workspace-card { min-height: 80px; }
  .workspace-home-stats { grid-template-columns: 1fr; }
  #network-status-container { padding-right: 1rem; }
}

/* Phase 2 — aperçu additionnel de lecture, sans modifier les styles legacy. */
.su-apercu{margin:1.2rem 0;padding:1rem;border:1px solid #334d68;border-radius:16px;background:#0c1929;color:#e5edf6}
.su-apercu>summary{cursor:pointer;font-weight:700;padding:.35rem;list-style-position:inside;color:#8edbff}
.su-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.2rem 0}.su-intro h3{margin:0 0 .4rem}.su-intro p{color:#b8c9da;margin:0}
.su-filtres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.su-filtres label{display:grid;gap:.35rem;font-size:.85rem;color:#c5d7e8}.su-filtres input,.su-filtres select{width:100%;min-width:0;padding:.65rem;border-radius:8px;background:#12263a;color:#f0f6fc;border:1px solid #496079}
.su-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.su-carte{display:flex;flex-direction:column;gap:.7rem;padding:1rem;border-radius:12px;border:1px solid #314760;background:#102033;min-width:0;overflow-wrap:anywhere}.su-session{font-size:.75rem;color:#8bcce9}.su-identite h4{font-size:1.05rem;margin:.3rem 0}.su-identite p{font-size:.85rem;color:#b8c9da;margin:0}.su-carte dl{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0}.su-carte dt{font-size:.75rem;color:#a6bdd1}.su-carte dd{margin:.15rem 0 0;font-weight:600;font-size:.85rem}.su-apercu button{padding:.6rem .85rem;border-radius:8px;background:#173a54;color:#e6f6ff;border:1px solid #427496;cursor:pointer}.su-carte button{margin-top:auto;align-self:flex-start}.su-apercu button:disabled{opacity:.55;cursor:not-allowed}.su-apercu :is(button,input,select,summary):focus-visible{outline:3px solid #67e8f9;outline-offset:3px}.su-alerte{color:#fbd38d;font-size:.8rem}.su-vide{padding:2rem;text-align:center;color:#bdcede}
@media(max-width:760px){.su-intro{align-items:flex-start;flex-direction:column}.su-filtres{grid-template-columns:repeat(2,minmax(0,1fr))}.su-grille{grid-template-columns:1fr}}
@media(max-width:420px){.su-filtres{grid-template-columns:1fr}.su-apercu{padding:.7rem}.su-carte{padding:.8rem}}
.su-apercu .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Phase 3 — lot A : dossier consultatif indépendant des éditeurs historiques. */
.su-dossier{position:fixed;inset:0;z-index:12000;background:rgba(2,6,23,.88);display:flex;align-items:center;justify-content:center;padding:1rem;color:#e5edf6}
.su-dossier-panneau{background:#0c1929;border:1px solid #496079;border-radius:14px;padding:1.2rem;width:min(100%,1050px);max-height:92vh;overflow:auto;overflow-wrap:anywhere}.su-dossier-panneau>button{padding:.7rem;background:#173a54;color:#fff;border:1px solid #67b6da;border-radius:8px;cursor:pointer}.su-dossier h2{margin:.4rem 0}.su-dossier header p{color:#b8c9da}.su-dossier details{border:1px solid #334d68;padding:.8rem;border-radius:8px;margin:.7rem 0}.su-dossier summary{cursor:pointer;font-weight:700;color:#8edbff}.su-dossier-donnees{margin:.65rem 0}.su-dossier-donnees>div{display:grid;grid-template-columns:minmax(0,25%) minmax(0,1fr);gap:.7rem;padding:.35rem;border-bottom:1px solid #25374b}.su-dossier dt{color:#a6bdd1}.su-dossier dd{margin:0;min-width:0;white-space:pre-wrap}.su-dossier img{max-width:100%;max-height:240px;object-fit:contain}.su-dossier :is(button,summary):focus-visible{outline:3px solid #67e8f9;outline-offset:3px}
@media(max-width:600px){.su-dossier{padding:.35rem}.su-dossier-panneau{padding:.7rem;max-height:96vh}.su-dossier-donnees>div{grid-template-columns:1fr;gap:.2rem}}
/* Lot B : le même éditeur papier, monté dans le dossier, pas une seconde modale. */
.su-dossier [data-dossier-editer]{padding:.65rem;margin:.6rem 0;background:#173a54;color:#e6f6ff;border:1px solid #427496;border-radius:8px;cursor:pointer}
.su-dossier .dossier-editeur-integre .grille-modal-dialog{max-width:none!important;max-height:none!important;overflow:visible!important;box-shadow:none!important}
.su-dossier .dossier-editeur-integre #modal-saisie-grille-content{max-height:none!important;overflow:visible!important}
.su-dossier .dossier-editeur-integre{margin:1rem 0}
.su-dossier .dossier-editeur-integre #modal-pratique-mode{max-width:100%;min-width:0}
/* Écran unifié principal : la correction se fait dans la carte, sans quitter la liste. */
.su-principal{margin:1.2rem 0}
.su-principal .su-intro{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.su-principal .su-intro h3{margin:0 0 .35rem}
.su-principal .su-intro p{margin:0;color:#b8c9da;max-width:70ch}
.su-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.su-actions button{margin-top:0}
.su-carte .su-btn-principal{background:#1f6f8b;border-color:#67b6da}
.su-carte--edition{grid-column:1 / -1;border-color:#67b6da}
.su-editeur{margin-top:.8rem;padding:.85rem;border:1px dashed #4b7ea1;border-radius:10px;background:#0c1929}
.su-editeur-titre{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .7rem;font-weight:700;color:#bfe6f7}
.su-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}
.su-champ{display:grid;gap:.3rem;font-size:.8rem;color:#c5d7e8}
.su-champ input,.su-champ select{width:100%;min-width:0;padding:.55rem;border-radius:8px;background:#12263a;color:#f0f6fc;border:1px solid #496079}
.su-champ input:disabled,.su-champ select:disabled{opacity:.6}
.su-badge{font-size:.72rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:rgba(251,191,36,.16);border:1px solid #f59e0b;color:#fbbf24}
.su-succes{color:#86efac;font-size:.85rem;margin:.5rem 0 0}
.su-editeur-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.su-reponses{margin-top:.8rem}
.su-carte--edition .su-reponses{margin-top:.6rem}
/* Lot A — compteurs de session, filtre d'état et provenance des réponses. */
.su-compteurs{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 .2rem}
.su-compteur{display:flex;flex-direction:column;gap:.1rem;min-width:6.5rem;padding:.55rem .8rem;border:1px solid #3d5a75;border-radius:10px;background:#0f2133}
.su-compteur strong{font-size:1.35rem;line-height:1.1;color:#e8f4fb}
.su-compteur span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#9fb8cb}
.su-provenance{margin-top:.8rem;padding:.85rem;border:1px solid #3d5a75;border-radius:10px;background:#0c1929}
.su-prov-titre{display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;margin:0 0 .6rem;font-weight:700;color:#bfe6f7}
.su-prov-note{font-weight:400;font-size:.76rem;color:#9fb8cb}
.su-prov-comptes{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .7rem}
.su-prov-compte-item{font-size:.76rem;padding:.2rem .55rem;border-radius:999px;background:#12263a;border:1px solid #3d5a75;color:#cfe3f1}
.su-prov-liste{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.su-prov-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.35rem .45rem;border-radius:8px;background:#0f2133;border:1px solid #253c52}
.su-prov-liste code{font-size:.76rem;color:#8fd0ea;overflow-wrap:anywhere}
.su-prov-valeur{font-size:.82rem;color:#eef6fc;overflow-wrap:anywhere}
.su-prov-auteur{font-size:.72rem;color:#8fa8bd;margin-left:auto}
.su-prov-badge{font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.su-prov-badge--initiale{background:rgba(59,130,246,.16);border-color:#3b82f6;color:#93c5fd}
.su-prov-badge--ajustee{background:rgba(251,191,36,.16);border-color:#f59e0b;color:#fbbf24}
.su-prov-badge--ajoutee{background:rgba(16,185,129,.16);border-color:#10b981;color:#6ee7b7}
.su-prov-badge--manquante{background:rgba(239,68,68,.16);border-color:#ef4444;color:#fca5a5}
.su-prov-badge--tranchee{background:rgba(168,85,247,.16);border-color:#a855f7;color:#d8b4fe}
.su-prov-badge--non-tracee{background:rgba(148,163,184,.16);border-color:#64748b;color:#cbd5e1}
.su-prov-manquantes,.su-prov-tranchees{margin:.3rem 0 .6rem;padding-left:1.1rem;display:grid;gap:.3rem;font-size:.82rem;color:#dbe9f4}
.su-prov-manquantes li,.su-prov-tranchees li{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.su-prov-actions{margin-top:.5rem}
.su-provenance h5{margin:.7rem 0 0;font-size:.82rem;color:#bfe6f7}
/* Lot B — demande de complément ciblé. */
.su-complement{margin-top:.8rem;padding:.85rem;border:1px solid #3d5a75;border-radius:10px;background:#0c1929}
.su-complement-titre{display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;margin:0 0 .6rem;font-weight:700;color:#bfe6f7}
.su-complement-liste{display:grid;gap:.35rem;max-height:22rem;overflow:auto;margin:.3rem 0 .6rem}
.su-complement-case{display:flex;gap:.55rem;align-items:flex-start;padding:.45rem .55rem;border:1px solid #2c4257;border-radius:8px;background:#0f2133;cursor:pointer}
.su-complement-case input{margin-top:.25rem;flex:0 0 auto}
.su-complement-case span{display:grid;gap:.15rem}
.su-complement-case strong{font-size:.85rem;color:#e8f4fb;font-weight:600}
.su-complement-case em{font-style:normal;font-size:.72rem;color:#8fa8bd;overflow-wrap:anywhere}
.su-complement-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.su-complement-lien{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}
.su-complement-lien input{flex:1 1 16rem;min-width:0;padding:.55rem;border-radius:8px;background:#12263a;color:#e8f4fb;border:1px solid #496079;font-size:.82rem}
.su-complement-lien button{flex:0 0 auto}
@media(max-width:760px){.su-complement-lien input{flex:1 1 100%}.su-complement-lien button{flex:1 1 100%}}
@media(max-width:760px){.su-champs{grid-template-columns:1fr}.su-actions button{flex:1 1 100%}}

@media(max-width:600px){.su-dossier .dossier-editeur-integre [id^="case-pratique-"]>div:last-child{flex-wrap:wrap;width:100%}.su-dossier .dossier-editeur-integre [id^="case-pratique-"]>div:last-child>button{flex:1 1 42%;min-width:90px;overflow-wrap:normal;word-break:normal}}

/* ============================================================
   Bandeau « Vos sessions » — la gestion de session dans l'écran unifié.
   Remplace la carte de session de la liste historique : mêmes actions,
   présentées une fois, sans doubler l'affichage des dossiers.
   ============================================================ */
.su-sessions{margin:1.2rem 0;padding:1rem;border:1px solid #334d68;border-radius:16px;background:#0c1929;color:#e5edf6}
.su-sessions-tete{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:.9rem}
.su-sessions-tete h3{margin:0 0 .35rem;font-size:1.05rem}
.su-sessions-tete p{margin:0;color:#b8c9da;font-size:.85rem;max-width:70ch}
.su-sessions-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.su-session{display:flex;flex-direction:column;gap:.65rem;padding:.95rem;border:1px solid #314760;border-radius:12px;background:#102033;min-width:0}
.su-session-entete{display:grid;gap:.2rem}
.su-session-entete h4{margin:0;font-size:1rem;overflow-wrap:anywhere}
.su-client{align-self:flex-start;padding:.12rem .5rem;border-radius:999px;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;background:rgba(59,130,246,.16);border:1px solid #3b82f6;color:#93c5fd}
.su-session-meta{margin:0;font-size:.76rem;color:#9fb8cb;overflow-wrap:anywhere}
.su-session-fermee{color:#34d399;font-weight:700}
.su-session-chiffres{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.78rem;color:#b8c9da}
.su-session-chiffres strong{color:#eaf4fb;font-size:.95rem;margin-right:.15rem}
.su-chiffre-fav strong{color:#34d399}
.su-chiffre-def strong{color:#f87171}
.su-session-boutons{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;margin-top:auto}
.su-menu{position:relative}
.su-menu>summary{cursor:pointer;padding:.6rem .85rem;border-radius:8px;background:#173a54;color:#e6f6ff;border:1px solid #427496;list-style:none;font-size:.85rem}
.su-menu>summary::-webkit-details-marker{display:none}
.su-menu>summary::after{content:' ▾';font-size:.75rem;opacity:.8}
.su-menu[open]>summary::after{content:' ▴'}
.su-menu-contenu{position:absolute;z-index:40;left:0;top:calc(100% + .35rem);width:min(24rem,86vw);max-height:60vh;overflow:auto;padding:.8rem;border-radius:12px;border:1px solid #496079;background:#0b1725;box-shadow:0 18px 40px rgba(2,6,23,.6)}
.su-menu-groupe{margin:.55rem 0 .3rem;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#7fb6d8}
.su-menu-groupe:first-child{margin-top:0}
.su-menu-boutons{display:grid;gap:.3rem}
.su-menu-boutons button{text-align:left;padding:.45rem .6rem;border-radius:7px;background:#122a3f;color:#e6f6ff;border:1px solid #2c4257;cursor:pointer;font-size:.82rem}
.su-menu-boutons button:hover{background:#173a54;border-color:#67b6da}
.su-menu-boutons .su-menu-danger{color:#fecaca;border-color:#7f1d1d}
.su-menu-boutons .su-menu-danger:hover{background:#3f1414}
.su-session-message:empty{display:none}
.su-session-message{margin:.4rem 0 0;font-size:.8rem;color:#fbd38d}
.su-session-note{margin:.4rem 0 0;font-size:.78rem;color:#9fb8cb}
/* LOT B.4 — une ligne de stockage mesurée, discrète et lisible. */
.su-stockage{margin:.55rem 0 0;font-size:.78rem;color:#9fb8cb;line-height:1.5}
.su-stockage[hidden]{display:none}
/* Une fiche isolée en erreur reste visible, sans casser la grille. */
.su-carte--illisible{border-color:#b45309;background:#2a1a08}
.su-session-illisible{border-color:#b45309;background:#2a1a08}
/* Les trois actions reprises de l'ancien tableau, dans un menu discret. */
.su-plus{margin-top:.35rem}
.su-plus>summary{cursor:pointer;font-size:.78rem;color:#8bcce9;list-style:none}
.su-plus>summary::-webkit-details-marker{display:none}
.su-plus>summary::before{content:'▸ '}
.su-plus[open]>summary::before{content:'▾ '}
.su-plus-contenu{display:grid;gap:.3rem;margin-top:.4rem}
.su-plus-contenu button{text-align:left;padding:.45rem .6rem;border-radius:7px;background:#122a3f;color:#e6f6ff;border:1px solid #2c4257;cursor:pointer;font-size:.82rem}
.su-plus-contenu .su-menu-danger{color:#fecaca;border-color:#7f1d1d}
/* Liste historique : repliée, construite seulement si on l'ouvre. */
.sessions-historique{margin:1.2rem 0;padding:.9rem 1rem;border:1px solid #25374b;border-radius:14px;background:rgba(12,25,41,.6)}
.sessions-historique>summary{cursor:pointer;font-weight:700;color:#9fb8cb;list-style:none}
.sessions-historique>summary::-webkit-details-marker{display:none}
.sessions-historique>summary::before{content:'▸ '}
.sessions-historique[open]>summary::before{content:'▾ '}
.sessions-historique-note{margin:.5rem 0 0;font-size:.78rem;color:#7f95a8}
@media(max-width:900px){.su-sessions-liste{grid-template-columns:1fr}}
@media(max-width:760px){.su-session-boutons>*{flex:1 1 100%}.su-menu-contenu{position:static;width:100%;max-height:none}}
.su-chiffre-attention strong{color:#fbbf24}
.su-session-verdicts{padding-top:.15rem;border-top:1px solid #22374b}
.su-statut{margin:0}
.su-statut .su-badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;border:1px solid #3f5a74;color:#cfe3f2;background:#132b40}
.su-statut--attention .su-badge{border-color:#b45309;color:#fcd34d;background:rgba(180,83,9,.15)}
.sessions-archive-button{opacity:.8}
.sessions-archive-button[aria-expanded="true"]{border-color:#67b6da;color:#a5e8ff}

/* ── LOT B.2 — cartes d'index et états de lecture locale ───────────────────
   Quand le détail des dossiers n'est pas enregistré sur le poste, la liste
   affiche des cartes « seules » (identité, état, compteurs) et un bandeau qui
   explique POURQUOI, sans jamais laisser croire qu'il n'y a aucune session.
   Aucun style de bouton dangereux : ces cartes n'offrent aucune action de
   profondeur. */
.sg-etat-lecture,
.su-etat-lecture {
  display: block;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border-left: 4px solid #2d7dd2;
  background: rgba(45, 125, 210, 0.06);
  color: var(--text-primary, #1e293b);
  font-size: 0.9rem;
  line-height: 1.45;
}
.sg-etat-lecture strong { display: inline; }
.sg-etat-sans-idb { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.sg-etat-detail-absent { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
.sg-etat-hors-ligne { border-left-color: #64748b; background: rgba(100, 116, 139, 0.1); }
.sg-etat-corrompu { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.07); }
.sg-etat-erreur { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.07); }
.sg-etat-vide { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
.sg-etat-hydratation { border-left-color: #94a3b8; font-style: italic; }

.sg-card-index .sg-note-index,
.su-session-index .su-session-note {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.8rem;
  color: #b45309;
}
.sg-card-index { opacity: 0.96; }
.sg-card-index .sg-card-chiffres span { margin-right: 0.75rem; }