/* LE LABO IA DS 7.2.1 | Generated from src/css/index.css | Fonts provided by meydeey.com */
/* AI selection | landing: navigation.landing-minimal, footer.conversion | formulaire: sec-fields | progression: sec-feedback | modale: sec-modal | bouton: sec-buttons | carte: sec-cards */
.conversion-v7 { --labo-design-system-version: "7.2.1"; }

/* Source: src/css/tokens.css */
/* ═══════════════════════════════════════════════════════════════
   TOKENS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   SOURCE éditée à la main. C'est ce fichier qui sert index.css et
   meydeey.com. `npm run build` (Style Dictionary) NE régénère PAS
   ce fichier : il lit src/tokens/tokens.json et écrit uniquement
   dans dist/. Les tokens sémantiques et de contrôle ci-dessous
   vivent ici, pas dans tokens.json. Modifier directement ici.

   Structure :
     1. Couleurs (violet, gold, ink, paper, text, bg)
     2. Typographie (fontFamily, fontWeight, fontSize fluide, lineHeight, tracking)
     3. Radii
     4. Spacing
     5. Motion (duration, easing, shadow)
     6. Layout (z-index, breakpoints)
     7. Alias sémantiques de compatibilité

   Light mode optionnel via [data-theme="light"] ou prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1. COULEURS ─── */

  /* Violet structurel (liens, nav, accents tech) */
  --primary: #7084ff;
  --primary-soft: #8b9cff;
  --primary-hover: #5a6bf0;
  --primary-deep: #4a56d4;
  --surface-user-message: var(--primary-deep);

  /* Gold Champagne signature (CTA, ROI, Elite, prestige) */
  --gold: #e8c872;
  --gold-soft: #efd48d;
  --gold-deep: #d4b05c;
  --gold-dim: rgba(232, 200, 114, 0.12);
  --gold-border: rgba(232, 200, 114, 0.28);
  --gold-glow: rgba(232, 200, 114, 0.35);

  /* Ember, micro-composants ponctuels uniquement. Jamais une surface ou un CTA. */
  --ember: #c96a3d;
  --ember-soft: #df8a60;
  --ember-dim: rgba(201, 106, 61, 0.12);
  --ember-border: rgba(201, 106, 61, 0.3);

  /* Ink (backgrounds dark mode) */
  --ink-950: #030712;
  --ink-900: #070d1f;
  --ink-800: #0c1429;
  --ink-700: #111b36;
  --ink-600: #182344;
  --ink-500: #0e1630;

  /* Paper (backgrounds light mode) */
  --paper-50: #fdfcf9;
  --paper-100: #f7f5ee;
  --paper-200: #efece1;
  --paper-300: #e1ddcd;

  /* Backgrounds sémantiques (dark par défaut) */
  --bg-body: var(--ink-950);
  --bg-dark: rgba(4, 8, 16, 0.88);
  --bg-elevated: rgba(12, 20, 40, 0.88);
  --bg-card: rgba(14, 22, 48, 0.6);
  --bg-card-solid: var(--ink-500);
  --bg-overlay: var(
    --ink-800
  ); /* surfaces flottantes opaques (tooltip, dropdown, modal, toast) : jamais de palette ink-* en direct dans un composant, sinon le light mode ne l'atteint pas */
  --bg-inset: rgba(
    3,
    7,
    18,
    0.4
  ); /* zone en retrait dans une surface (footer de modal) */
  --bg-card-dim: rgba(
    14,
    22,
    48,
    0.4
  ); /* carte discrète (accordion, rail des tabs segmentées) */

  /* Text on-dark (fixes, non thémables) : alimentent les sémantiques dark
     ci-dessous ET les îles sombres committed (code-block) dont le fond
     reste ink même en light mode */
  --text-on-dark: #f4f5fb;
  --text-on-dark-secondary: rgba(244, 245, 251, 0.72);
  --text-on-dark-tertiary: rgba(244, 245, 251, 0.48);
  --text-on-dark-muted: rgba(244, 245, 251, 0.32);

  /* Text sémantiques (dark par défaut) */
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-on-dark-secondary);
  --text-tertiary: var(--text-on-dark-tertiary);
  --text-muted: var(--text-on-dark-muted);
  --text-placeholder: rgba(
    244,
    245,
    251,
    0.48
  ); /* placeholders : contraste AA (~4.6:1) sur champ sombre, distinct de --text-muted (32%, sous le seuil) */
  --body-text: #b0b8cc;

  /* Accents texte thémables : identiques à la palette en dark, assombris
     en light pour rester AA sur fond clair (le gold brut fait 1.6:1 sur
     paper, le violet soft 2.5:1 : illisibles) */
  --text-gold: var(--gold);
  --text-code: var(--primary-soft);
  --text-error: #d96661; /* texte error, AA sur les surfaces dark */
  --text-on-gold: #1a1408;

  /* Borders */
  --border-card: rgba(112, 132, 255, 0.12);
  --border-card-hover: rgba(112, 132, 255, 0.25);
  --border-success: rgba(104, 176, 138, 0.2);
  --border-error: rgba(196, 84, 79, 0.2);

  /* Status */
  --success: #68b08a;
  --error: #c4544f;
  --warning: #d4b05c;
  --info: #38bdf8;
  --trustpilot: #00b67a;

  /* ─── 2. TYPOGRAPHIE ─── */

  /* Font families */
  --font-sans:
    "Cabinet Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Boska", "Fraunces", "Cabinet Grotesk", serif;
  --font-mono-alt: "Satoshi", ui-monospace, SFMono-Regular, monospace;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Font sizes fluides (clamp min-vw-max) */
  --fs-h1: clamp(2rem, 1.25rem + 3.25vw, 3.5rem); /* 32 à 56px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); /* 28 à 40px */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 à 24px */
  --fs-h4: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --fs-h5: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
  --fs-h6: clamp(0.875rem, 0.865rem + 0.05vw, 0.9375rem);
  --fs-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-body-md: clamp(0.9375rem, 0.915rem + 0.125vw, 1rem);
  --fs-body-sm: clamp(0.875rem, 0.865rem + 0.05vw, 0.9375rem);
  --fs-label: 0.875rem;
  --fs-annot: 0.8125rem;
  --fs-legal: 0.75rem;
  --fs-metric: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --fs-metric-xl: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.2em;

  /* ─── 3. RADII ─── */
  --radius-hard: 2px;
  --action-radius: 0px;
  --field-radius: 4px;
  --radius-sharp: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ─── 4. SPACING ─── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;

  /* ─── 4bis. CONTRÔLES ADAPTATIFS ───
     Paddings et taille de texte des composants interactifs
     (boutons, inputs, searchbar). Fluides en clamp() comme --fs-*,
     jamais figés en px. Chaque borne haute reproduit la valeur desktop
     actuelle : à 1440px le rendu est identique, l'adaptativité joue
     uniquement en dessous. Densité réglable via [data-density], cible
     tactile garantie via @media (pointer). Défaut : comfortable. */
  --control-pad-x: clamp(
    1.125rem,
    0.84rem + 1.25vw,
    1.625rem
  ); /* 18 à 26px, boutons */
  --control-pad-y: clamp(0.625rem, 0.52rem + 0.45vw, 0.8125rem); /* 10 à 13px */
  --field-pad-x: clamp(
    0.75rem,
    0.68rem + 0.3vw,
    0.875rem
  ); /* 12 à 14px, champs (plus serrés que les boutons) */
  --control-fs: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem); /* 14 à 15.2px */
  --control-gap: clamp(0.375rem, 0.32rem + 0.24vw, 0.5rem); /* 6 à 8px */
  --control-glyph: clamp(
    1.125rem,
    1.05rem + 0.3vw,
    1.25rem
  ); /* 18 à 20px, glyphes checkbox/radio/switch/range */
  /* Alias historique déprécié. Les nouveaux composants utilisent directement
     --action-radius ou --field-radius selon leur fonction. */
  --control-radius: var(--action-radius);
  --control-min-h: auto; /* pas de plancher en desktop, relevé en tactile */

  /* Régime operate : dense au pointeur fin, tactile au doigt. */
  --app-control-xs: 1.75rem;
  --app-control-sm: 2rem;
  --app-control-md: 2.375rem;
  --app-control-pad-x: 0.875rem;
  --app-control-fs: 0.875rem;
  --primary-wash-subtle: rgba(112, 132, 255, 0.05);

  /* ─── 5. MOTION ─── */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;

  --ease-premium: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;

  --motion-hover: var(--duration-base) var(--ease-premium);
  --motion-page: var(--duration-slow) var(--ease-snap);
  --motion-quick: var(--duration-fast) var(--ease-premium);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow-violet: 0 0 30px rgba(112, 132, 255, 0.2);
  --shadow-glow-gold: 0 0 30px rgba(232, 200, 114, 0.25);

  /* ─── 6. LAYOUT ─── */

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 5000;
  --z-skip-link: 10000;

  /* Breakpoints (pour container queries, JS ou media queries custom) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Container widths */
  --container-wide: 1120px;
  --container-narrow: 880px;
  --container-form: 36rem; /* 576px, plafond d'un formulaire en app (sinon les champs s'étirent sur toute la main) */
  --field-w: 15rem; /* 240px, champ de toolbar (searchbar, select de filtre) */

  /* Section padding */
  --section-padding-mobile: 64px 1.25rem;
  --section-padding-desktop: 112px 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   DENSITÉ · Override des contrôles adaptatifs
   ───────────────────────────────────────────────────────────────
   Poser data-density sur <html> ou n'importe quel conteneur reflow
   tous les contrôles descendants depuis une seule variable. Compact
   ne redéfinit pas --control-min-h : il hérite donc le plancher
   tactile quand le device est coarse (accessibilité préservée).
   ═══════════════════════════════════════════════════════════════ */
