/*
 * CODESIA DESIGN SYSTEM — COLORS & TYPOGRAPHY
 * ============================================
 * Source: Brand Book v3.0 — Juin 2026  (uploads/Codesia_Brand_Book_v3.md)
 * Last updated: 2026-06-04
 *
 * v3 en une phrase : marque BICHROME Coffee Bean / White Smoke. La présence
 * vient du contraste sombre/clair, pas d'une couleur d'accent. Le Dark Teal
 * n'est plus un accent de surface — il survit uniquement en ombre de survol
 * et dans le gradient de la bannière LinkedIn.
 */

/* ─── FONT FACES ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
       url('fonts/Satoshi-Regular.woff') format('woff'),
       url('fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
       url('fonts/Satoshi-Medium.woff') format('woff'),
       url('fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
       url('fonts/Satoshi-Bold.woff') format('woff'),
       url('fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* DM Mono : seules les graisses 400 (Regular) et 500 (Medium) sont employées
   sur le site (.step-card-number, .arrow-sym, labels mono). Les faces Italic,
   Medium-Italic, Light et Light-Italic ont été retirées — jamais référencées,
   et disponibles en TTF uniquement (pas de woff2). */
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/dm-mono-v16-latin-regular.woff2') format('woff2'),
       url('fonts/DMMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('fonts/dm-mono-v16-latin-500.woff2') format('woff2'),
       url('fonts/DMMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ─── BASE COLOR TOKENS (§4.1) ───────────────────────────────────────────── */

:root {
  /* Deux couleurs principales + deux couleurs de structure */
  --color-coffee-bean:  #0A0313;   /* Texte, structure, navigation, CTA principal, fonds de contraste */
  --color-white-smoke:  #F1F0F0;   /* Fond éditorial dominant, surfaces, texte sur fond sombre        */
  --color-silver:       #BEBBBB;   /* Bordures, dividers, numéros de carte, états secondaires          */
  --color-dark-teal:    #055864;   /* RÉSERVE — ombre de survol + gradient bannière UNIQUEMENT         */

  /* Noir pur #000 et blanc pur #FFF interdits comme couleurs de marque (§4.7) */

  /* Couleurs de support — variantes neutres très claires (§4.1) */
  --color-silver-100:   #E8E7E7;
  --color-silver-200:   #D4CECE;
  --color-silver-300:   #CFC8C8;
  --color-silver-400:   #C2BCBC;
  --color-off-white:    #FAF9F9;   /* Surface alternative à White Smoke */
  --color-banner-ground:#E6E5E3;   /* Plan de travail de la bannière LinkedIn */

  /* Statut « live / disponible » — jamais décoratif, jamais porteur de texte (§9.4) */
  --color-status:       #16A34A;
  --color-status-halo:  #4ADE80;

  /* Aliases sémantiques — fond clair */
  --color-bg:               var(--color-white-smoke);
  --color-bg-dark:          var(--color-coffee-bean);
  --color-surface:          var(--color-white-smoke);
  --color-surface-alt:      var(--color-off-white);
  --color-fg:               var(--color-coffee-bean);
  --color-fg-secondary:     color-mix(in srgb, var(--color-coffee-bean) 70%, transparent);
  --color-fg-tertiary:      color-mix(in srgb, var(--color-coffee-bean) 55%, transparent);
  --color-fg-disabled:      var(--color-silver);

  /* Aliases sémantiques — fond sombre */
  --color-fg-inverse:        var(--color-white-smoke);
  --color-fg-inv-secondary:  color-mix(in srgb, var(--color-white-smoke) 70%, transparent);

  /* Structure */
  --color-border:        var(--color-silver);                                   /* cartes/inputs sur fond clair */
  --color-border-dark:   color-mix(in srgb, var(--color-white-smoke) 12%, transparent); /* cartes sur fond sombre (§4.9) */
  --color-divider:       color-mix(in srgb, var(--color-silver) 60%, transparent);      /* divider clair ~60% (§7.7) */
  --color-divider-dark:  color-mix(in srgb, var(--color-silver) 40%, transparent);      /* divider sombre ~40% (§7.7) */
  --color-link:          var(--color-coffee-bean);   /* §7.5 — lien texte Coffee Bean (plus de teal) */
  --color-link-dark:     var(--color-white-smoke);
  --color-focus:         var(--color-coffee-bean);   /* outline focus ring */

  /* Ombre de survol — seule présence du Dark Teal en surface (§4.5) */
  --shadow-hover:       0 8px 24px 0 rgba(5, 88, 100, 0.32);
  --shadow-hover-soft:  0 6px 18px 0 rgba(5, 88, 100, 0.22);

  /* Gradient — bannière LinkedIn (theme-gradient) UNIQUEMENT (§4.8) */
  --gradient-banner: linear-gradient(135deg, var(--color-coffee-bean) 0%, var(--color-dark-teal) 100%);
  /* Rétro-compat : le « gradient de marque » est rendu en aplat Coffee Bean (§4.8) */
  --gradient-brand:  var(--color-coffee-bean);

  /* Motion */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:   150ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
}


/* ─── BASE TYPOGRAPHY TOKENS (§6) ────────────────────────────────────────── */

:root {
  /* Polices */
  --font-sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Poids — Medium 500 = poids par défaut de la marque, y compris H1 (§6.1) */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-bold:    700;   /* @kind font */

  /* ── Échelle modulaire ratio 1.25 — Major Third (§6.3) ── */
  --fs-caption:    0.8125rem;                 /* 13 px  — légendes, labels mono */
  --fs-body-sm:    0.875rem;                  /* 14 px  — métadonnées, footer    */
  --fs-body:       1rem;                      /* 16 px  — texte courant          */
  --fs-body-lg:    1.125rem;                  /* 18 px  — paragraphes d'intro    */
  --fs-minor:      1.25rem;                   /* 20 px  — titre mineur, intro    */
  --fs-h4:         1.25rem;                   /* 20 px  — alias titre mineur      */
  --fs-h3:         1.563rem;                  /* 25 px  — titre de carte, étape  */
  --fs-subtitle:   1.953rem;                  /* 31 px  — sous-titre fort         */
  --fs-h2:         2.441rem;                  /* 39 px  — titre de section       */
  --fs-h1:         3.052rem;                  /* 48,8px — titre de page          */
  --fs-display:    calc(var(--fs-h1) * 1.6);  /* ~78 px — wordmark géant du hero @kind font */

  /* Labels techniques */
  --fs-overline:   0.75rem;     /* 12 px — eyebrow / overline CAPS */
  --fs-mono-label: 0.8125rem;   /* 13 px — DM Mono uniquement      */

  /* Line-heights */
  --lh-display:  1.02; /* @kind font */
  --lh-h1:       1.08; /* @kind font */
  --lh-h2:       1.14; /* @kind font */
  --lh-subtitle: 1.18; /* @kind font */
  --lh-h3:       1.25; /* @kind font */
  --lh-minor:    1.4; /* @kind font */
  --lh-h4:       1.4; /* @kind font */
  --lh-body-lg:  1.6; /* @kind font */
  --lh-body:     1.65; /* @kind font */
  --lh-body-sm:  1.55; /* @kind font */
  --lh-caption:  1.45; /* @kind font */
  --lh-overline: 1.2; /* @kind font */
  --lh-mono:     1.2; /* @kind font */

  /* Letter-spacing — titres serrés (−0.02→−0.005), labels CAPS desserrés (+0.04→+0.08) (§6.5) */
  --ls-display:  -0.025em;
  --ls-h1:       -0.02em;
  --ls-h2:       -0.015em;
  --ls-subtitle: -0.01em;
  --ls-h3:       -0.01em;
  --ls-h4:       -0.005em;
  --ls-body:      0; /* @kind spacing */
  --ls-body-sm:   0.005em;
  --ls-caption:   0.01em;
  --ls-overline:  0.08em;
  --ls-mono:      0.02em;
}


/* ─── RESPONSIVE TYPE (§6.4 — breakpoints 1280/1023/767/720) ─────────────── */

@media (max-width: 767px) {
  :root {
    --fs-h1:       2.25rem;     /* ~36 px */
    --fs-h2:       1.75rem;     /* 28 px  */
    --fs-subtitle: 1.5rem;      /* 24 px  */
    --fs-h3:       1.375rem;    /* 22 px  */
    --fs-minor:    1.125rem;    /* 18 px  */
    --fs-h4:       1.125rem;
    --fs-display:  clamp(2.5rem, 12vw, 3.5rem); /* @kind font */

    --lh-h1:      1.12; /* @kind font */
    --lh-h2:      1.18; /* @kind font */
    --lh-body-lg: 1.6; /* @kind font */
  }
}


/* ─── SPACING TOKENS (§7.1 — base 8 px, 4 px corrections optiques) ───────── */

:root {
  --space-0-5:  4px;
  --space-1:    8px;
  --space-2:    16px;
  --space-3:    24px;
  --space-4:    32px;
  --space-5:    40px;
  --space-6:    48px;
  --space-7:    56px;
  --space-8:    64px;
  --space-9:    72px;
  --space-10:   80px;
  --space-11:   96px;
  --space-12:   112px;
  --space-13:   128px;

  /* Raccourcis structurels v3 (§7.2 / §7.3) */
  --section-pad-desktop:    72px;   /* .section-pad padding-block desktop */
  --section-pad-mobile:     48px;   /* .section-pad padding-block mobile  */
  --conformite-pad-block:   64px;   /* carte conformité */
  --conformite-pad-inline:  80px;
  --gap-cta:                16px;   /* entre CTA */
  --gap-hero-cta:           48px;   /* hero → groupe CTA */
  --gap-nav:                32px;   /* entre liens de nav */
}


/* ─── BORDER RADIUS TOKENS (§7.8) ────────────────────────────────────────── */

:root {
  --radius-none: 0px;     /* Sections pleine largeur, séparateurs, images full-bleed */
  --radius-sm:   4px;     /* Minimum boutons/inputs */
  --radius-md:   6px;     /* Boutons, inputs, cartes standard */
  --radius-lg:   8px;     /* Cartes de contraste, médias larges (jusqu'à 16px) */
  --radius-xl:   16px;    /* Conteneurs hero / blocs marquants */
  --radius-2xl:  24px;    /* Blocs marquants très arrondis */
  --radius-pill: 999px;   /* Pilules — CTA header, tags */
  --radius-full: 50%;     /* Avatars, points, symboles ronds */
}


/* ─── GRID / CONTENEURS (§7.2) ───────────────────────────────────────────── */

:root {
  --container-max:        1280px;  /* conteneur principal (.hero-inner, .header-inner) */
  --container-editorial:  1120px;  /* conteneur éditorial */

  --padding-inline-desktop:   80px;   /* desktop */
  --padding-inline-mid:       48px;   /* intermédiaire (≤1023px) */
  --padding-inline-mobile:    24px;   /* mobile (≤767px) */
  --padding-inline-mobile-sm: 16px;   /* petits écrans (≤720px) */

  /* Alias rétro-compat (anciens noms v2) */
  --margin-desktop:   var(--padding-inline-desktop);
  --margin-tablet:    var(--padding-inline-mid);
  --margin-mobile:    var(--padding-inline-mobile);
  --gutter-desktop:   24px;
  --gutter-mobile:    16px;
  --cols-desktop:     12; /* @kind other */
  --cols-tablet:      8; /* @kind other */
  --cols-mobile:      4; /* @kind other */

  /* Navigation (§7.4) — header sticky Coffee Bean */
  --nav-height-desktop: 72px;
  --nav-height-mobile:  56px;
}


/* ─── SEMANTIC ELEMENT STYLES ────────────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background-color: var(--color-bg);
}

/* Display — wordmark géant du hero d'accueil (Medium 500) */
.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}

/* H1 — titre de page (Medium 500 §6.1) */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-wrap: pretty;
}

