/* ============================================================
   EURIDIUM DESIGN SYSTEM
   Version 2.0 — Mai 2026
   Charte graphique unifiée pour toutes les pages Euridium
   
   Importer ce fichier en premier dans chaque page :
   <link rel="stylesheet" href="euridium-design-system.css">
   ============================================================ */

/* ============================================================
   1. TYPOGRAPHIE — Import des polices
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   2. VARIABLES CSS — Source unique de vérité
   ============================================================ */

:root {
  /* --- Couleurs : Backgrounds --- */
  --eu-bg-base: #080B12;           /* Bleu-noir — fond principal */
  --eu-bg-elevated: #0C1019;       /* Sidebar, header */
  --eu-bg-card: #101623;           /* Cards, panneaux */
  --eu-bg-hover: #151D2C;          /* Surface relevée — hover */
  --eu-bg-active: rgba(59, 123, 246, 0.10);  /* Bleu accent — item actif */

  /* --- Couleurs : Bordures --- */
  --eu-border-subtle: rgba(255, 255, 255, 0.055);  /* Hairlines */
  --eu-border-default: rgba(255, 255, 255, 0.11);  /* Bordures standard */
  --eu-border-strong: rgba(255, 255, 255, 0.17);   /* Bordures de boutons */
  --eu-border-accent: rgba(59, 123, 246, 0.20);     /* Bleu (cards spéciales) */
  --eu-border-accent-strong: rgba(59, 123, 246, 0.44); /* Bleu (boutons accent) */

  /* --- Couleurs : Texte --- */
  --eu-text-primary: #F3F6FC;       /* Titres, données critiques */
  --eu-text-secondary: #C4CEDD;     /* Texte principal */
  --eu-text-tertiary: #A6B1C2;      /* Contenu courant */
  --eu-text-muted: #8B97AC;         /* Descriptions, sous-titres */
  --eu-text-subtle: #7A8397;        /* Labels, métadonnées — relevé pour l'AA (~3:1) */
  --eu-text-disabled: #454F5E;      /* Séparateurs, état désactivé */

  /* --- Couleurs : Accent Euridium (Pétrole) --- */
  --eu-accent: #3B7BF6;             /* Bleu Euridium — accents fonctionnels */
  --eu-accent-dim: rgba(59, 123, 246, 0.6);
  --eu-accent-bg-soft: rgba(59, 123, 246, 0.05);
  --eu-accent-bg: rgba(59, 123, 246, 0.11);
  --eu-accent-bg-strong: rgba(59, 123, 246, 0.18);

  /* --- Couleurs : Sémantique de conformité --- */
  --eu-critical: #E5566B;           /* Non conforme — écart à traiter */
  --eu-critical-bg: rgba(229, 86, 107, 0.13);
  --eu-warning: #E0AE55;            /* En revue — attente de validation */
  --eu-warning-bg: rgba(224, 174, 85, 0.12);
  --eu-success: #33BC86;            /* Conforme — exigence satisfaite */
  --eu-success-bg: rgba(51, 188, 134, 0.13);
  --eu-info: #5A93FA;               /* Information — repère neutre */
  --eu-info-bg: rgba(90, 147, 250, 0.13);
  
  /* --- Couleurs : Lenses (palette pour les dots des Lenses) --- */
  --eu-lens-1: #3B7BF6;
  --eu-lens-2: #00D4FF;
  --eu-lens-3: #33BC86;
  --eu-lens-4: #a78bfa;
  --eu-lens-5: #f472b6;
  --eu-lens-6: #E0AE55;
  --eu-lens-7: #60a5fa;
  --eu-lens-8: #34d399;
  
  /* --- Typographie : Familles --- */
  --eu-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --eu-font-mono: 'IBM Plex Mono', ui-monospace, 'Consolas', monospace;
  --eu-font-display: 'Spectral', Georgia, serif;
  
  /* --- Typographie : Tailles --- */
  --eu-text-xs: 10px;       /* Labels en caps, micro-data */
  --eu-text-sm: 11px;       /* Métadonnées, badges, tags */
  --eu-text-base: 12px;     /* UI standard */
  --eu-text-md: 13px;       /* Contenu courant */
  --eu-text-lg: 14px;       /* Titres d'items */
  --eu-text-xl: 16px;       /* Titres de section */
  --eu-text-2xl: 18px;      /* Titres de page */
  --eu-text-3xl: 20px;      /* Titres principaux */
  --eu-text-4xl: 24px;      /* Hero numbers, big data */
  
  /* --- Typographie : Poids --- */
  --eu-weight-regular: 400;
  --eu-weight-medium: 500;
  --eu-weight-bold: 600;
  
  /* --- Typographie : Letter-spacing --- */
  --eu-tracking-tight: -0.2px;     /* Grands titres */
  --eu-tracking-normal: 0;
  --eu-tracking-wide: 0.4px;       /* Texte courant en mono */
  --eu-tracking-wider: 0.8px;      /* Petits caps */
  --eu-tracking-widest: 1.2px;     /* Labels SECTION en caps */
  
  /* --- Espacements --- */
  --eu-space-1: 4px;
  --eu-space-2: 6px;
  --eu-space-3: 8px;
  --eu-space-4: 10px;
  --eu-space-5: 12px;
  --eu-space-6: 14px;
  --eu-space-7: 16px;
  --eu-space-8: 18px;
  --eu-space-9: 20px;
  --eu-space-10: 24px;
  --eu-space-12: 32px;
  --eu-space-16: 48px;
  
  /* --- Border radius --- */
  --eu-radius-sm: 4px;       /* Badges, tags */
  --eu-radius-md: 8px;       /* Boutons, inputs */
  --eu-radius-lg: 12px;      /* Cards, panneaux */
  --eu-radius-xl: 16px;      /* Modales */
  --eu-radius-full: 9999px;  /* Boutons ronds, dots */
  
  /* --- Layout --- */
  --eu-sidebar-width: 220px;
  --eu-content-max-width: 1440px;
  --eu-aria-button-size: 52px;
  
  /* --- Transitions --- */
  --eu-transition-fast: 120ms ease-out;
  --eu-transition-base: 180ms ease-out;
  --eu-transition-slow: 280ms ease-out;
  
  /* --- Z-index --- */
  --eu-z-sidebar: 10;
  --eu-z-header: 20;
  --eu-z-aria-floating: 50;
  --eu-z-modal-backdrop: 100;
  --eu-z-modal: 110;
  --eu-z-tooltip: 200;

  /* ============================================================
     CHARTE CANONIQUE — tokens natifs (Instrument de précision)
     ============================================================ */
  /* Échelle neutre bleu-noir (profondeur, sous-ton froid) */
  --ink-950:#05070C; --ink-900:#080B12; --ink-850:#0C1019; --ink-800:#101623;
  --ink-750:#151D2C; --ink-700:#1B2436; --ink-600:#28334A; --ink-500:#45516A;
  --ink-400:#7A8397; --ink-300:#A6B1C2; --ink-200:#C4CEDD; --ink-100:#E4E9F2; --ink-050:#F3F6FC;
  /* Échelle Cyan (highlight / signature) — anciennement Laiton */
  --gold-300:#8CE9FF; --gold-400:#3BE0FF; --gold-500:#00D4FF; --gold-600:#00A6CC; --gold-700:#0A7C97;
  /* Échelle Bleu (brand) — anciennement Pétrole */
  --spectre-400:#5A93FA; --spectre-500:#3B7BF6; --spectre-600:#2760E4;
  --eagi-negligible:#3BB89A; --eagi-low:#4FB39A; --eagi-moderate:#E0AE55; --eagi-high:#E07B4A; --eagi-critical:#E5566B; --eagi-na:#5A6478;
  --module-reports:#C98F5A; --module-aria:#6E78E6;

  /* Élévation, halos, signature, focus — premium (ombres larges, glow focal) */
  --eu-shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --eu-shadow-md: 0 2px 6px -2px rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.4);
  --eu-shadow-lg: 0 4px 12px -4px rgba(0,0,0,.55), 0 24px 60px -16px rgba(0,0,0,.5);
  --eu-edge: inset 0 1px 0 rgba(255,255,255,.045);
  --eu-glow-gold: 0 0 0 1px rgba(0,212,255,.26), 0 0 22px -4px rgba(0,212,255,.32);
  --eu-glow-spectre: 0 0 0 1px rgba(59,123,246,.30), 0 0 24px -4px rgba(59,123,246,.28);
  --eu-gradient-spectral: linear-gradient(105deg,#2F74F5 0%,#3BB8FF 60%,#3BE0FF 100%);
  --eu-focus-ring: 0 0 0 2px var(--eu-bg-base), 0 0 0 4px rgba(59,123,246,.75);

  /* --- Gabarit de page ---
     Le conteneur de contenu etait redefini par chaque page sous son propre nom
     (.rp-wrap, .tp-content, .ce-wrap...) avec la meme gouttiere de 32px mais
     des largeurs arbitraires : 1100 / 1040 / 1000. Passer d'une page a l'autre
     decalait le bord du contenu de 50px de chaque cote. Une seule source ici ;
     les classes par page gardent leur nom et pointent vers ces variables. */
  --eu-page-max: 1100px;
  --eu-page-pad-top: 24px;
  --eu-page-pad-x: 32px;
  --eu-page-pad-bottom: 64px;

  /* Smooth surfaces/text when toggling theme (not borders/shadows to avoid jank) */
  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME — token overrides only (components stay token-based)
   Activated by <html data-theme="light">. Re-maps BOTH the semantic
   --eu-* layer AND the raw --ink-* ramp so direct ink usages also flip.
   Accent (spectre/gold) and semantic status hues are kept.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds — Ivoire & blanc */
  --eu-bg-base: #F3F0E8;
  --eu-bg-elevated: #FBFAF5;
  --eu-bg-card: #FFFFFF;
  --eu-bg-hover: #ECEAE0;
  --eu-bg-active: rgba(37, 99, 235, 0.10);

  /* Borders — dark-alpha hairlines + blue accent */
  --eu-border-subtle: rgba(24, 34, 48, 0.07);
  --eu-border-default: rgba(24, 34, 48, 0.14);
  --eu-border-strong: rgba(24, 34, 48, 0.24);
  --eu-border-accent: rgba(37, 99, 235, 0.24);
  --eu-border-accent-strong: rgba(37, 99, 235, 0.5);

  /* Text — ardoise foncé sur surfaces claires */
  --eu-text-primary: #0E1C1F;
  --eu-text-secondary: #21383C;
  --eu-text-tertiary: #334D51;
  --eu-text-muted: #52686C;
  --eu-text-subtle: #79868A;
  --eu-text-disabled: #A8B4B6;

  /* Accent Bleu — assombri pour lire sur fond clair */
  --eu-accent: #2563EB;
  --eu-accent-dim: rgba(37, 99, 235, 0.6);
  --eu-accent-bg-soft: rgba(37, 99, 235, 0.06);
  --eu-accent-bg: rgba(37, 99, 235, 0.10);
  --eu-accent-bg-strong: rgba(37, 99, 235, 0.16);

  /* Sémantique — teintes premium (sur clair) + fonds */
  --eu-critical: #CF4459;  --eu-critical-bg: rgba(207, 68, 89, 0.10);
  --eu-warning: #B98526;   --eu-warning-bg: rgba(185, 133, 38, 0.13);
  --eu-success: #1DA06E;   --eu-success-bg: rgba(29, 160, 110, 0.13);
  --eu-info: #2E6BF0;      --eu-info-bg: rgba(46, 107, 240, 0.10);

  /* Échelle Ardoise inversée (usages directs de --ink-*) */
  --ink-950:#FFFFFF; --ink-900:#F3F0E8; --ink-850:#FBFAF5; --ink-800:#FFFFFF;
  --ink-750:#ECEAE0; --ink-700:#DDE4E4; --ink-600:#CDD8DA; --ink-500:#A8B8BB;
  --ink-400:#7C9094; --ink-300:#52686C; --ink-200:#334D51; --ink-100:#21383C; --ink-050:#0E1C1F;
  /* Cyan / bleu assombris pour le contraste sur fond clair */
  --gold-300:#22B8D6; --gold-400:#0FA6C4; --gold-500:#0891B2; --gold-600:#067A96; --gold-700:#065F75;
  --spectre-400:#3B7BF6; --spectre-500:#2563EB; --spectre-600:#1D4ED8;

  /* Élévation — ombres douces (ardoise) */
  --eu-shadow-sm: 0 1px 2px rgba(20,40,44,.06);
  --eu-shadow-md: 0 8px 22px -10px rgba(20,40,44,.16);
  --eu-shadow-lg: 0 22px 50px -18px rgba(20,40,44,.22);
}

