/* ==========================================================================
   ePerformance — Design System
   assets/css/eperf.css

   Architecture en 3 couches :
     A. Contrat générateur  — jetons émis par agent-ia-web (compatibilité miroir)
     B. Jetons ePerformance  — noms historiques du site, conservés
     C. Thème               — ce que le bouton clair/sombre bascule

   Alias entre A et B en fin de bloc : un composant écrit selon le contrat du
   générateur fonctionne ici, et réciproquement.

   Accessibilité : tous les ratios de contraste sont validés WCAG AA.
   Voir docs/audit-initial.md §6.5 et docs/strategie-refonte.md §3.2.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   COUCHE A + B + C — JETONS
   ========================================================================== */

@layer tokens {

  /* --- Polices, auto-hébergées ----------------------------------------
     Servies depuis ce domaine plutôt que depuis Google Fonts :
       · aucune connexion tierce sur le chemin critique (LCP)
       · aucun appel à Google depuis le navigateur du visiteur
       · les fichiers arrivent avec le CSS, donc le repli ne dure qu'un instant
         et le décalage de mise en page disparaît
     Seul le sous-ensemble latin est conservé : il couvre tout le français,
     accents compris. Les sous-ensembles cyrillique et vietnamien étaient
     téléchargés pour rien à chaque visite.
     Précharger les deux graisses du premier écran (voir compose.py) :
     Cormorant 700 pour les titres, DM Sans 400 pour le corps. */

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

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

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

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

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

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

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

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

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

  :root {
    /* --- Couche A : contrat générateur (agent-ia-web) ------------------ */
    --primaire: #fdfcfa;
    --secondaire: #8a6f38;
    --accent: #8a6f38;
    --fond-clair: #fdfcfa;
    --fond-moyen: #f7f5f1;
    --fond-fonce: #16151a;
    --police-titres: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
    --police-corps: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, sans-serif;
    --arrondi-carte: 28px;
    --arrondi-bouton: 999px;
    --arrondi-bloc: 12px;
    --arrondi-input: 10px;
    --container-max: 1200px;
    --section-padding: 4rem 0;
    --gutter: 1.5rem;
    --transition: 300ms cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Couche B : jetons ePerformance --------------------------------- */
    /* Surfaces */
    --bg: #fdfcfa;
    --bg2: #f7f5f1;
    --card: #ffffff;
    --card2: #faf8f4;

    /* Texte — ratios mesurés sur --bg / --card2 */
    --text: #16151a;   /* 17,71:1 / 17,12:1 */
    --soft: #45424b;   /*  9,60:1 /  9,28:1 */
    --muted: #6a676f;  /*  5,41:1 /  5,23:1 */

    /* Accent or — assombri pour le fond clair (l'or d'origine échoue sur blanc) */
    --gold: #8a6f38;   /* 4,64:1 sur --bg */
    --gold2: #8f7238;  /* 4,42:1 sur --bg */
    --gold-bg: rgba(138, 111, 56, 0.07);
    --gold-border: rgba(138, 111, 56, 0.22);
    --gold-glow: rgba(138, 111, 56, 0.28);

    /* Bordures : --border est décoratif, --border-strong identifie un contrôle */
    --border: #e5e1d9;
    --border2: #d5cfc3;
    --border-strong: #8f8a7e;  /* 3,44:1 sur --card — requiert 3:1 (WCAG 1.4.11) */

    /* Texte sur remplissage */
    --on-gold: #ffffff;  /* blanc sur or = 4,76:1 */
    --on-wa: #0a0a0e;    /* sombre sur vert = 9,96:1 */

    /* WhatsApp */
    --wa: #25D366;
    --wa-text: #0f7a41;  /* 5,28:1 sur --bg */

    /* Sémantique */
    --red-border: rgba(180, 45, 45, 0.28);
    --red-text: #a8302f;
    --red-bg: rgba(180, 45, 45, 0.06);
    --green-border: rgba(20, 125, 70, 0.28);
    --green-text: #12703f;
    --green-bg: rgba(20, 125, 70, 0.06);

    /* Élévations — plus diffuses en clair qu'en sombre */
    --shadow-sm: 0 1px 2px rgba(22, 21, 26, 0.04), 0 1px 3px rgba(22, 21, 26, 0.06);
    --shadow-md: 0 4px 12px rgba(22, 21, 26, 0.06), 0 12px 28px rgba(22, 21, 26, 0.07);
    --shadow-lg: 0 12px 32px rgba(22, 21, 26, 0.08), 0 32px 64px rgba(22, 21, 26, 0.09);
    --shadow-gold: 0 6px 24px rgba(138, 111, 56, 0.14);

    /* Rayons — échelle reprise à l'identique de la charte historique */
    --r-sm: 12px;
    --r: 20px;
    --r-lg: 28px;
    --r-xl: 36px;
    --r-pill: 999px;

    /* Mise en page */
    --maxw: 1200px;
    --gutter-x: 24px;
    --reading: 68ch;

    /* Mouvement */
    --t-fast: 150ms;
    --t: 300ms;
    --t-slow: 600ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Grain de papier — singularité de marque, remplace les blobs animés
       génériques (voir audit §9 « AI-slop tells ») */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

    color-scheme: light;
  }

  /* --- Thème sombre : la charte historique, valeurs inchangées --------- */
  [data-theme='dark'] {
    --primaire: #08080c;
    --secondaire: #c9a96e;
    --accent: #c9a96e;
    --fond-clair: #08080c;
    --fond-moyen: #0c0c10;
    --fond-fonce: #edeae3;

    --bg: #08080c;
    --bg2: #0c0c10;
    --card: #101014;
    --card2: #14141a;

    --text: #edeae3;
    --soft: #b0aaa0;
    --muted: #8b8b96;   /* corrigé : #7a7a85 échouait AA sur --card2 (4,32:1) */

    --gold: #c9a96e;
    --gold2: #e2c07a;
    --gold-bg: rgba(201, 169, 110, 0.08);
    --gold-border: rgba(201, 169, 110, 0.22);
    --gold-glow: rgba(201, 169, 110, 0.4);

    --border: #1c1c22;
    --border2: #282830;
    --border-strong: #646470;  /* 3,25:1 sur --card — corrige le 1,35:1 d'origine */

    --on-gold: #0a0a0e;  /* 8,83:1 sur or */
    --on-wa: #0a0a0e;

    --wa: #25D366;
    --wa-text: #25D366;

    --red-border: rgba(220, 60, 60, 0.3);
    --red-text: #e07070;
    --red-bg: rgba(220, 60, 60, 0.12);
    --green-border: rgba(60, 180, 100, 0.3);
    --green-text: #6fcf8a;
    --green-bg: rgba(60, 180, 100, 0.1);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 8px 32px rgba(201, 169, 110, 0.15);

    color-scheme: dark;
  }
}

