/* ═══════════════════════════════════════════════════════════════
   LEANBRIDGE — style.css
   Thème Enterprise — clair, professionnel, industriel
═══════════════════════════════════════════════════════════════ */

/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Fond & surfaces */
  --bg-page:   #f0f3f8;
  --bg-white:  #ffffff;
  --bg-subtle: #f8fafc;

  /* Couleur primaire (bleu corporate) */
  --primary:        #1a56db;
  --primary-dark:   #1447b2;
  --primary-light:  #e8effd;

  /* Textes */
  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --text-4: #9ca3af;

  /* Bordures */
  --border:       #e5e9f0;
  --border-light: #f1f4f8;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);

  /* Accents modules */
  --cyan:    #0891b2;
  --green:   #059669;
  --purple:  #7c3aed;
  --orange:  #ea580c;
  --yellow:  #d97706;
  --pink:    #db2777;
  --sky:     #0284c7;
  --emerald: #047857;
  --amber:   #b45309;

  /* Layout */
  --container: 1320px;
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;

  /* Transitions */
  --t:      0.18s ease;
  --t-slow: 0.32s ease;

  /* Espacements (échelle) — remplace les valeurs de padding/margin/gap
     codées en dur sur les composants partagés (cartes modules, header).
     Nommage direct par valeur en px (reprend l'inventaire réel des
     espacements utilisés, pour ne rien décaler visuellement). */
  --space-2:  2px;
  --space-3:  3px;
  --space-4:  4px;
  --space-5:  5px;
  --space-6:  6px;
  --space-7:  7px;
  --space-8:  8px;
  --space-9:  9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-38: 38px;

  /* Typographie (échelle) — reprend l'ensemble des tailles réellement
     utilisées dans le fichier (aucune valeur à virgule) */
  --fs-3xs:  9px;
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;
  --fs-base: 14px;
  --fs-lg:   15px;
  --fs-xl:   17px;
  --fs-2xl:  18px;
  --fs-3xl:  20px;
  --fs-4xl:  22px;
  --fs-5xl:  23px;
  --fs-6xl:  24px;
  --fs-7xl:  30px;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-1);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ─── FOCUS VISIBLE (accessibilité clavier) ─────────────────────
   Style de focus cohérent et tokenisé pour tous les éléments
   interactifs du design system, plutôt que de laisser chaque
   composant au focus par défaut du navigateur (souvent peu
   contrasté sur les cartes à fond coloré / border-radius). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* var(--primary) est déjà repointé par html.dark (cf. section DARK MODE),
   ce style de focus s'adapte donc automatiquement, sans règle dupliquée. */

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f4f8; border-radius: 10px; }
::-webkit-scrollbar-thumb {
  background: #b0bec5;
  border-radius: 10px;
  border: 2px solid #f1f4f8;
}
::-webkit-scrollbar-thumb:hover { background: #78909c; }
::-webkit-scrollbar-corner { background: #f1f4f8; }

/* ─── CONTAINER ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-24);
}

/* Bande bleue en haut du header */
.header::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, #60a5fa 100%);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  flex-shrink: 0;
}

.logo-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.3);
  overflow: hidden;
}

.logo-icon img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-name {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.3px;
}
.logo-name .accent { color: var(--primary); }

