/* =============================================================================
   Collectys Cash — feuille de style du site
   -----------------------------------------------------------------------------
   UN SEUL FICHIER, assemblé une fois lors du portage depuis le site Astro.

   Astro isolait les styles composant par composant en ajoutant un attribut de
   portée à chaque sélecteur. Ce mécanisme n'existe plus ici, et il n'est pas
   nécessaire : le nommage BEM (.card__title, .plan__badge, .app__row…) suffit
   à garantir qu'aucun bloc n'écrase le voisin. Les rares sélecteurs qui
   devaient sortir de leur portée — annotés :global() côté Astro — sont écrits
   normalement.

   L'ordre est celui de la cascade voulue : polices, jetons de design, styles
   globaux, composants, puis pages. Ne pas réordonner sans raison.

   Aucune couleur en dur en dehors de la section « jetons » et du visuel du
   hero, qui reproduit une capture de l'application.
   ============================================================================= */

/* =============================================================================
   Polices — Inter auto-hébergée
   -----------------------------------------------------------------------------
   Quatre graisses, sous-ensemble latin (il couvre tout le français, œ et
   ligatures comprises). Les fichiers viennent de Fontsource (licence SIL Open
   Font) via l'API Fonts d'Astro, au dernier build du site statique ; ils sont
   repris tels quels dans assets/fonts/.

   Les quatre dernières règles sont la police de secours avec ses métriques
   ajustées : Arial occupe alors exactement la même place qu'Inter, donc aucun
   décalage de mise en page au moment du swap. C'est ce que générait Astro, et
   c'est ce qui évite un décalage visible sur une connexion lente.
   ============================================================================= */

@font-face {
  font-family: 'Inter Web';
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Web';
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Web';
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Web';
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter Web fallback';
  src: local('Arial');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  size-adjust: 107.1194%;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Web fallback';
  src: local('Arial');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
  size-adjust: 107.1194%;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Web fallback';
  src: local('Arial');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  size-adjust: 107.1194%;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Web fallback';
  src: local('Arial');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  size-adjust: 107.1194%;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
}

:root {
  --font-inter: 'Inter Web', 'Inter Web fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
}

/* =============================================================================
   Jetons de design (repris de src/styles/tokens.css)
   ============================================================================= */

:root {
  /* ── Échelle primaire : violet ─────────────────────────────────────────── */
  --plum-50: #fbf4fb;
  --plum-100: #f6e6f6;
  --plum-200: #eccbec;
  --plum-300: #dda4dd;
  --plum-400: #c86ec8;
  --plum-500: #a832a8;
  --plum-600: #902390; /* charte BGD — hover */
  --plum-700: #7a127a;
  --plum-800: #660066; /* charte BGD — primaire */
  --plum-900: #4d004d;
  --plum-950: #2d002d;

  /* ── Échelle accent : lime ─────────────────────────────────────────────── */
  --lime-200: #f2f299;
  --lime-300: #eaea4d;
  --lime-400: #dcdc1a;
  --lime-500: #cccc00; /* charte BGD — accent */
  --lime-600: #a7a700; /* charte BGD — hover */
  --lime-700: #7d7d00;

  /* ── Neutres : gris légèrement teintés violet pour lier l'ensemble ─────── */
  --gray-0: #ffffff;
  --gray-25: #fcfbfc;
  --gray-50: #f8f8f8; /* charte BGD */
  --gray-100: #f0eef1;
  --gray-200: #e4e0e6;
  --gray-300: #cbc5ce;
  --gray-400: #9a929f;
  --gray-500: #666666; /* charte BGD */
  --gray-600: #4f4a53;
  --gray-700: #333333; /* charte BGD */
  --gray-800: #242028;
  --gray-900: #191520;
  --gray-950: #110e16;

  /* ── Sémantique : états ────────────────────────────────────────────────── */
  --green-500: #0f8a5f;
  --green-100: #daf5e9;
  --red-500: #c62828;
  --red-100: #fdeaea;
  --amber-500: #b26b00;

  /* ── Typographie ───────────────────────────────────────────────────────── */
  --font-sans:
    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;

  /* Échelle fluide : la valeur s'interpole entre 360px et 1280px de viewport,
     ce qui évite d'empiler des media queries sur chaque taille de texte. */
  --text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.17rem + 0.36vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.36rem + 0.63vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.86rem + 1.74vw, 3.25rem);
  /* Le plafond était à 4,25rem : au-delà de 1200px de large, le H1 de la page
     d'accueil atteignait 68px et écrasait tout le reste du hero, d'autant plus
     visiblement que le conteneur, lui, reste à 1200px. 3,5rem tient la
     hiérarchie sans dominer. */
  --text-5xl: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Espacement : échelle 4px ──────────────────────────────────────────── */
  --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-24: 6rem;
  --space-32: 8rem;

  /* Rythme vertical des sections, réduit sur mobile. */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ── Structure ─────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-narrow: 760px; /* longueur de ligne confortable pour la prose */
  --container-pad: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --border-width: 1px;

  /* ── Mouvement ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
}

/* ==========================================================================
   Thème clair (par défaut)
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: var(--gray-0);
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-100);
  /* Fond des sections « inversées » (bandeaux CTA, footer). */
  --bg-inverse: var(--plum-950);

  --surface: var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-overlay: var(--gray-0);

  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-subtle: var(--gray-400);
  --text-on-inverse: #f4eff6;
  --text-on-inverse-muted: #c3b4ca;
  --text-on-primary: #ffffff;
  --text-on-accent: var(--plum-950);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-inverse: rgb(255 255 255 / 0.14);

  --primary: var(--plum-800);
  --primary-hover: var(--plum-600);
  --primary-active: var(--plum-900);
  --primary-subtle: var(--plum-50);
  --primary-subtle-border: var(--plum-200);
  /* Violet lisible sur fond sombre — utilisé dans les sections inversées. */
  --primary-on-dark: var(--plum-300);

  --accent: var(--lime-500);
  --accent-hover: var(--lime-600);
  --accent-subtle: #fafae0;

  --success: var(--green-500);
  --success-subtle: var(--green-100);
  --danger: var(--red-500);
  --danger-subtle: var(--red-100);
  --warning: var(--amber-500);

  --focus-ring: var(--plum-600);

  --shadow-xs: 0 1px 2px rgb(45 0 45 / 0.05);
  --shadow-sm: 0 1px 3px rgb(45 0 45 / 0.07), 0 1px 2px rgb(45 0 45 / 0.04);
  --shadow-md: 0 4px 12px rgb(45 0 45 / 0.08), 0 1px 3px rgb(45 0 45 / 0.05);
  --shadow-lg: 0 12px 32px rgb(45 0 45 / 0.1), 0 4px 8px rgb(45 0 45 / 0.05);
  --shadow-primary: 0 6px 20px rgb(102 0 102 / 0.22);
}