/* Ease the surface/text transition when the theme flips */
body, .eu-sidebar, .eu-main, .eu-topbar { transition: background-color var(--eu-transition-base), color var(--eu-transition-base); }

/* ============================================================
   3. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--eu-bg-base);
  color: var(--eu-text-secondary);
  font-family: var(--eu-font-sans);
  font-size: var(--eu-text-md);
  font-weight: var(--eu-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
}

/* Reset des marges sur les éléments de texte */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* Liens */
a {
  color: var(--eu-accent);
  text-decoration: none;
  transition: opacity var(--eu-transition-fast);
}

a:hover {
  opacity: 0.8;
}

/* --- Accessibilité : focus clavier visible (WCAG 2.4.7) ---
   Réutilise le token --eu-focus-ring déjà défini. :focus-visible pour
   que le clic souris reste net ; couvre tous les éléments interactifs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.eu-btn:focus-visible,
.eu-btn-primary:focus-visible,
.eu-btn-accent:focus-visible,
.eu-iconbtn:focus-visible,
.eu-sidebar-item:focus-visible,
.eu-sidebar-child:focus-visible,
.eu-filter:focus-visible,
.eu-row.clk:focus-visible,
.eu-table tr.clk:focus-visible,
.eu-aria-floating:focus-visible {
  outline: none;
  box-shadow: var(--eu-focus-ring);
}

/* ============================================================
   4. SCROLLBARS (style discret cohérent)
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   5. CLASSES UTILITAIRES TYPOGRAPHIQUES
   ============================================================ */