.logo-sub {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Date centrale */
.header-center { flex: 1; text-align: center; min-width: 0; }

.header-date {
  display: inline-block;
  max-width: 100%;
  font-size: var(--fs-md);
  color: var(--text-3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge utilisateur */
.user-badge {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-6) var(--space-14) var(--space-6) var(--space-6);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 40px;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.user-badge:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.user-role  { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); }
.user-level { font-size: var(--fs-2xs); color: var(--text-4); }

/* ═══════════════════════════════════════════════════════════════
   HERO / BANNER
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: linear-gradient(155deg, #0f1e42 0%, #12306e 42%, var(--primary) 100%);
  border-bottom: 1px solid var(--border);
  padding: 44px 0;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(480px 320px at 88% -10%, rgba(96, 165, 250, 0.35), transparent 70%),
    radial-gradient(360px 280px at 100% 100%, rgba(124, 58, 237, 0.25), transparent 70%);
}

.hero-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.hero-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-text { flex: 1; min-width: 0; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

.hero-eyebrow-text {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.hero-title {
  font-size: var(--fs-7xl);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.2;
}

.hero-sub {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 5px 14px;
}
.hero-tagline::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #60a5fa;
  flex-shrink: 0;
}

/* KPI bar */
.kpi-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.kpi-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px;
  gap: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  transition: background var(--t);
}
.kpi-item:last-child { border-right: none; }
.kpi-item:hover { background: rgba(255, 255, 255, 0.07); }

.kpi-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.kpi-dot-blue   { background: #60a5fa; }
.kpi-dot-green  { background: #34d399; }
.kpi-dot-orange { background: #fb923c; }

.kpi-value {
  font-size: var(--fs-5xl);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.5px;
}

.kpi-label {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

/* Couleurs KPI */
.c-blue   { color: var(--primary);  }
.c-green  { color: var(--green);    }
.c-orange { color: var(--orange);   }
.c-gray   { color: var(--text-3);   }

/* Sur le bandeau hero (fond sombre), on éclaircit ces couleurs pour rester lisibles */
.kpi-bar .c-blue   { color: #93c5fd; }
.kpi-bar .c-green  { color: #6ee7b7; }
.kpi-bar .c-orange { color: #fdba74; }

/* ═══════════════════════════════════════════════════════════════
   SECTION MODULES
═══════════════════════════════════════════════════════════════ */
.main { padding: 32px 0 80px; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-left { display: flex; flex-direction: column; gap: 2px; }

.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.2px;
}

.section-desc {
  font-size: var(--fs-md);
  color: var(--text-3);
}

.section-chip {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(26, 86, 219, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ─── GRILLE ─────────────────────────────────────────────────── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-16);
}

/* ─── CARTE MODULE ───────────────────────────────────────────── */
.module-card {
  --card-color: var(--primary);

  position: relative;
  display: flex;
  flex-direction: column;
  /* Fallback en couleur plate avant color-mix() : si le navigateur ne
     supporte pas color-mix(), cette déclaration reste valide (dernière
     valeur valide de la cascade) au lieu de laisser la carte sans fond. */
  background: var(--bg-white);
  background: color-mix(in srgb, var(--card-color) 6%, var(--bg-white));
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--card-color) 20%, var(--border));
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.module-card:hover {
  background: var(--bg-subtle);
  background: color-mix(in srgb, var(--card-color) 11%, var(--bg-white));
  transform: translateY(-3px);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--card-color) 40%, var(--border));
  /* Ombre de base (fallback) puis version enrichie d'un liseré teinté ;
     fusionné ici avec l'ancienne redéclaration de la section
     "AMÉLIORATIONS PREMIUM GLOBALES" pour éviter d'avoir deux blocs
     .module-card:hover distincts dans le fichier (cf. bug historique
     de redéclaration silencieuse). */
  box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(from var(--card-color) r g b / 0.15);
}

/* Bande latérale : plus nécessaire, la carte entière est colorée */
.card-side-bar { display: none; }

/* Cartes inactives — traitement neutre franc (pas juste une transparence)
   pour qu'on distingue les modules disponibles au premier coup d'œil,
   même sur une grille dense. */
.module-card.inactive {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.module-card.inactive .card-icon {
  background: var(--border-light);
  color: var(--text-3);
}
.module-card.inactive:hover {
  background: var(--bg-subtle);
}

/* Contenu de la carte (padding interne) — tout ce bloc est scopé sous
   .module-card : ce sont des noms de classe génériques (.card-title,
   .card-cta...) réutilisés ailleurs dans le site pour d'autres cartes
   sur fond clair ; les laisser globaux forçait du texte blanc partout. */
.module-card .card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-20) var(--space-20) var(--space-16) var(--space-24);
}

/* En-tête */
.module-card .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-14);
}

/* Icône */
.module-card .card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  background: color-mix(in srgb, var(--card-color) 16%, var(--bg-white));
  border-radius: var(--r-md);
  color: var(--card-color);
  transition: transform var(--t), background var(--t), color var(--t);
  flex-shrink: 0;
}
.module-card:hover .card-icon { transform: scale(1.06); }

/* Badge statut */
.module-card .card-badge {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-9);
  border-radius: 20px;
}