/* ==========================================================================
   Thème sombre
   --------------------------------------------------------------------------
   Trois états à couvrir : choix explicite (data-theme), et préférence système
   quand aucun choix n'a été fait. La règle prefers-color-scheme est donc
   neutralisée par [data-theme="light"] pour que le bouton gagne dans les
   deux sens.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: var(--gray-950);
    --bg-subtle: #171320;
    --bg-muted: #1e1928;
    --bg-inverse: #060409;

    --surface: #171320;
    --surface-raised: #1e1928;
    --surface-overlay: #232030;

    --text: #f3eff7;
    --text-muted: #a79dae;
    --text-subtle: #7d7386;
    --text-on-inverse: #f3eff7;
    --text-on-inverse-muted: #a79dae;
    --text-on-primary: var(--gray-950);
    --text-on-accent: #14101a;

    --border: #2c2637;
    --border-strong: #3d3549;
    --border-inverse: rgb(255 255 255 / 0.1);

    /* Le violet de charte est trop sombre sur fond sombre : on remonte
       l'échelle pour tenir 4,5:1, en gardant la même teinte. */
    --primary: var(--plum-300);
    --primary-hover: var(--plum-200);
    --primary-active: var(--plum-400);
    --primary-subtle: rgb(144 35 144 / 0.16);
    --primary-subtle-border: rgb(221 164 221 / 0.28);
    --primary-on-dark: var(--plum-300);

    --accent: var(--lime-400);
    --accent-hover: var(--lime-300);
    --accent-subtle: rgb(204 204 0 / 0.12);

    --success: #3ecf8e;
    --success-subtle: rgb(62 207 142 / 0.14);
    --danger: #f28b82;
    --danger-subtle: rgb(242 139 130 / 0.14);
    --warning: #e5a54b;

    --focus-ring: var(--plum-300);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);
    --shadow-primary: 0 6px 20px rgb(0 0 0 / 0.5);
  }
}

/* Choix explicite « sombre » : mêmes valeurs, priorité sur la préférence système. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: var(--gray-950);
  --bg-subtle: #171320;
  --bg-muted: #1e1928;
  --bg-inverse: #060409;

  --surface: #171320;
  --surface-raised: #1e1928;
  --surface-overlay: #232030;

  --text: #f3eff7;
  --text-muted: #a79dae;
  --text-subtle: #7d7386;
  --text-on-inverse: #f3eff7;
  --text-on-inverse-muted: #a79dae;
  --text-on-primary: var(--gray-950);
  --text-on-accent: #14101a;

  --border: #2c2637;
  --border-strong: #3d3549;
  --border-inverse: rgb(255 255 255 / 0.1);

  --primary: var(--plum-300);
  --primary-hover: var(--plum-200);
  --primary-active: var(--plum-400);
  --primary-subtle: rgb(144 35 144 / 0.16);
  --primary-subtle-border: rgb(221 164 221 / 0.28);
  --primary-on-dark: var(--plum-300);

  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-subtle: rgb(204 204 0 / 0.12);

  --success: #3ecf8e;
  --success-subtle: rgb(62 207 142 / 0.14);
  --danger: #f28b82;
  --danger-subtle: rgb(242 139 130 / 0.14);
  --warning: #e5a54b;

  --focus-ring: var(--plum-300);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);
  --shadow-primary: 0 6px 20px rgb(0 0 0 / 0.5);
}

/* =============================================================================
   Styles globaux (repris de src/styles/global.css)
   ============================================================================= */

/* ── Reset ────────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compense le header collant quand on saute vers une ancre. */
  scroll-padding-top: calc(var(--header-height, 68px) + var(--space-4));
}

body {
  font-family: var(--font-inter, var(--font-sans)), var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-normal);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss01' 1; /* l à empattement, a mono-étage */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
  overflow-wrap: break-word;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

/*
 * L'attribut `hidden` doit gagner sur le `display` des composants.
 *
 * La règle `[hidden] { display: none }` du navigateur vient de sa feuille par
 * défaut : n'importe quelle règle d'auteur la bat, y compris un simple
 * `.lead-form { display: grid }`. Résultat sans cette ligne : le formulaire
 * masqué après envoi reste affiché, et le bloc « Demande bien reçue » est
 * visible en permanence sous le formulaire vide.
 *
 * Ce défaut existait sur le site Astro (visible sur /demo et /contact) ; il est
 * corrigé ici. C'est le seul !important de la feuille, et il est à sa place :
 * `hidden` est une déclaration d'intention, pas une suggestion.
 */
[hidden] {
  display: none !important;
}

:target {
  scroll-margin-top: calc(var(--header-height, 68px) + var(--space-6));
}

/* ── Titres ───────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
}
h4 {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
}

p {
  text-wrap: pretty;
}

/* ── Liens ────────────────────────────────────────────────────────────────── */

a {
  color: var(--primary);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--primary-hover);
  text-decoration-color: currentColor;
}

/* ── Focus ────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Le focus au clavier seulement : pas de halo au clic souris. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Accessibilité ────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-header) + 10);
  padding: var(--space-3) var(--space-5);
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--text-on-primary);
}

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

/* ── Mise en page ─────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

.section--subtle {
  background-color: var(--bg-subtle);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

/* Sépare deux sections de même fond sans surcharger visuellement. */
.section--bordered {
  border-top: var(--border-width) solid var(--border);
}

/* Deux sections de même fond qui se suivent cumulaient leurs marges
   verticales : jusqu'à 224px de vide entre le dernier mot de l'une et le
   premier titre de l'autre, sans rupture de couleur pour le justifier. */
.section--subtle + .section--subtle {
  padding-block-start: 0;
}

/* Intitulé de section à gauche, contenu à droite.

   Une FAQ occupe environ 760px : posée seule dans un conteneur de 1200, elle
   laisse un tiers de la largeur vide sur les grands écrans. En deux colonnes,
   l'intitulé occupe ce vide et reste visible pendant le déroulé des réponses. */
@media (min-width: 1024px) {
  .split-header {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    gap: var(--space-12);
    align-items: start;
  }

  /* Sélecteur volontairement plus spécifique que la règle de portée du
     composant SectionHeader, qui pose sa propre marge basse. */
  .split-header > .section-header:first-child {
    margin-block-end: 0;
    position: sticky;
    top: calc(var(--header-height, 68px) + var(--space-8));
  }
}