[data-density="compact"] {
  --control-pad-x: clamp(0.75rem, 0.6rem + 0.6vw, 1rem); /* 12 à 16px */
  --control-pad-y: clamp(0.375rem, 0.32rem + 0.24vw, 0.5rem); /* 6 à 8px */
  --field-pad-x: clamp(0.625rem, 0.58rem + 0.15vw, 0.75rem); /* 10 à 12px */
  --control-fs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13 à 14px */
  --control-gap: 0.375rem; /* 6px */
  --control-glyph: 1rem; /* 16px, glyphe compact app */
}
[data-density="touch"] {
  --control-pad-x: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); /* 20 à 28px */
  --control-pad-y: clamp(0.8125rem, 0.7rem + 0.5vw, 1rem); /* 13 à 16px */
  --field-pad-x: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* 14 à 16px */
  --control-fs: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 à 17px */
  --control-gap: 0.5rem; /* 8px */
  --control-glyph: 1.5rem; /* 24px, glyphe large au doigt */
  --control-min-h: 3rem; /* 48px, cibles larges au doigt */
}

/* Device à pointeur grossier (tactile) : relève le plancher de cible à
   44px (WCAG 2.2 Target Size) sans aucune classe. Le rendu desktop
   souris (pointer: fine) garde --control-min-h: auto, donc inchangé. */
@media (pointer: coarse) {
  :root {
    --control-min-h: 2.75rem; /* 44px plancher tactile */
    --app-control-xs: 2.75rem;
    --app-control-sm: 2.75rem;
    --app-control-md: 2.75rem;
  }
  /* Sans cette re-déclaration, le :root coarse ci-dessus (déclaré après)
     écrase le 3rem de la densité touch à spécificité égale : sur device
     tactile réel, touch retombait à 44px au lieu des 48px documentés. */
  [data-density="touch"] {
    --control-min-h: 3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE · Optionnel (activation via data-theme="light")
   Override minimal des tokens semantic. Composants continuent
   de marcher, l'aspect général s'éclaircit automatiquement.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-body: var(--paper-50);
  --bg-dark: rgba(253, 252, 249, 0.88);
  --bg-elevated: rgba(247, 245, 238, 0.88);
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-solid: var(--paper-100);
  --bg-overlay: #ffffff; /* blanc pur opaque : se détache du fond paper-50 crème */
  --bg-inset: rgba(12, 20, 41, 0.04);
  --bg-card-dim: rgba(255, 255, 255, 0.7);

  --text-gold: #83651a; /* gold encré, 5.3:1 sur paper-50 (AA) */
  --text-code: var(--primary-deep); /* 5.7:1 sur paper-50 (AA) */
  --text-error: #b0443f; /* error encré, 5.5:1 sur paper-50 (AA) */

  --text-primary: #0c1429;
  --text-secondary: rgba(12, 20, 41, 0.72);
  --text-tertiary: rgba(12, 20, 41, 0.48);
  --text-muted: rgba(12, 20, 41, 0.32);
  --text-placeholder: rgba(12, 20, 41, 0.55);
  --body-text: #3a4055;

  --border-card: rgba(112, 132, 255, 0.18);
  --border-card-hover: rgba(112, 132, 255, 0.3);
}

/* Auto light mode si système demande light (optionnel) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    /* Par défaut LE LABO IA reste dark. Activer light mode explicitement via data-theme. */
  }
}

/* Source: src/css/typography.css */
/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIE · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Classes .fs-* remplacent text-3xl md:text-4xl hardcodés.
   Responsive via clamp(), mobile-first.

   Règle d'or : toujours utiliser .fs-* sur nouvelles pages.
   Jamais font-size: 2rem hardcodé.
   ═══════════════════════════════════════════════════════════════ */

/* Hero H1 · base rationnelle Cabinet + accent émotionnel Boska */
.fs-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  font-style: normal;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
.fs-h1--upright {
  font-style: normal;
  font-weight: var(--fw-extrabold);
}
.fs-h1__accent {
  font-family: var(--font-display);
  font-size: 1.08em;
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--gold);
}
.fs-h1__accent--block {
  display: block;
  margin-top: 0.08em;
}

/* H2 à H6 · Cabinet Grotesk */
.fs-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}
.fs-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.fs-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.fs-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.fs-h6 {
  font-family: var(--font-mono);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Body */
.fs-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--body-text);
}
.fs-body-md {
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--body-text);
}
.fs-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--body-text);
}