/* Titres */
.eu-title-page {
  font-size: var(--eu-text-3xl);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-text-primary);
  letter-spacing: var(--eu-tracking-tight);
  line-height: 1.3;
}

.eu-title-section {
  font-size: var(--eu-text-2xl);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-text-primary);
  letter-spacing: var(--eu-tracking-tight);
}

.eu-title-card {
  font-size: var(--eu-text-lg);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-text-primary);
  line-height: 1.45;
}

/* Labels en caps (utilisés partout pour catégoriser) */
.eu-label-section {
  font-size: var(--eu-text-xs);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-text-subtle);
  letter-spacing: var(--eu-tracking-widest);
  text-transform: uppercase;
}

.eu-label-accent {
  font-size: var(--eu-text-xs);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-accent);
  letter-spacing: var(--eu-tracking-widest);
  text-transform: uppercase;
}

/* Métadonnées (mono) */
.eu-mono {
  font-family: var(--eu-font-mono);
}

.eu-meta {
  font-family: var(--eu-font-mono);
  font-size: var(--eu-text-sm);
  color: var(--eu-text-subtle);
}

.eu-meta-value {
  font-family: var(--eu-font-mono);
  font-size: var(--eu-text-md);
  font-weight: var(--eu-weight-medium);
  color: var(--eu-text-secondary);
}