.stack > * + * {
  margin-block-start: var(--stack-gap, var(--space-4));
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Primitives de texte ──────────────────────────────────────────────────── */

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

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

/* ── Prose : corps d'article et pages éditoriales ─────────────────────────── */

.prose {
  max-width: var(--container-narrow);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.prose > * + * {
  margin-block-start: var(--space-6);
}

.prose h2 {
  font-size: var(--text-2xl);
  margin-block-start: var(--space-12);
  scroll-margin-top: calc(var(--header-height, 68px) + var(--space-6));
}

.prose h3 {
  font-size: var(--text-xl);
  margin-block-start: var(--space-10);
  scroll-margin-top: calc(var(--header-height, 68px) + var(--space-6));
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-6);
}

.prose li + li {
  margin-block-start: var(--space-2);
}

.prose li::marker {
  color: var(--primary);
}

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.prose blockquote {
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: var(--space-5);
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.prose pre {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.prose th {
  font-weight: var(--weight-semibold);
  background: var(--bg-subtle);
}

.prose hr {
  border: none;
  border-top: var(--border-width) solid var(--border);
}

.prose img {
  border-radius: var(--radius-md);
  width: 100%;
}

/* =============================================================================
   Composant — Fil d’Ariane
   ============================================================================= */

  /* Le fil d'Ariane est rattaché au header plutôt que posé au milieu du blanc :
     seul sur un fond de page, il flottait sans appartenir à rien. Fond discret
     et filet en bas, il se lit comme une barre de contexte, dans le
     prolongement de la navigation. */
  .breadcrumbs {
    padding-block: var(--space-3);
    font-size: var(--text-sm);
    background: var(--bg-subtle);
    border-block-end: var(--border-width) solid var(--border);
  }

  /*
    Le fil d'Ariane porte la classe .container : il doit s'aligner sur le reste
    de la page. Deux règles l'en empêchaient.

    « margin: 0 » écrasait le « margin-inline: auto » de .container : la boîte
    de 1200px se collait au bord gauche de l'écran au lieu d'être centrée.
    Et la remise à zéro « ol[role='list'] { padding: 0 } » (0-1-1) l'emporte sur
    une simple classe (0-1-0), donc le texte démarrait au ras du bord. D'où le
    sélecteur qualifié par le nom de balise ci-dessous, à égalité de
    spécificité mais déclaré plus loin.
  */
  ol.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin-block: 0;
    padding-inline: var(--container-pad);
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
  }

  .breadcrumbs__item a {
    color: var(--text-muted);
    text-decoration: none;
  }

  .breadcrumbs__item a:hover {
    color: var(--primary);
    text-decoration: underline;
  }

  .breadcrumbs__item [aria-current='page'] {
    color: var(--text);
    font-weight: var(--weight-medium);
  }

  .breadcrumbs__sep {
    width: 13px;
    height: 13px;
    color: var(--text-subtle);
  }

/* =============================================================================
   Composant — En-tête et navigation
   ============================================================================= */

  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: var(--border-width) solid transparent;
    transition:
      border-color var(--duration-base) var(--ease-out),
      background-color var(--duration-base) var(--ease-out);
  }

  /* La bordure n'apparaît qu'au défilement : en haut de page, le header se
     fond dans le hero. */
  .header[data-scrolled] {
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--header-height, 68px);
  }

  .header__brand {
    text-decoration: none;
    flex-shrink: 0;
  }

  .header__nav {
    display: none;
    margin-inline-end: auto;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav__item {
    position: relative;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
  }

  .nav__link:hover,
  .nav__link[data-active='true'] {
    color: var(--text);
    background: var(--bg-muted);
  }

  .nav__link--button {
    font-family: inherit;
  }

  .nav__chevron {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  [aria-expanded='true'] .nav__chevron {
    transform: rotate(180deg);
  }

  /* ── Sous-menu ────────────────────────────────────────────────────────── */

  .dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 260px;
    padding: var(--space-2);
    background: var(--surface-overlay);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      visibility var(--duration-fast);
    z-index: var(--z-dropdown);
  }

  /* Ouverture au survol ET au focus clavier ; l'attribut est posé par le JS
     au clic, pour les écrans tactiles où :hover n'existe pas. */
  .nav__item--has-menu:hover .dropdown,
  .nav__item--has-menu:focus-within .dropdown,
  .dropdown[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Pont invisible entre le bouton et le panneau : sans lui, le survol se perd
     dans l'interstice et le menu se referme avant d'être atteint. */
  .nav__item--has-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--space-2);
  }

  .dropdown__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Au-delà de six entrées, une colonne unique produit un panneau plus haut
     que le hero. On passe sur deux colonnes plutôt que de faire défiler. */
  .dropdown--wide {
    min-width: 520px;
  }

  .dropdown--wide .dropdown__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2);
  }

  .dropdown__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
  }

  .dropdown__link:hover,
  .dropdown__link[aria-current='page'] {
    color: var(--primary);
    background: var(--primary-subtle);
  }

  /* ── Actions ──────────────────────────────────────────────────────────── */

  .header__actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .header__login {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .header__login:hover {
    color: var(--text);
    background: var(--bg-muted);
  }

  .header__login-icon {
    width: 15px;
    height: 15px;
  }

  /* ── Burger ───────────────────────────────────────────────────────────── */

  .header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    padding: 0 10px;
    border-radius: var(--radius-md);
  }

  .header__burger-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease-out);
  }

  [aria-expanded='true'] .header__burger-bar:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  [aria-expanded='true'] .header__burger-bar:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* ── Menu mobile ──────────────────────────────────────────────────────── */

  .mobile {
    border-top: var(--border-width) solid var(--border);
    background: var(--bg);
    max-height: calc(100svh - var(--header-height, 68px));
    overflow-y: auto;
  }

  .mobile__inner {
    padding-block: var(--space-6) var(--space-8);
  }

  .mobile__list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
  }

  .mobile__link {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-decoration: none;
  }

  .mobile__sublist {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--border);
  }

  .mobile__sublink {
    display: block;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    font-size: var(--text-base);
    color: var(--text-muted);
    text-decoration: none;
  }

  .mobile__actions {
    display: grid;
    gap: var(--space-3);
  }

  @media (min-width: 1024px) {
    .header__nav,
    .header__actions {
      display: flex;
    }
    .header__burger,
    .mobile {
      display: none;
    }
  }