/* Labels, annotations, legal */
.fs-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.fs-annot {
  font-family: var(--font-sans);
  font-size: var(--fs-annot);
  font-style: italic;
  color: var(--text-tertiary);
}
.fs-legal {
  font-family: var(--font-sans);
  font-size: var(--fs-legal);
  color: var(--text-tertiary);
}

/* Metrics (stats hero, bandeau) */
.fs-metric {
  font-family: var(--font-sans);
  font-size: var(--fs-metric);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}
.fs-metric-xl {
  font-family: var(--font-sans);
  font-size: var(--fs-metric-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}

/* Alias historique conservé sans gradient décoratif. */
.gradient-text {
  color: var(--primary-soft);
}

/* Accent gold underline signature */
.accent-gold-underline {
  background: linear-gradient(transparent 70%, rgba(232, 200, 114, 0.35) 70%);
  padding: 0 2px;
}

/* Font family overrides */
.font-sans {
  font-family: var(--font-sans);
}
.font-display {
  font-family: var(--font-display);
}
.font-mono {
  font-family: var(--font-mono);
}

/* Source: src/css/accessibility.css */
/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   WCAG 2.2 AA, focus visible, skip link, reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* Focus visible (clavier uniquement, pas souris) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus sur CTA gold : outline gold cohérent */
.btn-gold:focus-visible,
.btn-gold-ghost:focus-visible {
  outline-color: var(--gold);
}

/* Screen reader only (visible si focus) */
.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;
}
.sr-only.focus\:not-sr-only:focus,
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: revert;
  margin: revert;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip link (premier élément du body) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: var(--z-skip-link);
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: var(--ink-950);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--motion-quick);
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Reduced motion : neutralise le déplacement décoratif sans supprimer
   les feedbacks d'état. Les loaders deviennent des indicateurs statiques. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }
  :is(.skeleton, .carousel-track, .marquee-track) {
    animation: none !important;
  }
  :is(.is-loading, .spinner)::after,
  .spinner {
    animation: none !important;
    border-style: dotted;
  }
}

/* High contrast mode (Windows) */
@media (prefers-contrast: more) {
  :root {
    --border-card: rgba(112, 132, 255, 0.5);
    --border-card-hover: rgba(112, 132, 255, 0.8);
    --gold-border: rgba(232, 200, 114, 0.6);
  }
}

/* Source: src/css/backgrounds.css */
/* ═══════════════════════════════════════════════════════════════
   BACKGROUNDS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Couche décorative (dot pattern, orbs blur, grain SVG).
   Appliqué via <div class="bg-layer"> fixed en position.
   ═══════════════════════════════════════════════════════════════ */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  overflow: hidden;
}

/* Dot pattern subtle (28px grid) */
.dot-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(112, 132, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/* Alias legacy */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(112, 132, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/* Gradient orbs (blobs blur) */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
}
.bg-orb--violet {
  background: radial-gradient(
    circle,
    rgba(112, 132, 255, 0.35),
    transparent 70%
  );
  width: 640px;
  height: 640px;
  top: 10%;
  left: -15%;
}
.bg-orb--gold {
  background: radial-gradient(
    circle,
    rgba(232, 200, 114, 0.2),
    transparent 70%
  );
  width: 480px;
  height: 480px;
  bottom: 10%;
  right: -10%;
}

/* Mobile : cacher les orbs (perf) */
@media (max-width: 768px) {
  .bg-orb {
    display: none;
  }
}

/* Section backgrounds */
.section-dark,
.bg-dark {
  background: var(--bg-dark);
}
.section-elevated,
.bg-elevated {
  background: var(--bg-elevated);
}
.section-gradient,
.bg-gradient {
  background: linear-gradient(
    180deg,
    var(--bg-elevated) 0%,
    rgba(16, 28, 52, 0.88) 100%
  );
}

html[data-theme="light"] .section-gradient,
html[data-theme="light"] .bg-gradient {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--paper-200) 100%);
}
.section-hero,
.bg-hero {
  background: var(--bg-dark);
  background-image: radial-gradient(
    ellipse 60% 50% at 50% 30%,
    rgba(112, 132, 255, 0.08) 0%,
    transparent 70%
  );
}

/* Containers sections */
.sec {
  padding: var(--section-padding-mobile);
}
@media (min-width: 768px) {
  .sec {
    padding: var(--section-padding-desktop);
  }
}
.sec-v4 {
  padding: 80px 1.5rem;
  position: relative;
  z-index: 10;
  border-radius: var(--radius-md);
}
@media (min-width: 768px) {
  .sec-v4 {
    padding: 112px 1.5rem;
  }
}
.sec-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
}
.sec-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.sec-head {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-10);
}

/* Separator subtle */
.separator {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(112, 132, 255, 0.16),
    transparent
  );
}

/* Grids responsive */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Watermark (grand chiffre arrière-plan) */
.watermark {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 8rem;
  font-weight: var(--fw-extrabold);
  color: rgba(112, 132, 255, 0.05);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .watermark {
    font-size: 5rem;
  }
}
@media (max-width: 480px) {
  .watermark {
    font-size: 3.5rem;
  }
}

/* Source: src/css/layout/section-surfaces.css */
/* ═══════════════════════════════════════════════════════════════
   SECTION SURFACES · LE LABO IA Design System V7 (regime R1.5)
   ───────────────────────────────────────────────────────────────
   Le rythme de valeur : mecanisme anti-monotonie. Une page premium
   ne flotte pas sur un seul noir plat, chaque section POSSEDE son
   terrain visuel. Palette de surfaces a alterner.

   Regle dure (voir docs/SECTION-SURFACES.md) :
     - jamais deux sections adjacentes sur la meme surface plate
     - au moins 4 surfaces distinctes sur une page longue (5+ sections)
     - gold-field et paper-invert : max 1 chacun par page (rares)

   Contexte : ADR 0008. Remplace le reflexe "tout sur var(--ink-950)".
   ═══════════════════════════════════════════════════════════════ */

