/* ==============================================
   LegalPlace Academy — CSS bundle production
   Bundle de tous les composants du Design System +
   styles spécifiques de la landing legalplace-academy.
   Généré 2026-05-18
   ============================================== */

/* =============================================
   FONTS
   ============================================= */

@font-face {
  font-family: 'Inter';
  src: url('./inter-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Rebond Grotesque';
  src: url('./es-rebond-grotesque-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {

  /* ======================
     GLOBAL TOKENS — Colors
     ====================== */

  /* White */
  --color-white: #FFFFFF;

  /* Brand */
  --color-brand-100: #FFF9ED;
  --color-brand-200: #FFF6E3;
  --color-brand-300: #FFF0D0;
  --color-brand-400: #FAD282;
  --color-brand-500: #DFB254;
  --color-brand-600: #B78E37;
  --color-brand-700: #927025;
  --color-brand-800: #775A1A;
  --color-brand-900: #594210;
  --color-brand-1000: #2D2004;

  /* Accent */
  --color-accent-100: #F7FAFE;
  --color-accent-200: #F4F8FE;
  --color-accent-300: #EAF2FD;
  --color-accent-400: #C2D9FB;
  --color-accent-500: #92BBF6;
  --color-accent-600: #5A95E9;
  --color-accent-700: #2A74D6;
  --color-accent-800: #005BC1;
  --color-accent-900: #00409D;
  --color-accent-1000: #001D59;

  /* Linen */
  --color-linen-100: #FBFAF9;
  --color-linen-200: #F8F6F3;
  --color-linen-300: #F4F1ED;
  --color-linen-400: #DFD6C9;
  --color-linen-500: #C8B6A3;
  --color-linen-600: #AC8F78;
  --color-linen-700: #916D57;
  --color-linen-800: #765849;
  --color-linen-900: #554139;
  --color-linen-1000: #2B1F1B;

  /* Neutral */
  --color-neutral-100: #F9F9F9;
  --color-neutral-200: #F6F6F6;
  --color-neutral-300: #F2F2F2;
  --color-neutral-400: #D7D7D7;
  --color-neutral-500: #B8B8B8;
  --color-neutral-600: #949494;
  --color-neutral-700: #757575;
  --color-neutral-800: #5E5E5E;
  --color-neutral-900: #464646;
  --color-neutral-1000: #222222;

  /* Positive */
  --color-positive-100: #F7FBF7;
  --color-positive-200: #F2F8F1;
  --color-positive-300: #EBF4E9;
  --color-positive-400: #C1E0BC;
  --color-positive-500: #90C687;
  --color-positive-600: #5BA550;
  --color-positive-700: #348528;
  --color-positive-800: #216D15;
  --color-positive-900: #105105;
  --color-positive-1000: #032900;

  /* Warning */
  --color-warning-100: #FFFAF7;
  --color-warning-200: #FFF6F0;
  --color-warning-300: #FFEFE4;
  --color-warning-400: #FFCDAB;
  --color-warning-500: #FFA268;
  --color-warning-600: #F56A00;
  --color-warning-700: #C25400;
  --color-warning-800: #A73A00;
  --color-warning-900: #7F2800;
  --color-warning-1000: #431100;

  /* Danger */
  --color-danger-100: #FFF8F6;
  --color-danger-200: #FFF5F4;
  --color-danger-300: #FFEEEB;
  --color-danger-400: #FFCBC3;
  --color-danger-500: #FF9F93;
  --color-danger-600: #F7655A;
  --color-danger-700: #DB3531;
  --color-danger-800: #BC141A;
  --color-danger-900: #920007;
  --color-danger-1000: #4D0000;

  /* Black Alpha */
  --color-black-alpha-100: rgba(0, 0, 0, 0.10);
  --color-black-alpha-200: rgba(0, 0, 0, 0.20);
  --color-black-alpha-300: rgba(0, 0, 0, 0.30);
  --color-black-alpha-400: rgba(0, 0, 0, 0.40);
  --color-black-alpha-500: rgba(0, 0, 0, 0.50);
  --color-black-alpha-600: rgba(0, 0, 0, 0.60);
  --color-black-alpha-700: rgba(0, 0, 0, 0.70);
  --color-black-alpha-800: rgba(0, 0, 0, 0.80);
  --color-black-alpha-900: rgba(0, 0, 0, 0.90);

  /* White Alpha */
  --color-white-alpha-100: rgba(255, 255, 255, 0.10);
  --color-white-alpha-200: rgba(255, 255, 255, 0.20);
  --color-white-alpha-300: rgba(255, 255, 255, 0.30);
  --color-white-alpha-400: rgba(255, 255, 255, 0.40);
  --color-white-alpha-500: rgba(255, 255, 255, 0.50);
  --color-white-alpha-600: rgba(255, 255, 255, 0.60);
  --color-white-alpha-700: rgba(255, 255, 255, 0.70);
  --color-white-alpha-800: rgba(255, 255, 255, 0.80);
  --color-white-alpha-900: rgba(255, 255, 255, 0.90);

  /* Logo */
  --color-logo-gold: #DFB254;
  --color-logo-linen: #F8F6F3;
  --color-logo-blue: #005BC1;
  --color-logo-black: #2D2D2D;
  --color-logo-brown: #98755E;

}
:root {

  /* ==========================
     GLOBAL TOKENS — Typography
     ========================== */

  /* Font Family */
  --typography-font-family-es-rebond-grotesque: 'ES Rebond Grotesque';
  --typography-font-family-inter: 'Inter';

  /* Font Weight */
  --typography-font-weight-regular: 400;
  --typography-font-weight-medium: 500;
  --typography-font-weight-bold: 700;


  /* ===============================================
     GLOBAL TOKENS — Typography Scale (Above 0px)
     =============================================== */

  /* Headline 1 — 42px / 50px */
  --typography-headline-font-size-1: 42px;
  --typography-headline-line-height-1: 50px;

  /* Headline 2 — 32px / 40px */
  --typography-headline-font-size-2: 32px;
  --typography-headline-line-height-2: 40px;

  /* Headline 3 — 24px / 32px */
  --typography-headline-font-size-3: 24px;
  --typography-headline-line-height-3: 32px;

  /* Headline 4 — 20px / 28px */
  --typography-headline-font-size-4: 20px;
  --typography-headline-line-height-4: 28px;

  /* Headline 5 — 18px / 24px */
  --typography-headline-font-size-5: 18px;
  --typography-headline-line-height-5: 24px;

  /* Headline 6 — 16px / 20px */
  --typography-headline-font-size-6: 16px;
  --typography-headline-line-height-6: 20px;

  /* Paragraph 1 — 18px / 28px */
  --typography-paragraph-font-size-1: 18px;
  --typography-paragraph-line-height-1: 28px;

  /* Paragraph 2 — 16px / 24px */
  --typography-paragraph-font-size-2: 16px;
  --typography-paragraph-line-height-2: 24px;

  /* Paragraph 3 — 14px / 22px */
  --typography-paragraph-font-size-3: 14px;
  --typography-paragraph-line-height-3: 22px;

  /* Paragraph 4 — 12px / 16px */
  --typography-paragraph-font-size-4: 12px;
  --typography-paragraph-line-height-4: 16px;

}

/* ==================================================
   GLOBAL TOKENS — Typography Scale (Above 992px)
   ================================================== */

@media (min-width: 992px) {
  :root {

    /* Headline 1 — 54px / 64px */
    --typography-headline-font-size-1: 54px;
    --typography-headline-line-height-1: 64px;

    /* Headline 2 — 42px / 50px */
    --typography-headline-font-size-2: 42px;
    --typography-headline-line-height-2: 50px;

    /* Headline 3 — 28px / 36px */
    --typography-headline-font-size-3: 28px;
    --typography-headline-line-height-3: 36px;

  }
}
:root {

  /* ======================
     GLOBAL TOKENS — Baseline
     ====================== */

  /* Toutes les valeurs verticales (spacing, line-height, hauteurs) doivent être des multiples de cette valeur */
  --grid-baseline: 2px;


  /* ======================
     GLOBAL TOKENS — Spacing
     ====================== */

  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-104: 104px;
  --spacing-160: 160px;

}
:root {

  /* ==============================
     GLOBAL TOKENS — Border Stroke
     ============================== */

  --border-stroke-0-5: 0.5px;
  --border-stroke-1: 1px;


  /* ==============================
     GLOBAL TOKENS — Border Radius
     ============================== */

  --border-radius-2: 2px;
  --border-radius-9999: 9999px;

}
:root {

  /* ======================
     GLOBAL TOKENS — Icon sizes
     ====================== */

  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
  --icon-32: 32px;


  /* ======================
     GLOBAL TOKENS — Icon strokes
     ====================== */

  --icon-stroke-2-5: 2.5px;
  --icon-stroke-2-2: 2.2px;
  --icon-stroke-1-9: 1.9px;
  --icon-stroke-1-7: 1.7px;
  --icon-stroke-1-4: 1.4px;

}
/* =============================================
   GLOBAL TOKENS — Motion
   ============================================= */

:root {
  /* Duration */
  --motion-duration-200: 200ms;

  /* Easing */
  --motion-easing-ease-out: ease-out;
}
:root {

  /* =====================
     Content
     ===================== */

  --color-content-primary: var(--color-neutral-1000);
  --color-content-secondary: var(--color-neutral-800);
  --color-content-tertiary: var(--color-neutral-700);
  --color-content-disabled: var(--color-neutral-600);
  --color-content-positive: var(--color-positive-800);
  --color-content-warning: var(--color-warning-800);
  --color-content-informative: var(--color-accent-800);
  --color-content-danger: var(--color-danger-800);
  --color-content-accent: var(--color-accent-800);

  /* Content — Inverse */
  --color-content-inverse-primary: var(--color-white);
  --color-content-inverse-secondary: var(--color-white-alpha-700);
  --color-content-inverse-tertiary: var(--color-white-alpha-600);

  /* Content — Decorative */
  --color-content-decorative-gold: var(--color-brand-500);

  /* Content — Interactive */
  --color-content-danger-hovered: var(--color-danger-900);
  --color-content-danger-pressed: var(--color-danger-1000);
  --color-content-accent-hovered: var(--color-accent-900);
  --color-content-accent-pressed: var(--color-accent-1000);


  /* =====================
     Page
     ===================== */

  --color-page: var(--color-white);
  --color-page-alt: var(--color-linen-200);


  /* =====================
     Surface
     ===================== */

  --color-surface-primary: var(--color-linen-200);
  --color-surface-secondary: var(--color-linen-100);
  --color-surface-tertiary: var(--color-white);
  --color-surface-disabled: var(--color-neutral-300);
  --color-surface-disabled-inverse: var(--color-white-alpha-100);

  /* Surface — On alt */
  --color-surface-on-alt-primary: var(--color-white);
  --color-surface-on-alt-secondary: var(--color-linen-100);
  --color-surface-on-alt-tertiary: var(--color-linen-200);

  /* Surface — Decorative */
  --color-surface-decorative-linen-medium: var(--color-linen-400);
  --color-surface-decorative-linen-dark: var(--color-linen-900);
  --color-surface-decorative-black: var(--color-neutral-1000);
  --color-surface-decorative-brand: var(--color-brand-500);
  --color-surface-decorative-hovered: var(--color-white-alpha-100);
  --color-surface-decorative-pressed: var(--color-white-alpha-200);

  /* Surface — Positive */
  --color-surface-positive-primary-hovered: var(--color-positive-900);
  --color-surface-positive-primary-pressed: var(--color-positive-1000);
  --color-surface-positive-secondary-hovered: var(--color-positive-400);
  --color-surface-positive-secondary-pressed: var(--color-positive-500);

  /* Surface — Warning */
  --color-surface-warning-primary: var(--color-warning-800);
  --color-surface-warning-secondary: var(--color-brand-300);

  /* Surface — Danger */
  --color-surface-danger-primary-hovered: var(--color-danger-900);
  --color-surface-danger-primary-pressed: var(--color-danger-1000);
  --color-surface-danger-secondary-hovered: var(--color-danger-400);
  --color-surface-danger-secondary-pressed: var(--color-danger-500);

  /* Surface — Informative */
  --color-surface-informative-primary: var(--color-accent-800);
  --color-surface-informative-secondary: var(--color-accent-300);

  /* Surface — Accent */
  --color-surface-accent: var(--color-accent-800);
  --color-surface-accent-hovered: var(--color-accent-900);
  --color-surface-accent-pressed: var(--color-accent-1000);
  --color-surface-accent-inverse: var(--color-white);
  --color-surface-accent-inverse-hovered: var(--color-white-alpha-900);
  --color-surface-accent-inverse-pressed: var(--color-white-alpha-800);

  /* Surface — Neutral */
  --color-surface-neutral-hovered: var(--color-linen-300);
  --color-surface-neutral-pressed: var(--color-linen-400);
  --color-surface-neutral-active: var(--color-neutral-1000);
  --color-surface-neutral-inverse-hovered: var(--color-surface-decorative-hovered);
  --color-surface-neutral-inverse-pressed: var(--color-surface-decorative-pressed);


  /* =====================
     Border
     ===================== */

  --color-border-primary: var(--color-neutral-1000);
  --color-border-secondary: var(--color-linen-400);
  --color-border-tertiary: var(--color-linen-300);
  --color-border-disabled: var(--color-neutral-300);
  --color-border-disabled-inverse: var(--color-white-alpha-200);
  --color-border-primary-hovered: var(--color-neutral-1000);
  --color-border-primary-pressed: var(--color-neutral-1000);
  --color-border-secondary-inverse: var(--color-white-alpha-400);
  --color-border-secondary-inverse-hovered: var(--color-white-alpha-700);
  --color-border-secondary-inverse-pressed: var(--color-white-alpha-600);
  --color-border-primary-inverse: var(--color-white);
  --color-border-primary-inverse-hovered: var(--color-white);
  --color-border-primary-inverse-pressed: var(--color-white);

  /* Border — Decorative */
  --color-border-decorative-black: var(--color-neutral-1000);
  --color-border-decorative-brand: var(--color-brand-500);

  /* Border — Positive */
  --color-border-positive-primary: var(--color-positive-800);
  --color-border-positive-secondary: var(--color-positive-300);

  /* Border — Warning */
  --color-border-warning-primary: var(--color-warning-800);

  /* Border — Danger */
  --color-border-danger-secondary: var(--color-danger-300);
  --color-border-danger-primary-hovered: var(--color-danger-900);
  --color-border-danger-primary-pressed: var(--color-danger-1000);

  /* Border — Informative */
  --color-border-informative-primary: var(--color-accent-800);
  --color-border-informative-secondary: var(--color-accent-300);

  /* Border — Accent */
  --color-border-accent: var(--color-accent-800);
  --color-border-accent-hovered: var(--color-accent-900);
  --color-border-accent-pressed: var(--color-accent-1000);
  --color-border-accent-inverse: var(--color-white);
  --color-border-accent-inverse-hovered: var(--color-white-alpha-900);
  --color-border-accent-inverse-pressed: var(--color-white-alpha-800);


  /* =====================
     Divider
     ===================== */

  --color-divider-primary: var(--color-linen-400);
  --color-divider-secondary: var(--color-linen-300);
  --color-divider-inverse: var(--color-white-alpha-300);


  /* =====================
     Focus
     ===================== */

  --color-focus-ring: var(--color-accent-800);


  /* =====================
     Overlay
     ===================== */

  --color-overlay: var(--color-black-alpha-400);

}
:root {

  /* =====================
     Border Stroke
     ===================== */

  --border-stroke-primary: var(--border-stroke-1);
  --border-stroke-secondary: var(--border-stroke-0-5);


  /* =====================
     Divider
     ===================== */

  --divider: var(--border-stroke-1);


  /* =====================
     Border Radius
     ===================== */

  --border-radius: var(--border-radius-2);
  --border-radius-full: var(--border-radius-9999);

}
:root {

  /* =====================
     Typography — Headline
     ===================== */

  --typography-headline-font-family: var(--typography-font-family-es-rebond-grotesque);
  --typography-headline-font-weight: var(--typography-font-weight-medium);


  /* =====================
     Typography — Paragraph
     ===================== */

  --typography-paragraph-font-family: var(--typography-font-family-inter);
  --typography-paragraph-font-weight: var(--typography-font-weight-regular);
  --typography-paragraph-font-weight-bold: var(--typography-font-weight-bold);


  /* =====================
     Typography — Link
     ===================== */

  --typography-link-font-family: var(--typography-font-family-inter);
  --typography-link-font-weight: var(--typography-font-weight-medium);

}
:root {

  /* ======================
     ALIAS TOKENS — Icon sizes
     ====================== */

  --icon-size-s: var(--icon-16);   /* 16px */
  --icon-size-m: var(--icon-20);   /* 20px */
  --icon-size-l: var(--icon-24);   /* 24px */
  --icon-size-xl: var(--icon-32);  /* 32px */

  --icon-stroke-s: var(--icon-stroke-2-5);
  --icon-stroke-m: var(--icon-stroke-2-2);
  --icon-stroke-l: var(--icon-stroke-1-7);
  --icon-stroke-xl: var(--icon-stroke-1-4);

}
/* =============================================
   ALIAS TOKENS — Motion
   ============================================= */

:root {
  /* Transition interactive — à utiliser sur tous les composants interactifs */
  --motion-transition-interactive: var(--motion-duration-200) var(--motion-easing-ease-out);
}

/* Pressed — instantané sur tous les éléments interactifs
   button:active a une spécificité (0,1,1) qui prend le dessus
   sur la transition définie au niveau composant (0,1,0) */
button:active,
a:active,
[role="button"]:active,
label:active,
select:active {
  transition: none;
}

/* =============================================
   ALIAS TOKENS — Focus
   ============================================= */

/* Focus — visible uniquement à la navigation clavier (pas au clic souris) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled — jamais de focus sur les éléments désactivés */
button:disabled:focus-visible,
input:disabled:focus-visible,
select:disabled:focus-visible,
textarea:disabled:focus-visible,
[aria-disabled="true"]:focus-visible {
  outline: none;
}
:root {

  /* ================================
     ALIAS TOKENS — Grid (Above 0px)
     ================================ */

  --grid-columns: 4;
  --grid-gutter: var(--spacing-16);
  --grid-margin: var(--spacing-16);
  --grid-max-width: none;

}

/* ==================================
   ALIAS TOKENS — Grid (Above 480px)
   ================================== */

@media (min-width: 480px) {
  :root {

    --grid-columns: 12;
    --grid-gutter: var(--spacing-20);
    --grid-margin: var(--spacing-20);
    --grid-max-width: 1280px;

  }
}

/* ==================================
   ALIAS TOKENS — Grid (Above 768px)
   ================================== */

@media (min-width: 768px) {
  :root {

    --grid-columns: 12;
    --grid-gutter: var(--spacing-24);
    --grid-margin: var(--spacing-24);
    --grid-max-width: 1280px;

  }
}
/* =============================================
   COMPONENT — Logo
   =============================================

   Variants
   --------
   Variant : .logo--logotype (default) | .logo--icon
   Color   : (default = light) | .logo--on-dark
   Usage   : (default) | .logo--decorative

   Usage
   -----
   Logotype  → websites, apps
   Icon      → websites, apps (espaces réduits)
   Decorative → supports marketing uniquement

   HTML
   ----
   <svg class="logo">...</svg>
   <svg class="logo logo--on-dark">...</svg>
   <svg class="logo logo--decorative">...</svg>
   <svg class="logo logo--icon">...</svg>

   ============================================= */

.logo {
  /* Component tokens */
  --logo-color-icon: var(--color-logo-black);
  --logo-color-text: var(--color-logo-black);

  /* Dimensions */
  height: 32px;
  width: auto;
  aspect-ratio: 190 / 32;
  display: block;
  flex-shrink: 0;
}

.logo--icon {
  aspect-ratio: 1;
  width: 32px;
}

/* Fill via component tokens */
.logo .logo__icon {
  fill: var(--logo-color-icon);
}

.logo .logo__text {
  fill: var(--logo-color-text);
}


/* =====================
   Variant — On Dark
   ===================== */

.logo--on-dark {
  --logo-color-icon: var(--color-logo-linen);
  --logo-color-text: var(--color-logo-linen);
}


/* =====================
   Usage — Decorative
   ===================== */

.logo--decorative {
  --logo-color-icon: var(--color-logo-gold);
}

.logo--decorative.logo--on-dark {
  --logo-color-icon: var(--color-logo-gold);
  --logo-color-text: var(--color-logo-linen);
}
/* =============================================
   COMPONENT — Icon
   =============================================

   Sizes
   -----
   Size : .icon--s (default) | .icon--m | .icon--l | .icon--xl

   HTML
   ----
   Les icônes sont intégrées en SVG inline. Le fichier assets/icons/*.svg
   est copié directement dans le HTML avec la classe .icon ajoutée sur le <svg>.

   <!-- S (default) -->
   <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
     <path d="..." stroke="currentColor" />
   </svg>

   <!-- M -->
   <svg class="icon icon--m" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
     <path d="..." stroke="currentColor" />
   </svg>

   SVG requirements
   ----------------
   - viewBox="0 0 24 24" (espace de coordonnées source)
   - fill="none"
   - Paths : stroke="currentColor"
   - Pas de stroke-width inline (géré par CSS via héritage)

   Naming convention — SVG files
   ------------------------------
   icon-[category]-[name].svg

   Categories : activities | business | communication | law | legalplace | other | security | social | ui

   ============================================= */

.icon {
  /* Component tokens */
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);

  /* Dimensions */
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;

  /* Stroke */
  stroke-width: var(--icon-stroke);
}


/* =====================
   Sizes
   ===================== */

/* S — 16px / 1.5px (default) */
.icon--s {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}

/* M — 20px / 1.6px */
.icon--m {
  --icon-size: var(--icon-size-m);
  --icon-stroke: var(--icon-stroke-m);
}

/* L — 24px / 1.7px */
.icon--l {
  --icon-size: var(--icon-size-l);
  --icon-stroke: var(--icon-stroke-l);
}

/* XL — 32px / 1.9px */
.icon--xl {
  --icon-size: var(--icon-size-xl);
  --icon-stroke: var(--icon-stroke-xl);
}
/* =============================================
   COMPONENT — Icon Box
   =============================================

   Variants
   --------
   Size : (default = M) | .icon-box--xl

   Usage
   -----
   - Conteneur décoratif destiné à mettre en valeur une icône dans un bloc de contenu
   - Composant purement presentationnel — pas d'état interactif

   Règles
   ------
   - Toujours une seule icône à l'intérieur
   - Toujours carré — dimensions fixes, indépendantes du contenu
   - Seules deux tailles autorisées : M (52px) et XL (80px)
   - La taille de l'icône est imposée par le composant via CSS — ne pas ajouter de classe de taille sur le .icon enfant

   HTML
   ----
   <!-- M (défaut) -->
   <div class="icon-box">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">...</svg>
   </div>

   <!-- XL -->
   <div class="icon-box icon-box--xl">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">...</svg>
   </div>

   ============================================= */


.icon-box {
  /* Component tokens */
  --icon-box-bg: var(--color-surface-decorative-linen-medium);
  --icon-box-size: 52px;

  /* Layout — carré fixe */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);

  /* Appearance */
  background-color: var(--icon-box-bg);
  border-radius: var(--border-radius);
}