/* =============================================================================
   Composant — Pied de page
   ============================================================================= */

  .footer {
    margin-block-start: auto;
    padding-block: var(--space-16) var(--space-8);
    background: var(--bg-inverse);
    color: var(--text-on-inverse-muted);
    font-size: var(--text-sm);
  }

  .footer__top {
    display: grid;
    gap: var(--space-12);
    padding-block-end: var(--space-12);
    border-bottom: 1px solid var(--border-inverse);
  }

  /* Le logo suit currentColor : sur le fond sombre du footer, il doit passer
     en clair quel que soit le thème actif. */
  .footer__brand .logo {
    color: var(--text-on-inverse);
  }

  .footer__pitch {
    margin-block-start: var(--space-5);
    max-width: 34ch;
    line-height: var(--leading-relaxed);
  }

  .footer__address {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-6);
    font-style: normal;
  }

  .footer__address a {
    color: var(--text-on-inverse-muted);
    text-decoration: none;
    width: fit-content;
  }

  .footer__address a:hover {
    color: var(--text-on-inverse);
    text-decoration: underline;
  }

  .footer__nav {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-on-inverse);
    margin-block-end: var(--space-4);
  }

  .footer__list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer__link {
    color: var(--text-on-inverse-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .footer__link:hover {
    color: var(--text-on-inverse);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-6);
    font-size: var(--text-xs);
  }

  .footer__legal {
    color: var(--text-on-inverse-muted);
  }

  .footer__legal a {
    color: var(--text-on-inverse-muted);
  }

  @media (min-width: 768px) {
    .footer__nav {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .footer__top {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: var(--space-16);
    }
  }

/* =============================================================================
   Composant — Marque
   ============================================================================= */

  .logo {
    display: inline-flex;
    align-items: center;
    /* Le mot-symbole hérite de cette couleur via currentColor. */
    color: var(--text);
  }

  .logo svg {
    display: block;
  }

/* =============================================================================
   Composant — Bascule de thème
   ============================================================================= */

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: var(--border-width) solid transparent;
    color: var(--text-muted);
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out);
  }

  .theme-toggle:hover {
    background: var(--bg-muted);
    color: var(--text);
    border-color: var(--border);
  }

  .theme-toggle__icon {
    position: absolute;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  /* Thème clair actif -> on propose le passage au sombre -> icône lune. */
  .theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  .theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

  :root[data-theme='dark'] .theme-toggle__icon--sun {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
  :root[data-theme='dark'] .theme-toggle__icon--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle__icon--sun {
      opacity: 1;
      transform: rotate(0) scale(1);
    }
    :root:not([data-theme='light']) .theme-toggle__icon--moon {
      opacity: 0;
      transform: rotate(90deg) scale(0.6);
    }
  }

/* =============================================================================
   Composant — Bouton
   ============================================================================= */

  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-border: transparent;
    --btn-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .btn:hover:not(:disabled):not([aria-disabled='true']) {
    transform: translateY(-1px);
  }

  .btn:active:not(:disabled) {
    transform: translateY(0);
  }

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

  /* ── Tailles ─────────────────────────────────────────────────────────── */
  /* Hauteur mini 44px sur les tailles md/lg : cible tactile recommandée. */

  .btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 36px;
  }

  .btn--md {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
    min-height: 44px;
  }

  .btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    min-height: 52px;
  }

  .btn--full {
    width: 100%;
  }

  /* ── Variantes ───────────────────────────────────────────────────────── */

  .btn--primary {
    --btn-bg: var(--primary);
    --btn-fg: var(--text-on-primary);
    --btn-shadow: var(--shadow-primary);
  }

  /*
    Le survol inverse le bouton au lieu d'éclaircir son fond : violet sur clair
    plutôt que clair sur violet. L'ancienne version se contentait de passer au
    violet de survol, ce qui marchait en thème clair mais faisait disparaître le
    texte en thème sombre, où le violet remonte l'échelle — blanc sur --plum-200
    tombait à 1,5:1. L'inversion tient 11,9:1 en clair et 9,1:1 en sombre, sans
    dépendre de la luminosité du violet.
  */
  .btn--primary:hover:not(:disabled) {
    --btn-bg: var(--surface);
    --btn-fg: var(--primary);
    --btn-border: var(--primary);
    --btn-shadow: var(--shadow-xs);
  }

  .btn--secondary {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-border: var(--border-strong);
    --btn-shadow: var(--shadow-xs);
  }

  .btn--secondary:hover:not(:disabled) {
    --btn-border: var(--primary);
    --btn-fg: var(--primary);
  }

  /*
   * Le lime de charte est très clair : le texte doit être quasi noir.
   * Blanc sur #cccc00 tomberait à 1,8:1, illisible.
   */
  .btn--accent {
    --btn-bg: var(--accent);
    --btn-fg: var(--text-on-accent);
  }

  .btn--accent:hover:not(:disabled) {
    --btn-bg: var(--accent-hover);
  }

  .btn--ghost {
    --btn-fg: var(--text-muted);
  }

  .btn--ghost:hover:not(:disabled) {
    --btn-bg: var(--bg-muted);
    --btn-fg: var(--text);
  }

  /* Pour les sections à fond sombre, où --surface n'a pas le bon contraste. */
  .btn--inverse {
    --btn-fg: var(--text-on-inverse);
    --btn-border: var(--border-inverse);
  }

  .btn--inverse:hover:not(:disabled) {
    --btn-bg: rgb(255 255 255 / 0.08);
    --btn-border: rgb(255 255 255 / 0.3);
  }

  .btn__ext {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
    opacity: 0.7;
  }

/* =============================================================================
   Composant — En-tête de section
   ============================================================================= */

  .section-header {
    display: grid;
    gap: var(--space-4);
    max-width: 42rem;
    margin-block-end: var(--space-12);
  }

  .section-header--center {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .section-header--center .section-header__lead {
    margin-inline: auto;
  }

  .section-header__title {
    max-width: 20ch;
  }

  .section-header--center .section-header__title {
    max-width: 24ch;
  }

  /*
    Variante « split » : titre à gauche, chapô à droite.

    Un en-tête de section plafonné à 42rem laisse le tiers droit du conteneur
    vide sur un grand écran. Répartir le titre et le chapô sur deux colonnes
    occupe la largeur sans ajouter une ligne de texte de remplissage.
  */
  @media (min-width: 1024px) {
    .section-header--split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--space-12);
      max-width: none;
    }

    .section-header--split .eyebrow,
    .section-header--split .section-header__title {
      grid-column: 1;
    }

    /* Le chapô occupe la deuxième colonne sur toute la hauteur de l'en-tête et
       s'aligne sur le bas du titre : deux blocs posés sur la même ligne de
       base, pas deux colonnes qui flottent. */
    .section-header--split .section-header__lead {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: end;
      margin: 0;
    }
  }

/* =============================================================================
   Composant — Carte de fonctionnalité
   ============================================================================= */

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .card--link {
    position: relative;
  }

  /* L'élévation passe par la variable --lift, composée avec l'inclinaison au
     curseur dans la section « Mouvement » en fin de fichier. Poser `transform`
     ici écraserait l'inclinaison au moment précis où elle sert. */
  .card--link:hover {
    border-color: var(--primary-subtle-border);
    box-shadow: var(--shadow-md);
  }

  .card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--primary-subtle);
    color: var(--primary);
    margin-block-end: var(--space-2);
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
  }

  /* Lien étendu : toute la carte est cliquable, mais le nom accessible du
     lien reste le titre — pas « lire la suite » répété N fois. */
  .card__anchor {
    color: inherit;
    text-decoration: none;
  }

  .card__anchor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .card--link:hover .card__anchor {
    color: var(--primary);
  }

  .card__body {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin-block-end: auto;
  }

  .card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--primary);
  }

  .card--link:hover .card__cta svg {
    transform: translateX(3px);
  }

  .card__cta svg {
    transition: transform var(--duration-base) var(--ease-out);
  }

/* =============================================================================
   Composant — Bandeau de conversion
   ============================================================================= */

  .cta {
    padding-block: var(--section-y);
  }

  .cta__inner {
    position: relative;
    display: grid;
    gap: var(--space-8);
    padding: clamp(2rem, 1rem + 4vw, 3.5rem);
    border-radius: var(--radius-xl);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    overflow: hidden;
    isolation: isolate;
  }

  /* Halo violet discret : donne de la profondeur au bloc sans image. */
  .cta__inner::before {
    content: '';
    position: absolute;
    inset: -40% 30% 40% -10%;
    background: radial-gradient(
      50% 50% at 50% 50%,
      color-mix(in srgb, var(--plum-500) 55%, transparent),
      transparent 70%
    );
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
  }

  .cta__title {
    font-size: var(--text-3xl);
    color: var(--text-on-inverse);
    max-width: 20ch;
  }

  .cta__body {
    margin-block-start: var(--space-4);
    color: var(--text-on-inverse-muted);
    max-width: 46ch;
    line-height: var(--leading-relaxed);
  }

  .cta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .cta__phone {
    font-size: var(--text-sm);
    color: var(--text-on-inverse-muted);
    text-decoration: none;
  }

  .cta__phone:hover {
    color: var(--text-on-inverse);
    text-decoration: underline;
  }

  @media (min-width: 900px) {
    .cta__inner {
      grid-template-columns: minmax(0, 1.4fr) auto;
      align-items: center;
      gap: var(--space-12);
    }

    .cta__actions {
      align-items: flex-end;
      text-align: end;
    }
  }