/* H2 — titre de section (Medium 500) */
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: pretty;
}

/* Sous-titre fort — niveau intermédiaire */
.subtitle {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  letter-spacing: var(--ls-subtitle);
  text-wrap: pretty;
}

/* H3 — titre de carte, étape (Medium 500) */
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: pretty;
}

/* Titre mineur / intro (Medium 500) */
h4, .h4, .minor {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  text-wrap: pretty;
}

/* Body Large — paragraphes d'introduction */
.body-lg, p.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body);
}

/* Body — texte courant. Ligne 58–74 car. (≈760 px) §6.5 */
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  max-width: 68ch;
}

/* Body Small — métadonnées, footer, notes */
.body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
}

/* Caption — légendes, microcopy */
.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-fg-secondary);
}

/* Overline / eyebrow — labels en capitales, Coffee Bean ~55% (§6.5) */
.overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
}

/* Mono Label — numéros, valeurs, eyebrows numérotés (DM Mono uniquement) */
.mono-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-mono-label);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
}

/* Code inline et blocs */
code, pre, .mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-mono-label);
}

pre {
  background-color: var(--color-bg-dark);
  color: var(--color-white-smoke);
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius-lg);
}


/* ─── LINKS (§7.5) — Coffee Bean, soulignement au survol ─────────────────── */

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Liens sur fond sombre */
.bg-dark a,
.bg-dark a:visited {
  color: var(--color-link-dark);
}
.bg-dark a:focus-visible { outline-color: var(--color-white-smoke); }