/* Taille icône imposée — M (20px) */
.icon-box > .icon {
  --icon-size: var(--icon-size-m);
  --icon-stroke: var(--icon-stroke-m);
}


/* =====================
   Size — XL
   ===================== */

.icon-box--xl {
  --icon-box-size: 80px;
}

/* Taille icône imposée — XL (32px) */
.icon-box--xl > .icon {
  --icon-size: var(--icon-size-xl);
  --icon-stroke: var(--icon-stroke-xl);
}
/* =============================================
   COMPONENT — Action Button
   =============================================

   Variants
   --------
   Type    : (default = primary)     | .action-btn--secondary
   Surface : (default)               | .action-btn--on-dark
   Size    : (default = xs)          | .action-btn--m
   Label   : (default = avec label)  | .action-btn--icon-only

   Usage
   -----
   - Réservé aux actions optionnelles pendant le parcours utilisateur
     (ex : ajouter un élément, ouvrir un panneau, déclencher une action secondaire)
   - Ne pas utiliser pour les actions principales d'une page → utiliser .btn à la place

   Règles
   ------
   - Toujours une icône
   - Le label est affiché par défaut — utiliser .action-btn--icon-only quand absent
   - Primary : bordure linen par défaut, devient foncée au hover/press
   - Secondary : aucune bordure visible par défaut
   - Les deux types partagent le même fond hover/pressed (surface-neutral)
   - .action-btn--on-dark s'applique au primaire et au secondaire
   - Combinaison : .action-btn--secondary.action-btn--on-dark

   HTML
   ----
   <!-- XS Primary avec label (défaut) -->
   <button class="action-btn" type="button">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 1v22" stroke="currentColor" />
       <path d="M1 12h22" stroke="currentColor" />
     </svg>
     Label
   </button>

   <!-- XS Primary icon-only -->
   <button class="action-btn action-btn--icon-only" type="button" aria-label="Ajouter">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 1v22" stroke="currentColor" />
       <path d="M1 12h22" stroke="currentColor" />
     </svg>
   </button>

   <!-- M Secondary avec label -->
   <button class="action-btn action-btn--secondary action-btn--m" type="button">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 1v22" stroke="currentColor" />
       <path d="M1 12h22" stroke="currentColor" />
     </svg>
     Label
   </button>

   <!-- XS Primary On Dark -->
   <button class="action-btn action-btn--on-dark" type="button">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 1v22" stroke="currentColor" />
       <path d="M1 12h22" stroke="currentColor" />
     </svg>
     Label
   </button>

   <!-- XS Secondary On Dark -->
   <button class="action-btn action-btn--secondary action-btn--on-dark" type="button">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 1v22" stroke="currentColor" />
       <path d="M1 12h22" stroke="currentColor" />
     </svg>
     Label
   </button>

   ============================================= */

.action-btn {
  /* Component tokens — Primary / XS / avec label (défaut) */
  --action-btn-bg: transparent;
  --action-btn-bg-hovered: var(--color-surface-neutral-hovered);
  --action-btn-bg-pressed: var(--color-surface-neutral-pressed);
  --action-btn-color: var(--color-content-primary);
  --action-btn-border-color: var(--color-border-secondary);
  --action-btn-border-color-hovered: var(--color-border-primary-hovered);
  --action-btn-border-color-pressed: var(--color-border-primary-pressed);

  /* Layout — XS avec label */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--border-radius-full);
  border: var(--border-stroke-primary) solid var(--action-btn-border-color);

  /* Appearance */
  background-color: var(--action-btn-bg);
  color: var(--action-btn-color);
  cursor: pointer;

  /* Typography */
  font-family: var(--typography-link-font-family);
  font-weight: var(--typography-link-font-weight);
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);

  white-space: nowrap;
  text-decoration: none;

  /* Motion */
  transition:
    background-color var(--motion-transition-interactive),
    border-color var(--motion-transition-interactive);
}

.action-btn:hover {
  background-color: var(--action-btn-bg-hovered);
  border-color: var(--action-btn-border-color-hovered);
}

.action-btn:active {
  background-color: var(--action-btn-bg-pressed);
  border-color: var(--action-btn-border-color-pressed);
}


/* =====================
   Variant — Secondary
   ===================== */

.action-btn--secondary {
  --action-btn-border-color: transparent;
  --action-btn-border-color-hovered: transparent;
  --action-btn-border-color-pressed: transparent;
}


/* =====================
   Icon Only
   ===================== */

.action-btn--icon-only {
  padding: var(--spacing-12);
}


/* =====================
   Size — M
   ===================== */

.action-btn--m {
  padding: var(--spacing-16) var(--spacing-24);
}

.action-btn--m.action-btn--icon-only {
  padding: var(--spacing-20);
}


/* =====================
   Surface — On Dark
   ===================== */

.action-btn--on-dark {
  --action-btn-bg: transparent;
  --action-btn-bg-hovered: var(--color-surface-neutral-inverse-hovered);
  --action-btn-bg-pressed: var(--color-surface-neutral-inverse-pressed);
  --action-btn-color: var(--color-content-inverse-primary);
  --action-btn-border-color: var(--color-border-secondary-inverse);
  --action-btn-border-color-hovered: var(--color-border-secondary-inverse-hovered);
  --action-btn-border-color-pressed: var(--color-border-secondary-inverse-pressed);
}


/* =====================
   Variant — Secondary / Surface On Dark
   ===================== */

.action-btn--secondary.action-btn--on-dark {
  --action-btn-border-color: transparent;
  --action-btn-border-color-hovered: transparent;
  --action-btn-border-color-pressed: transparent;
}


/* =====================
   State — Disabled
   ===================== */

.action-btn:disabled,
.action-btn[aria-disabled="true"] {
  --action-btn-bg: var(--color-surface-disabled);
  --action-btn-bg-hovered: var(--color-surface-disabled);
  --action-btn-bg-pressed: var(--color-surface-disabled);
  --action-btn-color: var(--color-content-disabled);
  --action-btn-border-color: var(--color-border-disabled);
  --action-btn-border-color-hovered: var(--color-border-disabled);
  --action-btn-border-color-pressed: var(--color-border-disabled);
  cursor: not-allowed;
}

.action-btn--secondary:disabled,
.action-btn--secondary[aria-disabled="true"] {
  --action-btn-border-color: transparent;
  --action-btn-border-color-hovered: transparent;
  --action-btn-border-color-pressed: transparent;
}

/* Disabled sur dark surface — Primary */
.action-btn--on-dark:disabled,
.action-btn--on-dark[aria-disabled="true"] {
  --action-btn-bg: var(--color-surface-disabled-inverse);
  --action-btn-bg-hovered: var(--color-surface-disabled-inverse);
  --action-btn-bg-pressed: var(--color-surface-disabled-inverse);
  --action-btn-color: var(--color-content-disabled);
  --action-btn-border-color: var(--color-border-disabled-inverse);
  --action-btn-border-color-hovered: var(--color-border-disabled-inverse);
  --action-btn-border-color-pressed: var(--color-border-disabled-inverse);
}