/* Texte courant */
.eu-text-body {
  font-size: var(--eu-text-md);
  color: var(--eu-text-tertiary);
  line-height: 1.7;
}

.eu-text-muted {
  color: var(--eu-text-muted);
}

.eu-text-subtle {
  color: var(--eu-text-subtle);
}

/* ============================================================
   6. COMPOSANTS DE BASE
   ============================================================ */

/* --- Marker vertical cyan (signature visuelle) --- */
.eu-marker-vertical {
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--eu-accent);
}

/* --- Cards --- */
.eu-card {
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-default);
  border-radius: var(--eu-radius-lg);
  padding: var(--eu-space-7) var(--eu-space-8);
}

.eu-card-accent {
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-accent);
  border-radius: var(--eu-radius-lg);
  padding: var(--eu-space-6) var(--eu-space-7);
  position: relative;
}

.eu-card-accent::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--eu-space-7);
  right: var(--eu-space-7);
  height: 1px;
  background: var(--eu-accent);
}

/* --- Boutons --- */
.eu-btn {
  background: transparent;
  border: 0.5px solid var(--eu-border-strong);
  color: var(--eu-text-secondary);
  padding: 7px var(--eu-space-5);
  font-size: var(--eu-text-sm);
  font-family: var(--eu-font-sans);
  font-weight: var(--eu-weight-medium);
  border-radius: var(--eu-radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--eu-space-2);
  transition: all var(--eu-transition-fast);
}