@layer layout {
  :root {
    /* Terrains de section (derives des tokens ink/gold/primary) */
    --surface-ink: var(--ink-950); /* #030712, fond de base */
    --surface-charcoal: var(--ink-500); /* #0e1630, panneau leve */
    --surface-charcoal-hair: rgba(112, 132, 255, 0.1);
    --surface-violet-base: #111634; /* champ violet profond */
    --surface-violet-wash: rgba(112, 132, 255, 0.16);
    --surface-gold: var(--gold); /* aplat gold plein, rare */
    --surface-gold-text: #1a1408;
    --surface-paper: #f4efe5; /* ivoire chaud, inversion claire rare */
    --surface-paper-text: var(--ink-800); /* #0c1429 */
    --surface-paper-muted: #56564f;
    --surface-paper-success: #146c43; /* vert AA sur clair (cmp-yes, badges) */
    --surface-paper-gold: #83651a; /* gold encré, 4.8:1 AA sur paper (labels, accents) */
    /* Ombre de panneau leve : NEUTRE, jamais un glow colore */
    --surface-lift-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  }

  /* ink-base : le fond de base, la respiration entre les surfaces fortes */
  .surface-ink {
    background: var(--surface-ink);
  }

  /* charcoal-lifted : panneau leve, hairlines fines, ombre neutre */
  .surface-charcoal {
    background: var(--surface-charcoal);
    border-top: 1px solid var(--surface-charcoal-hair);
    border-bottom: 1px solid var(--surface-charcoal-hair);
  }
  .surface-charcoal--float {
    background: var(--surface-charcoal);
    border: 1px solid var(--surface-charcoal-hair);
    border-radius: var(--radius-md);
    box-shadow: var(--surface-lift-shadow);
  }

  /* violet-field : champ violet profond, registre tech / atmosphere */
  .surface-violet {
    --text-primary: var(--text-on-dark);
    --text-secondary: var(--text-on-dark-secondary);
    --text-tertiary: var(--text-on-dark-tertiary);
    --text-muted: var(--text-on-dark-muted);
    --body-text: var(--text-on-dark-secondary);
    color: var(--text-on-dark);
    background-color: var(--surface-violet-base);
    background-image: radial-gradient(
      ellipse 80% 60% at 30% 0%,
      var(--surface-violet-wash),
      transparent 70%
    );
  }

  /* gold-field : le SEUL aplat chaud, max 1 par page (finale, signature) */
  .surface-gold {
    background: var(--surface-gold);
    color: var(--surface-gold-text);
  }
  .surface-gold :is(h1, h2, h3, h4, h5, h6, p, li, strong, span, a) {
    color: var(--surface-gold-text);
  }
  /* Boutons sur l'aplat gold : sans remap, aucun bouton du catalogue n'est
     lisible ici (btn-gold gold sur gold, ghosts fantômes, btn-ghost au texte
     resté blanc). Le CTA s'inverse en encre, les ghosts passent en encre.
     Zéro changement d'API : le HTML garde ses classes. */
  .surface-gold .btn-gold {
    background: var(--ink-950);
    color: var(--gold);
    box-shadow: none;
  }
  .surface-gold .btn-gold:hover {
    background: var(--ink-800);
    color: var(--gold-soft);
    box-shadow: 0 0 0 3px rgba(3, 7, 18, 0.18);
  }
  .surface-gold .btn-gold-ghost,
  .surface-gold .btn-ghost {
    background: transparent;
    color: var(--surface-gold-text);
    border-color: rgba(26, 20, 8, 0.4);
  }
  .surface-gold .btn-gold-ghost:hover,
  .surface-gold .btn-ghost:hover {
    background: rgba(26, 20, 8, 0.08);
    border-color: rgba(26, 20, 8, 0.6);
    color: var(--surface-gold-text);
  }
  /* Labels sur l'aplat gold : violet et gold y sont illisibles
     (1.4:1), les deux variantes convergent vers l'encre */
  .surface-gold .section-label,
  .surface-gold .section-label--gold,
  .surface-gold .eyebrow-brut,
  .surface-gold .eyebrow-brut--gold {
    color: var(--surface-gold-text);
    border-color: rgba(26, 20, 8, 0.4);
  }

  /* paper-invert : inversion claire ponctuelle (froide), max 1 par page.
     Remappe les tokens texte localement pour garder le contraste AA. */
  .surface-paper {
    background: var(--surface-paper);
    color: var(--surface-paper-text);
    --text-primary: var(--surface-paper-text);
    --text-secondary: var(--surface-paper-muted);
    --body-text: var(--surface-paper-muted);
    --border-card: rgba(12, 20, 41, 0.14);
    /* Semantiques remappees pour rester lisibles (AA) sur fond clair :
       sans ca, --text-muted (blanc 32%) et --success (#68b08a) disparaissent.
       Corrige .cmp-no et .cmp-yes dans un tableau comparatif sur paper. */
    --text-muted: var(--surface-paper-muted);
    --text-placeholder: var(--surface-paper-muted);
    --success: var(--surface-paper-success);
  }
  .surface-paper :is(h1, h2, h3, h4, h5, h6) {
    color: var(--surface-paper-text);
  }
  .surface-paper :is(p, li) {
    color: var(--surface-paper-muted);
  }
  /* Labels sur paper : les accents clairs de la palette dark passent
     sous AA (violet 2.9:1, gold 1.4:1), encrés dans le scope */
  .surface-paper .section-label,
  .surface-paper .eyebrow-brut {
    color: var(--primary-deep); /* 5.2:1 AA */
  }
  .surface-paper .section-label--gold,
  .surface-paper .eyebrow-brut--gold {
    color: var(--surface-paper-gold);
    border-color: rgba(131, 101, 26, 0.4);
  }

  /* ─── Debordement pleine largeur (full-bleed) ─── */
  /* A poser sur une section pour qu'elle sorte du conteneur centre. */
  .u-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  /* ─── Split asymetrique (casse l'epine gauche) ─── */
  /* Composition texte + panneau cote a cote, ratio 5/7. Passe en une
     colonne sous 768px. Sert la regle dure "casser l'epine gauche" sans
     que la page improvise un grid inline non-responsive. */
  .split-asym {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: center;
  }
  .split-asym > * {
    min-width: 0;
  }
  /* Miroir du wireframe : colonne dominante à gauche (LAYOUT-FAMILIES.md).
     Sans elle, le canon "texte dominant à gauche" force un grid inline. */
  .split-asym--reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  @media (max-width: 768px) {
    .split-asym,
    .split-asym--reverse {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }
  }

  /* ─── Moment de titre monumental (obligatoire : 1 par page) ─── */
  /* Le detecteur flague italic-serif-display sur Boska : c'est notre
     police de marque, whitelistee (voir docs/IMPECCABLE.md). */
  .fs-display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-bold);
    font-size: clamp(3rem, 1.4rem + 7vw, 7rem);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
    margin: 0;
    text-wrap: balance;
  }
  /* Variante sans-serif (Cabinet) pour un titre monumental non-Boska */
  .fs-display-sans {
    font-family: var(--font-sans);
    font-weight: var(--fw-extrabold);
    font-size: clamp(2.75rem, 1.4rem + 6vw, 6rem);
    line-height: 1.03;
    letter-spacing: var(--tracking-tight);
    margin: 0;
    text-wrap: balance;
  }
  /* Longs mots FR à taille monumentale ("accompagnement") : sans césure,
     le break-word du reset coupe brut n'importe où ("accompagnemen-t").
     La césure dictionnaire (exige lang="fr" sur la page) coupe aux bons
     endroits, les limites interdisent les fragments < 4 lettres.
     break-word reste le filet des mots sans point de césure. */
  .fs-display,
  .fs-display-sans {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 8 4 4;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Rien ici : le reveal est gere par la page. Les surfaces sont
     statiques et visibles par defaut (le contenu ne se cache jamais). */
}

/* Source: src/css/layout/responsive.css */
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Media queries partagées. Spécifique à un composant : met-le
   directement dans le fichier du composant.
   ═══════════════════════════════════════════════════════════════ */

/* Container queries ready (supporté tous navigateurs 2024+) */
@supports (container-type: inline-size) {
  .sec-inner,
  .sec-narrow {
    container-type: inline-size;
  }
}

/* Footer mobile centré */
@media (max-width: 768px) {
  footer .grid {
    gap: 2rem;
    text-align: center;
  }
  footer .grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  footer .grid > div p {
    margin-left: auto;
    margin-right: auto;
  }
  footer .grid a {
    justify-content: center;
  }
  footer .mb-12 {
    margin-bottom: 2rem;
  }
}