/* =============================================================================
   Composant — Questions fréquentes
   ============================================================================= */

  .faq {
    display: grid;
    max-width: var(--container-narrow);
    border-top: var(--border-width) solid var(--border);
  }

  .faq__item {
    border-bottom: var(--border-width) solid var(--border);
  }

  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  /* Retire le triangle natif (Safari a besoin du pseudo-élément dédié). */
  .faq__question::-webkit-details-marker {
    display: none;
  }

  .faq__question:hover {
    color: var(--primary);
  }

  .faq__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .faq__item[open] .faq__icon {
    transform: rotate(45deg);
  }

  .faq__answer {
    padding-block-end: var(--space-6);
    padding-inline-end: var(--space-10);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: 68ch;
  }

/* =============================================================================
   Composant — Formulaire de leads
   ============================================================================= */

  .lead-form {
    display: grid;
    gap: var(--space-6);
  }

  .lead-form__grid {
    display: grid;
    gap: var(--space-5);
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
  }

  .field__req {
    color: var(--primary);
  }

  .field__hint {
    font-weight: var(--weight-normal);
    color: var(--text-subtle);
  }

  .field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 46px;
    font-size: var(--text-base);
    color: var(--text);
    background: var(--bg);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    transition:
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

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

  .field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
  }

  .field__input[aria-invalid='true'] {
    border-color: var(--danger);
  }

  .field__input[aria-invalid='true']:focus {
    box-shadow: 0 0 0 3px var(--danger-subtle);
  }

  .field__input--textarea {
    resize: vertical;
    min-height: 110px;
    line-height: var(--leading-normal);
  }

  select.field__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 16px;
    padding-inline-end: var(--space-10);
  }

  .field__error {
    font-size: var(--text-sm);
    color: var(--danger);
  }

  .lead-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lead-form__footer {
    display: grid;
    gap: var(--space-4);
  }

  .lead-form__legal {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
  }

  /* Captcha : le widget Turnstile fait 300 × 65 px et n'apparaît que si les
     clés sont configurées. La grille du pied gère déjà l'espacement ; on ne
     règle ici que le cas des écrans étroits, où le widget ne doit pas déborder. */
  .lead-form__captcha {
    display: grid;
    gap: var(--space-2);
    max-width: 100%;
    overflow-x: auto;
  }

  .lead-form__status {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    background: var(--danger-subtle);
    color: var(--danger);
  }

  .lead-form__noscript {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  /* ── État de succès ───────────────────────────────────────────────────── */

  .lead-success {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    background: var(--success-subtle);
    border: var(--border-width) solid color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: var(--radius-lg);
  }

  .lead-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--success);
    color: #fff;
  }

  .lead-success__title {
    font-size: var(--text-xl);
  }

  .lead-success__body {
    max-width: 40ch;
    color: var(--text-muted);
    font-size: var(--text-base);
  }

  @media (min-width: 640px) {
    .lead-form__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

/* =============================================================================
   Composant — Visuel du hero (écran « Compte » de l’application)
   ============================================================================= */

  /* Palette relevée au pixel sur l'application — ne pas « harmoniser » avec les
     tokens du site : ce bloc représente un autre produit à l'écran. */
  .app {
    --ink: #333333;
    --ink-active: #4a1d4a;
    --lime: #cccc00;
    --paper: #ffffff;
    --paper-tint: #fcfcf0;
    --line: #e3e3d5;

    position: relative;
    margin: 0;
    color: #1a1a1a;
  }

  .app__win {
    display: grid;
    grid-template-columns: 21% minmax(0, 1fr);
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* Le cadre porte sa propre bordure claire : en thème sombre il doit rester
       une fenêtre d'application, pas un trou dans la page. */
    border: 1px solid var(--line);
    font-size: 7px;
    line-height: 1.25;
  }

  /* ── Barre latérale ───────────────────────────────────────────────────── */

  .app__side {
    background: var(--ink);
    color: #fff;
    padding-block: 6px 10px;
  }

  .app__logo {
    padding: 4px 7px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .app__logo b {
    color: var(--lime);
  }

  .app__nav {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app__nav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
  }

  .app__nav-item svg {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }

  .app__nav-item.is-active {
    background: var(--ink-active);
  }

  .app__nav-item.is-dim {
    color: #8a8a8a;
  }

  /* ── Bandeau et fil d'Ariane ──────────────────────────────────────────── */

  .app__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 7px;
    background: var(--lime);
    color: #1a1a00;
  }

  .app__search {
    flex: 1;
    max-width: 55%;
    padding: 2px 5px;
    background: var(--paper);
    border: 1px solid #b3b300;
    border-radius: 2px;
    font-style: italic;
    color: #767676;
  }

  .app__hello u {
    text-underline-offset: 2px;
  }

  .app__crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    background: var(--paper-tint);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
  }

  .app__crumb-tag {
    padding: 2px 5px;
    background: var(--ink);
    color: #fff;
    border-radius: 2px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .app__sep {
    color: #999;
  }

  .app__crumbs strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Situation du compte ──────────────────────────────────────────────── */

  .app__situation {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
  }

  .app__gauge {
    position: relative;
    display: grid;
    place-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    text-align: center;
  }

  .app__gauge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .app__gauge-num {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .app__gauge-unit {
    font-size: 4.5px;
    line-height: 1.05;
    color: #555;
    /* L'anneau fait 7 unités SVG : sans cette marge le texte passe dessous. */
    padding-inline: 4px;
  }

  .app__sit-text {
    display: grid;
    gap: 3px;
    justify-items: center;
  }

  .app__sit-title {
    font-weight: 700;
    white-space: nowrap;
  }

  .app__sit-pill {
    padding: 2px 6px;
    background: #6b6b6b;
    color: #fff;
    border-radius: 2px;
    font-weight: 700;
    white-space: nowrap;
  }

  .app__tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app__tile {
    display: grid;
    gap: 2px;
  }

  /* Le montant est au-dessus de la tuile, en noir — c'est la disposition de
     l'app, pas un montant posé dans le bloc de couleur. */
  .app__tile-amount {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    font-size: 6px;
  }

  .app__tile-box {
    display: grid;
    gap: 1px;
    padding: 4px;
    min-height: 26px;
  }

  .app__tile-box b {
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app__tile-box i {
    font-size: 5px;
    font-style: normal;
    opacity: 0.9;
  }

  /* ── Actions rapides ──────────────────────────────────────────────────── */

  .app__quick {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--paper-tint);
    border-block: 1px solid var(--line);
    overflow: hidden;
  }

  .app__quick-tag {
    padding: 4px 7px;
    background: var(--ink);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .app__quick-item {
    padding: 4px 5px;
    border-left: 1px solid var(--line);
    text-transform: uppercase;
    white-space: nowrap;
    color: #444;
    font-size: 5.5px;
    letter-spacing: 0.02em;
    align-self: center;
  }

  /* ── Écritures ────────────────────────────────────────────────────────── */

  .app__entries ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app__entries-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-bottom: 2px solid var(--ink);
  }

  .app__entries-title {
    font-weight: 700;
    text-transform: uppercase;
  }

  .app__entries-search {
    flex: 1;
    max-width: 90px;
    padding: 1px 4px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-style: italic;
    color: #888;
  }

  .app__entries-tools {
    margin-inline-start: auto;
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
  }

  .app__row {
    display: grid;
    /* Colonne de date en `auto` et non en largeur fixe : à 8 px, « 19/10/2024 »
       déborde d'une piste de 38 px et vient chevaucher l'échéance. */
    grid-template-columns: 14px auto minmax(0, 1fr) auto 64px auto;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-bottom: 1px solid var(--line);
  }

  .app__kind {
    font-weight: 700;
  }

  .app__date,
  .app__ref {
    color: #555;
    white-space: nowrap;
    font-size: 6px;
  }

  .app__when {
    display: grid;
  }

  .app__when b {
    color: #c62828;
    font-weight: 600;
  }

  .app__when i,
  .app__money i {
    font-style: normal;
    color: #666;
    font-size: 5.5px;
  }

  .app__money {
    display: grid;
    justify-items: end;
    text-align: right;
    white-space: nowrap;
  }

  .app__money b {
    font-weight: 700;
  }

  .app__flag {
    padding: 2px 3px;
    color: #fff;
    text-align: center;
    border-radius: 1px;
    font-weight: 600;
    font-size: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 5px 7px;
    text-transform: uppercase;
    color: #555;
    font-size: 5.5px;
  }

  .app__foot b {
    color: #1a1a1a;
    font-size: 6.5px;
  }

  /* ── Échelle ──────────────────────────────────────────────────────────── */

  /* La fenêtre déborde volontairement à droite de sa colonne : à 400 px de
     large, six tuiles et dix actions rapides deviennent illisibles. Le débord
     est rogné par .hero (overflow), ce qui donne l'écran « qui continue hors
     champ » sans changer la grille du hero. */
  /* Le débord est borné par la largeur de la fenêtre du navigateur : sans le
     plafond en vw, la reproduction sortait de l'écran par la droite entre 1024
     et 1400px, et l'effet « écran hors champ » devenait une troncature franche
     au milieu des tuiles. 44vw laisse la fenêtre entière visible sur toute la
     plage, débord compris. */
  @media (min-width: 1024px) {
    .app__win {
      width: min(150%, 44vw);
      font-size: 8px;
    }
  }

  /* Au-delà de 1400px le conteneur est plafonné à 1200 : la colonne cesse de
     grandir, un plafond en pixels suffit et évite que la fenêtre continue de
     s'étirer avec l'écran. */
  @media (min-width: 1400px) {
    .app__win {
      width: min(150%, 620px);
    }
  }

/* =============================================================================
   Page — Accueil
   ============================================================================= */

  /* ── Hero ─────────────────────────────────────────────────────────────── */

  .hero {
    position: relative;
    padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) var(--section-y);
    overflow: hidden;
  }

  /* Voile violet très dilué derrière le hero : donne une assise à la page
     sans image de fond ni coût de chargement. */
  .hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background: radial-gradient(
      45% 60% at 70% 30%,
      color-mix(in srgb, var(--plum-500) 16%, transparent),
      transparent 70%
    );
    z-index: -1;
    pointer-events: none;
  }

  .hero__inner {
    display: grid;
    gap: var(--space-12);
    align-items: center;
  }

  /* 18ch plutôt que 16 : avec le plafond du H1 ramené à 3,5rem, l'accroche de
     la page d'accueil tient en trois lignes au lieu de quatre. */
  .hero__title {
    margin-block-start: var(--space-4);
    max-width: 18ch;
  }

  .hero__subtitle {
    margin-block-start: var(--space-6);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: 52ch;
  }

  .hero__scope {
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: 52ch;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .hero__proof {
    display: grid;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

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

  .hero__proof svg {
    color: var(--success);
    flex-shrink: 0;
  }

  @media (min-width: 1024px) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: var(--space-16);
    }
  }

  /* ── Chiffres ─────────────────────────────────────────────────────────── */

  .stats__list {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    margin: 0;
    list-style: none;
  }

  .stats__item {
    display: grid;
    gap: var(--space-2);
  }

  .stats__value {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .stats__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 26ch;
  }

  @media (min-width: 768px) {
    .stats__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ── Problème ─────────────────────────────────────────────────────────── */

  .problem {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .problem__num {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wide);
  }

  .problem__title {
    font-size: var(--text-lg);
  }

  .problem__body {
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  /* ── Lien de section ──────────────────────────────────────────────────── */

  .section__more {
    margin-block-start: var(--space-10);
  }

  .section__more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .section__more a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* ── Étapes ───────────────────────────────────────────────────────────── */

  .steps {
    display: grid;
    gap: var(--space-8);
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .step {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
  }

  .step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--text-on-primary);
  }

  .step__index {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .step__title {
    font-size: var(--text-lg);
  }

  .step__body {
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  @media (min-width: 900px) {
    .steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Les styles de l'aimant à leads (.magnet*) ont été retirés avec la section :
     ils étaient portés par cette page seule. À réécrire pour le calculateur. */

/* =============================================================================
   Page — Silo produit
   ============================================================================= */

  .page-hero {
    padding-block: var(--space-10) var(--space-4);
  }

  .page-hero__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 20ch;
  }

  .page-hero__lead {
    margin-block-start: var(--space-5);
  }

  .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .page-stats {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    margin: 0;
    list-style: none;
  }

  .page-stats__item {
    display: grid;
    gap: var(--space-1);
  }

  .page-stats__value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .page-stats__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 28ch;
  }

  @media (min-width: 768px) {
    /* auto-fit plutôt que 3 colonnes figées : une page qui avance quatre
       chiffres ne doit pas en laisser un seul, orphelin, sur une deuxième
       ligne. */
    .page-stats {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }
  }

/* =============================================================================
   Page — Tarifs
   ============================================================================= */

  .pricing-hero {
    padding-block: var(--space-10) var(--space-4);
  }

  .pricing-hero__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 20ch;
  }

  .pricing-hero__lead {
    margin-block-start: var(--space-5);
  }

  .plans {
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  .plan {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
  }

  .plan--featured {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
  }

  .plan__badge {
    position: absolute;
    top: 0;
    left: var(--space-6);
    transform: translateY(-50%);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: var(--radius-full);
  }

  .plan__name {
    font-size: var(--text-lg);
  }

  .plan__price {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .plan__suffix {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    color: var(--text-muted);
    margin-inline-start: var(--space-2);
  }

  .plan__pitch {
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
    min-height: 4.5em;
  }

  .plan__list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
    padding-block-start: var(--space-6);
    border-top: var(--border-width) solid var(--border);
    list-style: none;
    font-size: var(--text-sm);
  }

  .plan__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    line-height: var(--leading-normal);
  }

  .plan__list svg {
    color: var(--success);
    flex-shrink: 0;
    margin-block-start: 3px;
  }

  .plan__capacity {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .plan__options {
    display: grid;
    gap: var(--space-3);
  }

  .plan__options-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Les options se paient en plus : elles ne doivent pas se lire comme les
     lignes incluses juste au-dessus, d'où le trait de séparation en moins et
     la puce neutre plutôt que la coche verte. */
  .plan__list--options {
    padding-block-start: 0;
    border-top: 0;
    margin-block-start: 0;
  }

  .plan__list--options svg {
    color: var(--text-muted);
  }

  .pricing-note {
    margin-block-start: var(--space-8);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }

  /* Quatre offres depuis l'ajout du palier « Grands comptes » : deux colonnes
     dès 700px, quatre au-delà de 1100px. Trois colonnes laisseraient la
     quatrième seule sur une deuxième ligne, où elle se lirait comme une
     option marginale plutôt que comme le haut de la gamme. */
  @media (min-width: 700px) {
    .plans {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1100px) {
    .plans {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Quatre colonnes dans 1200px : la carte perd environ 80px de large et
       « à partir de 299 € » ne tient plus sur une ligne. Le prix passe donc à
       deux lignes pour tout le monde — hauteur réservée y compris pour « à
       partir de 99 € » et « Sur devis », qui tiennent sur une seule ligne :
       sans ce plancher, leur bouton d'appel à l'action se décale d'une ligne
       par rapport aux autres cartes. 2,6em couvre deux lignes de prix plus la
       mention « H.T. / mois » sur toute l'amplitude du clamp de --text-2xl. */
    .plan {
      padding: var(--space-8) var(--space-5);
    }

    .plan__price {
      font-size: var(--text-2xl);
      min-height: 2.6em;
      text-wrap: balance;
    }

    .plan__suffix {
      display: block;
      margin-inline-start: 0;
    }

    /* Même raison pour l'accroche : en colonnes étroites elle passe de quatre à
       cinq lignes selon l'offre, et le bouton suit. 8,5em réserve cinq lignes. */
    .plan__pitch {
      min-height: 8.5em;
    }

    /* Et pour la capacité : trois lignes chez les offres chiffrées, contre une
       phrase qui se replie sur trois lignes chez Grands comptes — sans écart
       de gouttière, donc 8px de moins. 5,7em remet les quatre boutons sur la
       même ligne. */
    .plan__capacity {
      min-height: 5.7em;
    }
  }

/* =============================================================================
   Page — Démo
   ============================================================================= */

  .demo {
    padding-block: var(--space-10) var(--section-y);
  }

  .demo__inner {
    display: grid;
    gap: var(--space-12);
    align-items: start;
  }

  .demo__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 18ch;
  }

  .demo__lead {
    margin-block-start: var(--space-5);
  }

  .demo__subtitle {
    margin-block-start: var(--space-10);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .demo__agenda,
  .demo__reassurance {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding: 0;
    list-style: none;
  }

  .demo__agenda li,
  .demo__reassurance li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    line-height: var(--leading-normal);
  }

  .demo__agenda svg {
    color: var(--success);
    flex-shrink: 0;
    margin-block-start: 3px;
  }

  .demo__reassurance {
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-top: var(--border-width) solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .demo__reassurance svg {
    color: var(--primary);
    flex-shrink: 0;
  }

  .demo__alt {
    margin-block-start: var(--space-4);
  }

  .demo__alt-body {
    margin-block-start: var(--space-4);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  /* ── Formulaire ───────────────────────────────────────────────────────── */

  .demo__form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .demo__form-title {
    font-size: var(--text-2xl);
  }

  .demo__form-sub {
    margin-block: var(--space-2) var(--space-8);
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  @media (min-width: 1024px) {
    .demo__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
      gap: var(--space-16);
    }

    /* Le formulaire reste visible pendant la lecture de l'argumentaire. */
    .demo__form-wrap {
      position: sticky;
      top: calc(var(--header-height, 68px) + var(--space-6));
    }
  }

/* =============================================================================
   Page — Contact
   ============================================================================= */

  .contact {
    padding-block: var(--space-10) var(--section-y);
  }

  .contact__inner {
    display: grid;
    gap: var(--space-12);
    align-items: start;
  }

  .contact__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 16ch;
  }

  .contact__lead {
    margin-block-start: var(--space-5);
  }

  .contact__channels {
    display: grid;
    gap: var(--space-8);
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-8);
    border-top: var(--border-width) solid var(--border);
  }

  .channel__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
  }

  .channel__label svg {
    color: var(--primary);
  }

  .channel__value {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    margin-inline-start: calc(17px + var(--space-2));
    font-size: var(--text-base);
  }

  .channel__value address {
    font-style: normal;
    line-height: var(--leading-normal);
  }

  .channel__note {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .contact__form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .contact__form-title {
    font-size: var(--text-2xl);
  }

  .contact__form-sub {
    margin-block: var(--space-2) var(--space-8);
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  @media (min-width: 900px) {
    .contact__channels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .contact__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
      gap: var(--space-16);
    }
  }

/* =============================================================================
   Page — Liste du blog
   ============================================================================= */

  .blog-hero {
    padding-block: var(--space-10) var(--space-4);
  }

  .blog-hero__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 18ch;
  }

  .blog-hero__lead {
    margin-block-start: var(--space-5);
  }

  .blog-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
    padding: 0;
    list-style: none;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-full);
  }

  .tag__count {
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
  }

  /* ── Article à la une ─────────────────────────────────────────────────── */

  .featured {
    display: block;
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    background: var(--primary-subtle);
    border: var(--border-width) solid var(--primary-subtle-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .featured:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
  }

  .featured__badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary);
  }

  .featured__title {
    margin-block-start: var(--space-3);
    font-size: var(--text-3xl);
    max-width: 24ch;
  }

  .featured__excerpt {
    margin-block-start: var(--space-4);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
  }

  .featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-subtle);
  }

  .featured__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    font-weight: var(--weight-semibold);
    color: var(--primary);
  }

  .featured:hover .featured__cta svg {
    transform: translateX(3px);
  }

  .featured__cta svg {
    transition: transform var(--duration-base) var(--ease-out);
  }

  /* ── Grille d'articles ────────────────────────────────────────────────── */

  .posts {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .post {
    padding-block-start: var(--space-5);
    border-top: 2px solid var(--border);
  }

  .post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-subtle);
  }

  .post__title {
    margin-block-start: var(--space-3);
    font-size: var(--text-lg);
  }

  .post__title a {
    color: inherit;
    text-decoration: none;
  }

  .post__title a:hover {
    color: var(--primary);
  }

  .post__excerpt {
    margin-block-start: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

/* =============================================================================
   Page — Article
   ============================================================================= */

  .article {
    padding-block: var(--space-10) var(--section-y);
  }

  .article__header {
    margin-block-end: var(--space-12);
  }

  .article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
  }

  .article__tag {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary);
  }

  .article__title {
    font-size: var(--text-4xl);
    max-width: 24ch;
  }

  .article__excerpt {
    margin-block-start: var(--space-5);
  }

  .article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-6);
    border-top: var(--border-width) solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .article__updated {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-subtle);
  }

  /* ── À lire aussi ─────────────────────────────────────────────────────── */

  .related__heading {
    font-size: var(--text-2xl);
    margin-block-end: var(--space-8);
  }

  .related {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .related__item {
    padding-block-start: var(--space-5);
    border-top: 2px solid var(--border);
  }

  .related__date {
    font-size: var(--text-xs);
    color: var(--text-subtle);
  }

  .related__title {
    margin-block-start: var(--space-3);
    font-size: var(--text-lg);
  }

  .related__title a {
    color: inherit;
    text-decoration: none;
  }

  .related__title a:hover {
    color: var(--primary);
  }

  .related__excerpt {
    margin-block-start: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  .related__back {
    margin-block-start: var(--space-10);
  }

  .related__back a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

/* =============================================================================
   Page — Éditoriale (à propos, mentions légales)
   ============================================================================= */

  .editorial {
    padding-block: var(--space-10) var(--section-y);
  }

  .editorial__header {
    margin-block-end: var(--space-12);
  }

  .editorial__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
    max-width: 22ch;
  }

  .editorial__lead {
    margin-block-start: var(--space-5);
  }

  .editorial__updated {
    margin-block-start: var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-subtle);
  }