/* ==========================================================================
   RÉINITIALISATION ET SOCLE
   ========================================================================== */

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

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

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

  ul, ol { list-style: none; }

  :target { scroll-margin-top: 96px; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--police-corps);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* `clip` et non `hidden` : `overflow-x:hidden` crée un conteneur de
       défilement qui casse le position:sticky de l'en-tête. */
    overflow-x: clip;
  }

  /* Trame de fond : dégradé chaud très retenu + grain de papier.
     Remplace les deux blobs animés de 25 s du site d'origine. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(1100px 620px at 82% -8%, var(--gold-bg), transparent 62%),
      radial-gradient(900px 520px at 4% 4%, var(--gold-bg), transparent 58%);
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--grain);
    opacity: 0.028;
    mix-blend-mode: multiply;
  }

  [data-theme='dark'] body::after { mix-blend-mode: overlay; opacity: 0.05; }

  /* Le contenu doit passer au-dessus des deux couches de fond */
  body > * { position: relative; z-index: 1; }

  h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); font-weight: 700; }
  h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
  h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-family: var(--police-corps); font-weight: 600; letter-spacing: -0.01em; }
  h4 { font-size: 1.0625rem; font-family: var(--police-corps); font-weight: 600; }

  p { text-wrap: pretty; }

  /* Chiffres : alignement tabulaire et chiffres alignés (lining).
     Motif d'identité — la marque vend des ratios, les chiffres doivent se lire
     comme un instrument de mesure. On utilise la police de corps et non le
     serif d'affichage : Cormorant Garamond compose en chiffres elzéviriens,
     où « 0 » se lit comme un « o » — inacceptable pour une donnée chiffrée.
     Contraste voulu : serif pour la voix éditoriale, sans pour la donnée. */
  .num, .stat-num, .kpi-val, .plan-price, [data-count] {
    font-family: var(--police-corps);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
    letter-spacing: -0.02em;
  }

  ::selection { background: var(--gold); color: var(--on-gold); }

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

  /* L'anneau de focus est supprimé uniquement là où un style équivalent
     et visible le remplace (champs de formulaire). */
}

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter-x);
  }

  .container-narrow { max-width: 880px; }

  .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

  .section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

  /* Filet de section : hairline or + graduations.
     Détail d'identité (thème de la mesure), absent des templates génériques. */
  .section-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter-x);
  }

  .section-rule::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border) 22%, var(--gold-border) 78%, transparent);
  }

  .grid { display: grid; gap: 24px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .stack { display: flex; flex-direction: column; }
  .row { display: flex; align-items: center; }

  /* Empilement collant mobile — motif repris du générateur (« Chime »).
     Les cartes restent opaques pour masquer celle du dessous. */
  @media (max-width: 767px) {
    .stack-mobile > * {
      position: sticky;
      top: 72px;
      min-height: 62vh;
      background: var(--card);
    }
    .stack-mobile > *:nth-child(1) { z-index: 1; }
    .stack-mobile > *:nth-child(2) { z-index: 2; }
    .stack-mobile > *:nth-child(3) { z-index: 3; }
    .stack-mobile > *:nth-child(4) { z-index: 4; }
  }

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

  @media (max-width: 620px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    :root { --gutter-x: 18px; }
  }
}