/* Print styles */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .bg-layer,
  .bg-orb,
  .watermark,
  .nav-fixed,
  .mobile-menu {
    display: none !important;
  }
  .btn-gold,
  .btn-primary {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
}

/* Source: src/css/components/buttons.css */
/* ═══════════════════════════════════════════════════════════════
   BUTTONS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Hiérarchie claire :
     .btn-gold        CTA principal (conversion max)
     .btn-gold-ghost  Action secondaire gold thématique
     .btn-ghost       Action tertiaire neutre
     .btn-primary     Action structurelle (nav, form) violet gradient
     .btn-danger      Action destructive (contour error)
   Jamais mélanger .btn-gold et .btn-primary dans le même groupe.

   Proportions : aucune valeur figée en px. Paddings, taille de texte
   pilotés par les tokens --control-* (voir tokens.css) :
   fluides en clamp(), réglables par densité ([data-density]) et cible
   tactile garantie en pointer coarse. À 1440px le rendu reproduit les
   valeurs desktop historiques de densité. Le rayon d'action reste à 0px
   quelle que soit la densité. L'identité couleur reste inchangée.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CTA Gold · rectangle premium ─── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  box-sizing: border-box;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  background: var(--gold);
  color: var(--text-on-gold);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--control-fs);
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--action-radius);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-quick);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset-block: -35%;
  left: -34%;
  width: 20%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.76),
    transparent
  );
}
.btn-gold:hover {
  background: var(--gold-soft);
  transform: translateY(-3px);
  color: var(--text-on-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 16px 42px rgba(232, 200, 114, 0.2),
    0 0 0 5px rgba(232, 200, 114, 0.07);
}
.btn-gold:hover::after {
  animation: btn-gold-shine 650ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes btn-gold-shine {
  from {
    left: -34%;
  }
  to {
    left: 114%;
  }
}

/* Échelle réduite : override local des tokens de contrôle (14 à 18px). */
.btn--sm,
.btn-gold--sm,
.btn-primary--sm {
  --control-pad-x: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem); /* 14 à 18px */
  --control-pad-y: clamp(0.4375rem, 0.38rem + 0.2vw, 0.5625rem); /* 7 à 9px */
  --control-fs: clamp(0.8125rem, 0.8rem + 0.1vw, 0.85rem); /* 13 à 13.6px */
}
/* Échelle ample : override local des tokens de contrôle (24 à 32px). */
.btn--lg,
.btn-gold--lg,
.btn-primary--lg {
  --control-pad-x: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); /* 24 à 32px */
  --control-pad-y: clamp(0.875rem, 0.75rem + 0.55vw, 1rem); /* 14 à 16px */
  --control-fs: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); /* 15.2 à 16.8px */
}

/* ─── Ghost Gold · action secondaire gold ─── */
.btn-gold-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  box-sizing: border-box;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  background: transparent;
  color: var(--text-gold);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--control-fs);
  border: 1px solid var(--gold-border);
  border-radius: var(--action-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-quick);
}
.btn-gold-ghost:hover {
  background: var(--gold-dim);
  border-color: var(--gold-glow);
  color: var(--text-gold);
}

/* ─── Ghost neutre · action tertiaire ─── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  box-sizing: border-box;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--control-fs);
  border: 1px solid var(--border-card);
  border-radius: var(--action-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-quick);
}
.btn-ghost:hover {
  border-color: var(--border-card-hover);
  background: rgba(112, 132, 255, 0.04);
  color: var(--text-primary);
}

/* ─── Danger · action destructive (zone de danger, suppression) ─── */
/* Contour, jamais plein : le rouge signale, il ne crie pas. Texte en
   --text-error thémable (--error passe sous AA sur fond paper). */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  box-sizing: border-box;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  background: transparent;
  color: var(--text-error);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--control-fs);
  border: 1px solid var(--border-error);
  border-radius: var(--action-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-quick);
}
.btn-danger:hover {
  background: rgba(196, 84, 79, 0.08);
  border-color: var(--error);
  color: var(--text-error);
}

/* ─── Primary · violet gradient (nav, form) ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  box-sizing: border-box;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  background: linear-gradient(135deg, #7084ff 0%, #5a6bf0 50%, #4a56d4 100%);
  border: 1px solid rgba(139, 156, 255, 0.3);
  color: #ffffff;
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
  font-size: var(--control-fs);
  border-radius: var(--action-radius);
  box-shadow:
    0 0 20px rgba(112, 132, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all var(--motion-hover);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8b9cff 0%, #7084ff 50%, #5a6bf0 100%);
  border-color: rgba(139, 156, 255, 0.5);
  box-shadow:
    0 0 30px rgba(112, 132, 255, 0.3),
    0 0 60px rgba(112, 132, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  color: #ffffff;
}
/* Variantes primary alignées sur l'échelle commune sm/lg (cohérence
   des proportions : un CTA large a la même amplitude, gold ou violet). */
/* ─── Régime operate · dashboards, outils et back-offices ─── */
.btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  box-sizing: border-box;
  min-block-size: var(--app-control-md);
  padding-inline: var(--app-control-pad-x);
  border: 1px solid transparent;
  border-radius: var(--action-radius);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--app-control-fs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--motion-quick),
    border-color var(--motion-quick),
    color var(--motion-quick);
}
.btn-app__icon {
  flex-shrink: 0;
}
.btn-app--gold {
  background: var(--gold);
  color: var(--text-on-gold);
  font-weight: var(--fw-bold);
}
.btn-app--gold:hover {
  background: var(--gold-soft);
}
.btn-app--ghost {
  border-color: var(--border-card);
  color: var(--text-secondary);
}
.btn-app--ghost:hover {
  border-color: var(--border-card-hover);
  background: var(--primary-wash-subtle);
  color: var(--text-primary);
}
.btn-app--sm {
  min-block-size: var(--app-control-sm);
  padding-inline: 0.625rem;
  font-size: 0.8125rem;
}
.btn-app--xs {
  min-block-size: var(--app-control-xs);
  padding-inline: 0.5625rem;
  border-radius: var(--action-radius);
  font-size: 0.75rem;
}
.btn-app--icon {
  inline-size: var(--app-control-md);
  min-inline-size: var(--app-control-md);
  flex: 0 0 var(--app-control-md);
  padding-inline: 0;
}
.btn-app--icon.btn-app--sm {
  inline-size: var(--app-control-sm);
  min-inline-size: var(--app-control-sm);
  flex-basis: var(--app-control-sm);
}

/* Disabled state
   Natif :disabled sur <button>, plus aria-disabled="true" pour les
   <a class="btn"> (une ancre ne peut pas etre :disabled). L'attribut
   ARIA porte l'etat pour les lecteurs d'ecran, pointer-events le neutralise. */