/* =============================================================================
   Page — 404
   ============================================================================= */

  .notfound {
    padding-block: var(--space-20) var(--section-y);
  }

  .notfound__title {
    margin-block-start: var(--space-4);
    font-size: var(--text-4xl);
  }

  .notfound__lead {
    margin-block-start: var(--space-5);
  }

  .notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
  }

  .notfound__subtitle {
    margin-block-start: var(--space-16);
    padding-block-start: var(--space-8);
    border-top: var(--border-width) solid var(--border);
    font-size: var(--text-lg);
  }

  .notfound__list {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding: 0;
    list-style: none;
  }

/* =============================================================================
   Mouvement
   =============================================================================

   Quatre effets : révélation au défilement, entrée séquencée du hero,
   inclinaison des cartes sous le curseur, dérive du dégradé de fond. Le
   comptage des chiffres et la parallaxe du visuel sont pilotés par le script.

   DEUX CONDITIONS, toutes deux nécessaires :

   1. `prefers-reduced-motion: no-preference`. Le bloc entier est dans cette
      requête : un visiteur qui a demandé moins d'animations ne reçoit aucun
      état initial masqué, donc aucune page vide si quoi que ce soit échoue.
   2. La classe `js-motion` sur <html>, posée par le script du <head> et
      retirée au bout de deux secondes si le script de mouvement n'a pas
      démarré. Sans JavaScript, la page s'affiche telle quelle.

   Les transformations sont composées dans UNE seule propriété `transform` à
   partir de variables — inclinaison, élévation, parallaxe. Trois règles
   concurrentes sur la même propriété se seraient écrasées l'une l'autre, et
   c'est l'erreur classique de ce genre d'ajout.
*/