/* Disabled sur dark surface — Secondary */
.action-btn--secondary.action-btn--on-dark:disabled,
.action-btn--secondary.action-btn--on-dark[aria-disabled="true"] {
  --action-btn-border-color: transparent;
  --action-btn-border-color-hovered: transparent;
  --action-btn-border-color-pressed: transparent;
}


/* =====================
   Icon size
   ===================== */

/* XS — icon S (imposé par le composant, pas par le développeur) */
.action-btn .icon {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}

/* M — icon M */
.action-btn--m .icon {
  --icon-size: var(--icon-size-m);
  --icon-stroke: var(--icon-stroke-m);
}
/* =============================================
   COMPONENT — Button
   =============================================

   Variants
   --------
   Variant : (default = primary avec icône) | .btn--secondary
   Surface : (default) | .btn--on-dark
   State   : (default) | :hover | :active | :disabled

   Règles
   ------
   - Primaire : toujours une icône à droite (généralement icon-ui-arrow-right) — obligatoire
   - Secondaire : jamais d'icône (masquée via CSS si présente par erreur)
   - .btn--on-dark s'applique au primaire et au secondaire
   - Combinaison : .btn--secondary.btn--on-dark

   HTML
   ----
   <button class="btn" type="button">
     Label
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="m0 12 22.5 0" stroke="currentColor"/>
       <path d="m14.5 20 8 -8 -8 -8" stroke="currentColor"/>
     </svg>
   </button>

   <button class="btn btn--secondary" type="button">Label</button>

   <button class="btn btn--on-dark" type="button">
     Label
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="m0 12 22.5 0" stroke="currentColor"/>
       <path d="m14.5 20 8 -8 -8 -8" stroke="currentColor"/>
     </svg>
   </button>

   <button class="btn" type="button" disabled>
     Label
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="m0 12 22.5 0" stroke="currentColor"/>
       <path d="m14.5 20 8 -8 -8 -8" stroke="currentColor"/>
     </svg>
   </button>

   ============================================= */

.btn {
  /* Component tokens — Primary (default) */
  --btn-bg: var(--color-surface-accent);
  --btn-bg-hovered: var(--color-surface-accent-hovered);
  --btn-bg-pressed: var(--color-surface-accent-pressed);
  --btn-color: var(--color-content-inverse-primary);
  --btn-border-color: transparent;
  --btn-border-color-hovered: transparent;
  --btn-border-color-pressed: transparent;

  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--border-radius-full);
  border: var(--border-stroke-primary) solid var(--btn-border-color);

  /* Appearance */
  background-color: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;

  /* Typography */
  font-family: var(--typography-link-font-family);
  font-weight: var(--typography-link-font-weight);
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);

  white-space: nowrap;
  text-decoration: none;

  /* Motion */
  transition:
    background-color var(--motion-transition-interactive),
    border-color var(--motion-transition-interactive),
    color var(--motion-transition-interactive);
}

.btn:hover {
  background-color: var(--btn-bg-hovered);
  border-color: var(--btn-border-color-hovered);
}

.btn:active {
  background-color: var(--btn-bg-pressed);
  border-color: var(--btn-border-color-pressed);
}


/* =====================
   Variant — Secondary
   ===================== */

.btn--secondary {
  --btn-bg: transparent;
  --btn-bg-hovered: var(--color-surface-neutral-hovered);
  --btn-bg-pressed: var(--color-surface-neutral-pressed);
  --btn-color: var(--color-content-primary);
  --btn-border-color: var(--color-border-primary);
  --btn-border-color-hovered: var(--color-border-primary-hovered);
  --btn-border-color-pressed: var(--color-border-primary-pressed);
}

.btn--secondary .icon {
  display: none;
}


/* =====================
   Icon size
   ===================== */

/* S (imposé par le composant, pas par le développeur) */
.btn .icon {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}


/* =====================
   Surface — On Dark
   ===================== */

.btn--on-dark {
  --btn-bg: var(--color-surface-accent-inverse);
  --btn-bg-hovered: var(--color-surface-accent-inverse-hovered);
  --btn-bg-pressed: var(--color-surface-accent-inverse-pressed);
  --btn-color: var(--color-content-accent);
  --btn-border-color: transparent;
  --btn-border-color-hovered: transparent;
  --btn-border-color-pressed: transparent;
}


/* =====================
   Variant — Secondary / Surface On Dark
   ===================== */

.btn--secondary.btn--on-dark {
  --btn-bg: transparent;
  --btn-bg-hovered: var(--color-surface-neutral-inverse-hovered);
  --btn-bg-pressed: var(--color-surface-neutral-inverse-pressed);
  --btn-color: var(--color-content-inverse-primary);
  --btn-border-color: var(--color-border-primary-inverse);
  --btn-border-color-hovered: var(--color-border-primary-inverse-hovered);
  --btn-border-color-pressed: var(--color-border-primary-inverse-pressed);
}


/* =====================
   State — Disabled
   ===================== */

.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--color-surface-disabled);
  --btn-bg-hovered: var(--color-surface-disabled);
  --btn-bg-pressed: var(--color-surface-disabled);
  --btn-color: var(--color-content-disabled);
  --btn-border-color: var(--color-border-disabled);
  --btn-border-color-hovered: var(--color-border-disabled);
  --btn-border-color-pressed: var(--color-border-disabled);
  cursor: not-allowed;
}

/* Disabled sur dark surface — Primary */
.btn--on-dark:disabled,
.btn--on-dark[aria-disabled="true"] {
  --btn-bg: var(--color-surface-disabled-inverse);
  --btn-bg-hovered: var(--color-surface-disabled-inverse);
  --btn-bg-pressed: var(--color-surface-disabled-inverse);
  --btn-color: var(--color-content-disabled);
  --btn-border-color: transparent;
  --btn-border-color-hovered: transparent;
  --btn-border-color-pressed: transparent;
}

/* Disabled sur dark surface — Secondary */
.btn--secondary.btn--on-dark:disabled,
.btn--secondary.btn--on-dark[aria-disabled="true"] {
  --btn-bg: transparent;
  --btn-bg-hovered: transparent;
  --btn-bg-pressed: transparent;
  --btn-color: var(--color-content-disabled);
  --btn-border-color: var(--color-border-disabled-inverse);
  --btn-border-color-hovered: var(--color-border-disabled-inverse);
  --btn-border-color-pressed: var(--color-border-disabled-inverse);
}
/* =============================================
   COMPONENT — Link
   =============================================

   Variants
   --------
   Type : (default = internal) | .link--external | .link--inline | .link--standalone
   Surface : (default = on light) | .link--on-dark

   Usage
   -----
   - Internal  : lien de navigation vers une page du site
   - External  : lien vers une ressource externe (s'ouvre dans un nouvel onglet)
   - Inline    : lien intégré dans un bloc de texte courant

   Règles
   ------
   - Internal et External : toujours accompagnés d'une icône (arrow-right / arrow-right-up)
   - Inline : pas d'icône — texte souligné par défaut, soulignement retiré au hover
   - Ne pas utiliser d'attribut href vide — préférer aria-disabled="true" pour désactiver

   HTML
   ----
   <!-- Internal (défaut) -->
   <a class="link" href="/page">
     Label
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="m0 12 22.5 0" stroke="currentColor"/>
       <path d="m14.5 20 8 -8 -8 -8" stroke="currentColor"/>
     </svg>
   </a>

   <!-- External -->
   <a class="link link--external" href="https://..." target="_blank" rel="noopener noreferrer">
     Label
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M22 13.4999V1.99994H10.5" stroke="currentColor"/>
       <path d="M2 21.9999 22 1.99994" stroke="currentColor"/>
     </svg>
   </a>

   <!-- Inline -->
   <a class="link link--inline" href="/page">Label</a>

   ============================================= */


.link {
  /* Component tokens */
  --link-color: var(--color-content-accent);
  --link-color-hovered: var(--color-content-accent-hovered);
  --link-color-pressed: var(--color-content-accent-pressed);

  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);

  /* Appearance */
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;

  /* Typography */
  font-family: var(--typography-link-font-family);
  font-weight: var(--typography-link-font-weight);
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);

  white-space: nowrap;

  /* Motion */
  transition: color var(--motion-transition-interactive);
}

/* Optical alignment de l'icône */
.link > .icon {
  margin-top: var(--spacing-2);
}

/* =====================
   Icon size
   ===================== */

/* S (imposé par le composant, pas par le développeur) */
.link .icon {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}

.link:hover {
  color: var(--link-color-hovered);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.link:active {
  color: var(--link-color-pressed);
  text-decoration: none;
}


/* =====================
   Variant — External
   ===================== */

.link--external {
  gap: var(--spacing-4);
}


/* =====================
   Variant — Inline
   ===================== */

.link--inline {
  --link-color: var(--color-content-primary);
  --link-color-hovered: var(--color-content-primary);
  --link-color-pressed: var(--color-content-primary);

  gap: 0;
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  white-space: normal;
}

.link--inline:hover {
  text-decoration: none;
}

.link--inline:active {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}


/* =====================
   Variant — Standalone
   ===================== */

/* Lien sans icône, ni flèche, ni underline permanent — pour les liens d'action isolés */
.link--standalone {
  gap: 0;
  white-space: normal;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
}

.link--standalone:hover {
  text-decoration: none;
}

.link--standalone:active {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}


/* =====================
   Variant — On Dark
   ===================== */

.link--on-dark {
  --link-color: var(--color-content-inverse-primary);
  --link-color-hovered: var(--color-content-inverse-primary);
  --link-color-pressed: var(--color-content-inverse-primary);
}


/* =====================
   State — Disabled
   ===================== */

.link[aria-disabled="true"] {
  --link-color: var(--color-content-disabled);
  --link-color-hovered: var(--color-content-disabled);
  --link-color-pressed: var(--color-content-disabled);
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}
/* =============================================
   TEXT STYLES
   =============================================

   Classes utilitaires appliquant un style
   typographique complet (famille, graisse,
   taille, interligne).

   Usage
   -----
   Appliquer directement sur l'élément HTML
   portant le texte. Ne définissent pas la
   couleur — à gérer via les alias tokens
   de couleur selon le contexte.

   Headline
   --------
   .headline-1   ES Rebond Grotesque Medium — 42px / 50px  (↑ 992px : 54px / 64px)
   .headline-2   ES Rebond Grotesque Medium — 32px / 40px  (↑ 992px : 42px / 50px)
   .headline-3   ES Rebond Grotesque Medium — 24px / 32px  (↑ 992px : 28px / 36px)
   .headline-4   ES Rebond Grotesque Medium — 20px / 28px
   .headline-5   ES Rebond Grotesque Medium — 18px / 24px
   .headline-6   ES Rebond Grotesque Medium — 16px / 20px

   Paragraph
   ---------
   .paragraph-1        Inter Regular — 18px / 28px
   .paragraph-2        Inter Regular — 16px / 24px
   .paragraph-3        Inter Regular — 14px / 22px
   .paragraph-4        Inter Regular — 12px / 16px

   .paragraph-bold-1   Inter Bold — 18px / 28px
   .paragraph-bold-2   Inter Bold — 16px / 24px
   .paragraph-bold-3   Inter Bold — 14px / 22px
   .paragraph-bold-4   Inter Bold — 12px / 16px

   Link
   ----
   .link-1   Inter Medium — 18px / 28px
   .link-2   Inter Medium — 16px / 24px
   .link-3   Inter Medium — 14px / 22px
   .link-4   Inter Medium — 12px / 16px

   ============================================= */


/* =====================
   Headline
   ===================== */

.headline-1,
.headline-2,
.headline-3,
.headline-4,
.headline-5,
.headline-6 {
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
}

.headline-1 {
  font-size: var(--typography-headline-font-size-1);
  line-height: var(--typography-headline-line-height-1);
}

.headline-2 {
  font-size: var(--typography-headline-font-size-2);
  line-height: var(--typography-headline-line-height-2);
}

.headline-3 {
  font-size: var(--typography-headline-font-size-3);
  line-height: var(--typography-headline-line-height-3);
}

.headline-4 {
  font-size: var(--typography-headline-font-size-4);
  line-height: var(--typography-headline-line-height-4);
}

.headline-5 {
  font-size: var(--typography-headline-font-size-5);
  line-height: var(--typography-headline-line-height-5);
}

.headline-6 {
  font-size: var(--typography-headline-font-size-6);
  line-height: var(--typography-headline-line-height-6);
}


/* =====================
   Paragraph
   ===================== */

.paragraph-1,
.paragraph-2,
.paragraph-3,
.paragraph-4,
.paragraph-bold-1,
.paragraph-bold-2,
.paragraph-bold-3,
.paragraph-bold-4 {
  font-family: var(--typography-paragraph-font-family);
}

.paragraph-1,
.paragraph-2,
.paragraph-3,
.paragraph-4 {
  font-weight: var(--typography-paragraph-font-weight);
}

.paragraph-bold-1,
.paragraph-bold-2,
.paragraph-bold-3,
.paragraph-bold-4 {
  font-weight: var(--typography-paragraph-font-weight-bold);
}

.paragraph-1,
.paragraph-bold-1 {
  font-size: var(--typography-paragraph-font-size-1);
  line-height: var(--typography-paragraph-line-height-1);
}

.paragraph-2,
.paragraph-bold-2 {
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);
}

.paragraph-3,
.paragraph-bold-3 {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}

.paragraph-4,
.paragraph-bold-4 {
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}


/* =====================
   Link
   ===================== */

.link-1,
.link-2,
.link-3,
.link-4 {
  font-family: var(--typography-link-font-family);
  font-weight: var(--typography-link-font-weight);
}

.link-1 {
  font-size: var(--typography-paragraph-font-size-1);
  line-height: var(--typography-paragraph-line-height-1);
}

.link-2 {
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);
}

.link-3 {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}

.link-4 {
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}
/* =============================================
   COMPONENT — Badge
   =============================================

   Variants
   --------
   Color : (default = Gold) | .badge--dark | .badge--linen
   Size  : (default = M) | .badge--s

   Usage
   -----
   - Étiquette courte mise en avant d'une information ou d'une catégorie
   - M → avec ou sans icône, typographie Headline/6
   - S → sans icône, typographie Paragraph/4

   Règles
   ------
   - Gold : couleur de marque — à utiliser en priorité
   - Dark : sur fond clair uniquement
   - Linen : variante neutre
   - S ne contient jamais d'icône
   - M → icône optionnelle, toujours taille S (16px) — imposée par CSS, ne pas ajouter de classe de taille sur le .icon enfant
   - Hauteur fixe par taille : M = 28px, S = 24px

   HTML
   ----
   <!-- M Gold (défaut) — sans icône -->
   <div class="badge">
     Badge
   </div>

   <!-- M Gold — avec icône -->
   <div class="badge">
     <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
       <path d="M3 1v17l9 4.86L21 18V1H3Z" stroke="currentColor"/>
       <path d="M7.25 10.75l3.5 3.5 6-7.5" stroke="currentColor"/>
     </svg>
     Badge
   </div>

   <!-- M Dark — sans icône -->
   <div class="badge badge--dark">
     Badge
   </div>

   <!-- S Gold -->
   <div class="badge badge--s">
     Badge
   </div>

   <!-- S Dark -->
   <div class="badge badge--s badge--dark">
     Badge
   </div>

   ============================================= */