.eu-btn:hover {
  background: var(--eu-bg-hover);
  border-color: var(--eu-border-accent-strong);
}

.eu-btn-icon {
  padding: 7px var(--eu-space-4);
}

.eu-btn-accent {
  background: var(--eu-accent-bg);
  border: 0.5px solid var(--eu-border-accent-strong);
  color: var(--eu-accent);
}

.eu-btn-accent:hover {
  background: var(--eu-accent-bg-strong);
}

/* --- Bouton primaire : Or signature (rare, action principale) --- */
.eu-btn-primary {
  background: var(--gold-500);
  border: 0.5px solid var(--gold-500);
  color: var(--ink-950);
  font-weight: var(--eu-weight-bold);
}

.eu-btn-primary:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  box-shadow: var(--eu-glow-gold);
}

/* --- Badges --- */
.eu-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--eu-text-xs);
  font-family: var(--eu-font-mono);
  font-weight: var(--eu-weight-medium);
  padding: 2px 7px;
  border-radius: var(--eu-radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.eu-badge-active {
  background: var(--eu-accent-bg);
  color: var(--eu-accent);
  font-family: var(--eu-font-sans);
  letter-spacing: var(--eu-tracking-wider);
}

.eu-badge-news     { background: var(--eu-info-bg);     color: var(--eu-info); }
.eu-badge-regulation { background: var(--eu-warning-bg); color: var(--eu-warning); }
.eu-badge-consultation { background: var(--eu-success-bg); color: var(--eu-success); }
.eu-badge-event    { background: var(--eu-critical-bg); color: var(--eu-critical); }

/* --- Inputs --- */
.eu-input {
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-default);
  color: var(--eu-text-secondary);
  padding: var(--eu-space-3) var(--eu-space-4);
  font-size: var(--eu-text-base);
  font-family: var(--eu-font-sans);
  border-radius: var(--eu-radius-md);
  width: 100%;
  transition: border-color var(--eu-transition-fast);
}

.eu-input:focus {
  outline: none;
  border-color: var(--eu-border-accent-strong);
  box-shadow: var(--eu-glow-spectre);
}

.eu-input::placeholder {
  color: var(--eu-text-subtle);
}

.eu-select {
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-default);
  color: var(--eu-text-secondary);
  padding: var(--eu-space-3) var(--eu-space-4);
  font-size: var(--eu-text-sm);
  font-family: var(--eu-font-sans);
  border-radius: var(--eu-radius-md);
  cursor: pointer;
}

/* --- Search input avec icône --- */
.eu-search {
  position: relative;
}

.eu-search-icon {
  position: absolute;
  left: var(--eu-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--eu-text-subtle);
  font-size: 13px;
  pointer-events: none;
}

.eu-search input {
  padding-left: 32px;
}

/* --- Score d'impact (couleur dynamique) --- */
.eu-impact-critical { color: var(--eu-critical); font-weight: var(--eu-weight-medium); }
.eu-impact-warning  { color: var(--eu-warning); font-weight: var(--eu-weight-medium); }
.eu-impact-success  { color: var(--eu-success); font-weight: var(--eu-weight-medium); }

/* --- Dots de couleur (statuts) ---
   .eu-dot est défini dans euridium-components.css, qui est la seule
   définition utilisée. Ne pas le redéclarer ici : les deux fichiers se
   chargeaient dans le même document et la taille dépendait de l'ordre.
   Les tokens --eu-lens-* restent, eux, bien utilisés (voir
   compliance-documents.html). */

/* --- Texte réservé aux lecteurs d'écran ---
   Pour nommer ce que seule la couleur ou une icône indique visuellement.
   Retiré du flux sans display:none, qui le retirerait aussi de
   l'arbre d'accessibilité. */