/* ─── BUTTONS (§7.5) ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);        /* taille body (§7.5) */
  line-height: 1;
  padding: 16px 32px;               /* §7.5 */
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transform: scale(1);
  transition: transform var(--dur-base) ease-out,
              box-shadow var(--dur-base) ease-out,
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}

.btn:hover {
  transform: scale(1.02);           /* §7.5 — survol bouton */
  box-shadow: var(--shadow-hover);  /* ombre teal discrète, seule présence du teal */
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Primaire — Coffee Bean plein, texte White Smoke (§7.5) */
.btn-primary {
  background-color: var(--color-coffee-bean);
  color: var(--color-white-smoke);
  border-color: var(--color-coffee-bean);
}

/* Hero primaire — bouton clair sur fond sombre */
.btn-hero-primary {
  background-color: var(--color-white-smoke);
  color: var(--color-coffee-bean);
  border-color: var(--color-white-smoke);
}

/* Secondaire — transparent, bordure Coffee Bean */
.btn-secondary {
  background-color: transparent;
  color: var(--color-coffee-bean);
  border-color: var(--color-coffee-bean);
}

/* Inversé / hero secondaire — fond sombre */
.btn-inverse,
.btn-hero-secondary {
  background-color: transparent;
  color: var(--color-white-smoke);
  border-color: var(--color-white-smoke);
}
.btn-inverse:focus-visible,
.btn-hero-secondary:focus-visible { outline-color: var(--color-white-smoke); }

/* CTA de header — pilule White Smoke pleine, texte Coffee Bean, Satoshi Bold (§7.5) */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  background-color: var(--color-white-smoke);
  color: var(--color-coffee-bean);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transform: scale(1);
  transition: transform var(--dur-base) ease-out, box-shadow var(--dur-base) ease-out;
}
.header-cta:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); text-decoration: none; }