.badge-active {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.badge-active::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #059669;
  flex-shrink: 0;
}
/* Le pulse est purement décoratif : on respecte la préférence
   utilisateur de réduction des animations plutôt que de l'imposer. */
@media (prefers-reduced-motion: no-preference) {
  .badge-active::before {
    animation: dot-pulse 2s ease-in-out infinite;
  }
}

.badge-inactive {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.module-card.inactive {
  cursor: default;
}
.module-card.inactive:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}
.module-card.inactive:hover .card-side-bar {
  opacity: 0.85;
  width: 4px;
}
.module-card.inactive:hover .card-icon {
  transform: none;
}
.module-card.inactive .card-cta {
  color: var(--text-3);
  background: var(--border-light);
  border-color: var(--border);
  cursor: default;
}
.module-card.inactive:hover .card-cta {
  transform: none;
  color: var(--text-3);
  background: var(--border-light);
  border-color: var(--border);
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Corps */
.module-card .card-body { flex: 1; margin-bottom: var(--space-14); }

.module-card .card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: var(--space-5);
  letter-spacing: -0.2px;
}

.module-card .card-desc {
  font-size: var(--fs-sm); /* était 12.5px : arrondi à la grille de tokens */
  color: var(--text-3);
  line-height: 1.6;
}

/* Pied */
.module-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-12);
}

.module-card .card-meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
}

.module-card .card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--card-color);
  background: transparent;
  background: color-mix(in srgb, var(--card-color) 10%, transparent);
  border: 1px solid currentColor;
  border: 1px solid color-mix(in srgb, var(--card-color) 28%, transparent);
  border-radius: 20px;
  padding: var(--space-5) var(--space-12);
  transition: background var(--t), color var(--t), transform var(--t);
}
.module-card:hover .card-cta {
  background: transparent;
  background: color-mix(in srgb, var(--card-color) 20%, transparent);
  color: var(--card-color);
  border-color: currentColor;
  border-color: color-mix(in srgb, var(--card-color) 45%, transparent);
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-4);
}