.eu-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;
}

/* ============================================================
   7. LAYOUT PRINCIPAL DE L'APP
   ============================================================ */

.eu-app {
  display: grid;
  grid-template-columns: var(--eu-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.eu-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--eu-bg-base);
}

/* --- Top header (breadcrumb + utilités) --- */
.eu-topbar {
  background: var(--eu-bg-elevated);
  border-bottom: 0.5px solid var(--eu-border-default);
  padding: var(--eu-space-4) var(--eu-space-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.eu-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--eu-space-5);
  font-size: var(--eu-text-sm);
  color: var(--eu-text-subtle);
}

.eu-breadcrumb-separator {
  color: var(--eu-text-disabled);
}

.eu-breadcrumb-current {
  color: var(--eu-text-secondary);
}

.eu-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--eu-space-6);
}

.eu-topbar-icon {
  color: var(--eu-text-subtle);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--eu-transition-fast);
  background: transparent;
  border: none;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: var(--eu-radius-sm);
}

.eu-topbar-icon:hover {
  color: var(--eu-text-secondary);
}

/* Canonical empty state — available to every page (not only the component kit),
   so the ≥4 bespoke empty-state treatments can converge on this one. */
.eu-empty {
  padding: 40px;
  text-align: center;
  color: var(--eu-text-subtle);
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-default);
  border-radius: var(--eu-radius-lg);
}

/* --- Page header (titre + métadonnées) --- */
.eu-page-header {
  padding: var(--eu-space-10) var(--eu-space-10) var(--eu-space-8);
  border-bottom: 0.5px solid var(--eu-border-subtle);
  position: relative;
}

.eu-page-header-marker {
  position: absolute;
  left: var(--eu-space-10);
  top: var(--eu-space-10);
  width: 2px;
  height: 28px;
  background: var(--eu-accent);
}

.eu-page-header-content {
  padding-left: var(--eu-space-6);
}

/* --- Content area --- */
.eu-content {
  padding: var(--eu-space-9) var(--eu-space-10);
  flex: 1;
}

/* ============================================================
   8. ARIA FLOATING BUTTON
   ============================================================ */

.eu-aria-floating {
  position: fixed;
  bottom: var(--eu-space-9);
  right: var(--eu-space-9);
  width: var(--eu-aria-button-size);
  height: var(--eu-aria-button-size);
  background: var(--eu-bg-card);
  border: 0.5px solid var(--eu-border-accent-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--eu-z-aria-floating);
  transition: all var(--eu-transition-base);
}

.eu-aria-floating:hover {
  background: var(--eu-bg-hover);
  transform: scale(1.05);
  box-shadow: 0 0 0 4px var(--eu-accent-bg-soft);
}

.eu-aria-floating i {
  color: var(--eu-accent);
  font-size: 22px;
}

.eu-aria-floating-indicator {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  background: var(--eu-accent);
  border-radius: 50%;
  border: 2px solid var(--eu-bg-card);
}

/* ============================================================
   9. HELPERS — flex, grid, spacing
   ============================================================ */

.eu-flex { display: flex; }
.eu-flex-col { display: flex; flex-direction: column; }
.eu-items-center { align-items: center; }
.eu-items-baseline { align-items: baseline; }
.eu-justify-between { justify-content: space-between; }
.eu-gap-1 { gap: var(--eu-space-1); }
.eu-gap-2 { gap: var(--eu-space-2); }
.eu-gap-3 { gap: var(--eu-space-3); }
.eu-gap-4 { gap: var(--eu-space-4); }
.eu-gap-5 { gap: var(--eu-space-5); }
.eu-gap-6 { gap: var(--eu-space-6); }
.eu-gap-7 { gap: var(--eu-space-7); }

.eu-mb-2 { margin-bottom: var(--eu-space-2); }
.eu-mb-4 { margin-bottom: var(--eu-space-4); }
.eu-mb-6 { margin-bottom: var(--eu-space-6); }
.eu-mb-8 { margin-bottom: var(--eu-space-8); }
.eu-mb-9 { margin-bottom: var(--eu-space-9); }

/* ============================================================
   FIN — euridium-design-system.css
   ============================================================ */