/* Disabled */
.btn[disabled],
.btn-disabled {
  background-color: transparent;
  color: var(--color-silver);
  border-color: var(--color-silver);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}


/* ─── DIVIDERS (§7.7) — 1px Silver, 60% clair / 40% sombre ───────────────── */

hr, .divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}

.bg-dark hr,
.bg-dark .divider {
  border-top-color: var(--color-divider-dark);
}


/* ─── CARDS, PANELS, SURFACES (§7.6) ─────────────────────────────────────── */

.card {
  background-color: var(--color-white-smoke);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-lg);
  padding: var(--space-4);             /* 32 px */
  /* Ombre : none par défaut — ombre teal autorisée au survol uniquement */
  box-shadow: none;
  transform: translateY(0);
  transition: transform var(--dur-base) ease-out, box-shadow var(--dur-base) ease-out;
}

.card-hover:hover,
a.card:hover {
  transform: translateY(-2px);         /* §7.6 survol carte */
  box-shadow: var(--shadow-hover-soft);
}

.card-compact { padding: var(--space-3); }

/* Carte de contraste — fond Coffee Bean dans une section claire (conformité) */
.card-dark,
.card-contrast {
  background-color: var(--color-coffee-bean);
  border: 1px solid var(--color-border-dark);
  color: var(--color-white-smoke);
  border-radius: var(--radius-lg);
}