.btn-gold:disabled,
.btn-gold-ghost:disabled,
.btn-ghost:disabled,
.btn-primary:disabled,
.btn-danger:disabled,
.btn-gold[aria-disabled="true"],
.btn-gold-ghost[aria-disabled="true"],
.btn-ghost[aria-disabled="true"],
.btn-primary[aria-disabled="true"],
.btn-danger[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-app:disabled,
.btn-app[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state (ajoute class .is-loading) */
.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: var(--text-on-gold);
}
.btn-gold-ghost.is-loading::after,
.btn-ghost.is-loading::after {
  color: var(--text-primary);
}
.btn-danger.is-loading::after {
  color: var(--text-error);
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold,
  .btn-gold::after {
    transition-duration: 1ms !important;
  }
  .btn-gold:hover {
    transform: none;
  }
  .btn-gold:hover::after {
    animation: none !important;
  }
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Source: src/css/components/cards.css */
/* ═══════════════════════════════════════════════════════════════
   CARDS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   .card-v4              Grilles pain, feature, étapes (RADIUS 4PX)
   .card-v4--featured    Card signature Elite (max 1 par grille)
   .card                 Alias historique déprécié
   .ui-card              Carte confortable de compatibilité
   ═══════════════════════════════════════════════════════════════ */

/* ─── Card standard · radius 4px brutaliste discipliné ─── */
.card-v4 {
  padding: clamp(1rem, 0.94rem + 0.25vw, 1.25rem);
  background: rgba(112, 132, 255, 0.03);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sharp);
  transition: all var(--motion-quick);
  display: flex;
  flex-direction: column;
}
.card-v4.text-center {
  align-items: center;
  text-align: center;
}
.card-v4.text-center > .separator {
  width: 100%;
  align-self: stretch;
}
.card-v4:hover {
  border-color: var(--border-card-hover);
}

/* Featured signature Elite */
.card-v4--featured {
  background: rgba(232, 200, 114, 0.03);
  border-color: var(--gold-border);
}
.card-v4--featured:hover {
  border-color: var(--gold-glow);
}

/* Typography dans card-v4 */
.card-v4 h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0.5rem 0;
}
.card-v4 p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--body-text);
  margin: 0;
}

/* Footer card : pousse le CTA en bas dans une grille stretchée */
.card-v4__footer {
  margin-top: auto;
  padding-top: var(--space-4);
}
.card-v4__footer--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ─── Carte confortable de compatibilité · radius 16px ─── */
.ui-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--motion-hover);
}
.ui-card:hover {
  border-color: var(--border-card-hover);
  transform: translateY(-2px);
}

/* ─── Alias historiques dépréciés ─── */
.card,
.left-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  transition: all var(--motion-hover);
}
.card:hover,
.left-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
}
.card--success {
  border-color: var(--border-success);
  background: rgba(104, 176, 138, 0.04);
}
.card--error {
  border-color: var(--border-error);
  background: rgba(196, 84, 79, 0.04);
}
.card--solid {
  background: var(--bg-card-solid);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}

/* Responsive padding */
@media (max-width: 768px) {
  .card,
  .left-card {
    padding: 1.5rem;
  }
  .ui-card {
    padding: 1.5rem;
  }
  .card-v4 {
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  .card,
  .left-card {
    padding: 1.25rem;
  }
}

/* Source: src/css/components/nav.css */
/* ═══════════════════════════════════════════════════════════════
   NAV · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   .nav-fixed    Navigation fixe haut de page (blur backdrop)
   .nav-link     Lien dans nav
   .mobile-menu  Menu mobile overlay
   ═══════════════════════════════════════════════════════════════ */

.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(8, 12, 24, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-card);
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  transition: color var(--motion-quick);
}
.nav-link:hover {
  color: var(--text-primary);
}
.nav-link.is-active {
  color: var(--gold);
}

/* Mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(3, 7, 18, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-menu.active {
  display: flex;
}
.mobile-menu a {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--motion-quick);
}
.mobile-menu a:hover {
  color: var(--primary-soft);
}

/* Source: src/css/components/site-shell.css */
/* Headers marketing et footers réutilisables. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg-body) 90%, transparent);
  border-bottom: 1px solid var(--border-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header--transparent {
  background: color-mix(in srgb, var(--bg-body) 72%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: min(calc(100% - 2rem), 70rem);
  min-height: 4rem;
  margin-inline: auto;
}

.site-header--compact .site-header__inner {
  min-height: 3.5rem;
}

.site-header__brand {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-inline: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__mobile {
  display: none;
  margin-left: auto;
}

.site-header__mobile summary {
  list-style: none;
}

.site-header__mobile summary::-webkit-details-marker {
  display: none;
}

.site-header__mobile-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-card);
  box-shadow: var(--shadow-md);
}

.site-header__mobile-panel .nav-link {
  min-block-size: 44px;
  display: flex;
  align-items: center;
}

.site-footer {
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-card);
  color: var(--text-secondary);
}

.site-footer__inner {
  width: min(100%, 70rem);
  margin-inline: auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1.5fr) repeat(3, minmax(8rem, 1fr));
  gap: var(--space-8);
}

.site-footer__brand {
  color: var(--text-primary);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-wide);
}

.site-footer__title {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--fs-label);
}

.site-footer__links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--text-primary);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-card);
  color: var(--text-tertiary);
  font-size: var(--fs-legal);
}

.site-footer--compact {
  padding-block: var(--space-5);
}

.site-footer--compact .site-footer__bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.site-footer--conversion .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
}

@media (max-width: 760px) {
  .site-header__nav,
  .site-header__actions {
    display: none;
  }

  .site-header__mobile {
    display: block;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer--conversion .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Source: src/css/components/forms.css */
/* ═══════════════════════════════════════════════════════════════
   FORMS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Input, textarea, select, checkbox, radio, switch, file, search.
   États : default, hover, focus, error, success, disabled.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Form group (label + input + help/error) ─── */
.form-group {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-group--inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-card);
  border-radius: var(--field-radius);
  background: var(--bg-card-dim);
}
.form-fieldset legend {
  padding: 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.form-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.form-options--stack {
  align-items: flex-start;
  flex-direction: column;
}

.form-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: 0;
}
.form-label--required::after {
  content: "*";
  color: var(--gold);
  margin-left: 4px;
}

.form-help {
  font-size: var(--fs-annot);
  color: var(--text-tertiary);
  line-height: var(--lh-body);
}
.form-error {
  font-size: var(--fs-annot);
  color: var(--error);
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--error);
  color: var(--ink-950);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.7rem;
}
.form-success {
  font-size: var(--fs-annot);
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-success::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
}

/* ─── Base inputs (text, email, url, tel, password, number, search) ─── */
.input,
input[type="text"].input,
input[type="email"].input,
input[type="url"].input,
input[type="tel"].input,
input[type="password"].input,
input[type="number"].input,
input[type="search"].input,
input[type="date"].input,
.textarea,
textarea.textarea,
.select,
select.select {
  display: block;
  width: 100%;
  min-width: 0;
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--field-pad-x);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--field-radius);
  text-overflow: ellipsis;
  transition:
    border-color var(--motion-quick),
    background var(--motion-quick);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-placeholder);
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--border-card-hover);
}
.input:focus,
.textarea:focus,
.select:focus,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  background: rgba(112, 132, 255, 0.04);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-card-dim);
}

/* États sémantiques */
.input--error,
.textarea--error,
.select--error,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--error);
}
.input--error:focus,
.input[aria-invalid="true"]:focus {
  outline-color: var(--error);
  border-color: var(--error);
}
.input--success,
.textarea--success {
  border-color: var(--success);
}