.footer-brand { font-weight: 600; color: var(--text-2); }

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES PARTAGÉS (tous les modules)
═══════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px rgba(26, 86, 219, 0.25);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--bg-white);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t), color var(--t);
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS — PAGE D'ACCUEIL (.lb-home) — rapatriés du
   <style> inline d'index.html.

   IMPORTANT : plusieurs de ces noms de classe (.alert-banner,
   .alert-item, .notif-item, .notif-badge, .notif-panel, .notif-wrap)
   sont déjà réutilisés avec un tout autre sens par d'autres pages
   (modules/routine-detail.html, modules/skills.html,
   modules/skills-dashboard.html — chacune avec sa propre définition
   locale). Toutes les règles ci-dessous sont donc scopées sous
   .lb-home (classe posée sur le <body> d'index.html) pour ne jamais
   fuiter vers ces autres pages — même logique que le scoping de
   .module-card .card-title etc. plus haut dans ce fichier.

   Tous les hex codés en dur ont été convergés vers les tokens
   existants (var(--border), var(--bg-subtle), var(--text-*)...)
   et les ombres/rayons vers --shadow-*/--r-xl quand la valeur
   correspondait exactement, pour éviter une seconde palette de gris
   qui dérive silencieusement de celle de :root.
═══════════════════════════════════════════════════════════════ */

/* ─── Bandeau d'alertes défilant ─── */
.lb-home .alert-banner {
  position: relative;
  background: linear-gradient(90deg, #fef2f2, #fff7ed);
  border-bottom: 2px solid #fecaca;
  overflow: hidden;
  padding-right: var(--space-38);
}
.lb-home .alert-banner-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: lb-alert-scroll 30s linear infinite;
}
.lb-home .alert-banner-content { display: flex; align-items: center; flex-shrink: 0; }
.lb-home .alert-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--fs-sm); /* était 12.5px : arrondi à la grille de tokens */
  font-weight: 700;
  color: #991b1b;
  text-decoration: none;
  padding: var(--space-10) var(--space-30);
  border-right: 1px solid #fecaca;
  transition: opacity .15s;
}
.lb-home .alert-item:hover { opacity: .65; text-decoration: underline; }
@keyframes lb-alert-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-home .alert-banner-track { animation: none; overflow-x: auto; }
}
.lb-home .alert-banner-close {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--space-38);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, transparent, #fff7ed 45%);
  border: none;
  border-left: 1px solid #fecaca;
  color: #991b1b;
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  transition: color .15s, background .15s;
}
.lb-home .alert-banner-close:hover {
  color: #dc2626;
  background: linear-gradient(90deg, transparent, #fee2e2 45%);
}

/* ─── Carte statistique partagée (KPI live cross-modules) ───
   Composant "stat-card" : même recette que .module-card (fond blanc,
   bordure, ombre + hover qui s'élève) mais avec liseré de couleur en
   haut plutôt que fond teinté — utilisé pour les indicateurs live et
   pour la carte du graphique d'évolution. */
.lb-home .live-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-28);
}
.lb-home .lk-card {
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-20) var(--space-22) var(--space-18);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.lb-home .lk-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lk-accent, var(--primary));
  opacity: .9;
}
.lb-home .lk-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--lk-accent, var(--primary)) 30%, var(--border));
}
.lb-home .lk-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-white);
  background: color-mix(in srgb, var(--lk-accent, var(--primary)) 14%, var(--bg-white));
  color: var(--lk-accent, var(--primary));
  transition: transform var(--t);
}
.lb-home .lk-card:hover .lk-icon { transform: scale(1.06); }
.lb-home .lk-body { min-width: 0; }
.lb-home .lk-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.15;
  letter-spacing: -.5px;
}
.lb-home .lk-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: var(--space-3);
}
.lb-home .lk-val-alert { color: #dc2626; }
.lb-home .lk-val-ok    { color: #16a34a; }
.lb-home .lk-card-blue  { --lk-accent: #1a56db; }
.lb-home .lk-card-red   { --lk-accent: #dc2626; }
.lb-home .lk-card-green { --lk-accent: #16a34a; }
.lb-home .lk-card-amber { --lk-accent: #d97706; }

/* ─── Graphique d'évolution des indicateurs (même recette de carte) ─── */
.lb-home .stats-chart-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-22) var(--space-24);
  margin-top: var(--space-28);
  box-shadow: var(--shadow-sm);
}
.lb-home .stats-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-18);
  flex-wrap: wrap;
}
.lb-home .stats-chart-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text-1); margin: 0; }
.lb-home .stats-chart-sub   { font-size: var(--fs-sm); color: var(--text-3); margin: 2px 0 0; }
.lb-home .stats-chart-legend { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.lb-home .stats-chart-legend-item { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.lb-home .stats-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lb-home .stats-chart-body { position: relative; height: 220px; }
.lb-home .stats-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  text-align: center;
  padding: 0 var(--space-20);
  color: var(--text-3);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* ─── Cloche notifications ─── */
.lb-home .notif-btn {
  position: relative;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: all .15s;
  flex-shrink: 0;
}
.lb-home .notif-btn:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.lb-home .notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg-white);
  box-sizing: border-box;
}
.lb-home .notif-panel {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  width: 330px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 9000;
  overflow: hidden;
  display: none;
}
.lb-home .notif-panel.open { display: block; }
.lb-home .notif-panel-head {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lb-home .notif-panel-clear { font-size: var(--fs-xs); font-weight: 700; color: var(--primary); cursor: pointer; text-transform: none; letter-spacing: 0; }
.lb-home .notif-panel-clear:hover { text-decoration: underline; }
.lb-home .notif-list { max-height: 320px; overflow-y: auto; }
.lb-home .notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-11) var(--space-16);
  border-bottom: 1px solid var(--bg-subtle);
  text-decoration: none;
  transition: background .12s;
  cursor: pointer;
}
.lb-home .notif-item:hover { background: var(--bg-subtle); }
.lb-home .notif-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: var(--space-4); }
.lb-home .notif-item-body { min-width: 0; }
.lb-home .notif-item-title {
  font-size: var(--fs-sm); /* était 12.5px : arrondi à la grille de tokens */
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-home .notif-item-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--space-2); }
.lb-home .notif-empty { padding: var(--space-24) var(--space-16); text-align: center; font-size: var(--fs-sm); color: var(--text-4); }
.lb-home .notif-wrap { position: relative; }