.badge {
  /* Component tokens */
  --badge-bg: var(--color-surface-decorative-brand);
  --badge-color: var(--color-content-primary);
  --badge-height: 28px;
  --badge-padding-x: var(--spacing-12);

  /* Layout — hauteur fixe, largeur dictée par le contenu */
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--spacing-8);
  overflow: hidden;
  height: var(--badge-height);

  /* Spacing */
  padding: 0 var(--badge-padding-x);

  /* Appearance */
  background-color: var(--badge-bg);
  border-radius: var(--border-radius);
  color: var(--badge-color);

  white-space: nowrap;

  /* Typography — Headline/6 (M par défaut) */
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-6);
  line-height: var(--typography-headline-line-height-6);
}


/* Taille icône imposée — S (16px) */
.badge > .icon {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}


/* =====================
   Color — Dark
   ===================== */

.badge--dark {
  --badge-bg: var(--color-surface-decorative-black);
  --badge-color: var(--color-content-inverse-primary);
}


/* =====================
   Color — Linen
   ===================== */

.badge--linen {
  --badge-bg: var(--color-surface-decorative-linen-medium);
}


/* =====================
   Size — S
   ===================== */

.badge--s {
  --badge-height: 24px;
  --badge-padding-x: var(--spacing-8);

  gap: 0;

  /* Typography — Paragraph/4 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}
/* =============================================
   COMPONENT — Section Headline
   =============================================

   Variants
   --------
   Badge     : (default = avec badge) | sans ..badge dans le HTML
   Surface   : (default = Default) | .section-headline--dark
   Alignment : (default = Left) | .section-headline--centered

   Usage
   -----
   - Bloc d'en-tête de section composé d'un badge optionnel et d'un titre principal
   - Le badge utilise l'icône décorée et un texte court
   - La typographie est définie par le CSS du composant

   Règles
   ------
   - Utiliser des éléments de titre sémantiques (<h1>, <h2>, etc.) pour le titre
   - Le badge est optionnel — l'omettre simplement dans le HTML si non nécessaire
   - La variante Dark adapte uniquement la couleur du titre
   - La variante Centered centre badge et titre — combinable avec Dark

   HTML
   ----
   <!-- Default — avec badge -->
   <div class="section-headline">
     <div class="badge">Libellé du badge</div>
     <h2 class="section-headline__title">Titre de la section</h2>
   </div>

   <!-- Default — sans badge -->
   <div class="section-headline">
     <h2 class="section-headline__title">Titre de la section</h2>
   </div>

   <!-- Dark — avec badge -->
   <div class="section-headline section-headline--dark">
     <div class="badge">...</div>
     <h2 class="section-headline__title">Titre de la section</h2>
   </div>

   <!-- Centered — avec badge -->
   <div class="section-headline section-headline--centered">
     <div class="badge">Libellé du badge</div>
     <h2 class="section-headline__title">Titre de la section</h2>
   </div>

   ============================================= */


.section-headline {
  /* Component tokens */
  --section-headline-title-color: var(--color-content-primary);

  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
}



/* =====================
   Title
   ===================== */

.section-headline__title {
  margin: 0;
  color: var(--section-headline-title-color);

  /* Typography — Headline/2 */
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-2);
  line-height: var(--typography-headline-line-height-2);
}


/* =====================
   Surface — Dark
   ===================== */

.section-headline--dark {
  --section-headline-title-color: var(--color-content-inverse-primary);
}


/* =====================
   Alignment — Centered
   ===================== */

.section-headline--centered {
  align-items: center;
}

/* Le badge a align-self: flex-start par défaut — on le réinitialise */
.section-headline--centered .badge {
  align-self: center;
}

.section-headline--centered .section-headline__title {
  text-align: center;
}
/* =============================================
   COMPONENT — Image
   =============================================

   Variants
   --------
   Ratio : (default = Fluid) | .image--3-1 | .image--16-9 | .image--3-2 |
           .image--4-3 | .image--1-1 | .image--3-4 | .image--9-16

   Usage
   -----
   - Affiche une image avec un ratio d'aspect fixe et un recadrage automatique
   - La variante Fluid (default) n'impose aucun ratio — s'adapte au contenu ou au conteneur
   - L'image est toujours en object-fit: cover pour remplir l'espace sans déformation

   Règles
   ------
   - Toujours fournir un attribut alt descriptif sur le <img>
   - La largeur du composant est définie par le contexte parent
   - Ne pas définir de height directement sur .image — utiliser les modificateurs de ratio

   HTML
   ----
   <!-- 16:9 -->
   <div class="image image--16-9">
     <img src="..." alt="Description de l'image" />
   </div>

   <!-- 1:1 -->
   <div class="image image--1-1">
     <img src="..." alt="Description de l'image" />
   </div>

   <!-- Fluid (pas de ratio imposé) -->
   <div class="image">
     <img src="..." alt="Description de l'image" />
   </div>

   ============================================= */


.image {
  /* Layout */
  display: block;
  width: 100%;
  overflow: hidden;

  /* Appearance */
  border-radius: var(--border-radius);
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* Fluid variant — no imposed ratio, image keeps its natural dimensions */
.image:not([class*="image--"]) img {
  height: auto;
  object-fit: initial;
}


/* =====================
   Aspect Ratios
   ===================== */

.image--3-1  { aspect-ratio: 3 / 1; }
.image--16-9 { aspect-ratio: 16 / 9; }
.image--3-2  { aspect-ratio: 3 / 2; }
.image--4-3  { aspect-ratio: 4 / 3; }
.image--1-1  { aspect-ratio: 1 / 1; }
.image--3-4  { aspect-ratio: 3 / 4; }
.image--9-16 { aspect-ratio: 9 / 16; }
/* =============================================
   COMPONENT — Argument
   =============================================

   Variants
   --------
   Taille : (default = M) | .argument--s

   Usage
   -----
   - Liste d'arguments avec icône check
   - M : Headline/5 + Paragraph/2
   - S : Headline/6 + Paragraph/3

   HTML
   ----
   <!-- Default (M) -->
   <div class="argument">
     <div class="argument__icon-container" aria-hidden="true">
       <svg class="argument__icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2 8.5L6 12.5L14 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </div>
     <div class="argument__content">
       <p class="argument__headline">Protégez votre activité</p>
       <p class="argument__paragraph">Couverture totale en cas d'erreurs, oublis ou fautes entraînant des dommages aux tiers</p>
     </div>
   </div>

   <!-- Small (S) -->
   <div class="argument argument--s">
     ...
   </div>

   ============================================= */


/* =====================
   Base
   ===================== */

.argument {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}


/* =====================
   Icône
   ===================== */

.argument__icon-container {
  display: flex;
  align-items: center;
  padding-top: var(--spacing-4);
  flex-shrink: 0;
}

.argument__icon {
  width: 16px;
  height: 16px;
  color: var(--color-content-primary);
  flex-shrink: 0;
}


/* =====================
   Contenu
   ===================== */

.argument__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  flex: 1;
  min-width: 0;
}

.argument__headline {
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-5);
  line-height: var(--typography-headline-line-height-5);
  letter-spacing: var(--typography-headline-letter-spacing-5);
  color: var(--color-content-primary);
}

.argument__paragraph {
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);
  letter-spacing: var(--typography-paragraph-letter-spacing-2);
  color: var(--color-content-secondary);
}


/* =====================
   Variant — S
   ===================== */

.argument--s .argument__headline {
  font-size: var(--typography-headline-font-size-6);
  line-height: var(--typography-headline-line-height-6);
}

.argument--s .argument__paragraph {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}
/* =============================================
   COMPONENT — Feature Card
   =============================================

   Variants
   --------
   (aucune variante pour l'instant)

   Usage
   -----
   - Carte présentant un argument ou une fonctionnalité clé
   - Composée d'un Icon Box, d'un titre (Headline/4) et d'un paragraphe (Paragraph/3)
   - Conçue pour s'afficher dans un conteneur flex-wrap, 3 par ligne
   - La largeur est contrôlée par le conteneur parent (flex: 1 0 0, min-width)

   Composants utilisés
   -------------------
   - .icon-box (Icon Box — taille M par défaut)
   - .icon     (Icon — taille M imposée par Icon Box)

   Règles
   ------
   - Toujours utiliser un Icon Box comme premier enfant
   - L'icône à l'intérieur de l'Icon Box doit porter la classe .icon
   - Le titre utilise un élément de titre sémantique (<h3>, <h4>, etc.)
   - Le paragraphe est optionnel

   HTML
   ----
   <div class="feature-card">
     <div class="icon-box" aria-hidden="true">
       <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
         <path d="..." stroke="currentColor"/>
       </svg>
     </div>
     <div class="feature-card__content">
       <h3 class="feature-card__title">Titre de la fonctionnalité.</h3>
       <p class="feature-card__text">Description courte de la fonctionnalité ou de l'argument.</p>
     </div>
   </div>

   ============================================= */


/* =====================
   Base
   ===================== */

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  flex: 1 0 0;
  min-width: 235px;
}


/* =====================
   Contenu
   ===================== */

.feature-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.feature-card__title {
  margin: 0;
  color: var(--color-content-primary);

  /* Typography — Headline/4 */
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-4);
  line-height: var(--typography-headline-line-height-4);
  letter-spacing: var(--typography-headline-letter-spacing-4);
}

.feature-card__text {
  margin: 0;
  color: var(--color-content-secondary);

  /* Typography — Paragraph/3 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  letter-spacing: var(--typography-paragraph-letter-spacing-3);
}
/* =============================================
   COMPONENT — Highlight
   =============================================

   Variants
   --------
   Color : (default = brand/gold) | .highlight--on-dark

   Usage
   -----
   - Surligne un mot ou un groupe de mots pour le mettre en valeur
   - Fonctionne dans les titres (headline) et les paragraphes
   - Utiliser la balise <mark> pour la sémantique HTML
   - Le surlignage ne couvre que le texte, pas toute la ligne

   Règles
   ------
   - Toujours utiliser sur du texte inline (jamais sur un bloc)
   - Le texte conserve sa couleur d'origine — seul le fond change
   - Sur fond sombre, utiliser .highlight--on-dark (surlignage semi-transparent)
   - Ne pas abuser : 1 à 2 highlights par section maximum

   HTML
   ----
   <!-- Dans un titre -->
   <h2 class="headline-2">
     Votre comptabilité, entre <mark class="highlight">de bonnes mains</mark>.
   </h2>

   <!-- Dans un paragraphe -->
   <p class="paragraph-2">
     Un expert-comptable <mark class="highlight">certifié et dédié</mark> pour votre entreprise.
   </p>

   <!-- Sur fond sombre -->
   <h2 class="headline-2" style="color: white">
     Votre comptabilité, entre <mark class="highlight highlight--on-dark">de bonnes mains</mark>.
   </h2>

   ============================================= */


/* =====================
   Highlight — default (brand/gold)
   ===================== */

.highlight {
  background-color: var(--color-surface-decorative-brand);
  color: var(--color-content-primary);
  padding: 0.05em 0.2em;
  border-radius: var(--border-radius);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* =====================
   Variant — On Dark
   ===================== */

.highlight--on-dark {
  background-color: var(--color-surface-decorative-brand);
  color: var(--color-content-primary);
}
/* =============================================
   COMPONENT — Accordion
   =============================================

   Variants
   --------
   Size    : (default = M) | .accordion--s
   Surface : (default = Default) | .accordion--dark

   Usage
   -----
   - Contenu masqué révélé au clic sur le titre
   - M → icône optionnelle (XL / 32px), typographie Headline/4
   - S → icône optionnelle (M / 20px), typographie Headline/6

   Règles
   ------
   - Utiliser les éléments natifs <details> / <summary> pour la sémantique et le toggle CSS-only
   - L'icône décorative est optionnelle — ajouter la classe .accordion__icon sur le .icon
   - Le chevron est toujours présent — ajouter la classe .accordion__chevron sur le .icon
   - La taille des icônes est imposée par CSS — ne pas ajouter de classe de taille sur les .icon enfants
   - La variante Dark est destinée aux fonds sombres

   HTML
   ----
   <!-- M Default — avec icône -->
   <details class="accordion">
     <summary class="accordion__trigger">
       <svg class="icon accordion__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">...</svg>
       <span class="accordion__label">Titre de la question</span>
       <svg class="icon accordion__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
         <path d="M13 6L8 11L3 6" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" />
       </svg>
     </summary>
     <div class="accordion__content">
       Contenu de la réponse...
     </div>
   </details>

   <!-- M Default — sans icône -->
   <details class="accordion">
     <summary class="accordion__trigger">
       <span class="accordion__label">Titre de la question</span>
       <svg class="icon accordion__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
         <path d="M13 6L8 11L3 6" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" />
       </svg>
     </summary>
     <div class="accordion__content">
       Contenu de la réponse...
     </div>
   </details>

   <!-- S Default -->
   <details class="accordion accordion--s">...</details>

   <!-- M Dark -->
   <details class="accordion accordion--dark">...</details>

   ============================================= */


.accordion {
  /* Component tokens */
  --accordion-title-color: var(--color-content-primary);
  --accordion-content-color: var(--color-content-secondary);
  --accordion-icon-color: var(--color-content-primary);
  --accordion-chevron-color: var(--color-content-primary);
  --accordion-divider-color: var(--color-divider-primary);
  --accordion-trigger-hover-bg: var(--color-surface-neutral-hovered);
  --accordion-trigger-pressed-bg: var(--color-surface-neutral-pressed);

  /* Divider */
  border-bottom: 1px solid var(--accordion-divider-color);
}


/* =====================
   Trigger
   ===================== */

.accordion__trigger {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-12);
  margin-top: var(--spacing-32);
  margin-bottom: var(--spacing-32);

  /* Reset native summary styles */
  list-style: none;
  cursor: pointer;

  /* Appearance */
  border-radius: var(--border-radius);
  transition: background-color var(--motion-transition-interactive);
}

/* Remove Safari default marker */
.accordion__trigger::-webkit-details-marker {
  display: none;
}

/* Hover */
.accordion__trigger:hover {
  background-color: var(--accordion-trigger-hover-bg);
}

/* Pressed */
.accordion__trigger:active {
  background-color: var(--accordion-trigger-pressed-bg);
  transition: none;
}


/* =====================
   Label
   ===================== */

.accordion__label {
  flex: 1;
  color: var(--accordion-title-color);

  /* Typography — M (default) : Headline/4 */
  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-4);
  line-height: var(--typography-headline-line-height-4);
}