/* ==========================================================================
   COMPOSANTS
   ========================================================================== */

@layer components {

  /* --- Lien d'évitement ------------------------------------------------ */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--gold);
    color: var(--on-gold);
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
  }
  .skip-link:focus { left: 0; }

  /* --- Sur-titre ------------------------------------------------------- */
  /* Sur-titre éditorial, pas badge marketing : un label espacé, sans fond
     ni bordure. La marge basse espace le titre qui suit — un sur-titre ne
     doit pas être une pastille collée au titre. */
  .eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 14px;
  }

  /* Quand le sur-titre suit un titre (cartouche, fin de section), il se
     place naturellement au-dessus sans marge parasite. */
  .eyebrow:first-child { margin-top: 0; }

  /* --- Boutons --------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--arrondi-bouton);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--t) var(--ease-out),
                border-color var(--t) var(--ease-out),
                color var(--t) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t) var(--ease-out);
  }

  .btn:active { transform: translateY(1px); }

  .btn-gold {
    background: var(--gold);
    color: var(--on-gold);
    box-shadow: var(--shadow-gold);
  }
  .btn-gold:hover { background: var(--gold2); }

  .btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
  }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

  .btn-wa {
    background: var(--wa);
    color: var(--on-wa);   /* corrige le blanc-sur-vert à 1,98:1 d'ebook.html */
  }

  .btn-ghost { background: var(--card); border-color: var(--border); color: var(--text); }
  .btn-ghost:hover { border-color: var(--gold-border); }

  .btn-block { width: 100%; }

  /* L'icône d'un bouton a une taille fixe. Sans cette règle, un <svg> sans
     attributs width/height s'étire à la taille de son contenu et gonfle le
     bouton : constaté à 86 px de côté, soit un bouton de 114 px de haut,
     et une icône invisible dans le header. flex-shrink: 0 évite qu'elle soit
     comprimée quand le texte est long. */
  .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* --- En-tête --------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t) var(--ease-out),
                background-color var(--t) var(--ease-out);
  }

  .site-header.is-scrolled {
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
  }

  /* Logo : deux images, une par thème, échangées par CSS sur data-theme.
     Un <picture> avec media="(prefers-color-scheme: dark)" ne fonctionne PAS :
     le thème du site est piloté par data-theme, pas par la préférence système —
     les deux seraient désynchronisés et le logo deviendrait invisible. */
  .logo { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
  .logo img { width: auto; height: 30px; }

  .logo-img-dark { display: none; }
  [data-theme='dark'] .logo-img-light { display: none; }
  [data-theme='dark'] .logo-img-dark { display: block; }

  /* Même mécanisme pour le logo du pied de page */
  .footer-logo { height: 25px; width: auto; }
  .footer-logo.logo-img-dark { display: none; }
  [data-theme='dark'] .footer-logo.logo-img-light { display: none; }
  [data-theme='dark'] .footer-logo.logo-img-dark { display: block; }

  @media (max-width: 480px) {
    .logo img { height: 26px; }
  }

  .logo-text {
    font-family: var(--police-titres);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .logo-sub {
    display: block;
    font-family: var(--police-corps);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
  }

  .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

  .nav a {
    position: relative;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--soft);
    transition: color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
  }
  .nav a:hover { color: var(--text); background: var(--card2); }
  .nav a[aria-current='page'] { color: var(--gold); }

  .header-actions { display: flex; align-items: center; gap: 10px; }

  /* --- Bouton de thème ------------------------------------------------- */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--soft);
    cursor: pointer;
    transition: border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
  }
  .theme-toggle:hover { border-color: var(--gold-border); color: var(--gold); }
  .theme-toggle svg { width: 18px; height: 18px; }
  .theme-toggle .icon-moon { display: none; }
  [data-theme='dark'] .theme-toggle .icon-sun { display: none; }
  [data-theme='dark'] .theme-toggle .icon-moon { display: block; }

  /* --- Menu mobile ----------------------------------------------------- */
  .nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text);
    cursor: pointer;
  }

  @media (max-width: 960px) {
    .nav-toggle { display: inline-flex; }
    .nav {
      position: fixed;
      inset: 72px 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      margin: 0;
      padding: 16px var(--gutter-x) 26px;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      transform: translateY(-12px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--t) var(--ease-out),
                  transform var(--t) var(--ease-out),
                  visibility var(--t);
    }
    .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav a { padding: 14px 12px; font-size: 1rem; }
    .header-actions .btn-desktop { display: none; }
  }

  /* --- Héros ----------------------------------------------------------- */
  .hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }

  .hero h1 { max-width: 20ch; }

  .hero h1 em {
    font-style: italic;
    color: var(--gold);
  }

  .lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--soft);
    max-width: 60ch;
  }

  /* --- Bandeau d'indicateurs ------------------------------------------ */
  .stat-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
  }

  .stat {
    background: var(--card);
    padding: 26px 22px;
    transition: background-color var(--t) var(--ease-out);
  }
  .stat:hover { background: var(--card2); }

  .stat-num {
    display: block;
    font-family: var(--police-titres);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
  }

  .stat-label {
    display: block;
    margin-top: 9px;
    font-size: 0.8125rem;
    /* --muted validé AA sur --card (5,55:1) — l'ancien #7a7a85 échouait à 4,47:1 */
    color: var(--muted);
  }

  @media (max-width: 720px) {
    .stat-band { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- Carte ----------------------------------------------------------- */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--arrondi-carte);
    padding: 28px;
    transition: border-color var(--t) var(--ease-out),
                box-shadow var(--t) var(--ease-out),
                transform var(--t) var(--ease-out);
  }

  .card-hover:hover {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }

  .card-title { font-size: 1.1875rem; font-weight: 600; margin-bottom: 9px; }
  .card-text { font-size: 0.9375rem; color: var(--soft); line-height: 1.6; }

  /* L'icône est seule, à même la carte : pas de pastille teintée. Une
     icône or dans un carré or teinté se lit comme une icône dans une
     teinte d'elle-même — le carré n'ajoute aucune information et affaiblit
     le contraste de l'icône. */
  .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--gold);
  }
  /* 28 px et non 21 : sans la pastille de 46 px qui la contenait,
     l'icône doit être plus grande pour porter autant. */
  .card-icon svg { width: 28px; height: 28px; }

  /* --- Illustration de carte ------------------------------------------- */
  /* Un instrument de mesure, pas un dessin : voir ADR-0003. Le conteneur
     porte la couleur de base, donc currentColor suit le thème ; la trame
     des tracés utilise --border. Aucune couleur nouvelle n'est introduite,
     et aucune animation : l'illustration est statique par décision. */
  .card-figure {
    display: block;
    margin: 0 0 18px;
    color: var(--gold);
  }

  .card-figure-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Sur une carte large, l'instrument garde sa taille de lecture : le
       viewBox est mis à l'échelle et centré, jamais étiré. */
    max-height: 180px;
  }

  /* Variante bandeau : cartes compactes (formules, article, pilier), où
     l'icône est conservée. Le bandeau occupe la largeur de la carte et
     ramène l'illustration à sa taille de lecture — un ornement de section,
     pas une vignette. */
  .card-figure--bandeau { margin-bottom: 16px; }
  .card-figure--bandeau .card-figure-svg { max-height: 96px; }

  .card-num {
    font-family: var(--police-titres);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: 12px;
  }

  .feature-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

  .feature-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--soft);
  }

  .feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 15px; height: 15px;
    margin-top: 4px;
    background: var(--gold);
    /* Coche dessinée en masque : suit la couleur du thème, contrairement aux
       data-URI à or codé en dur du site d'origine */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* --- Carte de tarif -------------------------------------------------- */
  .plan { position: relative; display: flex; flex-direction: column; }

  .plan.is-featured {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-gold);
  }

  .plan-badge {
    position: absolute;
    top: -13px;
    left: 28px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--gold);
    color: var(--on-gold);
    padding: 6px 13px;
    border-radius: var(--r-pill);
  }

  .plan-price {
    font-family: var(--police-titres);
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 14px 0 4px;
  }

  .plan-price-note { font-size: 0.8125rem; color: var(--muted); }

  .plan .btn { margin-top: auto; }

  /* --- Encadré --------------------------------------------------------- */
  .callout {
    border: 1px solid var(--gold-border);
    background: var(--gold-bg);
    border-radius: var(--r);
    padding: 22px 26px;
  }

  .callout strong { color: var(--gold); }

  /* --- Pages légales ---------------------------------------------------- */
  /* Marqueur de donnée manquante : doit rester voyant en clair comme en sombre,
     pour qu'aucune mention obligatoire ne parte en ligne par inadvertance. */
  .legal-todo {
    display: inline-block;
    padding: 1px 8px;
    border: 1px dashed var(--red-border);
    border-radius: var(--r-sm);
    background: var(--red-bg);
    color: var(--red-text);
    font-size: 0.9em;
    font-weight: 600;
  }

  .legal-warning {
    border-color: var(--red-border);
    background: var(--red-bg);
  }

  .legal-warning strong { color: var(--red-text); }

  /* --- FAQ ------------------------------------------------------------- */
  /* <details>/<summary> natifs : accessibles au clavier sans JS.
     Le blog utilise déjà cette implémentation ; le site principal la reprend. */
  .faq { border-top: 1px solid var(--border); }

  .faq details { border-bottom: 1px solid var(--border); }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    transition: color var(--t) var(--ease-out);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--gold); }

  .faq summary::after {
    content: '';
    flex-shrink: 0;
    width: 13px; height: 13px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--t) var(--ease-out);
  }

  .faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }

  .faq .faq-answer { padding: 0 0 22px; color: var(--soft); max-width: var(--reading); }

  /* --- Témoignage ------------------------------------------------------ */
  .quote {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--arrondi-carte);
    padding: 26px;
  }

  .quote-text { font-size: 1rem; line-height: 1.6; }

  .quote-text::before {
    content: '\201C';
    font-family: var(--police-titres);
    font-size: 2.4rem;
    line-height: 0;
    vertical-align: -0.32em;
    color: var(--gold);
    margin-right: 3px;
  }

  .quote-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .quote-avatar {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--gold);
  }

  .quote-name { font-size: 0.875rem; font-weight: 600; }
  .quote-role { font-size: 0.75rem; color: var(--muted); }

  /* --- Carte d'article ------------------------------------------------- */
  .post {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--arrondi-carte);
    overflow: hidden;
    transition: border-color var(--t) var(--ease-out),
                box-shadow var(--t) var(--ease-out),
                transform var(--t) var(--ease-out);
  }

  .post:hover { border-color: var(--gold-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }

  .post-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }

  .post-cat {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
  }

  .post-title {
    font-family: var(--police-titres);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.22;
    margin: 11px 0 9px;
  }

  .post-meta {
    margin-top: auto;
    padding-top: 16px;
    font-size: 0.75rem;
    /* --muted corrigé : l'ancien jeton échouait AA sur les cartes de blog */
    color: var(--muted);
  }

  /* --- Formulaire ------------------------------------------------------ */
  .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

  .field label { font-size: 0.875rem; font-weight: 600; }

  .field .req { color: var(--red-text); margin-left: 2px; }

  .field-hint { font-size: 0.75rem; color: var(--muted); }

  input[type='text'], input[type='email'], input[type='tel'],
  input[type='number'], input[type='search'], select, textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--card);
    color: var(--text);
    /* --border-strong : 3,44:1 en clair / 3,25:1 en sombre.
       Corrige la bordure #2a2a32 à 1,35:1 du formulaire de diagnostic. */
    border: 1px solid var(--border-strong);
    border-radius: var(--arrondi-input);
    transition: border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
  }

  input:hover, select:hover, textarea:hover { border-color: var(--gold); }

  input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-bg);
    outline: none;
  }

  textarea { resize: vertical; min-height: 116px; }

  .fieldset { border: 0; margin-bottom: 22px; }
  .fieldset legend { font-size: 0.875rem; font-weight: 600; margin-bottom: 11px; padding: 0; }

  .radio-group { display: flex; flex-direction: column; gap: 9px; }

  .radio-group label {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--arrondi-input);
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
  }

  .radio-group label:hover { border-color: var(--gold); background: var(--card2); }

  .radio-group input { width: auto; accent-color: var(--gold); }

  .radio-group label:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-bg);
  }

  .field-error {
    font-size: 0.8125rem;
    color: var(--red-text);
  }

  /* --- Pied de page ---------------------------------------------------- */
  .site-footer {
    margin-top: clamp(3rem, 7vw, 5rem);
    border-top: 1px solid var(--border);
    background: var(--bg2);
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 36px;
  }

  .footer-col h2 {
    font-family: var(--police-corps);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 15px;
  }

  .footer-col ul { display: flex; flex-direction: column; gap: 10px; }

  .footer-col a {
    font-size: 0.875rem;
    color: var(--soft);
    transition: color var(--t) var(--ease-out);
  }
  .footer-col a:hover { color: var(--gold); }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-block: 22px;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--muted);
  }

  @media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
  @media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
  }

  /* --- Fil d'Ariane ---------------------------------------------------- */
  .breadcrumb { font-size: 0.8125rem; color: var(--muted); padding-block: 18px; }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--border2); }
  .breadcrumb a { color: var(--soft); }
  .breadcrumb a:hover { color: var(--gold); }

  /* --- Bandeau CTA collant (mobile) ------------------------------------ */
  /* --- Bouton WhatsApp flottant ---------------------------------------
     Sur mobile, la barre .sticky-cta contient déjà WhatsApp : ce bouton
     n'apparaît donc qu'au-dessus de 720 px, là où il n'y a aujourd'hui
     aucun point de contact permanent.

     Position en bas à GAUCHE. Le widget chatbot occupera le bas à droite
     quand il arrivera : les deux cohabiteront sans se chevaucher, et il
     n'y aura rien à refaire ce jour-là.

     Tant que le bandeau cookies est ouvert, le bouton s'efface : le
     bandeau est une décision à prendre, le bouton une commodité. */
  .wa-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wa);
    color: var(--on-wa);
    box-shadow: var(--shadow-lg);
    transition: transform .18s ease;
  }
  .wa-float:hover { transform: translateY(-2px); }
  .wa-float:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  .wa-float svg { width: 26px; height: 26px; }

  @media (min-width: 721px) {
    .wa-float { display: flex; }
  }

  /* Le bandeau cookies a la priorité : le bouton s'efface tant qu'il est là. */
  body:has(.consent:not([hidden])) .wa-float { display: none; }

  @media print {
    .wa-float { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
  }

  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: none;
    gap: 10px;
    padding: 12px var(--gutter-x);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .sticky-cta .btn { flex: 1; }

  @media (max-width: 720px) {
    .sticky-cta { display: flex; }
    body { padding-bottom: 78px; }
  }

  /* --- Bandeau de consentement ---------------------------------------- */
  /* Ancré en bas, au-dessus du CTA collant mobile. Aucun traceur tiers
     ne se charge tant qu'un choix explicite n'a pas été exprimé. */
  .consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    background: var(--card);
    border-top: 1px solid var(--gold-border);
    box-shadow: var(--shadow-lg);
    padding: 20px var(--gutter-x) max(20px, env(safe-area-inset-bottom));
  }

  .consent[hidden] { display: none; }

  .consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--maxw);
    margin-inline: auto;
  }

  .consent-text { flex: 1 1 380px; }
  .consent-text p { font-size: 0.875rem; line-height: 1.55; }
  .consent-text p + p { margin-top: 6px; color: var(--soft); }
  .consent-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

  .consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .consent-actions .btn { min-height: 42px; padding: 11px 18px; font-size: 0.875rem; }

  .consent-detail {
    max-width: var(--maxw);
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .consent-detail[hidden] { display: none; }

  .consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--arrondi-input);
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 400;
  }
  .consent-row:hover { border-color: var(--gold-border); }
  .consent-row input { width: auto; margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
  .consent-row strong { display: block; font-size: 0.9375rem; margin-bottom: 3px; }
  .consent-row .field-hint { display: block; }
  .consent-row-locked { opacity: 0.72; cursor: default; }
  .consent-row-locked:hover { border-color: var(--border); }

  @media (max-width: 720px) {
    .consent { padding-bottom: 84px; }   /* laisse passer le CTA collant */
    .consent-actions .btn { flex: 1; }
  }

  /* --- Révélation mot par mot des titres ------------------------------ */
  /* Le découpage est fait par eperf.js, uniquement si le mouvement est
     autorisé : sans JS ou en mouvement réduit, le titre reste intact. */

  .split-line { display: block; }

  /* Le masque. Le padding-bottom compense la coupe des descendantes ;
     la marge négative annule son effet sur la hauteur de ligne. */
  .word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
  }

  .word {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 780ms var(--ease-out);
    /* Sans ceci, un mot long peut dépasser du masque pendant la transition */
    will-change: transform;
  }

  .words-in .word { transform: none; will-change: auto; }

  /* L'espace entre les mots est un vrai nœud texte dans le DOM (voir
     eperf.js) : un margin-left le rétablirait visuellement mais un lecteur
     d'écran lirait « Lesprix » d'un seul mot, et un copier-coller perdrait
     les espaces. On ne compense donc PAS en CSS. */

  @media (prefers-reduced-motion: reduce) {
    .word { transform: none !important; transition: none !important; }
  }


  /* --- Micro-interaction des cartes ----------------------------------- */
  /* `hover: hover` exclut les écrans tactiles, où un :hover reste collé
     après le tap. Sur mobile, aucune micro-interaction — le brief l'exige
     et c'est aussi ce qui évite une interface qui paraît figée. */
  @media (hover: hover) and (pointer: fine) {
    .card,
    .post,
    .plan,
    .quote {
      transition: transform var(--t) var(--ease-out),
                  box-shadow var(--t) var(--ease-out),
                  border-color var(--t) var(--ease-out);
    }

    .card:not(.no-lift):hover,
    .post:hover,
    .plan:not(.no-lift):hover,
    .quote:hover {
      transform: translateY(-4px);
      border-color: var(--gold-border);
      box-shadow: var(--shadow-md), 0 0 0 1px var(--gold-bg);
    }

    /* Les cartes de tarif ont déjà une ombre dorée : on la renforce
       plutôt que de la remplacer, pour ne pas aplatir la hiérarchie. */
    .plan.is-featured:hover {
      box-shadow: var(--shadow-lg), var(--shadow-gold);
    }
  }

  /* Un élément interactif au clavier doit signaler sa présence autant
     qu'au survol : sans cela, la micro-interaction serait inaccessible. */
  @media (hover: hover) and (pointer: fine) {
    .card:focus-within,
    .post:focus-within,
    .plan:focus-within {
      transform: translateY(-4px);
      border-color: var(--gold-border);
      box-shadow: var(--shadow-md), 0 0 0 1px var(--gold-bg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card:hover, .post:hover, .plan:hover, .quote:hover,
    .card:focus-within, .post:focus-within, .plan:focus-within {
      transform: none !important;
    }
  }


  /* --- Avertissements des documents légaux ---------------------------- */
  .legal-warning {
    border-color: var(--red-border);
    background: var(--red-bg);
  }
  .legal-warning strong { color: var(--red-text); }

  .legal-todo {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    color: var(--red-text);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
  }
}

/* ==========================================================================
   MOUVEMENT

   Révélation par IntersectionObserver, posée par assets/js/eperf.js.
   Règles : transform et opacity uniquement ; l'état final est l'état par
   défaut, donc le contenu reste lisible si le JS échoue.
   Correction du défaut d'origine : le <h1> n'est plus en opacity:0, ce qui
   bloquait le LCP de la page d'accueil.
   ========================================================================== */

@layer utilities {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
  }

  .reveal.is-visible { opacity: 1; transform: none; }

  /* Sans JS, tout est visible immédiatement */
  .no-js .reveal { opacity: 1; transform: none; }

  /* Décalages d'entrée en cascade */
  .reveal-delay-1 { transition-delay: 80ms; }
  .reveal-delay-2 { transition-delay: 160ms; }
  .reveal-delay-3 { transition-delay: 240ms; }

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

  .text-gold { color: var(--gold); }
  .text-muted { color: var(--muted); }
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: 0.5rem; }
  .mt-2 { margin-top: 1rem; }
  .mt-3 { margin-top: 1.5rem; }
  .mt-4 { margin-top: 2rem; }
  .mb-2 { margin-bottom: 1rem; }
  .mb-3 { margin-bottom: 1.5rem; }
  .mb-4 { margin-bottom: 2rem; }
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   Absent aujourd'hui sur 8 des 13 pages du site et sur tout le blog.
   Ici : global, et le contenu atteint directement son état final.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */

@media print {
  .site-header, .site-footer, .sticky-cta, .theme-toggle, .nav-toggle { display: none; }
  body::before, body::after { display: none; }
  body { background: #fff; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}