/* Tailles
   Amplitude creusee : sm nettement plus compact, lg nettement plus ample
   que la base. Avant, sm et md ne differaient que d'1px de texte a 1440px,
   la hierarchie etait illisible. Font-size local (pas les tokens --fs-body-*
   globaux) pour ne pas toucher la typo du reste du site. */
.input--sm {
  --control-pad-y: clamp(0.3125rem, 0.27rem + 0.18vw, 0.4375rem); /* 5 à 7px */
  --field-pad-x: clamp(0.625rem, 0.58rem + 0.15vw, 0.75rem); /* 10 à 12px */
  font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13 à 14px */
}
.input--lg {
  --control-pad-y: clamp(0.9375rem, 0.8rem + 0.55vw, 1.125rem); /* 15 à 18px */
  --field-pad-x: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); /* 17 à 20px */
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 à 19px */
}

/* ─── Textarea ─── */
.textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-sans);
}

/* ─── Select (avec chevron custom) ─── */
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238B9CFF' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* ─── Input avec icône (search) ─── */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
/* input.input pour battre la specificite de input[type=search].input (base) :
   sinon le padding raccourci ecrase padding-left et l'icone chevauche le placeholder. */
.input-group input.input {
  padding-left: 40px;
}
.input-group__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.input-group--suffix input.input {
  padding-left: 14px;
  padding-right: 40px;
}
.input-group--suffix .input-group__icon {
  left: auto;
  right: 14px;
}

/* ─── Checkbox ─── */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-block-size: var(--control-min-h);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  user-select: none;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-glyph);
  height: var(--control-glyph);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-hard);
  background: var(--bg-card);
  transition: all var(--motion-quick);
  flex-shrink: 0;
}
.checkbox:hover .checkbox__box {
  border-color: var(--border-card-hover);
}
.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.checkbox input:checked + .checkbox__box {
  background: var(--gold);
  border-color: var(--gold);
}
.checkbox input:checked + .checkbox__box::after {
  content: "✓";
  color: var(--ink-950);
  font-weight: 800;
  font-size: calc(var(--control-glyph) * 0.72); /* ~14px à glyphe 20px */
  line-height: 1;
}
.checkbox input:disabled ~ .checkbox__box {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Radio ─── */
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-block-size: var(--control-min-h);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  user-select: none;
}
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-glyph);
  height: var(--control-glyph);
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: var(--bg-card);
  transition: all var(--motion-quick);
  flex-shrink: 0;
}
.radio:hover .radio__circle {
  border-color: var(--border-card-hover);
}
.radio input:focus-visible + .radio__circle {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.radio input:checked + .radio__circle {
  border-color: var(--gold);
  border-width: 2px;
}
.radio input:checked + .radio__circle::after {
  content: "";
  width: calc(var(--control-glyph) * 0.5); /* dot = moitié du cercle */
  height: calc(var(--control-glyph) * 0.5);
  border-radius: 50%;
  background: var(--gold);
}

/* ─── Switch (toggle) ─── */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-block-size: var(--control-min-h);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  user-select: none;
}
.switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch__track {
  /* Géométrie dérivée d'une seule hauteur : à glyphe 20px → 22×39.6px,
     thumb 16px, translate 17.6px (≈ l'historique 22×40 / 16 / 18).
     Densité et tactile rescalent tout depuis --control-glyph. */
  --_h: calc(var(--control-glyph) + 0.125rem);
  --_thumb: calc(var(--_h) - 6px);
  position: relative;
  display: inline-block;
  width: calc(var(--_h) * 1.8);
  height: var(--_h);
  background: rgba(112, 132, 255, 0.2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-full);
  transition: background var(--motion-quick);
  flex-shrink: 0;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: calc((var(--_h) - var(--_thumb)) / 2);
  left: calc((var(--_h) - var(--_thumb)) / 2);
  width: var(--_thumb);
  height: var(--_thumb);
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--motion-quick);
}
.switch input:checked + .switch__track {
  background: var(--gold);
}
.switch input:checked + .switch__track::after {
  transform: translateX(calc(var(--_h) * 0.8));
  background: var(--ink-950);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── File input ─── */
.file-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--control-min-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px dashed var(--border-card);
  border-radius: var(--field-radius);
  background: var(--bg-card-dim);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  color: var(--text-secondary);
  transition: all var(--motion-quick);
  width: fit-content;
}
/* Par defaut le file-input epouse son contenu (bouton d'upload). fit-content
   garantit le hug meme dans un parent flex/grid en align stretch. Opt-in pleine
   largeur via --block, pour un formulaire aligne sur des champs width:100%. */
.file-input--block {
  width: 100%;
}
.file-input:hover {
  border-color: var(--gold-border);
  color: var(--text-primary);
}
.file-input input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
}
.file-input__icon {
  color: var(--gold);
  font-size: 1.1rem;
}

/* ─── Input range (slider) ─── */
.range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border-card);
  border-radius: var(--radius-full);
  outline: none;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: var(--control-glyph);
  height: var(--control-glyph);
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--motion-quick);
}
.range::-moz-range-thumb {
  width: var(--control-glyph);
  height: var(--control-glyph);
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── Form row (2 colonnes) ─── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Source: src/css/components/modal.css */
/* ═══════════════════════════════════════════════════════════════
   MODAL · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Modal, dialog, drawer. Basé sur <dialog> HTML natif quand possible.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Backdrop ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-hover);
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Modal container ─── */
.modal {
  background: var(--bg-overlay);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--motion-hover);
}
.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
}
.modal--sm {
  max-width: 400px;
}
.modal--lg {
  max-width: 800px;
}

/* ─── Modal header ─── */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-card);
}
.modal__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* Plancher tactile : inerte en desktop souris (--control-min-h: auto),
     44px en pointer coarse, 48px en densité touch (WCAG 2.2) */
  min-width: var(--control-min-h);
  min-height: var(--control-min-h);
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: var(--action-radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--motion-quick);
  font-size: 1.1rem;
}
.modal__close:hover {
  border-color: var(--border-card-hover);
  color: var(--text-primary);
}

/* ─── Modal body ─── */
.modal__body {
  padding: var(--space-5) var(--space-6);
  color: var(--body-text);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}
.modal__body > p:first-child {
  margin-top: 0;
}
.modal__body > *:last-child {
  margin-bottom: 0;
}

/* ─── Modal footer (actions) ─── */
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-card);
  background: var(--bg-inset);
  flex-wrap: wrap;
}

/* ─── Drawer (slide-in from right) ─── */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  width: min(440px, 90vw);
  background: var(--bg-overlay);
  border-left: 1px solid var(--border-card);
  transform: translateX(100%);
  transition: transform var(--motion-page);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateX(0);
}
.drawer--left {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border-card);
  transform: translateX(-100%);
}
.drawer--left.is-open {
  transform: translateX(0);
}

/* Pour les drawer : utilise les classes .modal__header / .modal__body / .modal__footer */

/* ─── Scroll lock du body quand modal open ─── */
body.is-modal-open {
  overflow: hidden;
}