/* ─── Séparateur de section dans la grille modules ─── */
.lb-home .modules-section-sep {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) 0 var(--space-2);
  margin-top: var(--space-8);
}
.lb-home .modules-section-sep-line { flex: 1; height: 1px; background: var(--border); }
.lb-home .modules-section-sep-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  padding: var(--space-5) var(--space-14);
  background: var(--bg-subtle);
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* ─── Sélecteur de langue ─── */
#langSel {
  height: 36px;
  padding: 0 var(--space-10);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-8) center;
  padding-right: var(--space-24);
}
#langSel:hover { border-color: var(--primary); }
/* Le focus visible est géré par la règle globale select:focus-visible
   (cf. section RESET) — on ne le neutralise plus ici avec outline:none. */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — PC · Tablette · Téléphone
═══════════════════════════════════════════════════════════════ */

/* ── TABLETTE (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root { --container: 100%; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }

  /* Boutons header — icônes seules pour éviter le chevauchement
     quand tout ne tient plus sur une ligne (trou entre 768 et 1024px).
     Le header compte maintenant plus d'éléments qu'au moment du fix
     initial (sélecteur de langue, bascule sombre, cloche notifications) :
     le user-badge est également compacté (avatar seul) sur cette tranche,
     car c'est l'élément texte le plus large restant après compaction des
     boutons — sans cela, la marge disponible pour un utilisateur admin
     (avec les boutons Journal d'activité + Gestion des accès visibles)
     devient trop juste autour de 768-820px. */
  .header-inner { gap: 12px; }
  #activityLogBtn span, #accessMgmtBtn span, #logoutBtn span { display: none; }
  #activityLogBtn, #accessMgmtBtn, #logoutBtn { padding: var(--space-7) var(--space-10) !important; }
  .user-info { display: none; }
  .user-badge { padding: var(--space-6); gap: 0; }
}