/* =====================
   Chevron
   ===================== */

.accordion__chevron {
  flex-shrink: 0;
  transition: transform var(--motion-transition-interactive);
}

.accordion[open] .accordion__chevron {
  transform: rotate(180deg);
}

/* Trigger ouvert : espace réduit avant le contenu */
.accordion[open] .accordion__trigger {
  margin-bottom: var(--spacing-16);
}

.accordion__trigger:active .accordion__chevron {
  transition: none;
}


/* =====================
   Content
   ===================== */

.accordion__content {
  padding: 0 var(--spacing-12);
  margin-bottom: var(--spacing-32);
  color: var(--accordion-content-color);

  /* Typography — Paragraph/3 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}


/* =====================
   Icon sizes — imposées par CSS
   ===================== */

/* Icône décorative — M (default) : XL (32px) */
.accordion .accordion__icon {
  --icon-size: var(--icon-size-xl);
  --icon-stroke: var(--icon-stroke-xl);
  color: var(--accordion-icon-color);
}

/* Chevron — M (default) : M (20px) */
.accordion .accordion__chevron {
  --icon-size: var(--icon-size-m);
  --icon-stroke: var(--icon-stroke-m);
  color: var(--accordion-chevron-color);
}


/* =====================
   Size — S
   ===================== */

/* Label — S : Headline/6 */
.accordion--s .accordion__label {
  font-size: var(--typography-headline-font-size-6);
  line-height: var(--typography-headline-line-height-6);
}

/* Espacement — S : gap 20px */
.accordion--s .accordion__trigger {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}

.accordion--s .accordion__content {
  margin-bottom: var(--spacing-20);
}

/* Icône décorative — S : M (20px) */
.accordion--s .accordion__icon {
  --icon-size: var(--icon-size-m);
  --icon-stroke: var(--icon-stroke-m);
}

/* Chevron — S : S (16px) */
.accordion--s .accordion__chevron {
  --icon-size: var(--icon-size-s);
  --icon-stroke: var(--icon-stroke-s);
}


/* =====================
   Surface — Dark
   ===================== */

.accordion--dark {
  --accordion-title-color: var(--color-content-inverse-primary);
  --accordion-content-color: var(--color-content-inverse-secondary);
  --accordion-icon-color: var(--color-content-inverse-primary);
  --accordion-chevron-color: var(--color-content-inverse-primary);
  --accordion-divider-color: var(--color-divider-inverse);
  --accordion-trigger-hover-bg: var(--color-surface-decorative-hovered);
  --accordion-trigger-pressed-bg: var(--color-surface-decorative-pressed);
}
/* =============================================
   COMPONENT — Divider
   =============================================

   Variants
   --------
   Direction : (default = Horizontal) | .divider--vertical
   Surface   : (default = Default)    | .divider--dark

   Usage
   -----
   - Sépare visuellement deux sections de contenu
   - Horizontal : s'étend sur toute la largeur de son conteneur
   - Vertical   : s'étend sur toute la hauteur de son conteneur (align-self: stretch requis)

   Règles
   ------
   - Utiliser <hr> pour la sémantique
   - Ne pas définir de taille fixe — le divider s'adapte à son contexte
   - La variante Dark est destinée aux fonds sombres

   HTML
   ----
   <!-- Horizontal Default -->
   <hr class="divider" />

   <!-- Vertical Default -->
   <hr class="divider divider--vertical" aria-orientation="vertical" />

   <!-- Horizontal Dark -->
   <hr class="divider divider--dark" />

   <!-- Vertical Dark -->
   <hr class="divider divider--vertical divider--dark" aria-orientation="vertical" />

   ============================================= */


.divider {
  /* Reset <hr> */
  border: none;
  margin: 0;
  flex-shrink: 0;

  /* Horizontal (default) */
  display: block;
  width: 100%;
  height: var(--divider);
  background-color: var(--color-divider-primary);
}


/* =====================
   Direction — Vertical
   ===================== */

.divider--vertical {
  width: var(--divider);
  height: auto;
  align-self: stretch;
}


/* =====================
   Surface — Dark
   ===================== */

.divider--dark {
  background-color: var(--color-divider-inverse);
}
/* =============================================
   COMPONENT — Review Badge
   =============================================

   Variants
   --------
   Source : .review-badge--trustpilot (default) | .review-badge--google

   Usage
   -----
   - Affichage de la note Trustpilot ou Google de LegalPlace
   - Layout vertical : logo → étoiles → score
   - Assets stockés dans assets/reviews/

   Scalabilité
   -----------
   Les custom properties suivantes permettent de contrôler la taille
   du badge selon le contexte :

   --rb-logo-h          hauteur du logo         (défaut : 36px)
   --rb-stars-h         hauteur des étoiles      (défaut : 44px)
   --rb-container-gap   gap logo ↔ étoiles       (défaut : 7px)
   --rb-gap             gap container ↔ score    (défaut : --spacing-8)

   Exemple — badge compact 48px (container logo + étoiles) :
   .mon-contexte .review-badge {
     --rb-logo-h:        20px;
     --rb-stars-h:       24px;
     --rb-container-gap: 4px;
     --rb-gap:           var(--spacing-4);
   }

   Règles
   ------
   - Utiliser <a> comme élément racine (lien vers le profil de la plateforme)
   - Pas d'<a> imbriqué dans l'<a> racine (HTML invalide)
   - Score : label medium · note extrabold · "|" regular · "N avis" souligné
   - NE PAS mettre d'espace avant le span .review-badge__score-link
     (l'espace est fourni par .review-badge__score-sep)

   HTML — Trustpilot
   -----------------
   <a class="review-badge review-badge--trustpilot" href="https://fr.trustpilot.com/review/legalplace.fr" target="_blank" rel="noopener noreferrer">
     <div class="review-badge__container">
       <img class="review-badge__logo" src="../../assets/reviews/trustpilot-logo.svg" alt="Trustpilot">
       <img class="review-badge__stars" src="../../assets/reviews/trustpilot-stars.svg" alt="" aria-label="4,4 étoiles sur 5">
     </div>
     <span class="review-badge__score">
       <span class="review-badge__score-label">TrustScore</span>
       <span class="review-badge__score-value"> 4,4</span>
       <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">11 872</span> avis</span>
     </span>
   </a>

   HTML — Google
   -------------
   <a class="review-badge review-badge--google" href="https://www.google.com/search?q=legalplace+avis" target="_blank" rel="noopener noreferrer">
     <div class="review-badge__container">
       <img class="review-badge__logo" src="../../assets/reviews/google-logo.svg" alt="Google">
       <img class="review-badge__stars" src="../../assets/reviews/google-stars.svg" alt="" aria-label="4,5 étoiles sur 5">
     </div>
     <span class="review-badge__score">
       <span class="review-badge__score-label">Note</span>
       <span class="review-badge__score-value"> 4,5</span>
       <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">6 300</span> avis</span>
     </span>
   </a>

   ============================================= */


.review-badge {
  /* Tokens de taille — surcharger selon le contexte */
  --rb-logo-h:        36px;
  --rb-stars-h:       44px;
  --rb-container-gap: 7px;
  --rb-gap:           var(--spacing-8);

  /* Layout vertical */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-gap);

  /* Reset lien */
  text-decoration: none;
  color: inherit;
}


/* =====================
   Container — logo + étoiles groupés
   ===================== */

.review-badge__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-container-gap);
}


/* =====================
   Logo
   ===================== */

.review-badge__logo {
  display: block;
  height: var(--rb-logo-h);
  width: auto;
}


/* =====================
   Étoiles (asset SVG officiel)
   ===================== */

.review-badge__stars {
  display: block;
  height: var(--rb-stars-h);
  width: auto;
}


/* =====================
   Score
   ===================== */

.review-badge__score {
  display: block;

  font-family: var(--typography-paragraph-font-family);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
  color: var(--color-content-primary);
  white-space: nowrap;
}

/* Label ("TrustScore" / "Note") — medium */
.review-badge__score-label {
  font-weight: 500;
}

/* Note ("4,4") — extrabold */
.review-badge__score-value {
  font-weight: 800;
}

/* Séparateur ("|") — regular */
.review-badge__score-sep {
  font-weight: 400;
}

/* "N avis" — underline continu sur le nombre et le mot */
.review-badge__score-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Nombre d'avis (dans score-link) — extrabold */
.review-badge__score-link .review-badge__score-count {
  font-weight: 800;
}
/* =============================================
   COMPONENT — Header
   =============================================

   Variants
   --------
   Défaut         : sans stepper, sans barre de progression
   + Stepper      : ajouter .header__stepper (inline) + .header__stepper-row (rangée) dans le HTML
   + Progress     : ajouter .header__progress dans le HTML
   + Les deux     : combinaison des deux variantes ci-dessus

   Usage
   -----
   - En-tête de page pour les parcours utilisateurs (checkout, formulaires, etc.)
   - Contient le logo LegalPlace, un stepper de progression et un bouton téléphone
   - La barre de progression est contrôlée via --header-progress sur .header__progress
     (ex. style="--header-progress: 33%")

   Règles
   ------
   - Utiliser <header> comme élément racine
   - Sur mobile (< 480px) : logo icon, bouton téléphone sans label, stepper sans labels
   - Sur tablette (≥ 480px) : logotype complet, stepper avec labels, bouton sans label
   - Sur desktop (≥ 768px) : stepper inline dans la barre, bouton avec label téléphone
   - Les deux instances du stepper (dans la barre et en rangée dédiée) sont nécessaires
     dans le HTML — le CSS gère l'affichage selon le breakpoint

   Étapes — États
   --------------
   .header__step            : État futur (défaut)
   .header__step--active    : Étape en cours
   .header__step--done      : Étape complétée

   HTML
   ----
   <header class="header">

     <!-- Barre principale -->
     <div class="header__inner">

       <!-- Logo — un seul SVG, preserveAspectRatio="xMinYMid slice" permet
            d'afficher l'icône seule sur mobile (clip) et le logotype complet sur tablette+ -->
       <svg class="logo logo--decorative header__logo" viewBox="0 0 190 32" preserveAspectRatio="xMinYMid slice" fill="none" aria-label="LegalPlace" xmlns="http://www.w3.org/2000/svg">
         <title>LegalPlace</title>
         <g class="logo__icon">...</g>
         <g class="logo__text">...</g>
       </svg>

       <!-- Stepper inline (desktop uniquement, géré par CSS) -->
       <nav class="header__stepper" aria-label="Étapes">
         <ol class="header__steps">
           <li class="header__step header__step--done">
             <div class="header__step-circle">
               <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                 <path d="m1 11.3324 8.10526 8.1659L23 2" stroke="currentColor" />
               </svg>
             </div>
             <span class="header__step-label">Votre entreprise</span>
           </li>
           <li class="header__step-sep" aria-hidden="true"></li>
           <li class="header__step header__step--active">
             <div class="header__step-circle">2</div>
             <span class="header__step-label">Votre contrat</span>
           </li>
           <li class="header__step-sep" aria-hidden="true"></li>
           <li class="header__step">
             <div class="header__step-circle">3</div>
             <span class="header__step-label">Paiement</span>
           </li>
         </ol>
       </nav>

       <!-- Bouton téléphone -->
       <a class="action-btn header__action" href="tel:0196269970">
         <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
           <path d="m4.97375 2.93699 -2.61351 0.3131c0.16391 2.95898 0.99812 5.88777 2.50263 8.53941 0.84837 1.4951 1.90986 2.9022 3.18449 4.1768 1.27462 1.2746 2.68164 2.3361 4.17684 3.1845 2.6516 1.5045 5.5804 2.3387 8.5394 2.5026l0.3131 -2.6135" stroke="currentColor" />
           <path d="m4.86304 11.7894 4.56473 -2.72437 -1.84034 -6.44117 -2.61351 0.3131" stroke="currentColor" />
           <path d="m12.2244 19.1508 2.7244 -4.5647 6.4412 1.8403 -0.3131 2.6135" stroke="currentColor" />
         </svg>
         <span class="header__action-label">01 96 26 99 70</span>
       </a>

     </div>

     <hr class="divider">

     <!-- Stepper rangée (mobile et tablette uniquement, géré par CSS) -->
     <div class="header__stepper-row">
       <div class="header__stepper-row__inner">
         <ol class="header__steps">
           <li class="header__step header__step--done">
             <div class="header__step-circle">
               <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                 <path d="m1 11.3324 8.10526 8.1659L23 2" stroke="currentColor" />
               </svg>
             </div>
             <span class="header__step-label">Votre entreprise</span>
           </li>
           <li class="header__step-sep" aria-hidden="true"></li>
           <li class="header__step header__step--active">
             <div class="header__step-circle">2</div>
             <span class="header__step-label">Votre contrat</span>
           </li>
           <li class="header__step-sep" aria-hidden="true"></li>
           <li class="header__step">
             <div class="header__step-circle">3</div>
             <span class="header__step-label">Paiement</span>
           </li>
         </ol>
       </div>
     </div>

     <hr class="divider header__stepper-divider">

     <!-- Barre de progression -->
     <div class="header__progress" style="--header-progress: 66%">
       <div class="header__progress-fill"></div>
     </div>

   </header>

   ============================================= */


.header {
  /* Appearance */
  background-color: var(--color-surface-on-alt-primary);

  /* Layout */
  display: flex;
  flex-direction: column;
  width: 100%;

  /* Position */
  position: sticky;
  top: 0;
  z-index: 10;
}


/* =====================
   Inner (barre principale)
   ===================== */

.header__inner {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--spacing-12) var(--grid-margin);
}


/* =====================
   Logo
   ===================== */

/* Mobile : icône seule — clippe le logotype via overflow */
.header__logo {
  width: 32px;
  aspect-ratio: 1;
  overflow: hidden;
}

/* Tablette+ : logotype complet */
@media (min-width: 480px) {
  .header__logo {
    width: auto;
    aspect-ratio: 190 / 32;
    overflow: visible;
  }
}


/* =====================
   Stepper inline (desktop)
   ===================== */

.header__stepper {
  display: none;
}

@media (min-width: 768px) {
  .header__stepper {
    display: flex;
    flex: 1;
    min-width: 0; /* Permet au stepper de rétrécir sous sa taille naturelle */
    justify-content: center;
    padding: 0 var(--spacing-40);
  }
}


/* =====================
   Stepper rangée (mobile/tablette)
   ===================== */

.header__stepper-row {
  display: flex;
}

.header__stepper-row__inner {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--spacing-12) var(--grid-margin);
}

.header__stepper-divider {
  display: block;
}

@media (min-width: 768px) {
  .header__stepper-row      { display: none; }
  .header__stepper-divider  { display: none; }
}

/* =====================
   Stepper — Labels progressifs
   =====================

   Quand l'espace manque, les labels sont masqués dans cet ordre :
   1. Labels done   (flex-shrink: 100 — disparaissent en premier)
   2. Labels futur  (flex-shrink: 10  — disparaissent en second)
   3. Label actif   (flex-shrink: 1   — disparaît en dernier)

   Pas de pixel en dur : c'est le contenu réel de chaque label
   qui détermine à quel moment il est réduit, puis masqué.
   ===================== */