/* Source: src/css/components/skeleton.css */
/* ═══════════════════════════════════════════════════════════════
   SKELETON · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Placeholder de chargement. Respecte prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(112, 132, 255, 0.04) 0%,
    rgba(112, 132, 255, 0.12) 50%,
    rgba(112, 132, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: ll-skeleton-shimmer 1.6s var(--ease-premium) infinite;
  border-radius: var(--radius-sharp);
}

@keyframes ll-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: rgba(112, 132, 255, 0.08);
  }
}

/* Shapes */
.skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
  width: 100%;
}
.skeleton--text-sm {
  height: 0.75em;
}
.skeleton--text-lg {
  height: 1.25em;
}
.skeleton--title {
  height: 1.75em;
  width: 60%;
  margin-bottom: 1em;
}
.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton--avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.skeleton--card {
  height: 180px;
  width: 100%;
}
.skeleton--button {
  width: 140px;
  height: 42px;
  border-radius: var(--action-radius);
}
.skeleton--circle {
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Skeleton card composite (combine plusieurs skeleton) */
.skeleton-card {
  padding: var(--space-6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sharp);
  display: grid;
  gap: var(--space-3);
}

/* Source: src/css/components/progress.css */
/* ═══════════════════════════════════════════════════════════════
   PROGRESS · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Progress bar (linear), steps progress (checkout), spinner standalone.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Progress bar linear ─── */
.progress {
  display: block;
  width: 100%;
  height: 8px;
  background: rgba(112, 132, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(232, 200, 114, 0.4);
}
.progress--violet .progress__bar {
  background: var(--primary);
  box-shadow: 0 0 12px rgba(112, 132, 255, 0.4);
}
.progress--success .progress__bar {
  background: var(--success);
  box-shadow: none;
}

/* Tailles */
.progress--sm {
  height: 4px;
}
.progress--lg {
  height: 12px;
}

/* Label et value */
.progress-wrapper {
  display: grid;
  gap: var(--space-2);
}
.progress-wrapper__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: var(--text-primary);
}
.progress-wrapper__value {
  color: var(--gold);
  font-weight: var(--fw-bold);
}

/* Indéterminé (loading sans progression) */
.progress--indeterminate .progress__bar {
  width: 40% !important;
  animation: ll-progress-slide 1.4s var(--ease-premium) infinite;
}
@keyframes ll-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%);
  }
}

/* ─── Steps progress (checkout, onboarding) ─── */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  /* Cercle piloté par la densité : 32px en desktop 1440 (glyphe 20px),
     28px en compact, relevé au plancher tactile en coarse/touch
     (WCAG 2.2 Target Size). Le connecteur suit via les calc() dessous. */
  --steps-circle: calc(var(--control-glyph) + 12px);
}
[data-density="touch"] .steps {
  --steps-circle: 3rem;
}
@media (pointer: coarse) {
  .steps {
    --steps-circle: 2.75rem;
  }
  [data-density="touch"] .steps {
    --steps-circle: 3rem;
  }
}
.steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--fs-annot);
  color: var(--text-tertiary);
  text-align: center;
}
.steps__item::after {
  content: "";
  position: absolute;
  top: calc(var(--steps-circle) / 2);
  left: calc(50% + var(--steps-circle) / 2 + 4px);
  right: calc(-50% + var(--steps-circle) / 2 + 4px);
  height: 2px;
  background: var(--border-card);
  z-index: 0;
}
.steps__item:last-child::after {
  display: none;
}
.steps__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--steps-circle);
  height: var(--steps-circle);
  border: 2px solid var(--border-card);
  background: var(--bg-body);
  border-radius: 50%;
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
  transition: all var(--motion-quick);
}
.steps__item.is-active .steps__circle {
  border-color: var(--text-gold);
  color: var(--text-gold);
  background: rgba(232, 200, 114, 0.08);
}
.steps__item.is-complete .steps__circle {
  border-color: var(--success);
  background: var(--success);
  color: var(--ink-950);
}
.steps__item.is-complete .steps__circle::after {
  content: "✓";
}
.steps__item.is-complete::after {
  background: var(--success);
}
.steps__item.is-active .steps__label,
.steps__item.is-complete .steps__label {
  color: var(--text-primary);
}

/* ─── Spinner standalone ─── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ll-spin 0.7s linear infinite;
  color: var(--primary);
}
.spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.spinner--gold {
  color: var(--gold);
}
.spinner--white {
  color: var(--text-primary);
}

@keyframes ll-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Source: src/css/utilities.css */
/* ═══════════════════════════════════════════════════════════════
   UTILITIES · LE LABO IA Design System V7
   ───────────────────────────────────────────────────────────────
   Utilities minimales pour projets SANS Tailwind.
   Si ton projet utilise Tailwind, n'importe PAS ce fichier
   (doublon). Utilise les tokens via tailwind.config.ts preset.

   Philosophie : ne pas réécrire Tailwind complet. Juste les
   utilities les plus fréquentes dans le DS LE LABO IA.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Display ─── */
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}

/* ─── Flex ─── */
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: var(--space-1);
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-5 {
  gap: var(--space-5);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-8 {
  gap: var(--space-8);
}

/* ─── Grid ─── */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ─── Text align ─── */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* ─── Text color ─── */
.text-white {
  color: #fff;
}
.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.text-muted {
  color: var(--text-muted);
}
.text-body {
  color: var(--body-text);
}
.text-gold {
  color: var(--gold);
}
.text-violet {
  color: var(--primary);
}
.text-success {
  color: var(--success);
}
.text-error {
  color: var(--error);
}

/* ─── Font weight ─── */
.font-regular {
  font-weight: var(--fw-regular);
}
.font-medium {
  font-weight: var(--fw-medium);
}
.font-semibold {
  font-weight: var(--fw-semibold);
}
.font-bold {
  font-weight: var(--fw-bold);
}
.font-extrabold {
  font-weight: var(--fw-extrabold);
}

/* ─── Margin & padding (les plus fréquents) ─── */
.m-0 {
  margin: 0;
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mb-12 {
  margin-bottom: var(--space-12);
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.p-0 {
  padding: 0;
}
.p-4 {
  padding: var(--space-4);
}
.p-6 {
  padding: var(--space-6);
}
.p-8 {
  padding: var(--space-8);
}

/* ─── Width & max-width ─── */
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.max-w-wide {
  max-width: var(--container-wide);
}
.max-w-narrow {
  max-width: var(--container-narrow);
}
.max-w-form {
  max-width: var(--container-form);
}
/* Mesure de lecture : plafonne un bloc de texte à ~65 caractères */
.content-measure {
  max-width: 65ch;
}
/* Champ de toolbar (searchbar, select de filtre) : largeur posée,
   comprimable sur petit écran */
.w-field {
  inline-size: var(--field-w);
  max-inline-size: 100%;
}

/* ─── Position ─── */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/* ─── Overflow ─── */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
/* Une ligne, coupée par ellipse (l'élément a besoin d'une largeur contrainte) */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Border radius ─── */
.rounded-hard {
  border-radius: var(--radius-hard);
}
.rounded-sharp {
  border-radius: var(--radius-sharp);
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* ─── Responsive breakpoints utilities (mobile-first) ─── */
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:grid {
    display: grid;
  }
  .lg\:hidden {
    display: none;
  }
}