/* ── TABLETTE PORTRAIT (≤ 960px) ── */
@media (max-width: 960px) {
  .hero-content  { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-title    { font-size: var(--fs-6xl); }
  .kpi-bar       { width: 100%; justify-content: space-around; }
  .kpi-item      { flex: 1; padding: 12px 10px; }
  .kpi-label     { font-size: var(--fs-3xs); }
  .kpi-value     { font-size: var(--fs-3xl); }
}

/* ── MOBILE LARGE (≤ 768px) ── */
@media (max-width: 768px) {
  .header-inner  { height: 56px; }
  .logo-sub      { display: none; }
  .hero-title    { font-size: var(--fs-4xl); }
  .modules-grid  { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .module-card .card-inner { padding: var(--space-16) var(--space-14) var(--space-12); }
  .module-card .card-title { font-size: var(--fs-md); }
  .module-card .card-desc  { font-size: var(--fs-xs); /* était 11.5px : arrondi à la grille de tokens */ }
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {
  .container     { padding: 0 14px; }
  .hero          { padding: 18px 0; }
  .header-center { display: none; }
  .user-info     { display: none; }
  .modules-grid  { grid-template-columns: 1fr; gap: var(--space-10); }
  .section-header{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-links  { display: none; }
  .main          { padding: 20px 0 60px; }

  /* KPI : 2 par ligne */
  .kpi-bar       { flex-wrap: wrap; border-radius: 12px; }
  .kpi-item      { flex: 1 1 45%; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .kpi-item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .kpi-sep       { display: none; }
  .hero-logo     { width: 48px; height: 48px; }

  /* Boutons header — icônes seules sur mobile */
  #logoutBtn span, #accessMgmtBtn span { display: none; }
  #logoutBtn, #accessMgmtBtn { padding: var(--space-7) var(--space-10); }
  .user-badge { display: none; }

  /* Header : taille réduite */
  .logo-name  { font-size: var(--fs-lg); }
  .logo-icon  { width: 32px; height: 32px; }
  .hero-title { font-size: var(--fs-3xl); }
  .hero-sub   { font-size: var(--fs-md); }

  /* Badge notification admin — compact et centré sur mobile */
  #notifBadge       { left: 16px; right: 16px; bottom: 16px; }
  #notifBadge > div { padding: 9px 14px; font-size: var(--fs-sm); justify-content: center; }
}

/* ── PETIT TÉLÉPHONE (≤ 420px) ── */
@media (max-width: 420px) {
  .hero-title  { font-size: var(--fs-2xl); }
  .kpi-value   { font-size: var(--fs-2xl); }
  .section-chip{ display: none; }
  .hero-eyebrow{ display: none; }
  .hero-tagline{ display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — html.dark
   Toutes les couleurs basculent via les variables CSS.
   Le thème est persisté dans localStorage sous la clé "lb-dark".
═══════════════════════════════════════════════════════════════ */
html.dark {
  /* Fonds */
  --bg-page:   #0d1117;
  --bg-white:  #161b22;
  --bg-subtle: #1c2230;

  /* Textes */
  --text-1: #f0f6fc;
  --text-2: #c9d1d9;
  --text-3: #8b949e;
  --text-4: #484f58;

  /* Bordures */
  --border:       #30363d;
  --border-light: #21262d;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.65), 0 4px 8px rgba(0,0,0,.3);

  /* Primaire */
  --primary:       #4f8ef7;
  --primary-dark:  #3b7de8;
  --primary-light: rgba(79,142,247,.12);
}

/* ── Overrides ciblés dark ── */
html.dark body { background-color: var(--bg-page); }

html.dark .header {
  background: #161b22;
  border-bottom-color: #30363d;
  box-shadow: 0 1px 0 #30363d;
}
html.dark .header::before {
  background: linear-gradient(90deg, #4f8ef7 0%, #818cf8 100%);
}

html.dark .hero {
  border-bottom-color: #30363d;
}

html.dark .module-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(from var(--card-color) r g b / 0.2);
}

html.dark .kpi-bar { background: #1c2230; border-color: #30363d; }
html.dark .kpi-item { background: #1c2230; border-right-color: #30363d; }
html.dark .kpi-item:hover { background: #212a3b; }

html.dark .section-chip {
  background: rgba(79,142,247,.12);
  border-color: rgba(79,142,247,.2);
  color: #4f8ef7;
}

html.dark .user-badge {
  background: #1c2230;
  border-color: #30363d;
}
html.dark .user-badge:hover { border-color: var(--primary); }

html.dark #logoutBtn {
  background: rgba(220,38,38,.1);
  border-color: rgba(220,38,38,.25);
  color: #f87171;
}
html.dark #logoutBtn:hover { background: rgba(220,38,38,.2); }

html.dark #activityLogBtn {
  background: rgba(109,40,217,.12);
  border-color: rgba(109,40,217,.25);
  color: #a78bfa;
}
html.dark #accessMgmtBtn {
  background: rgba(79,142,247,.1);
  border-color: rgba(79,142,247,.2);
  color: #4f8ef7;
}

html.dark .notif-btn {
  background: #1c2230;
  border-color: #30363d;
  color: #8b949e;
}
html.dark .notif-btn:hover {
  background: rgba(79,142,247,.1);
  border-color: var(--primary);
  color: var(--primary);
}
html.dark .notif-panel {
  background: #1c2230;
  border-color: #30363d;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ─── DEV BADGE (admin/développeur uniquement) ───────────────── */
#lb-dev-badge {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 12px;
  z-index: 99999;
  align-items: center;
  gap: 6px;
  background: rgba(15,23,42,.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'Courier New', monospace;
  font-size: var(--fs-2xs);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lb-badge-ref {
  color: #a78bfa;
  font-weight: 900;
  letter-spacing: .04em;
}
.lb-badge-sep {
  color: rgba(148,163,184,.5);
}
.lb-badge-label {
  color: #e2e8f0;
  font-weight: 700;
}
.lb-badge-file {
  color: #64748b;
  font-size: var(--fs-3xs);
  font-weight: 400;
  margin-left: 2px;
}
html.dark .notif-panel-head { border-bottom-color: #30363d; color: var(--text-1); }
html.dark .notif-item { border-bottom-color: #21262d; }
html.dark .notif-item:hover { background: #212a3b; }
html.dark .notif-item-title { color: var(--text-1); }

html.dark .badge-active { background: rgba(5,150,105,.15); border-color: rgba(5,150,105,.3); color: #34d399; }
html.dark .badge-active::before { background: #34d399; }
html.dark .badge-inactive { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.25); color: #f87171; }

/* Le traitement neutre (fond/icône gris) suffit à distinguer les
   cartes inactives, y compris en mode sombre — plus besoin de
   réduire l'opacité en plus (ça les rendait presque invisibles). */

/* Alert banner dark */
html.dark .alert-banner {
  background: linear-gradient(90deg, rgba(153,27,27,.2), rgba(180,53,9,.15));
  border-bottom-color: rgba(220,38,38,.3);
}
html.dark .alert-item { color: #fca5a5; }

/* ── Dark mode toggle button ── */
.dark-toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: all var(--t);
  flex-shrink: 0;
}
.dark-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.dark-toggle .icon-sun  { display: block; }
.dark-toggle .icon-moon { display: none;  }
html.dark .dark-toggle .icon-sun  { display: none;  }
html.dark .dark-toggle .icon-moon { display: block; }

/* ═══════════════════════════════════════════════════════════════
   AMÉLIORATIONS PREMIUM GLOBALES
═══════════════════════════════════════════════════════════════ */

/* Header — bande supérieure plus épaisse */
.header::before { height: 3px; }

/* Module card — effets enrichis : fusionné dans le bloc .module-card:hover
   principal (cf. section CARTE MODULE) pour éviter une redéclaration
   dupliquée du même sélecteur à deux endroits du fichier. */

/* Scrollbar personnalisée (thème) */
::-webkit-scrollbar-thumb { background: #94a3b8; }
html.dark ::-webkit-scrollbar-track { background: #1c2230; }
html.dark ::-webkit-scrollbar-thumb { background: #30363d; border-color: #1c2230; }
html.dark ::-webkit-scrollbar-corner { background: #1c2230; }

/* Footer dark */
html.dark .footer {
  background: #161b22;
  border-top-color: #30363d;
}

/* Utilitaires dark pour les modules */
html.dark .page-subheader {
  background: #161b22;
  border-bottom-color: #30363d;
}
html.dark .module-tabs { border-top-color: #30363d; }
html.dark .toolbar,
html.dark .stat-card,
html.dark .chart-card,
html.dark .table-wrap,
html.dark .skill-card,
html.dark .matrix-wrap {
  background: #1c2230;
  border-color: #30363d;
}
html.dark .data-table thead tr { background: #212a3b; }
html.dark .data-table thead th { border-bottom-color: #30363d; color: var(--text-3); }
html.dark .data-table tbody td { border-bottom-color: #21262d; }
html.dark .data-table tbody tr:hover td { background: #212a3b; }
html.dark .search-input,
html.dark .filter-select {
  background: #212a3b;
  border-color: #30363d;
  color: var(--text-1);
}
html.dark .search-input:focus,
html.dark .filter-select:focus { background: #1c2230; }
html.dark .matrix-table tbody tr:hover { background: #212a3b; }
html.dark .td-person,
html.dark .td-action { background: #1c2230; }
html.dark .matrix-table tbody tr:hover .td-person,
html.dark .matrix-table tbody tr:hover .td-action { background: #212a3b; }
html.dark .th-person,
html.dark .th-action,
html.dark .matrix-table thead tr { background: #212a3b; }
html.dark .td-cell:hover { background: #212a3b; }
html.dark .cell-info-box { background: #212a3b; border-color: #30363d; }
html.dark .modal-box { background: #1c2230; border: 1px solid #30363d; }
html.dark .modal-header { border-bottom-color: #30363d; }
html.dark .modal-footer { border-top-color: #30363d; }
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
  background: #212a3b;
  border-color: #30363d;
  color: var(--text-1);
}
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus { background: #1c2230; }
html.dark .ls-btn { background: #212a3b; border-color: #30363d; }
html.dark .heatmap-table td { border-color: #30363d; }