/* =====================
   Steps
   ===================== */

.header__steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Séparateur entre étapes */
.header__step-sep {
  flex: 1;
  height: var(--divider);
  background-color: var(--color-divider-primary);
  min-width: var(--spacing-12);
}

/* Étape */
.header__step {
  /* Component tokens */
  --step-circle-border:  var(--color-border-secondary);
  --step-circle-bg:      transparent;
  --step-circle-color:   var(--color-content-secondary);
  --step-label-color:    var(--color-content-secondary);

  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 32px;   /* Toujours au moins le cercle */
  overflow: hidden;  /* Masque le label quand le step rétrécit */
}

/* Cercle de l'étape */
.header__step-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-full);
  border: var(--border-stroke-primary) solid var(--step-circle-border);
  background-color: var(--step-circle-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--step-circle-color);

  /* Typography — Paragraph/3 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}

/* Label de l'étape */
.header__step-label {
  display: none;
  white-space: nowrap;
  color: var(--step-label-color);

  /* Typography — Paragraph/3 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}

@media (min-width: 480px) {
  .header__step-label {
    display: block;
  }
}


/* =====================
   Étape — Actif
   ===================== */

.header__step--active {
  --step-circle-border: var(--color-surface-decorative-brand);
  --step-circle-bg:     var(--color-surface-decorative-brand);
  --step-circle-color:  var(--color-content-primary);
  --step-label-color:   var(--color-content-primary);
  flex-shrink: 1; /* Dernier à perdre son label */
}


/* =====================
   Étape — Complétée
   ===================== */

.header__step--done {
  --step-circle-border: transparent;
  --step-circle-bg:     var(--color-surface-primary);
  --step-circle-color:  var(--color-content-primary);
  --step-label-color:   var(--color-content-primary);
  flex-shrink: 100; /* Premier à perdre son label */
}

/* Step futur (ni done, ni actif) — perd son label en second */
.header__step:not(.header__step--done):not(.header__step--active) {
  flex-shrink: 10;
}


/* =====================
   Action (téléphone)
   ===================== */

.header__action {
  padding: var(--spacing-12);
  flex-shrink: 0; /* Toujours entièrement visible */
}

.header__action-label {
  display: none;
}

@media (min-width: 768px) {
  .header__action {
    padding: var(--spacing-8) var(--spacing-16);
  }

  .header__action-label {
    display: block;
  }
}


/* =====================
   Barre de progression
   ===================== */

.header__progress {
  /* Contrôle externe : style="--header-progress: 33%" */
  --header-progress: 0%;

  /* Se positionne juste sous le header sticky — recouvre le contenu de la page */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4px;
  background-color: transparent;
  overflow: hidden;
}

.header__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--header-progress);
  background-color: var(--color-surface-accent);
  transition: width 200ms ease-out;
}
/* =============================================
   SECTION — Expertise
   =============================================

   Variants
   --------
   Badge   : (default = avec badge) | sans ..badge dans le HTML
   Légende : (default = sans) | ajouter .feature-section__legend dans le HTML

   Usage
   -----
   - Section présentant les fonctionnalités clés d'une offre
   - Gauche : section-headline (4 colonnes)
   - Droite : grille de feature-cards (3 par ligne) + CTA (8 colonnes)
   - < 992px  : colonne unique, headline puis cards
   - ≥ 992px  : grille 12 colonnes — headline (4 col) + cards (8 col)

   Composants utilisés
   -------------------
   - .section-headline   (components/content/section-headline.css)
   - .feature-card       (components/content/feature-card.css)
   - .icon-box           (components/brand-assets/icon-box.css)
   - .btn                (components/actions/button.css)

   HTML
   ----
   <section class="feature-section">
     <div class="feature-section__inner">

       <div class="feature-section__headline">
         <div class="section-headline">
           <div class="badge">Badge</div>
           <h2 class="section-headline__title">Titre de la section.</h2>
         </div>
       </div>

       <div class="feature-section__body">

         <div class="feature-section__grid">
           <div class="feature-card">
             <div class="icon-box" aria-hidden="true">
               <svg class="icon" ...></svg>
             </div>
             <div class="feature-card__content">
               <h3 class="feature-card__title">Titre.</h3>
               <p class="feature-card__text">Description.</p>
             </div>
           </div>
           <!-- ... autres feature-cards ... -->
         </div>

         <div class="feature-section__cta">
           <a class="btn" href="#">
             Label
             <svg class="icon" ...></svg>
           </a>
           <!-- optionnel -->
           <p class="feature-section__legend">Mention légale ou info complémentaire</p>
         </div>

       </div>

     </div>
   </section>

   ============================================= */


/* =====================
   Section
   ===================== */

.feature-section {
  padding: var(--spacing-104) 0;
}


/* =====================
   Inner — mobile : flex colonne
   ===================== */

.feature-section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);

  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
}


/* =====================
   Headline
   ===================== */

.feature-section__headline {
  /* mobile : bloc simple au-dessus */
}


/* =====================
   Body — cards + CTA
   ===================== */

.feature-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
}


/* =====================
   Grid — feature-cards, 3 par ligne
   ===================== */

.feature-section__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56px 32px;
}


/* =====================
   CTA
   ===================== */

.feature-section__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.feature-section__legend {
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
  color: var(--color-content-tertiary);
}


/* =====================
   ≥ 992px — grille 12 colonnes
   ===================== */

@media (min-width: 992px) {
  .feature-section__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--spacing-64);
  }

  .feature-section__headline {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: start;
  }

  .feature-section__body {
    grid-column: 5 / span 8;
    grid-row: 1;
  }
}
/* =============================================
   SECTION — Reviews Section
   =============================================

   Structure
   ---------
   section.reviews-section
   └── .reviews-section__inner
       ├── .reviews-section__headline
       │   ├── span.reviews-section__count      "+300 000"
       │   └── p.reviews-section__desc          "entrepreneurs gèrent leur société..."
       └── .reviews-section__badges
           ├── a.review-badge.review-badge--compact.review-badge--google
           ├── div.reviews-section__divider
           └── a.review-badge.review-badge--compact.review-badge--trustpilot

   Responsive (nos breakpoints)
   ----------------------------
   < 480px  : colonne — headline empilé · badges empilés · pas de divider
   ≥ 480px  : colonne — headline empilé · badges côte à côte + divider
   ≥ 768px  : grille 12 cols
              · headline : col 1–5 · flex-wrap (inline si assez de place)
              · badges   : col 6–12 · alignés à droite

   Scalabilité du Review Badge
   ---------------------------
   Dans ce contexte, le badge est réduit à 48px via les custom properties :
   · --rb-logo-h        → 20px
   · --rb-stars-h       → 24px
   · --rb-container-gap → 4px
   · --rb-gap           → var(--spacing-4)

   HTML
   ----
   <section class="reviews-section">
     <div class="reviews-section__inner">

       <div class="reviews-section__headline">
         <span class="reviews-section__count">+300 000</span>
         <p class="reviews-section__desc">entrepreneurs gèrent leur société avec LegalPlace.</p>
       </div>

       <div class="reviews-section__badges">
         <a class="review-badge review-badge--google" href="https://www.google.com/search?q=legalplace+avis" target="_blank" rel="noopener noreferrer">
           <div class="review-badge__container">
             <img class="review-badge__logo" src="..." alt="Google">
             <img class="review-badge__stars" src="..." alt="" aria-label="4,5 étoiles sur 5">
           </div>
           <span class="review-badge__score">
             <span class="review-badge__score-label">Note</span>
             <span class="review-badge__score-value"> 4,5</span>
             <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">6 300</span> avis</span>
           </span>
         </a>
         <div class="reviews-section__divider" aria-hidden="true"></div>
         <a class="review-badge review-badge--trustpilot" href="https://fr.trustpilot.com/review/legalplace.fr" target="_blank" rel="noopener noreferrer">
           <div class="review-badge__container">
             <img class="review-badge__logo" src="..." alt="Trustpilot">
             <img class="review-badge__stars" src="..." alt="" aria-label="4,4 étoiles sur 5">
           </div>
           <span class="review-badge__score">
             <span class="review-badge__score-label">TrustScore</span>
             <span class="review-badge__score-value"> 4,4</span>
             <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">11 872</span> avis</span>
           </span>
         </a>
       </div>

     </div>
   </section>

   ============================================= */


/* =====================
   Section — wrapper
   ===================== */

.reviews-section {
  background-color: var(--color-surface-primary);
  padding: var(--spacing-40) 0;
}


/* =====================
   Inner — conteneur centré
   ===================== */

.reviews-section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
}


/* =====================
   Headline
   ===================== */

.reviews-section__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);

  text-align: center;

  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  color: var(--color-content-primary);
}

.reviews-section__count {
  font-size: var(--typography-headline-font-size-3);
  line-height: var(--typography-headline-line-height-3);
  letter-spacing: var(--typography-headline-letter-spacing-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.reviews-section__desc {
  font-size: var(--typography-headline-font-size-4);
  line-height: var(--typography-headline-line-height-4);
  letter-spacing: var(--typography-headline-letter-spacing-4);
}


/* =====================
   Review Badge — taille réduite dans ce contexte
   Container logo + étoiles = 20px + 4px + 24px = 48px
   ===================== */

.reviews-section .review-badge {
  --rb-logo-h:        20px;
  --rb-stars-h:       24px;
  --rb-container-gap: 4px;
  --rb-gap:           var(--spacing-4);
}


/* =====================
   Badges — empilés par défaut
   ===================== */

.reviews-section__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}

.reviews-section__divider {
  display: none;
}


/* =====================
   ≥ 480px — badges côte à côte
   ===================== */

@media (min-width: 480px) {
  .reviews-section__badges {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-24);
  }

  .reviews-section__divider {
    display: block;
    width: 1px;
    align-self: stretch;
    background-color: var(--color-divider-primary);
    flex-shrink: 0;
  }
}


/* =====================
   ≥ 768px — grille 12 cols
   ===================== */

@media (min-width: 768px) {

  /* Inner passe en grille */
  .reviews-section__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: center;
    gap: var(--grid-gutter);
  }

  /* Headline : colonnes 1–5
     → inline si assez de place (flex-wrap + min-width sur le desc)
     → empilé sinon (desc passe à la ligne)                          */
  .reviews-section__headline {
    grid-column: 1 / span 5;
    align-self: center;
    text-align: left;

    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4) var(--spacing-12);
  }

  /* Le desc inline se retrouve en ligne avec le count dès qu'il
     dispose d'au moins 280px — en dessous il passe à la ligne  */
  .reviews-section__desc {
    flex: 1;
    min-width: 280px;
  }

  /* Badges : colonnes 6–12, alignés à droite */
  .reviews-section__badges {
    grid-column: 6 / span 7;
    align-self: center;
    justify-self: end;

    flex-direction: row;
    align-items: center;
    gap: var(--spacing-24);
  }

  .reviews-section__divider {
    display: block;
  }
}


/* =====================
   ≥ 1280px — headline 7/12 cols
   Le texte tient sur une ligne à partir de la max-width
   ===================== */

@media (min-width: 1280px) {

  .reviews-section__headline {
    grid-column: 1 / span 7;
  }

  .reviews-section__badges {
    grid-column: 8 / span 5;
  }
}
/* =============================================
   SECTION — FAQ
   =============================================

   Usage
   -----
   - Section FAQ sur fond noir avec titre à gauche et accordéons à droite
   - Utilise les composants .section-headline, .badge et .accordion--dark

   Composants utilisés
   -------------------
   - .badge                        (gold, "Foire aux questions")
   - .section-headline
   - .accordion.accordion--dark    (un par question)

   HTML
   ----
   <section class="faq-section">
     <div class="faq-section__inner">

       <div class="faq-section__headline">
         <div class="section-headline">
           <div class="badge">Foire aux questions</div>
           <h2 class="section-headline__title">Nous avons la réponse à vos questions.</h2>
         </div>
       </div>

       <div class="faq-section__accordions">
         <details class="accordion accordion--dark">
           <summary class="accordion__trigger">
             <span class="accordion__label">Question ?</span>
             <svg class="icon accordion__chevron" ...>...</svg>
           </summary>
           <div class="accordion__content">Réponse...</div>
         </details>
       </div>

     </div>
   </section>

   ============================================= */


/* =====================
   Section
   ===================== */

.faq-section {
  background-color: var(--color-surface-decorative-black);
  padding: var(--spacing-104) 0;
}


/* =====================
   Inner — conteneur grille
   ===================== */

.faq-section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);

  /* Mobile : flex column avec gap — équivalent du row-gap de la grille */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}


/* =====================
   Section Headline (sur fond sombre)
   ===================== */

.faq-section .section-headline__title {
  color: var(--color-content-inverse-primary);
}


/* =====================
   Accordéons — conteneur
   ===================== */

.faq-section__accordions {
  display: flex;
  flex-direction: column;
}

/* Bordure haute sur le premier accordion */
.faq-section__accordions > .accordion:first-child {
  border-top: 1px solid var(--color-divider-inverse);
}



/* =============================================
   ≥ 768px — Headline (12/12) + Accordéons (12/12)
   ============================================= */

@media (min-width: 768px) {

  .faq-section__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--spacing-48);
  }

  .faq-section__headline {
    grid-column: 1 / span 12;
    grid-row: 1;
  }

  .faq-section__accordions {
    grid-column: 1 / span 12;
    grid-row: 2;
  }

}


/* =============================================
   ≥ 992px — Headline col 1–4 / Accordéons col 5–12
   ============================================= */