@media (prefers-reduced-motion: no-preference) {
  /* ── Révélation au défilement ─────────────────────────────────────────── */

  .js-motion :is(
      .section-header,
      .card,
      .plan,
      .step,
      .problem,
      .stats__item,
      .page-stats__item,
      .post,
      .cta__inner,
      .faq__item
    ) {
    opacity: 0;
  }

  /*
    `backwards` et non `both` : le remplissage arrière suffit à masquer
    l'élément avant son tour, et l'absence de remplissage avant laisse la
    transformation composée reprendre la main une fois l'animation finie.
    Avec `forwards`, les cartes resteraient figées sur `transform: none` et
    l'inclinaison au curseur ne fonctionnerait plus.
  */
  .js-motion [data-revealed] {
    opacity: 1;
    animation: cc-reveler 600ms var(--ease-out) var(--reveal-delay, 0ms) backwards;
  }

  @keyframes cc-reveler {
    from {
      opacity: 0;
      transform: translate3d(0, 32px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  /* ── Entrée du hero ───────────────────────────────────────────────────── */

  /*
    Le titre est l'élément le plus grand de la page, donc celui que Google
    mesure pour le LCP. Son délai est volontairement le plus court de la
    séquence : chaque milliseconde ajoutée ici est une milliseconde de LCP.
  */
  .js-motion .hero__text > * {
    animation: cc-reveler 700ms var(--ease-out) backwards;
  }

  .js-motion .hero__text > :nth-child(1) { animation-delay: 0ms; }
  .js-motion .hero__text > :nth-child(2) { animation-delay: 60ms; }
  .js-motion .hero__text > :nth-child(3) { animation-delay: 140ms; }
  .js-motion .hero__text > :nth-child(4) { animation-delay: 220ms; }
  .js-motion .hero__text > :nth-child(5) { animation-delay: 300ms; }
  .js-motion .hero__text > :nth-child(6) { animation-delay: 380ms; }

  .js-motion .hero__visual {
    animation: cc-entree-visuel 1100ms var(--ease-out) 260ms backwards;
  }

  @keyframes cc-entree-visuel {
    from {
      opacity: 0;
      transform: translate3d(56px, 28px, 0) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  /* ── Dérive du dégradé ────────────────────────────────────────────────── */

  /*
    Un seul élément composité, transformé — pas de `background-position`, qui
    forcerait un repeint du dégradé à chaque image. 28 secondes : assez lent
    pour qu'on ne le regarde pas, assez présent pour que le fond ne soit pas
    figé.
  */
  .hero::before {
    animation: cc-derive 28s var(--ease-in-out) infinite;
  }

  @keyframes cc-derive {
    0% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(-5%, 4%, 0) scale(1.18);
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

/* ── Inclinaison et élévation des cartes ──────────────────────────────────── */

/*
  Hors de la requête « reduced-motion » : la transformation composée doit
  exister dans tous les cas, sinon l'élévation au survol n'a plus de support.
  Les variables valent zéro par défaut, la règle est donc neutre tant que rien
  ne les renseigne.
*/
:is(.card, .plan, .post, .step) {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translate3d(0, var(--lift, 0px), 0);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.js-motion :is(.card--link, .plan, .post, .step):hover {
  --lift: -6px;
  box-shadow: var(--shadow-lg);
}

/* L'inclinaison n'a de sens qu'avec un vrai pointeur : au doigt, elle se
   déclencherait au moment du tap et resterait bloquée après. */
@media (hover: none), (pointer: coarse) {
  :is(.card, .plan, .post, .step) {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
  }
}

/* ── Chiffres ─────────────────────────────────────────────────────────────── */

/* Chasse fixe pendant le comptage : sans elle, la largeur du nombre change à
   chaque image et le libellé en dessous tressaute. */
.stats__value,
.page-stats__value {
  font-variant-numeric: tabular-nums;
}

/* ── Parallaxe ────────────────────────────────────────────────────────────── */

.hero__visual {
  transform: translate3d(0, var(--parallaxe, 0px), 0);
  will-change: transform;
}