:root {
  /* 🎨 Couleurs principales */
  --brand:   #004777; /* Indigo dye */
  --accent:  #00AFB5; /* Verdigris */
  --danger:  #A30000; /* Turkey red */

  /* ⚡ Couleurs de statut */
  --success: #16a34a; /* Vert succès */
  --warning: #FF7700; /* Orange alerte */
  --info:    #3b82f6; /* Bleu info */

  /* 🌗 Neutres */
  --bg:      #EEF6FB; /* Fond principal (très clair, teinté de --brand) */
  --bg-alt:  #EFD28D; /* Fond alternatif (peach yellow) */
  --surface: #f9fafb; /* Surfaces claires */
  --text:    #04151F; /* Texte principal */
  --muted:   #6b7280; /* Texte secondaire */
  --line:    #e5e7eb; /* Bordures / séparateurs */

  /* ✨ Effets */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

  /* Badges (muted) */
  --badge-muted-bg: color-mix(in srgb, var(--muted) 18%, white 82%);
  --badge-muted-fg: color-mix(in srgb, var(--muted) 85%, black 15%);

  /* 🧩 Tokens de design */
  --radius: 6px;
  --radius-lg: 12px;
  --transition: 0.2s ease;
  /* Largeur max par défaut des cartes/sections */
  --card-max-width: 1000px;
  color-scheme: light;

  /* 🏷️ Titres (mappés sur couleurs existantes) */
  --title-overlay: var(--brand);
  --title-success: var(--success);
  --title-main:    var(--brand);
  --title-card:    var(--brand);
  --title-tabs:    var(--accent);
  --title-loading: var(--info);

  /* Notifications & indicateurs */
  --auto-save: var(--info);

  /* 🅰️ Polices */
  --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: var(--font-family-base);
  --font-display: var(--font-family-base);
  --font-body: var(--font-family-base);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", "Courier New", monospace;

  /* 📏 Échelle typographique */
  --text-xs: 0.75rem;    /* 12px - textes très petits */
  --text-sm: 0.875rem;   /* 14px - textes secondaires */
  --text-base: 1rem;     /* 16px - texte principal */
  --text-lg: 1.125rem;   /* 18px - textes importants */
  --text-xl: 1.25rem;    /* 20px - sous-titres */
  --text-2xl: 1.5rem;    /* 24px - titres de section */
  --text-3xl: 1.875rem;  /* 30px - gros titres */
  --text-4xl: 2.25rem;   /* 36px - titres principaux */

  /* 📐 Interlignage optimisé pour Manrope */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* 🔤 Espacement des lettres (Manrope n'a pas besoin de tracking négatif) */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

/* Switch de police par data-attr (un clic) */
html[data-font="manrope"] { --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
html[data-font="source"]  { --font-family-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
html[data-font="normal"]  { --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.session-meta { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; row-gap: .25rem; }
.session-meta .meta-item { display: inline-flex; align-items: center; gap: .35rem; }
.session-meta .meta-item i.lucide-icon { width: 18px; height: 18px; }
.session-meta .option-icons { display: inline-flex; align-items: center; gap: .5rem; }
.session-meta .option-icon { display: inline-flex; align-items: center; }

.mobile-tooltip-bubble {
  position: absolute;
  z-index: 9999;
  max-width: 240px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-tooltip-bubble { display: none !important; }
}