/* ─── STATUT « DISPONIBLE » (§9.4) — point vert + pulsation, jamais décoratif ─ */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-status);
  flex-shrink: 0;
}
.status-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot {
    animation: codesia-pulse 2.4s var(--ease-brand) infinite;
  }
  @keyframes codesia-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-status-halo) 70%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-status-halo) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-status-halo) 0%, transparent); }
  }
}


/* ─── UTILITY CLASSES ────────────────────────────────────────────────────── */

/* Accessibilité — visuellement masqué mais lu par les technologies d'assistance */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bg-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-fg-inverse);
}

/* Le « gradient de marque » est rendu en aplat Coffee Bean (§4.8) */
.bg-gradient {
  background: var(--gradient-brand);
  color: var(--color-fg-inverse);
}

/* Gradient bannière LinkedIn — SEUL gradient réel autorisé (§4.8) */
.bg-gradient-banner {
  background: var(--gradient-banner);
  color: var(--color-fg-inverse);
}

/* Opacités texte */
.text-secondary { color: var(--color-fg-secondary); }
.text-tertiary  { color: var(--color-fg-tertiary); }
.text-disabled  { color: var(--color-fg-disabled); }
.text-inverse   { color: var(--color-fg-inverse); }


/* ─── CONTAINER (§7.2) — max 1280px, padding-inline 80/48/24-16 ──────────── */

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

@media (max-width: 1023px) {
  .container { padding-inline: var(--padding-inline-mid); }
}
@media (max-width: 767px) {
  .container { padding-inline: var(--padding-inline-mobile); }
}
@media (max-width: 720px) {
  .container { padding-inline: var(--padding-inline-mobile-sm); }
}


/* ─── SECTION PADDING (§7.3) ─────────────────────────────────────────────── */

.section-pad { padding-block: var(--section-pad-desktop); }
@media (max-width: 767px) {
  .section-pad { padding-block: var(--section-pad-mobile); }
}


/* ─── ENTRÉE — révélation mot à mot (§7.4 hero / §9.3) ───────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
  }
  .reveal-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 700ms var(--ease-brand);
  }
  [data-revealed] .reveal-word > span { transform: translateY(0); }
}


/* ─── TYPOGRAPHY SPACING RULES ───────────────────────────────────────────── */

.prose h2 + p   { margin-top: 24px; }
.prose h3 + p   { margin-top: 16px; }
.prose p  + p   { margin-top: 16px; }
.prose p  + h2  { margin-top: 48px; }
.prose p  + h3  { margin-top: 32px; }
.prose h1 + .cta-group { margin-top: var(--gap-hero-cta); }
.cta-group { display: flex; gap: var(--gap-cta); flex-wrap: wrap; align-items: center; }


/* ─── REDUCED MOTION — neutralisation globale (§9.3) ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .header-cta:hover, .card-hover:hover, a.card:hover { transform: none; }
  .lang-toggle:hover { transform: none; }
}


/* ─── LANGUAGE TOGGLE (header) ───────────────────────────────────────────── */

.header-actions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 16px;
}
/* Header layout uses the natural justify-content: space-between from the
   page CSS (logo left, nav centred, actions right). */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  border: 1px solid rgba(241, 240, 240, 0.28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translateX(10px) scale(1);
  transition: transform 200ms ease, border-color 200ms ease;
}
.lang-toggle svg { display: block; width: 100%; height: 100%; }
.lang-toggle:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover { transform: translateX(10px) scale(1.08); border-color: rgba(241, 240, 240, 0.65); }
}
@media (max-width: 767px) {
  .header-actions { gap: 12px; }
}