@media (min-width: 992px) {

  .faq-section__inner {
    row-gap: 0;
    align-items: start;
  }

  .faq-section__headline {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .faq-section__accordions {
    grid-column: 5 / span 8;
    grid-row: 1;
  }
}


/* =============================================
   ≥ 1280px — Headline col 1–5 / Accordéons col 7–12
   ============================================= */

@media (min-width: 1280px) {

  .faq-section__inner {
    row-gap: 0;
    align-items: start;
  }

  .faq-section__headline {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .faq-section__accordions {
    grid-column: 7 / span 6;
    grid-row: 1;
  }
}
/* =============================================
   SECTION — Call To Action
   =============================================

   Usage
   -----
   - Section de conversion avec image et contenu textuel
   - Mobile : image pleine largeur au-dessus du contenu
   - ≥ 768px : image à gauche (dans la grille), contenu à droite
   - ≥ 1280px : réajustement des colonnes (image 7/12, contenu 5/12)

   Composants utilisés
   -------------------
   - .badge.badge--dark  (avec icône optionnelle)
   - .section-headline
   - .argument / .argument--s
   - .btn

   HTML
   ----
   <section class="cta-section">

     <!-- Image mobile (masquée sur desktop) -->
     <div class="cta-section__media">
       <div class="image image--1-1">
         <img class="image__img" src="..." alt="">
       </div>
     </div>

     <div class="cta-section__inner">

       <!-- Image desktop (masquée sur mobile) -->
       <div class="cta-section__image">
         <img class="cta-section__img" src="..." alt="">
       </div>

       <!-- Contenu -->
       <div class="cta-section__content">

         <div class="cta-section__top">
           <div class="section-headline">
             <div class="badge badge--dark">Libellé du badge</div>
             <h2 class="section-headline__title">Titre principal de la section.</h2>
           </div>
           <ul class="cta-section__arguments">
             <li class="argument argument--s">
               <div class="argument__content">
                 <p class="argument__paragraph">Texte de l'argument.</p>
               </div>
             </li>
           </ul>
         </div>

         <div class="cta-section__actions">
           <a class="btn" href="#">
             Label
             <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
               <path d="m0 12 22.5 0" stroke="currentColor"/>
               <path d="m14.5 20 8 -8 -8 -8" stroke="currentColor"/>
             </svg>
           </a>
           <p class="cta-section__legend">Sous-texte informatif.</p>
         </div>

       </div>
     </div>
   </section>

   ============================================= */


/* =====================
   Section
   ===================== */

.cta-section {
  background-color: var(--color-surface-decorative-linen-medium);
}


/* =====================
   Image mobile
   ===================== */

.cta-section__media {
  /* Visible uniquement sur mobile — en flux */
}

.cta-section__media .image,
.cta-section__media .image__img {
  border-radius: 0;
}


/* =====================
   Inner — conteneur grille
   ===================== */

.cta-section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}


/* =====================
   Image desktop
   ===================== */

.cta-section__image {
  display: none;
  position: relative;
  overflow: hidden;
}

.cta-section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =====================
   Contenu
   ===================== */

.cta-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  padding: var(--spacing-32) 0;
}

.cta-section__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}


/* =====================
   Arguments
   ===================== */

.cta-section__arguments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =====================
   Actions — bouton + sous-texte
   ===================== */

.cta-section__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.cta-section__legend {
  margin: 0;
  color: var(--color-content-secondary);

  /* Typography — Paragraph/4 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}


/* =============================================
   ≥ 768px — Image collée à gauche (col 1–6) / Contenu col 8–12
   ============================================= */

@media (min-width: 768px) {

  /* Masquer l'image mobile */
  .cta-section__media {
    display: none;
  }

  /* Grille 12 colonnes — image flush gauche, conteneur aligné à gauche */
  .cta-section__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    align-items: stretch;
    padding-left: 0;
    margin-left: 0;
  }

  /* Image — col 1 à 6, pleine hauteur, flush gauche */
  .cta-section__image {
    display: block;
    grid-column: 1 / span 6;
    grid-row: 1;
    min-height: 400px;
  }

  /* Contenu — col 8 à 12 */
  .cta-section__content {
    grid-column: 8 / span 5;
    grid-row: 1;
    padding: var(--spacing-104) 0;
  }
}


/* =============================================
   ≥ 1920px — Image col 1–6 dans grille normale / Contenu col 8–12
   ============================================= */

@media (min-width: 1920px) {

  .cta-section__inner {
    padding-left: var(--grid-margin);
    margin: 0 auto;
  }
}
/* =============================================
   COMPONENT — Footer
   =============================================

   Variants
   --------
   (aucun — composant unique)

   Usage
   -----
   - Pied de page du site LegalPlace
   - 3 colonnes de navigation + barre de copyright + mentions légales
   - La colonne "Entreprise" peut accueillir un badge inline sur un lien

   Règles
   ------
   - Utiliser <footer> comme élément racine
   - Les titres de colonnes sont du texte presentationnel — utiliser <p> ou <span>
   - Les listes de liens utilisent <ul> / <li> / <a> pour la sémantique
   - Le badge inline (ex. "On recrute !") est optionnel — l'omettre si non nécessaire

   HTML
   ----
   <footer class="footer">

     <!-- Colonnes de navigation -->
     <div class="footer__main">
       <div class="footer__inner">

         <nav class="footer__col" aria-labelledby="footer-col-services">
           <p class="footer__col-title" id="footer-col-services">Nos services</p>
           <ul class="footer__list">
             <li class="footer__item"><a class="footer__link" href="#">Création entreprise</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Domiciliation</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Comptabilité</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Changement de statuts</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Transfert de siège social</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Dissolution de société</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Formation création d'entreprise</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Formation micro entreprise</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Tout les contrats et services</a></li>
           </ul>
         </nav>

         <nav class="footer__col" aria-labelledby="footer-col-entreprise">
           <p class="footer__col-title" id="footer-col-entreprise">Entreprise</p>
           <ul class="footer__list">
             <li class="footer__item"><a class="footer__link" href="#">À propos de LegalPlace</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Partenariat et affiliation</a></li>
             <li class="footer__item">
               <a class="footer__link" href="#">
                 Offres d'emploi
                 <span class="footer__badge">On recrute !</span>
               </a>
             </li>
             <li class="footer__item"><a class="footer__link" href="#">Nous contacter</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Avis clients</a></li>
             <li class="footer__item"><a class="footer__link" href="#">FAQ</a></li>
           </ul>
         </nav>

         <nav class="footer__col" aria-labelledby="footer-col-liens">
           <p class="footer__col-title" id="footer-col-liens">Liens utiles</p>
           <ul class="footer__list">
             <li class="footer__item"><a class="footer__link" href="#">Mentions légales</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Conditions générales</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Politique de confidentialité</a></li>
             <li class="footer__item"><a class="footer__link" href="#">Charte de publication des avis clients</a></li>
           </ul>
         </nav>

       </div>
     </div>

     <!-- Copyright -->
     <div class="footer__bottom">
       <div class="footer__inner">
         <p class="footer__copyright">© 2026 LEGALPLACE SAS</p>
       </div>
     </div>

     <!-- Badges de certification -->
     <div class="footer__trust">
       <div class="footer__inner">
         <img class="footer__trust-badge" src="..." alt="Qualiopi — Processus certifié — Actions de formation">
       </div>
     </div>

     <!-- Mentions légales -->
     <div class="footer__legal">
       <div class="footer__inner">
         <p class="footer__legal-text">LegalPlace n'est ni un cabinet d'avocats ni un cabinet d'expertise comptable. Conformément à la réglementation en vigueur, LegalPlace souhaite préciser qu'elle ne fournit aucunement de consultation juridique ou ne procède à la rédaction d'actes sous seing privé adaptés. LegalPlace fournit uniquement de l'information juridique, un logiciel permettant de générer des documents juridiques sur la base de modèles, un service de formalités d'entreprises et un service de mise en relation avec des professionnels de services aux entreprises. Il est conseillé de faire appel à un professionnel (avocat, expert-comptable) pour valider vos documents avant de les utiliser ainsi que pour toute question juridique ou de montage.</p>
       </div>
     </div>

   </footer>

   ============================================= */


.footer {
  /* Appearance */
  background-color: var(--color-surface-on-alt-primary);
}


/* =====================
   Inner (conteneur centré)
   ===================== */

.footer__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}


/* =====================
   Main — colonnes de navigation
   ===================== */

.footer__main {
  padding: var(--spacing-56) 0;
}

.footer__main > .footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}


/* =====================
   Colonne
   ===================== */

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.footer__col-title {
  /* Typography — overline */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-content-primary);
}


/* =====================
   Liste de liens
   ===================== */

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.footer__item {
  display: flex;
  align-items: center;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-content-secondary);
  text-decoration: none;

  /* Typography — Paragraph/3 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);

  /* Motion */
  transition: color var(--motion-transition-interactive);
}

.footer__link:hover {
  color: var(--color-content-primary);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}


/* =====================
   Badge inline
   ===================== */

.footer__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-8);
  border-radius: var(--border-radius-full);
  background-color: var(--color-surface-positive);
  color: var(--color-content-positive);

  /* Typography — Paragraph/4 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}


/* =====================
   Bottom — copyright
   ===================== */

.footer__bottom {
  padding: var(--spacing-20) 0;
}

.footer__copyright {
  color: var(--color-content-tertiary);

  /* Typography — Paragraph/4 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}


/* =====================
   Trust — badges de certification
   ===================== */

.footer__trust {
  padding: var(--spacing-32) 0;
}

.footer__trust > .footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-56);
}

.footer__trust-badge {
  display: block;
  height: 111px;
  width: auto;
}


/* =====================
   Legal — mentions légales
   ===================== */

.footer__legal {
  padding: var(--spacing-24) 0;
}

.footer__legal-text {
  color: var(--color-content-tertiary);
  text-align: center;

  /* Typography — Paragraph/4 */
  font-family: var(--typography-paragraph-font-family);
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
}

/* ==========================================
   LANDING-SPECIFIC STYLES (ex-inline page)
   ========================================== */

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

    /* Skip link a11y — invisible jusqu'au focus clavier */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 0;
      z-index: 999;
      padding: 12px 20px;
      background: var(--color-content-primary);
      color: var(--color-content-inverse-primary);
      text-decoration: none;
      font-family: var(--typography-paragraph-font-family), sans-serif;
      font-weight: var(--typography-link-font-weight);
      font-size: var(--typography-paragraph-font-size-3);
    }
    .skip-link:focus {
      top: 0;
    }

    /* ==============================
       OVERRIDE — Marges plus larges (cohérence Figma RC Pro)
       ============================== */
    @media (min-width: 768px) {
      :root { --grid-margin: 48px; }
    }
    @media (min-width: 1024px) {
      :root { --grid-margin: 80px; }
    }
    @media (min-width: 1280px) {
      :root { --grid-margin: 120px; --grid-max-width: 1440px; }
    }
    @media (min-width: 1600px) {
      :root { --grid-margin: 146px; --grid-max-width: 1600px; }
    }

    body {
      background-color: var(--color-page);
      color: var(--color-content-primary);
      font-family: var(--typography-paragraph-font-family), sans-serif;
      font-weight: var(--typography-paragraph-font-weight);
      font-size: var(--typography-paragraph-font-size-2);
      line-height: var(--typography-paragraph-line-height-2);
      -webkit-font-smoothing: antialiased;
    }

    /* ==============================
       SITE HEADER (nav LP)
       ============================== */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: var(--color-page);
      border-bottom: var(--border-stroke-1) solid var(--color-border-tertiary);
    }

    .site-header__inner {
      max-width: var(--grid-max-width);
      margin: 0 auto;
      padding: var(--spacing-12) var(--grid-margin);
      display: flex;
      align-items: center;
      gap: var(--spacing-24);
    }

    .site-header__brand { flex-shrink: 0; display: flex; align-items: center; }
    .site-header__brand .logo { width: 150px; height: auto; }

    .site-header__nav {
      display: flex; align-items: center;
      gap: var(--spacing-24);
      margin-left: auto;
    }
    .site-header__nav-link {
      font-family: var(--typography-paragraph-font-family), sans-serif;
      font-weight: var(--typography-link-font-weight);
      font-size: var(--typography-paragraph-font-size-3);
      color: var(--color-content-primary);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-transition-interactive);
    }
    .site-header__nav-link:hover { color: var(--color-content-accent); }

    .site-header__cta {
      flex-shrink: 0;
      padding: 10px 18px;
      font-size: var(--typography-paragraph-font-size-3);
    }

    .site-header__burger {
      display: none; flex-direction: column; gap: 4px;
      background: none; border: none; cursor: pointer; padding: 8px;
    }
    .site-header__burger span {
      display: block; width: 22px; height: 2px;
      background-color: var(--color-content-primary); border-radius: 2px;
    }

    @media (max-width: 899px) {
      .site-header__inner { position: relative; }
      .site-header__nav { display: none; }
      .site-header__cta { margin-left: auto; }
      .site-header__cta span,
      .site-header__cta:not(.site-header__cta) {
        /* placeholder */
      }
      .site-header__burger {
        display: flex;
        margin-left: var(--spacing-8);
      }
      .site-header--open .site-header__nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-12);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-page);
        padding: var(--spacing-20) var(--grid-margin);
        border-bottom: var(--border-stroke-1) solid var(--color-border-tertiary);
        margin-left: 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.06);
      }
      .site-header--open .site-header__nav-link {
        padding: var(--spacing-8) 0;
        font-size: var(--typography-paragraph-font-size-2);
      }
    }

    @media (max-width: 480px) {
      .site-header__brand .logo { width: 110px; }
      .site-header__cta {
        padding: 8px 14px;
        font-size: var(--typography-paragraph-font-size-4);
      }
      .site-header__cta .icon {
        width: 14px;
        height: 14px;
      }
    }


    /* ==============================
       HERO — image full-bleed style RC Pro
       ============================== */

    .hero {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: var(--spacing-48) 0;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

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

    /* overlay pour assurer la lisibilité du sous-titre blanc */
    .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.35) 45%,
        rgba(0,0,0,0.15) 100%);
    }

    .hero__inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--grid-max-width);
      margin: 0 auto;
      padding: 0 var(--grid-margin);
    }

    .hero__content {
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-24);
    }

    .hero__title {
      margin: 0;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-1);
      line-height: 1.15;
      color: var(--color-content-primary);
    }

    /* le highlight wrap toute la phrase, ligne par ligne grâce à box-decoration-break: clone */
    .hero__title .highlight {
      padding: 0.08em 0.25em;
    }

    .hero__description {
      font-size: var(--typography-paragraph-font-size-1);
      line-height: var(--typography-paragraph-line-height-1);
      color: var(--color-content-inverse-primary);
      max-width: 520px;
    }

    .hero__cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-16);
      align-items: center;
      margin-top: var(--spacing-8);
    }

    .hero__legend {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-inverse-secondary);
    }

    @media (max-width: 767px) {
      .hero {
        min-height: 320px;
        padding: var(--spacing-32) 0;
      }
      .hero__title {
        font-size: var(--typography-headline-font-size-3);
        line-height: 1.2;
      }
      .hero__title .highlight {
        padding: 0.05em 0.2em;
      }
      .hero__description {
        font-size: var(--typography-paragraph-font-size-2);
      }
      .hero__bg::after {
        background: linear-gradient(to bottom,
          rgba(0,0,0,0.45) 0%,
          rgba(0,0,0,0.65) 100%);
      }
    }

    /* Reviews strip — count + desc sur 1 seule ligne en grand desktop */
    @media (min-width: 1200px) {
      .reviews-section__headline {
        grid-column: 1 / span 7 !important;
        flex-wrap: nowrap !important;
      }
      .reviews-section__desc {
        min-width: 0 !important;
        white-space: nowrap;
      }
      .reviews-section__badges {
        grid-column: 8 / -1 !important;
      }
    }

    /* Reviews strip — mobile : tout très compact */
    @media (max-width: 767px) {
      .reviews-section { padding: var(--spacing-20) 0 !important; }
      .reviews-section__inner { gap: var(--spacing-16) !important; }
      .reviews-section__count {
        font-size: var(--typography-headline-font-size-5);
      }
      .reviews-section__desc {
        font-size: var(--typography-paragraph-font-size-3);
      }
      /* badges en row + plus petits */
      .reviews-section__badges {
        flex-direction: row !important;
        gap: var(--spacing-12) !important;
        align-items: center;
      }
      .reviews-section__divider {
        display: block !important;
        width: 1px;
        align-self: stretch;
        background-color: var(--color-divider-primary);
        flex-shrink: 0;
      }
      .reviews-section .review-badge {
        --rb-logo-h: 14px;
        --rb-stars-h: 16px;
      }
      .reviews-section .review-badge__score {
        font-size: var(--typography-paragraph-font-size-4);
      }
      /* On masque "(6 300 avis)" / "(11 872 avis)" sur très petits écrans */
      .reviews-section .review-badge__score-sep,
      .reviews-section .review-badge__score-link {
        display: none;
      }
    }


    /* ==============================
       SECTION GÉNÉRIQUE (helpers)
       ============================== */

    .section {
      padding: var(--spacing-104) 0;
    }

    @media (max-width: 767px) {
      .section { padding: var(--spacing-56) 0; }
      .feature-section { padding: var(--spacing-56) 0; }
    }

    .section--alt {
      background-color: var(--color-surface-secondary);
    }

    .section--dark {
      background-color: var(--color-brand-1000);
    }

    .section--brand {
      background-color: var(--color-brand-1000);
      color: var(--color-content-inverse-primary);
    }

    .section--brand .section-headline__title {
      color: var(--color-content-inverse-primary);
    }

    .section--brand .section__intro {
      color: var(--color-content-inverse-secondary);
    }

    .section__inner {
      max-width: var(--grid-max-width);
      margin: 0 auto;
      padding: 0 var(--grid-margin);
    }

    .section__header {
      margin-bottom: var(--spacing-56);
    }

    .section__header--centered {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section__intro {
      margin-top: var(--spacing-16);
      font-size: var(--typography-paragraph-font-size-2);
      line-height: var(--typography-paragraph-line-height-2);
      color: var(--color-content-secondary);
      max-width: 720px;
    }

    .section__header--centered .section__intro {
      margin-left: auto;
      margin-right: auto;
    }


    /* ==============================
       FEATURE-SECTION — Pourquoi Academy (sticky headline gauche)
       ============================== */

    @media (min-width: 992px) {
      .feature-section__headline {
        position: sticky;
        top: var(--spacing-80);
      }
    }

    .feature-section__intro {
      margin-top: var(--spacing-20);
      font-size: var(--typography-paragraph-font-size-2);
      line-height: var(--typography-paragraph-line-height-2);
      color: var(--color-content-secondary);
    }


    /* ==============================
       FORMATIONS (4 cards)
       ============================== */

    .formations-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-32);
      max-width: 1400px;
      margin: 0 auto;
    }

    /* Tablette : 2 colonnes (5e card centrée seule sur sa ligne) */
    @media (min-width: 768px) and (max-width: 1023px) {
      .formations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-32);
      }
      .formations-grid .formation-card:nth-child(5):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - var(--spacing-16));
        width: 100%;
      }
    }

    /* Desktop : 3 colonnes (5 cards = 3+2, tient sur 2 lignes) */
    @media (min-width: 1024px) {
      .formations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-32);
      }
    }

    .formation-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: var(--color-surface-tertiary);
      border-radius: var(--border-radius);
      overflow: hidden;
      transition:
        transform var(--motion-transition-interactive),
        box-shadow var(--motion-transition-interactive);
    }

    .formation-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    }

    /* Lien étiré : couvre toute la card via pseudo-élément */
    .formation-card__link {
      color: inherit;
      text-decoration: none;
    }

    .formation-card__link::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .formation-card__link:focus-visible {
      outline: none;
    }
    .formation-card:focus-within {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
    }

    .formation-card__visual {
      position: relative;
      overflow: hidden;
      height: 200px;
    }

    .formation-card__visual .image {
      aspect-ratio: auto;
      height: 100%;
    }

    .formation-card__visual .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 400ms ease-out;
    }

    .formation-card:hover .formation-card__visual .image img {
      transform: scale(1.03);
    }

    .formation-card__badges {
      position: absolute;
      left: var(--spacing-12);
      top: var(--spacing-12);
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-8);
    }

    .formation-card__body {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-16);
      padding: var(--spacing-24) var(--spacing-24) var(--spacing-24);
      flex: 1;
    }

    .formation-card__title {
      margin: 0;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-3);
      line-height: var(--typography-headline-line-height-3);
      color: var(--color-content-primary);
    }

    /* Aligne les titres : 2 lignes en tablet 2col, 3 lignes en desktop 3col */
    @media (min-width: 768px) and (max-width: 1023px) {
      .formation-card__title {
        min-height: calc(var(--typography-headline-line-height-3) * 2);
      }
    }
    @media (min-width: 1024px) {
      .formation-card__title {
        min-height: calc(var(--typography-headline-line-height-3) * 2);
      }
    }

    .formation-card__desc {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-secondary);
    }

    .formation-card__hours {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-4);
      align-self: flex-start;
      padding: var(--spacing-4) var(--spacing-8);
      background-color: var(--color-surface-decorative-linen-medium);
      border-radius: var(--border-radius);
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-paragraph-font-size-4);
      line-height: 1;
      color: var(--color-content-primary);
    }

    .formation-card__hours .icon {
      width: 14px;
      height: 14px;
    }

    .formation-card hr.divider {
      margin: var(--spacing-4) 0 0;
    }

    .formation-card__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-12);
      margin-top: auto;
      padding-top: var(--spacing-8);
    }

    .formation-card__price-row {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .formation-card__price-prefix {
      font-size: var(--typography-paragraph-font-size-4);
      line-height: 1.2;
      color: var(--color-content-tertiary);
      margin-bottom: 2px;
    }

    .formation-card__price {
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-4);
      line-height: var(--typography-headline-line-height-4);
      color: var(--color-content-primary);
    }

    .formation-card__price-suffix {
      font-size: var(--typography-paragraph-font-size-4);
      line-height: var(--typography-paragraph-line-height-4);
      color: var(--color-content-secondary);
    }

    .formation-card__cta {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-4);
      font-family: var(--typography-link-font-family), sans-serif;
      font-weight: var(--typography-link-font-weight);
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-primary);
      text-decoration: none;
      white-space: nowrap;
      transition: color var(--motion-transition-interactive);
    }

    .formation-card__cta:hover {
      color: var(--color-content-accent);
    }

    .formation-card__cta .icon {
      width: 14px;
      height: 14px;
    }


    /* ==============================
       COMMENT ÇA SE PASSE (4 steps)
       ============================== */

    .steps {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-32);
      counter-reset: step;
    }

    @media (min-width: 768px) {
      .steps {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-24);
      }
    }

    .step {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-12);
      padding-top: var(--spacing-24);
      border-top: 2px solid var(--color-border-primary);
      counter-increment: step;
    }

    .step__num {
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-secondary);
    }

    .step__num::before {
      content: "Étape " counter(step);
    }

    .step__title {
      margin: 0;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-5);
      line-height: var(--typography-headline-line-height-5);
      color: var(--color-content-primary);
    }

    .step__text {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-secondary);
    }


    /* ==============================
       TÉMOIGNAGES — section dédiée (fond blanc + citation décorative)
       ============================== */

    .section--testimonials {
      background-color: var(--color-page);
      position: relative;
      overflow: hidden;
    }

    /* Grande guillemet décorative en arrière-plan */
    .section--testimonials::before {
      content: "“";
      position: absolute;
      top: var(--spacing-32);
      right: var(--spacing-32);
      font-family: var(--typography-headline-font-family), serif;
      font-size: 240px;
      line-height: 0.8;
      color: var(--color-brand-300);
      opacity: 0.6;
      pointer-events: none;
      z-index: 0;
    }

    @media (max-width: 767px) {
      .section--testimonials::before {
        font-size: 140px;
        top: var(--spacing-16);
        right: var(--spacing-16);
        opacity: 0.35;
      }
    }

    .section--testimonials .section__inner {
      position: relative;
      z-index: 1;
    }

    .section--testimonials .testimonial {
      background-color: var(--color-surface-secondary);
      border: var(--border-stroke-1) solid var(--color-border-tertiary);
    }

    /* ==============================
       TÉMOIGNAGES (carousel)
       ============================== */

    .testimonials-carousel {
      position: relative;
    }

    .testimonials-track {
      display: flex;
      gap: var(--spacing-24);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scroll-padding: 0;
      padding: var(--spacing-8) 0 var(--spacing-24);
      margin: 0 -8px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .testimonials-track::-webkit-scrollbar {
      display: none;
    }

    .testimonials-track .testimonial {
      scroll-snap-align: start;
      flex: 0 0 calc(100% - 16px);
      margin: 0 8px;
    }

    @media (min-width: 768px) {
      .testimonials-track .testimonial {
        flex: 0 0 calc(50% - 28px);
      }
    }

    @media (min-width: 992px) {
      .testimonials-track .testimonial {
        flex: 0 0 calc(33.333% - 32px);
      }
    }

    .testimonials-controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-12);
      margin-top: var(--spacing-24);
    }

    .testimonials-arrows {
      display: flex;
      gap: var(--spacing-12);
      order: 1;
    }

    .testimonials-progress {
      order: 2;
    }

    .testimonials-arrow {
      width: 44px;
      height: 44px;
      border-radius: 9999px;
      border: var(--border-stroke-1) solid var(--color-border-primary);
      background-color: transparent;
      color: var(--color-content-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition:
        background-color var(--motion-transition-interactive),
        border-color var(--motion-transition-interactive),
        opacity var(--motion-transition-interactive);
    }

    .testimonials-arrow:hover {
      background-color: var(--color-surface-neutral-hovered);
    }

    .testimonials-arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .testimonials-arrow .icon {
      width: 16px;
      height: 16px;
    }

    .testimonials-progress {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-secondary);
      font-variant-numeric: tabular-nums;
    }

    .testimonial {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-20);
      padding: var(--spacing-32);
      background-color: var(--color-surface-tertiary);
      border: var(--border-stroke-1) solid var(--color-border-tertiary);
      border-radius: var(--border-radius);
    }

    .testimonial__quote {
      flex: 1;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-5);
      line-height: var(--typography-headline-line-height-5);
      color: var(--color-content-primary);
    }

    .testimonial__author {
      display: flex;
      align-items: center;
      gap: var(--spacing-12);
    }

    .testimonial__avatar {
      width: 48px;
      height: 48px;
      border-radius: 9999px;
      background-color: var(--color-surface-decorative-linen-medium);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-content-primary);
    }

    .testimonial__avatar svg {
      width: 28px;
      height: 28px;
    }

    .testimonial__meta {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2);
    }

    .testimonial__name {
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-primary);
    }

    .testimonial__context {
      font-size: var(--typography-paragraph-font-size-4);
      line-height: var(--typography-paragraph-line-height-4);
      color: var(--color-content-secondary);
    }


    /* ==============================
       FINANCEMENT (4 cards icon-box)
       ============================== */

    .financing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-24);
    }

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

    @media (min-width: 992px) {
      .financing-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .financing-card {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-12);
      padding: var(--spacing-24);
      background-color: var(--color-surface-tertiary);
      border-radius: var(--border-radius);
    }

    .financing-card__title {
      margin: 0;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-5);
      line-height: var(--typography-headline-line-height-5);
      color: var(--color-content-primary);
    }

    .financing-card__text {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-secondary);
    }


    /* ==============================
       CTA FINAL (dark)
       ============================== */

    .final-cta__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--spacing-24);
    }

    .final-cta__title {
      margin: 0;
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      font-size: var(--typography-headline-font-size-2);
      line-height: var(--typography-headline-line-height-2);
      color: var(--color-content-inverse-primary);
      max-width: 720px;
    }

    .final-cta__text {
      font-size: var(--typography-paragraph-font-size-2);
      line-height: var(--typography-paragraph-line-height-2);
      color: var(--color-content-inverse-secondary);
      max-width: 600px;
    }

    .final-cta__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-16);
      justify-content: center;
      margin-top: var(--spacing-8);
    }

    .final-cta__hint {
      font-size: var(--typography-paragraph-font-size-3);
      color: var(--color-content-inverse-secondary);
      margin-top: var(--spacing-8);
    }

    .final-cta__contact {
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      color: var(--color-content-inverse-secondary);
      margin-top: var(--spacing-8);
    }

    .final-cta__contact a {
      color: var(--color-content-inverse-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .final-cta__email-link {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-8);
      margin-top: var(--spacing-16);
      padding: var(--spacing-8) var(--spacing-16);
      border-radius: var(--border-radius-full);
      background-color: transparent;
      color: var(--color-content-inverse-secondary);
      font-family: var(--typography-paragraph-font-family), sans-serif;
      font-size: var(--typography-paragraph-font-size-3);
      line-height: var(--typography-paragraph-line-height-3);
      text-decoration: none;
      transition:
        background-color var(--motion-transition-interactive),
        color var(--motion-transition-interactive);
    }

    .final-cta__email-link:hover {
      background-color: var(--color-white-alpha-100);
      color: var(--color-content-inverse-primary);
    }

    .final-cta__email-link .icon {
      width: 16px;
      height: 16px;
    }


    /* ==============================
       Sticky bottom CTA (mobile)
       ============================== */

    .sticky-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--color-surface-tertiary);
      border-top: var(--border-stroke-1) solid var(--color-border-tertiary);
      padding: var(--spacing-12) var(--spacing-16);
      display: flex;
      justify-content: center;
      z-index: 10;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
    }

    .sticky-cta .btn {
      width: 100%;
      justify-content: center;
    }

    body {
      padding-bottom: 88px;
    }

    @media (min-width: 768px) {
      .sticky-cta {
        display: none;
      }
      body {
        padding-bottom: 0;
      }
    }


    /* ==============================
       FOOTER — Widgets bottom (Trustpilot + Qualiopi)
       ============================== */

    .footer__widgets {
      padding: var(--spacing-24) 0 var(--spacing-32);
      border-top: var(--border-stroke-1) solid var(--color-border-tertiary);
    }

    .footer__widgets-inner {
      max-width: var(--grid-max-width);
      margin: 0 auto;
      padding: 0 var(--grid-margin);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--spacing-24);
    }

    .footer__copyright {
      font-size: var(--typography-paragraph-font-size-4);
      line-height: var(--typography-paragraph-line-height-4);
      color: var(--color-content-tertiary);
      margin: 0;
    }

    .footer__qualiopi {
      display: inline-flex;
      align-items: center;
      justify-self: center;
    }

    .footer__qualiopi img {
      display: block;
      height: 80px;
      width: auto;
    }

    .footer__widgets-spacer {
      display: block;
    }

    .footer__badge {
      display: inline-block;
      margin-left: var(--spacing-8);
      padding: 2px 8px;
      background-color: var(--color-positive-300);
      color: var(--color-positive-800);
      border-radius: var(--border-radius);
      font-size: var(--typography-paragraph-font-size-4);
      font-family: var(--typography-headline-font-family), sans-serif;
      font-weight: var(--typography-headline-font-weight);
      white-space: nowrap;
    }

    @media (max-width: 767px) {
      .footer__widgets-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
      }
      .footer__widgets-spacer {
        display: none;
      }
      .footer__qualiopi img {
        height: 60px;
      }
    }