/* ==========================================================================
   ONE MOMENT SIGNATURE — Carnet du Niombato
   Système de design éditorial pour l'ADD.
   CSS moderne 2026 : cascade layers, OKLCH, container queries, :has(),
   scroll-driven animations, @starting-style, View Transitions.
   ========================================================================== */

@layer reset, tokens, base, layout, components, signature, dark-overrides, utilities;

/* ========================================================================
   @layer reset — strict minimum
   ======================================================================== */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; min-height: 100dvh; overflow-x: clip; }
    img, svg, video, picture { display: block; max-width: 100%; height: auto; }
    button, input, textarea, select { font: inherit; color: inherit; }
    button { background: none; border: 0; cursor: pointer; padding: 0; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    [hidden] { display: none !important; }
    .sr-only {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%);
        white-space: nowrap; border: 0;
    }
}

/* ========================================================================
   @layer tokens — système de design (OKLCH, échelle modulaire)
   Tous les composants ne piochent QUE ici. Zéro valeur en dur ailleurs.

   v3.11 — Architecture light-dark() :
     Une seule définition par token grâce à light-dark(LIGHT, DARK).
     Le moteur résout en fonction du color-scheme effectif sur :root.
       - [data-theme="light"] → color-scheme: only light → résout LIGHT
       - [data-theme="dark"]  → color-scheme: only dark  → résout DARK
       - [data-theme="auto"]  → color-scheme: light dark → suit l'OS
     Fini la duplication des palettes + le triple @media @supports.
   ======================================================================== */
@layer tokens {
    :root {
        /* Mode par défaut : suit l'OS. Sera ré-écrit ci-dessous par
           [data-theme="light/dark"] pour forcer une teinte. */
        color-scheme: light dark;

        /* ── COULEUR (OKLCH + light-dark() pour adaptativité) ─────────
           Note ambiance : la version sombre garde un fond chaud sépia
           (hue 70-85, légèrement plus de chroma 0.018) pour évoquer
           la lampe de chevet d'un carnet, pas un thème terminal froid. */

        /* ── MARQUE — couleurs STATIQUES (identique light/dark)
           v3.14.1 — Fix critique : adapter les brand colors entre modes
           cassait toutes les paires bg/text des boutons (ex. .btn--earth
           devenait terra-cotta sur sépia, texte muddy/illisible).
           Stratégie : la marque reste IDENTIQUE en clair et sombre (c'est
           l'identité visuelle), et on prévoit deux variantes parallèles :
            - brand-X-text → version ADAPTÉE pour usage en TEXTE sur
              surface neutre (lighter en dark pour rester lisible).
            - on-brand-* → couleur de texte garantie LISIBLE sur brand-X
              comme background (toujours la même valeur). */
        --brand-leaf:       oklch(0.56 0.14 142);
        --brand-leaf-deep:  oklch(0.46 0.14 142);
        --brand-leaf-soft:  color-mix(in oklch, var(--brand-leaf) 14%, transparent);

        --brand-sun:        oklch(0.78 0.16 76);
        --brand-sun-deep:   oklch(0.66 0.16 76);
        --brand-sun-soft:   color-mix(in oklch, var(--brand-sun) 20%, transparent);

        --brand-earth:      oklch(0.38 0.13 35);
        --brand-earth-deep: oklch(0.32 0.13 35);
        --brand-earth-soft: color-mix(in oklch, var(--brand-earth) 14%, transparent);

        /* ── BRAND VARIANTS pour usage en TEXTE (lighter en dark mode)
           Utilisés pour les liens, accents, active states… À NE PAS confondre
           avec --brand-X qui reste réservé aux BACKGROUNDS de boutons/badges. */
        --brand-earth-text: light-dark(oklch(0.38 0.13 35),  oklch(0.78 0.14 35));
        --brand-leaf-text:  light-dark(oklch(0.46 0.14 142), oklch(0.74 0.14 142));
        --brand-sun-text:   light-dark(oklch(0.56 0.16 76),  oklch(0.84 0.15 76));

        /* ── ON-BRAND — couleur de texte STATIQUE sur backgrounds brand
           Garantit la lisibilité quel que soit le thème (la marque ne flippe pas,
           donc le texte non plus). Dégradé spec :
            - on-brand-light  = cream (lisible sur deep bordeaux / leaf / leaf-deep)
            - on-brand-dark   = ink   (lisible sur sun / sun-soft jaune doré) */
        --on-brand-light:  oklch(0.97 0.012 85);
        --on-brand-dark:   oklch(0.18 0.012 85);

        /* Surfaces — la dark est warm-charcoal (hue 70, sépia léger),
           jamais 100 % noir : préserve la sensation papier/écritoire. */
        --bg-paper:    light-dark(oklch(0.97 0.012 85),       oklch(0.16 0.014 70));
        --bg-elev:     light-dark(oklch(1.00 0 0),            oklch(0.20 0.014 70));
        --bg-elev-2:   light-dark(oklch(0.99 0.006 85),       oklch(0.24 0.014 70));
        --bg-deep:     light-dark(oklch(0.18 0.012 85),       oklch(0.10 0.014 70));

        /* Textes — contrastes WCAG AAA visés. 13:1 en clair, 14:1 en dark. */
        --ink:         light-dark(oklch(0.18 0.012 85),       oklch(0.96 0.010 80));
        --ink-soft:    light-dark(oklch(0.45 0.008 85),       oklch(0.80 0.010 80));
        --ink-faint:   light-dark(oklch(0.65 0.006 85),       oklch(0.64 0.010 80));

        --line:        light-dark(
                          color-mix(in oklch, oklch(0.18 0.012 85) 14%, transparent),
                          color-mix(in oklch, oklch(1 0 0) 14%,           transparent)
                       );
        --line-strong: light-dark(
                          color-mix(in oklch, oklch(0.18 0.012 85) 28%, transparent),
                          color-mix(in oklch, oklch(1 0 0) 26%,           transparent)
                       );

        /* ── ÉLÉVATION adaptative ──────────────────────────────────
           Light : ombres ambiantes neutres (drop subtil).
           Dark  : halos chauds (mix sun + black) — donne la sensation
                  d'objets éclairés par une lampe, pas par un flash. */
        --shadow-1: light-dark(
            0 1px 2px oklch(0 0 0 / .06), 0 4px 16px oklch(0 0 0 / .04)
        ,
            0 1px 2px oklch(0 0 0 / .55), 0 4px 16px oklch(0 0 0 / .35)
        );
        --shadow-2: light-dark(
            0 8px 32px oklch(0 0 0 / .08)
        ,
            0 8px 28px oklch(0 0 0 / .50),
            0 0 0 1px color-mix(in oklch, oklch(1 0 0) 4%, transparent)
        );
        --shadow-3: light-dark(
            0 24px 64px oklch(0 0 0 / .12)
        ,
            0 24px 64px oklch(0 0 0 / .55),
            0 0 0 1px color-mix(in oklch, oklch(1 0 0) 6%, transparent)
        );
        /* Glow chaud pour signatures (boutons earth, header sticky, lightbox). */
        --glow-warm: light-dark(
            0 0 0 transparent
        ,
            0 0 24px color-mix(in oklch, oklch(0.84 0.15 76) 20%, transparent)
        );

        /* ── TREATMENTS adaptatifs ─────────────────────────────────
           Filtre image douci en dark (la lumière du jour fatigue
           l'œil sur fond sombre — on baisse brightness/saturation). */
        --image-filter: light-dark(none, brightness(0.92) saturate(0.95) contrast(1.02));
        --media-blend:  light-dark(normal, luminosity);  /* helper pour overlays */

        /* Backdrop blur du header — plus saturé en dark pour le punch. */
        --header-bg:    light-dark(
            color-mix(in oklch, oklch(0.97 0.012 85) 88%, transparent)
        ,
            color-mix(in oklch, oklch(0.16 0.014 70) 86%, transparent)
        );
        --header-saturate: light-dark(140%, 180%);

        /* Scrollbar tokens. */
        --scrollbar-thumb: light-dark(
            color-mix(in oklch, oklch(0.18 0.012 85) 26%, transparent)
        ,
            color-mix(in oklch, oklch(1 0 0) 22%, transparent)
        );
        --scrollbar-thumb-hover: light-dark(
            oklch(0.38 0.13 35),
            oklch(0.72 0.14 35)
        );

        /* Sélection texte. */
        --selection-bg: light-dark(
            color-mix(in oklch, oklch(0.78 0.16 76) 35%, transparent),
            color-mix(in oklch, oklch(0.68 0.14 35) 55%, transparent)
        );

        /* Focus ring adaptatif. */
        --focus-ring: light-dark(oklch(0.78 0.16 76), oklch(0.84 0.15 76));
        --focus-width: light-dark(2px, 2.5px);

        /* ── TYPOGRAPHIE ──────────────────────────────────────────── */
        --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
        --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", monospace;

        /* Échelle modulaire ratio 1.25 — fluides clamp(min, mid, max) */
        --step--1: clamp(0.83rem, 0.78rem + 0.25vw, 0.94rem);
        --step-0:  clamp(1.00rem, 0.93rem + 0.36vw, 1.19rem);
        --step-1:  clamp(1.25rem, 1.12rem + 0.65vw, 1.69rem);
        --step-2:  clamp(1.56rem, 1.34rem + 1.10vw, 2.41rem);
        --step-3:  clamp(1.95rem, 1.59rem + 1.79vw, 3.43rem);
        --step-4:  clamp(2.44rem, 1.88rem + 2.81vw, 4.89rem);
        --step-5:  clamp(3.05rem, 2.20rem + 4.26vw, 6.96rem);

        --leading-tight: 1.05;
        --leading-snug:  1.25;
        --leading-body:  1.6;
        --tracking-tight: -0.025em;
        --tracking-wide:   0.18em;

        /* ── RYTHME D'ESPACEMENT ──────────────────────────────────── */
        --space-3xs: 0.25rem;
        --space-2xs: 0.5rem;
        --space-xs:  0.75rem;
        --space-s:   1rem;
        --space-m:   1.5rem;
        --space-l:   2.5rem;
        --space-xl:  4rem;
        --space-2xl: 6.5rem;
        --space-3xl: 10rem;

        /* ── MOUVEMENT ────────────────────────────────────────────── */
        --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
        --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
        --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
        --dur-fast: 180ms;
        --dur-base: 320ms;
        --dur-slow: 640ms;

        /* ── FORMES (les ombres sont définies plus haut, light-dark) ── */
        --radius:    4px;
        --radius-md: 8px;
        --radius-lg: 16px;

        /* ── GRILLE ───────────────────────────────────────────────── */
        /* v3.14.8 — Container élargi de 1240px à 1620px pour éliminer
           les "barres vides" cream à gauche/droite sur les écrans larges
           (1920px+). Le contenu respire mieux sans atteindre l'effet
           "feuille A4 perdue au centre". Hero, header, footer suivent
           tous via la classe .rail. */
        --measure:   68ch;
        --container: 1620px;
        --rail:      max(1rem, calc((100vw - var(--container)) / 2));

        /* ── HEADER ───────────────────────────────────────────────── */
        --nav-h: clamp(64px, 8vh, 84px);

        /* ── UTILITAIRES TACTILES ─────────────────────────────────── */
        --touch: 44px;
    }

    /* Préférence mouvement réduit : neutralise toute durée */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --dur-fast: 0.01ms;
            --dur-base: 0.01ms;
            --dur-slow: 0.01ms;
        }
    }

    /* ── BASCULE EXPLICITE LIGHT/DARK ───────────────────────────
       L'utilisateur peut FORCER une teinte via le toggle du header.
       data-theme="light|dark|auto" est posé sur <html> par le script
       anti-FOUC + main.js. Le seul rôle de ces sélecteurs : verrouiller
       le color-scheme, ce qui pilote la résolution de light-dark() partout.
       Aucune redéfinition de palette nécessaire — DRY total. */

    :root[data-theme="light"] { color-scheme: only light; }
    :root[data-theme="dark"]  { color-scheme: only dark;  }
    /* [data-theme="auto"] hérite de "light dark" — suit l'OS. */

    /* ── FIX CRITIQUE (post-test live + v3.14.1) — surcharger les palette
       tokens WordPress (--wp--preset--color--*).

       theme.json génère :
         - :root { --wp--preset--color--paper: #FAF6EE; ... }  (palette statique)
         - body { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
         - @layer global-styles { a { color: var(--wp--preset--color--earth); } }

       Sans surcharge, body et liens RESTENT en valeurs claires en dark mode.

       Stratégie :
         1) On redéfinit les vars WP au niveau body avec nos tokens adaptifs.
         2) Pour `earth` spécifiquement, on utilise --brand-earth-text adaptatif
            (les liens du body doivent rester lisibles sur le fond — éclaircir
            le bordeaux en dark mode). Les BOUTONS, eux, utilisent --brand-earth
            (statique deep bordeaux) directement → la couleur de bg ne flippe pas. */
    body {
        --wp--preset--color--paper:      var(--bg-paper);
        --wp--preset--color--white:      var(--bg-elev);
        --wp--preset--color--ink:        var(--ink);
        --wp--preset--color--ink-soft:   var(--ink-soft);
        --wp--preset--color--leaf:       var(--brand-leaf-text);
        --wp--preset--color--leaf-deep:  var(--brand-leaf-deep);
        --wp--preset--color--sun:        var(--brand-sun-text);
        --wp--preset--color--earth:      var(--brand-earth-text);
        --wp--preset--color--earth-deep: var(--brand-earth-deep);
        --wp--preset--color--line:       var(--line);
    }

    /* ── FORÇAGE bg + color du body en dark mode.
       Les global-styles WP sont dans @layer global-styles ; nos rules sont
       dans @layer tokens (déclaré après). En principe nous gagnons par ordre
       de layer. En pratique on a vu des cas (cache LiteSpeed, plugin tiers,
       version WP) où le body restait cream. Ce !important est l'assurance
       finale : il s'applique uniquement quand l'utilisateur force le dark
       OU quand auto + OS sombre. */
    :root[data-theme="dark"] body,
    :root[data-theme="dark"] .editor-styles-wrapper {
        background-color: var(--bg-paper) !important;
        color: var(--ink) !important;
    }
    @media (prefers-color-scheme: dark) {
        :root[data-theme="auto"] body,
        :root[data-theme="auto"] .editor-styles-wrapper {
            background-color: var(--bg-paper) !important;
            color: var(--ink) !important;
        }
    }

    /* ── FALLBACK pour navigateurs sans light-dark()
       (Safari < 17.5, Firefox < 120, Chrome < 123). On bascule en mode
       dark via les classiques [data-theme="dark"] + media query auto. */
    @supports not (color: light-dark(white, black)) {
        :root[data-theme="dark"] {
            --brand-leaf: oklch(0.72 0.14 142); --brand-leaf-deep: oklch(0.82 0.14 142);
            --brand-sun:  oklch(0.84 0.15 76);  --brand-sun-deep:  oklch(0.74 0.16 76);
            --brand-earth:oklch(0.68 0.14 35);  --brand-earth-deep:oklch(0.78 0.14 35);
            --bg-paper:   oklch(0.16 0.014 70); --bg-elev:         oklch(0.20 0.014 70);
            --bg-elev-2:  oklch(0.24 0.014 70); --bg-deep:         oklch(0.10 0.014 70);
            --ink:        oklch(0.96 0.010 80); --ink-soft:        oklch(0.80 0.010 80);
            --ink-faint:  oklch(0.64 0.010 80);
            --line:        color-mix(in oklch, oklch(1 0 0) 14%, transparent);
            --line-strong: color-mix(in oklch, oklch(1 0 0) 26%, transparent);
            --shadow-1:    0 1px 2px oklch(0 0 0 / .55), 0 4px 16px oklch(0 0 0 / .35);
            --shadow-2:    0 8px 28px oklch(0 0 0 / .50);
            --shadow-3:    0 24px 64px oklch(0 0 0 / .55);
            --image-filter: brightness(0.92) saturate(0.95) contrast(1.02);
            --header-bg:    color-mix(in oklch, oklch(0.16 0.014 70) 86%, transparent);
            --header-saturate: 180%;
            --scrollbar-thumb:        color-mix(in oklch, oklch(1 0 0) 22%, transparent);
            --scrollbar-thumb-hover:  oklch(0.72 0.14 35);
            --selection-bg: color-mix(in oklch, oklch(0.68 0.14 35) 55%, transparent);
            --focus-ring:   oklch(0.84 0.15 76);
            color-scheme: dark;
        }
        @media (prefers-color-scheme: dark) {
            :root[data-theme="auto"] {
                --brand-leaf: oklch(0.72 0.14 142); --brand-leaf-deep: oklch(0.82 0.14 142);
                --brand-sun:  oklch(0.84 0.15 76);  --brand-sun-deep:  oklch(0.74 0.16 76);
                --brand-earth:oklch(0.68 0.14 35);  --brand-earth-deep:oklch(0.78 0.14 35);
                --bg-paper:   oklch(0.16 0.014 70); --bg-elev:         oklch(0.20 0.014 70);
                --bg-elev-2:  oklch(0.24 0.014 70); --bg-deep:         oklch(0.10 0.014 70);
                --ink:        oklch(0.96 0.010 80); --ink-soft:        oklch(0.80 0.010 80);
                --ink-faint:  oklch(0.64 0.010 80);
                --line:        color-mix(in oklch, oklch(1 0 0) 14%, transparent);
                --line-strong: color-mix(in oklch, oklch(1 0 0) 26%, transparent);
                --shadow-1:    0 1px 2px oklch(0 0 0 / .55), 0 4px 16px oklch(0 0 0 / .35);
                --shadow-2:    0 8px 28px oklch(0 0 0 / .50);
                --shadow-3:    0 24px 64px oklch(0 0 0 / .55);
                --image-filter: brightness(0.92) saturate(0.95) contrast(1.02);
                --header-bg:    color-mix(in oklch, oklch(0.16 0.014 70) 86%, transparent);
                --header-saturate: 180%;
                --scrollbar-thumb:        color-mix(in oklch, oklch(1 0 0) 22%, transparent);
                --scrollbar-thumb-hover:  oklch(0.72 0.14 35);
                --selection-bg: color-mix(in oklch, oklch(0.68 0.14 35) 55%, transparent);
                --focus-ring:   oklch(0.84 0.15 76);
                color-scheme: dark;
            }
        }
    }
}

/* ========================================================================
   @layer base — éléments HTML par défaut
   ======================================================================== */
@layer base {
    body {
        background: var(--bg-paper);
        color: var(--ink);
        font-family: var(--font-body);
        font-size: var(--step-0);
        line-height: var(--leading-body);
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-feature-settings: "ss01", "cv02", "cv11";
        /* v3.11 — transition douce du thème (300 ms ease-out).
           Désactivée pendant un View Transition pour éviter le double anim. */
        transition: background-color var(--dur-base) var(--ease-out),
                    color var(--dur-base) var(--ease-out);
    }
    /* Coupe les transitions pendant que View Transition prend la main. */
    :root.is-theme-switching body {
        transition: none;
    }

    /* ── Polish images : douceur en dark (saturation -5%, brightness -8%).
       Skip pour les SVG (logos vectoriels qui doivent rester fidèles) et
       les éléments marqués data-raw (médias où la fidélité prime). */
    img:not([data-raw], svg img),
    picture:not([data-raw]),
    video:not([data-raw]) {
        filter: var(--image-filter);
        transition: filter var(--dur-base) var(--ease-out);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 400;
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        text-wrap: balance;
        margin: 0 0 0.5em;
        color: var(--ink);
        font-variation-settings: "opsz" 144;
    }
    h1 { font-size: var(--step-5); font-weight: 300; }
    h2 { font-size: var(--step-4); font-weight: 400; }
    h3 { font-size: var(--step-3); font-weight: 500; line-height: var(--leading-snug); }
    h4 { font-size: var(--step-2); font-weight: 500; line-height: var(--leading-snug); }
    h5 { font-size: var(--step-1); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }
    h6 { font-size: var(--step-0); font-weight: 600; font-family: var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

    p {
        max-width: var(--measure);
        text-wrap: pretty;
        margin: 0 0 1em;
    }

    a {
        color: var(--brand-earth-text);
        transition: color var(--dur-fast) var(--ease-out);
    }
    a:hover { color: var(--brand-earth-text); }

    :focus-visible {
        outline: var(--focus-width) solid var(--focus-ring);
        outline-offset: 3px;
        border-radius: 2px;
        /* v3.11 — halo doux pour densifier le focus en dark mode. */
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--focus-ring) 18%, transparent);
        transition: outline-offset var(--dur-fast) var(--ease-out),
                    box-shadow      var(--dur-fast) var(--ease-out);
    }
    :focus:not(:focus-visible) { outline: none; }

    /* Sélection texte — adaptée par thème via --selection-bg. */
    ::selection {
        background: var(--selection-bg);
        color: var(--ink);
        text-shadow: none;
    }

    /* ── Scrollbar themée (WebKit + Firefox).
       Discrete en light (gris-encre 26 %), plus présente en dark (blanc 22 %),
       hover en brand-earth pour signature visuelle cohérente. */
    @supports selector(::-webkit-scrollbar) {
        ::-webkit-scrollbar { width: 12px; height: 12px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 999px;
            border: 3px solid var(--bg-paper);
            transition: background var(--dur-fast) var(--ease-out);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }
        ::-webkit-scrollbar-corner { background: transparent; }
    }
    html {
        scrollbar-color: var(--scrollbar-thumb) transparent;
        scrollbar-width: thin;
    }

    /* Skip link visible au focus uniquement */
    .skip-link {
        position: fixed;
        top: 0; left: 0;
        padding: 0.75rem 1.25rem;
        background: var(--brand-earth);
        color: var(--bg-paper);
        font-weight: 600;
        text-decoration: none;
        z-index: 9999;
        transform: translateY(-100%);
        transition: transform var(--dur-base) var(--ease-out);
    }
    .skip-link:focus { transform: translateY(0); }

    /* View Transitions — navigation fluide en amélioration progressive */
    @view-transition { navigation: auto; }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: var(--dur-slow);
        animation-timing-function: var(--ease-out);
    }

    /* ── v3.11 — Theme switch via View Transition (cercle d'éclat depuis
       le bouton toggle). JS pose --vt-x/--vt-y au clic puis appelle
       document.startViewTransition(). Les pseudos ci-dessous orchestrent
       le morph "lampe qui s'allume". */
    :root[data-vt-theme] {
        /* Désactive le crossfade par défaut pendant un swap de thème. */
    }
    :root[data-vt-theme] ::view-transition-old(root) {
        animation: none;
        z-index: 1;
    }
    :root[data-vt-theme] ::view-transition-new(root) {
        animation: oms-theme-reveal var(--dur-slow) var(--ease-out) forwards;
        z-index: 2;
        mix-blend-mode: normal;
    }
    @keyframes oms-theme-reveal {
        from {
            clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
        }
        to {
            clip-path: circle(160vmax at var(--vt-x, 50%) var(--vt-y, 50%));
        }
    }
    @media (prefers-reduced-motion: reduce) {
        :root[data-vt-theme] ::view-transition-new(root) {
            animation: none;
        }
    }

    /* Tables responsives */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Iframes / vidéos sans CLS */
    iframe, video { aspect-ratio: 16/9; width: 100%; }
}

/* ========================================================================
   @layer layout — grille, rail, conteneurs
   ======================================================================== */
@layer layout {
    .rail {
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: clamp(1rem, 4vw, 2rem);
    }

    .section {
        padding-block: var(--space-2xl);
    }
    .section--snug   { padding-block: var(--space-xl); }
    .section--ample  { padding-block: var(--space-3xl); }
    .section--paper  { background: var(--bg-paper); }
    .section--elev   { background: var(--bg-elev); }
    .section--ink    { background: var(--bg-deep); color: oklch(0.97 0.012 85); }
    .section--ink h1, .section--ink h2, .section--ink h3 { color: inherit; }

    /* Eyebrow — petite étiquette typographique */
    .eyebrow {
        display: inline-block;
        font-family: var(--font-body);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-soft);
        margin-bottom: var(--space-m);
    }
    .eyebrow::before {
        content: "";
        display: inline-block;
        width: 2rem; height: 1px;
        background: currentColor;
        vertical-align: middle;
        margin-right: 0.75em;
        transform: translateY(-2px);
    }

    /* Grille auto-fit basique */
    .grid {
        display: grid;
        gap: var(--space-m);
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    }
    .grid--2 { grid-template-columns: 1fr; gap: var(--space-l); }
    .grid--3 { grid-template-columns: 1fr; gap: var(--space-m); }

    @container (min-width: 640px) {
        .grid--2 { grid-template-columns: repeat(2, 1fr); }
        .grid--3 { grid-template-columns: repeat(2, 1fr); }
    }
    @container (min-width: 980px) {
        .grid--3 { grid-template-columns: repeat(3, 1fr); }
    }
    /* Fallback hors container queries */
    @media (min-width: 640px) {
        .grid--2 { grid-template-columns: repeat(2, 1fr); }
        .grid--3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 980px) {
        .grid--3 { grid-template-columns: repeat(3, 1fr); }
    }
}

/* ========================================================================
   @layer components — composants UI
   ======================================================================== */
@layer components {

    /* ── Header ──────────────────────────────────────────────────── */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        /* v3.11 — backdrop adaptatif (token --header-bg / --header-saturate).
           Plus saturé en dark pour donner du punch malgré la faible luminance. */
        background: var(--header-bg);
        backdrop-filter: saturate(var(--header-saturate)) blur(10px);
        -webkit-backdrop-filter: saturate(var(--header-saturate)) blur(10px);
        border-bottom: 1px solid transparent;
        transition: border-color var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-out),
                    background-color var(--dur-base);
    }
    /* Léger glow chaud sur le header en dark mode (signature lampe). */
    :root[data-theme="dark"] .site-header,
    :root[data-theme="auto"] .site-header {
        box-shadow: 0 1px 0 var(--line);
    }
    /* Scroll progress bar fine intégrée au header */
    .site-header__progress {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        transform-origin: left;
        background: linear-gradient(90deg, var(--brand-earth), var(--brand-sun) 60%, var(--brand-leaf));
        z-index: 1;
        transform: scaleX(var(--scroll-progress, 0));
    }
    @supports (animation-timeline: scroll()) {
        .site-header__progress {
            animation: header-progress linear;
            animation-timeline: scroll(root);
        }
        @keyframes header-progress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
    }
    .site-header:has(~ main:not(:first-of-type)),
    body:not(.is-home) .site-header,
    .site-header.is-scrolled {
        border-bottom-color: var(--line);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-m);
        min-height: var(--nav-h);
    }

    /* v3.14.24 — Logo officiel ADD : grappe feuilles + ADD géant + tagline
       en rouge italique stackée sur 3 lignes (fidèle à la maquette client).
       v3.14.46 — Bascule light/dark via data-theme. */
    .site-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        text-decoration: none;
        color: var(--ink);
    }

    /* ── Bascule logo light / dark v3.14.46 ────────────────────────
       L'image .oms-logo-img--dark n'est imprimée que si l'admin a défini
       un logo dark via le Customizer. Par défaut, on affiche la light
       et on cache la dark. Quand :root[data-theme="dark"] OU
       (data-theme="auto" + prefers dark), on inverse. */
    .oms-logo-img--dark { display: none !important; }

    :root[data-theme="dark"] .oms-logo-img--light { display: none !important; }
    :root[data-theme="dark"] .oms-logo-img--dark  { display: inline !important; }

    @media (prefers-color-scheme: dark) {
        :root[data-theme="auto"] .oms-logo-img--light { display: none !important; }
        :root[data-theme="auto"] .oms-logo-img--dark  { display: inline !important; }
    }

    /* Quand un Custom Logo est défini, la marque texte "ADD / Association…"
       est masquée côté template — pas besoin de la cacher en CSS. Le sélecteur
       suivant assure simplement que l'espacement reste propre. */
    .site-logo--has-custom { gap: 0.5rem; }
    /* v3.14.39 — Logo défaut réduit (52→40). Ajout du sélecteur .custom-logo pour
       que le Custom Logo WP (Customizer → Identité du site) suive la même taille. */
    .site-logo svg,
    .site-logo img,
    .site-logo .custom-logo { height: 40px; width: auto; flex-shrink: 0; }
    .site-logo__wordmark {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        line-height: 1;
    }
    .site-logo__name {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.04em;
        color: var(--ink);
        line-height: 0.85;
        font-variation-settings: "opsz" 144;
    }
    .site-logo__tag {
        font-family: var(--font-display);
        font-size: 0.62rem;
        font-weight: 600;
        font-style: italic;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.15;
        color: var(--brand-earth);   /* vrai rouge bordeaux fixe, comme la maquette */
        font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 1;
    }
    /* Override forcé : même en dark mode, le tag reste rouge pour respecter
       l'identité visuelle de la maquette. */
    :root[data-theme="dark"] .site-logo__tag,
    :root[data-theme="auto"] .site-logo__tag {
        color: #C84B4B;   /* terra-cotta visible sur fond sombre */
    }

    /* ── Menu desktop — STRETCH v3.14.3
       Le menu prend toute la largeur disponible entre logo (gauche) et
       actions (droite). Items distribués en space-evenly pour un rendu
       éditorial aéré (comme un magazine). flex:1 fait grandir le UL,
       justify-content centre les items dedans.
       Sur écran très large (≥ 1400px) on plafonne la largeur pour éviter
       que les items soient TROP espacés (look "perdu dans le vide"). */
    .site-nav { display: contents; }
    .site-nav__list {
        display: none;
        list-style: none;
        padding: 0; margin: 0;
        gap: clamp(var(--space-s), 2vw, var(--space-l));
        align-items: center;
    }
    @media (min-width: 980px) {
        .site-nav__list {
            display: flex;
            flex: 1;                          /* ← grandit pour remplir l'espace entre logo et actions */
            justify-content: center;          /* items centrés dans la zone disponible */
            max-width: 720px;                 /* plafond : évite l'éclatement sur très grand écran */
            margin-inline: auto;              /* recentre quand la zone disponible > max-width */
            padding-inline: var(--space-m);
        }
    }
    .site-nav__list a {
        display: inline-block;
        font-family: var(--font-body);
        font-size: 0.94rem;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        padding: 0.5rem 0;
        position: relative;
        min-height: var(--touch);
        display: inline-flex; align-items: center;
        white-space: nowrap;                  /* évite que "Domaines d'intervention" wrap */
    }
    .site-nav__list a::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        bottom: 0.25rem;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--dur-base) var(--ease-out);
    }
    .site-nav__list a:hover::after,
    .site-nav__list a.is-active::after {
        transform: scaleX(1);
        transform-origin: left;
    }
    .site-nav__list a.is-active,
    .site-nav__list .current-menu-item > a,
    .site-nav__list .current_page_item > a {
        color: var(--brand-earth-text);
        font-style: italic;
        font-weight: 500;
        font-family: var(--font-display);
        font-size: 1.02rem;
        letter-spacing: -0.01em;
    }
    .site-nav__list .current-menu-item > a::after,
    .site-nav__list .current_page_item > a::after {
        transform: scaleX(1);
        transform-origin: left;
        background: var(--brand-earth);
    }

    /* CTA "Faire un don" du header — icône cœur subtilement animée */
    .header-cta { padding: 0.7rem 1.25rem; gap: 0.4rem; }
    .header-cta svg { transition: transform var(--dur-base) var(--ease-back); }
    .header-cta:hover svg { transform: scale(1.15) rotate(-6deg); }

    /* Mobile menu — eyebrow + contact bloc */
    .site-nav-mobile__eyebrow {
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-m);
    }
    .site-nav-mobile__list {
        list-style: none; padding: 0; margin: 0 0 var(--space-xl);
    }
    .site-nav-mobile__cta {
        display: flex; flex-direction: column;
        gap: var(--space-s);
        padding-bottom: var(--space-l);
        border-bottom: 1px solid var(--line);
        margin-bottom: var(--space-m);
    }
    .site-nav-mobile__contact {
        font-size: 0.88rem;
        color: var(--ink-soft);
        line-height: 1.6;
    }
    .site-nav-mobile__contact p { margin: 0 0 0.2rem; }

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

    /* ── Toggle thème v3.11 — 3 états visuels morph (sun · moon · auto)
       Architecture : 3 SVG empilés en absolute, opacité + transform animés.
       Indicateur de mode : ring de progression sur 360° divisé en 3.
       Interaction : hover = halo sun, active = scale-down, focus = ring focus.
       Spec a11y : button rond ≥ 44 px, aria-label dynamique côté JS. */
    .theme-toggle {
        --tg-size: var(--touch);
        position: relative;
        width: var(--tg-size); height: var(--tg-size);
        border-radius: 999px;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--ink);
        background: transparent;
        cursor: pointer;
        overflow: visible;
        transition: color var(--dur-fast),
                    background var(--dur-fast),
                    transform var(--dur-base) var(--ease-back);
    }
    /* Ring décoratif de fond — légèrement visible, dense en hover. */
    .theme-toggle::before {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        border: 1px solid var(--line);
        transition: border-color var(--dur-fast) var(--ease-out),
                    transform     var(--dur-base) var(--ease-out);
        pointer-events: none;
    }
    /* Indicateur de mode : arc cyclique qui tourne (light=0°, dark=120°, auto=240°) */
    .theme-toggle::after {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--tg-arc-from, 0deg),
            var(--brand-sun) 0deg,
            var(--brand-sun) 8deg,
            transparent 8deg 360deg
        );
        opacity: 0.6;
        transition: --tg-arc-from var(--dur-base) var(--ease-out),
                    opacity        var(--dur-fast);
        pointer-events: none;
        /* Mask : ne laisse voir QUE l'anneau, pas le centre. */
        -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%);
                mask: radial-gradient(circle, transparent 50%, #000 52%);
    }
    /* @property pour interpoler l'angle conique (sinon saut brutal). */
    @property --tg-arc-from {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
    /* Mode actif → angle du tick */
    :root[data-theme="light"] .theme-toggle { --tg-arc-from: -8deg; }
    :root[data-theme="dark"]  .theme-toggle { --tg-arc-from: 112deg; }
    :root[data-theme="auto"]  .theme-toggle { --tg-arc-from: 232deg; }

    .theme-toggle:hover {
        color: var(--brand-sun);
        background: color-mix(in oklch, var(--brand-sun) 10%, transparent);
        transform: rotate(8deg);
    }
    .theme-toggle:hover::before { border-color: var(--brand-sun); }
    .theme-toggle:hover::after  { opacity: 1; }
    .theme-toggle:active {
        transform: scale(0.92) rotate(0deg);
        transition-duration: 80ms;
    }
    .theme-toggle:focus-visible {
        outline: var(--focus-width) solid var(--focus-ring);
        outline-offset: 4px;
    }

    /* Les 3 icônes : empilées, morph croisé. */
    .theme-toggle__icon {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 18px; height: 18px;
        opacity: 0;
        transform: rotate(-90deg) scale(0.6);
        transition: opacity var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
        pointer-events: none;
    }
    /* light → sun, dark → moon, auto → "A" stylisé */
    :root[data-theme="light"] .theme-toggle__sun,
    :root:not([data-theme]) .theme-toggle__sun {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    :root[data-theme="dark"] .theme-toggle__moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    :root[data-theme="auto"] .theme-toggle__auto {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    /* Fallback : si l'icône auto n'existe pas dans le DOM, on montre sun OU moon
       selon prefers-color-scheme (legacy markup). */
    :root[data-theme="auto"]:not(:has(.theme-toggle__auto)) .theme-toggle__sun {
        opacity: 1; transform: rotate(0deg) scale(1);
    }
    @media (prefers-color-scheme: dark) {
        :root[data-theme="auto"]:not(:has(.theme-toggle__auto)) .theme-toggle__sun {
            opacity: 0; transform: rotate(-90deg) scale(0.6);
        }
        :root[data-theme="auto"]:not(:has(.theme-toggle__auto)) .theme-toggle__moon {
            opacity: 1; transform: rotate(0deg) scale(1);
        }
    }
    /* ── Language switcher v3.14 — segmented pill ────────────────────
       Pattern : 3 (ou plus) liens chips dans un container "pill" arrondi,
       indicateur de fond `::before` qui glisse vers l'item actif via la
       variable CSS `--lang-idx` posée côté PHP. Aucun JS requis.
       Dark/light auto via tokens. Mobile : compact, scrollable si besoin.

       Markup natif :
         <div class="lang-switcher lang-switcher--native"
              data-lang-switcher
              style="--lang-count:3; --lang-idx:0;">
           <span class="lang-switcher__pill"></span>
           <a class="lang-switcher__item is-active">…</a>
           <a class="lang-switcher__item">…</a>
           <a class="lang-switcher__item">…</a>
         </div>

       Markup Polylang/WPML : on garde une version simple compatible
       (chips sans pill animé, mais même couleur active). */

    .lang-switcher {
        display: inline-flex;
        align-items: center;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1;
        gap: 0.15rem;
    }

    /* ── Variante NATIVE (avec pill coulissant) ─────────────────── */
    .lang-switcher--native {
        position: relative;
        padding: 3px;
        background: color-mix(in oklch, var(--ink) 6%, transparent);
        border: 1px solid var(--line);
        border-radius: 999px;
        gap: 0;
        isolation: isolate; /* nouveau stacking context pour le z-index local */
        /* GRID : chaque segment occupe exactement 1fr → largeurs égales.
           Permet au pill de s'aligner parfaitement avec n'importe quel item. */
        display: grid;
        grid-template-columns: repeat(var(--lang-count, 3), 1fr);
    }
    /* Indicateur coulissant — translate ciblé via --lang-idx (0, 1, 2…).
       Le pill mesure 1/N de la zone CONTENT (= container - 2×3px de padding)
       puis translate exactement de sa propre largeur par cran. */
    .lang-switcher__pill {
        position: absolute;
        top: 3px;
        left: 3px;
        /* 100% sur un absolute = padding-box du parent. On retire les 6px de
           padding inline pour aligner le pill sur la zone content réelle. */
        width: calc((100% - 6px) / var(--lang-count, 3));
        height: calc(100% - 6px);
        background: var(--bg-paper);
        border-radius: 999px;
        box-shadow: var(--shadow-1);
        transform: translateX(calc(var(--lang-idx, 0) * 100%));
        transition: transform var(--dur-base) var(--ease-back),
                    background var(--dur-fast);
        z-index: 0;
        pointer-events: none;
    }

    .lang-switcher__item {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 30px;
        padding: 0 0.7rem;
        color: var(--ink-faint);
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 999px;
        cursor: pointer;
        transition: color var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }
    .lang-switcher__item:hover {
        color: var(--ink);
    }
    .lang-switcher__item:active {
        transform: scale(0.94);
    }
    .lang-switcher__item.is-active {
        color: var(--brand-earth-text);
    }
    .lang-switcher__item:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .lang-switcher__code {
        display: inline-block;
        font-feature-settings: "tnum";
    }

    /* ── Variante PLUGIN (Polylang / WPML) ────────────────────────── */
    .lang-switcher--plugin {
        gap: 0.4rem;
    }
    .lang-switcher--plugin a,
    .lang-switcher--plugin .lang-switcher__item {
        padding: 0.35rem 0.65rem;
        color: var(--ink-soft);
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 999px;
        transition: color var(--dur-fast), background var(--dur-fast);
    }
    .lang-switcher--plugin a:hover,
    .lang-switcher--plugin .current-lang a,
    .lang-switcher--plugin .lang-switcher__item.is-active {
        color: var(--brand-earth-text);
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
    }

    /* ── Liste Polylang : ul/li → flatten ─────────────────────────── */
    .lang-switcher--plugin ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-flex;
        gap: 0.4rem;
    }
    .lang-switcher--plugin li { margin: 0; }

    /* Mobile : compact, légère réduction de padding. */
    @media (max-width: 640px) {
        .lang-switcher {
            font-size: 0.72rem;
        }
        .lang-switcher__item {
            min-width: 32px;
            min-height: 28px;
            padding: 0 0.5rem;
        }
    }

    /* Menu mobile */
    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        width: var(--touch); height: var(--touch);
        align-items: center; justify-content: center;
    }
    .menu-toggle__bar {
        display: block;
        width: 22px; height: 1.5px;
        background: currentColor;
        transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
    }
    @media (min-width: 980px) { .menu-toggle { display: none; } }
    /* :has() — transformation hamburger → croix sans JS de toggle de classe */
    body:has(#site-nav-mobile[aria-expanded="true"]) .menu-toggle__bar:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    body:has(#site-nav-mobile[aria-expanded="true"]) .menu-toggle__bar:nth-child(2) { opacity: 0; }
    body:has(#site-nav-mobile[aria-expanded="true"]) .menu-toggle__bar:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .site-nav-mobile {
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        background: var(--bg-paper);
        padding: var(--space-l) var(--rail);
        overflow-y: auto;
        translate: 100% 0;
        transition: translate var(--dur-base) var(--ease-out);
        z-index: 49;
        visibility: hidden;
    }
    .site-nav-mobile[aria-expanded="true"] {
        translate: 0 0;
        visibility: visible;
    }
    .site-nav-mobile ul {
        list-style: none;
        padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: var(--space-2xs);
    }
    .site-nav-mobile a {
        display: block;
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
        padding: var(--space-s) 0;
        text-decoration: none;
        color: var(--ink);
        border-bottom: 1px solid var(--line);
    }
    @media (min-width: 980px) {
        .site-nav-mobile { display: none; }
        .menu-toggle { display: none; }
    }

    /* ── Boutons ─────────────────────────────────────────────────── */
    /* FIX post-test live : white-space:nowrap pour éviter wrap des labels
       courts ("Faire un don" sur 2 lignes dans le header trop étroit) */
    .btn,
    a.btn,
    button.btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.95rem 1.75rem;
        min-height: var(--touch);
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-decoration: none;
        border-radius: 999px;
        cursor: pointer;
        transition: transform var(--dur-fast) var(--ease-out),
                    background var(--dur-fast),
                    color var(--dur-fast),
                    box-shadow var(--dur-base);
        touch-action: manipulation;
        user-select: none;
        white-space: nowrap;            /* FIX wrap des labels courts */
        line-height: 1.2;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }

    /* ── BOUTONS COLORÉS — v3.14.1 fix lisibilité ───────────────────
       Règle d'or : la couleur de texte d'un bouton brand est STATIQUE
       (--on-brand-light = cream, --on-brand-dark = ink). Elle ne suit
       PAS le thème, donc elle reste cohérente avec le bg brand statique.
       Les sélecteurs `a.btn--earth, button.btn--earth` battent la règle
       theme.json `a { color: var(--wp--preset--color--earth) }` par
       spécificité (0,1,1 vs 0,0,1). Le `!important` sur color est une
       ceinture+bretelles contre les overrides tardifs (LiteSpeed CSS
       combine/minify, plugins concurrents, etc.). */
    .btn--earth,
    a.btn--earth,
    button.btn--earth   {
        background: var(--brand-earth);
        color: var(--on-brand-light) !important;
    }
    .btn--earth:hover,
    a.btn--earth:hover,
    button.btn--earth:hover {
        background: var(--brand-earth-deep);
        color: var(--on-brand-light) !important;
        box-shadow: 0 8px 24px color-mix(in oklch, var(--brand-earth) 30%, transparent);
    }

    .btn--leaf,
    a.btn--leaf,
    button.btn--leaf    {
        background: var(--brand-leaf);
        color: var(--on-brand-light) !important;
    }
    .btn--leaf:hover,
    a.btn--leaf:hover,
    button.btn--leaf:hover {
        background: var(--brand-leaf-deep);
        color: var(--on-brand-light) !important;
    }

    /* Bouton SUN — bg jaune doré, donc texte SOMBRE statique (--on-brand-dark) */
    .btn--sun,
    a.btn--sun,
    button.btn--sun     {
        background: var(--brand-sun);
        color: var(--on-brand-dark) !important;
    }
    .btn--sun:hover,
    a.btn--sun:hover,
    button.btn--sun:hover {
        background: var(--brand-sun-deep);
        color: var(--on-brand-dark) !important;
    }

    /* Bouton INK — inversion totale entre light/dark (volontaire).
       En light : ink bg = dark + bg-paper text = cream → carte sombre.
       En dark  : ink bg = blanc + bg-paper text = sépia → carte claire.
       C'est l'intention design : un bouton "carte inversée". */
    .btn--ink,
    a.btn--ink,
    button.btn--ink     {
        background: var(--ink);
        color: var(--bg-paper) !important;
    }
    .btn--ink:hover,
    a.btn--ink:hover    {
        background: oklch(from var(--ink) calc(l + 0.08) c h);
        color: var(--bg-paper) !important;
    }

    .btn--ghost,
    a.btn--ghost,
    button.btn--ghost   {
        background: transparent;
        color: var(--ink) !important;
        border: 1px solid var(--line-strong);
    }
    .btn--ghost:hover,
    a.btn--ghost:hover  {
        border-color: var(--ink);
        color: var(--ink) !important;
    }

    .btn--link,
    a.btn--link,
    button.btn--link    {
        background: transparent;
        padding: 0.5rem 0;
        color: var(--ink) !important;
        border-radius: 0;
    }

    /* ── v3.14.4 — NUCLEAR OVERRIDE pour boutons brand ─────────────
       Garde-fou absolu : si WordPress 6.x injecte `.wp-element-button`
       (selector spécifique pour les boutons block-style), si LiteSpeed
       minifie/combine le CSS et drop quelques !important, si un plugin
       tiers injecte du CSS plus tard, ces règles avec sélecteur ATTRIBUT
       gagnent par spécificité (0,2,0) ET !important.

       Pattern : on cible TOUT élément ayant la classe brand button via
       [class~="..."], qui matche n'importe quel élément (a, button, input,
       div) avec cette classe parmi ses classes. */
    html body [class~="btn--earth"] {
        background-color: var(--brand-earth) !important;
        color: var(--on-brand-light) !important;
        -webkit-text-fill-color: var(--on-brand-light) !important; /* iOS Safari trick */
    }
    html body [class~="btn--earth"]:hover {
        background-color: var(--brand-earth-deep) !important;
    }
    html body [class~="btn--leaf"] {
        background-color: var(--brand-leaf) !important;
        color: var(--on-brand-light) !important;
        -webkit-text-fill-color: var(--on-brand-light) !important;
    }
    html body [class~="btn--leaf"]:hover {
        background-color: var(--brand-leaf-deep) !important;
    }
    html body [class~="btn--sun"] {
        background-color: var(--brand-sun) !important;
        color: var(--on-brand-dark) !important;
        -webkit-text-fill-color: var(--on-brand-dark) !important;
    }
    html body [class~="btn--sun"]:hover {
        background-color: var(--brand-sun-deep) !important;
    }
    /* SVG icons inside brand buttons must follow the text color too. */
    html body [class~="btn--earth"] svg,
    html body [class~="btn--leaf"]  svg { fill: var(--on-brand-light) !important; }
    html body [class~="btn--sun"]   svg { fill: var(--on-brand-dark)  !important; }
    .btn--link::after {
        content: "→";
        margin-left: 0.4rem;
        transition: transform var(--dur-fast) var(--ease-out);
    }
    .btn--link:hover::after { transform: translateX(4px); }

    .btn--lg { padding: 1.1rem 2.25rem; font-size: 1rem; }
    .btn--block { display: flex; width: 100%; white-space: normal; }

    /* ── Cartes ──────────────────────────────────────────────────── */
    .card {
        background: var(--bg-elev);
        container-type: inline-size;
        display: flex; flex-direction: column;
        overflow: hidden;
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2);
    }
    .card__media {
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--bg-paper);
    }
    .card__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform var(--dur-slow) var(--ease-out);
    }
    .card:hover .card__media img { transform: scale(1.03); }
    .card__body {
        padding: var(--space-m);
        display: flex; flex-direction: column;
        flex: 1;
        gap: var(--space-2xs);
    }
    .card__category {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-leaf-text);
    }
    .card__title {
        font-size: var(--step-1);
        font-weight: 500;
        line-height: var(--leading-snug);
        margin: 0;
    }
    .card__title a { color: var(--ink); text-decoration: none; }
    .card__title a:hover { color: var(--brand-earth-text); }
    .card__excerpt {
        font-size: 0.95rem;
        color: var(--ink-soft);
        max-width: none;
        flex: 1;
    }
    .card__meta {
        display: flex; gap: var(--space-s); flex-wrap: wrap;
        font-size: 0.85rem;
        color: var(--ink-faint);
    }

    /* ── Formulaires ─────────────────────────────────────────────── */
    .form {
        display: grid;
        gap: var(--space-m);
        max-width: 720px;
    }
    .form__row {
        display: grid; gap: var(--space-m);
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
        .form__row { grid-template-columns: 1fr 1fr; }
    }
    .field {
        display: flex; flex-direction: column;
        gap: 0.4rem;
    }
    .field label, .field legend {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--ink);
    }
    .field .req { color: var(--brand-earth-text); margin-left: 0.2em; }
    /* v3.14.60 — Fix CRITIQUE : exclure radio + checkbox du styling text-like
       qui posait appearance:none + width:100% + padding → ce qui transformait
       les radios en grosses boîtes vides sans état :checked visible. */
    .field input:not([type="radio"]):not([type="checkbox"]),
    .field select,
    .field textarea {
        width: 100%;
        min-height: var(--touch);
        padding: 0.85rem 1rem;
        font-size: 16px; /* anti-zoom iOS */
        border: 1px solid var(--line-strong);
        background: var(--bg-elev);
        color: var(--ink);
        border-radius: var(--radius);
        appearance: none;
        -webkit-appearance: none;
        transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    }
    .field input:not([type="radio"]):not([type="checkbox"]):focus,
    .field select:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--brand-leaf-text);
        box-shadow: 0 0 0 3px var(--brand-leaf-soft);
    }
    .field textarea { resize: vertical; min-height: 140px; line-height: var(--leading-body); }
    .field__hint { font-size: 0.82rem; color: var(--ink-soft); }

    /* v3.14.60 — Radio + checkbox : style natif explicite, accent-color
       pour le dot/check coloré ADD. Plus de bouton/box parasité. */
    .field input[type="radio"],
    .field input[type="checkbox"],
    .radio-inline input[type="radio"],
    .radio-inline input[type="checkbox"] {
        appearance: auto !important;
        -webkit-appearance: auto !important;
        width: 20px !important;
        height: 20px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        accent-color: var(--brand-earth-text);
        flex-shrink: 0;
        cursor: pointer;
    }
    .field input[type="radio"]:focus-visible,
    .field input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--brand-earth-text);
        outline-offset: 2px;
        box-shadow: none;
    }
    .radio-inline {
        display: inline-flex; align-items: center; gap: 0.6rem;
        margin-right: 1.2rem; margin-top: 0.5rem;
        font-weight: 500; cursor: pointer;
        user-select: none;
    }
    .radio-inline:hover { color: var(--brand-earth-text); }
    .hp { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; }

    /* Alertes */
    .alert {
        padding: var(--space-s) var(--space-m);
        border-radius: var(--radius);
        border-left: 3px solid;
        background: var(--bg-elev);
    }
    .alert--ok    { border-color: var(--brand-leaf-text); background: color-mix(in oklch, var(--brand-leaf) 8%, var(--bg-elev)); }
    .alert--error { border-color: var(--brand-earth-text); background: color-mix(in oklch, var(--brand-earth) 8%, var(--bg-elev)); }

    /* ── PRE-FOOTER : Manifeste pleine page ──────────────────────── */
    .manifest {
        padding-block: var(--space-3xl);
        background:
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 8%, transparent) 0%, transparent 60%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-leaf) 8%, transparent) 0%, transparent 60%),
            var(--bg-paper);
        border-block: 1px solid var(--line);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    /* Petit guillemet décoratif en arrière-plan */
    .manifest::before {
        content: "“";
        position: absolute;
        top: -2rem; left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-display);
        font-size: clamp(18rem, 30vw, 28rem);
        color: var(--brand-sun);
        opacity: 0.06;
        line-height: 0.8;
        pointer-events: none;
        z-index: 0;
    }
    .manifest__inner {
        position: relative;
        max-width: 30ch;
        margin-inline: auto;
    }
    .manifest__eyebrow {
        display: inline-flex; align-items: center; gap: 0.75rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-l);
    }
    .manifest__eyebrow-line {
        display: inline-block;
        width: 2.5rem; height: 1px;
        background: currentColor;
    }
    .manifest__quote {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(1.8rem, 4vw, 3.2rem);
        line-height: 1.15;
        color: var(--ink);
        margin: 0 0 var(--space-xl);
        text-wrap: balance;
        letter-spacing: -0.015em;
        font-variation-settings: "opsz" 144, "SOFT" 50;
    }
    .manifest__quote em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 400;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        display: inline-block;
    }
    .manifest__actions {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--space-s) var(--space-m);
    }

    /* ── Footer ──────────────────────────────────────────────────── */
    /* v3.14.9 — Footer + pre-footer manifeste : full-bleed sur grand écran.
       Override .rail max-width quand .rail est utilisée DIRECTEMENT dans
       <footer> ou <.manifest>. Padding-inline fluide cohérent avec les
       heroes (clamp 1.5rem → 6rem). Plus de bandes vides cream sur 1920px+. */
    .site-footer > .rail,
    .manifest > .rail {
        max-width: none;
        padding-inline: clamp(1.5rem, 5vw, 6rem);
    }
    .site-footer {
        background: var(--bg-deep);
        color: oklch(0.92 0.012 85);
        padding-top: var(--space-2xl);
    }

    /* Brand lock-up en tête de footer */
    .site-footer__brand {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
        align-items: center;
        padding-bottom: var(--space-xl);
        margin-bottom: var(--space-xl);
        border-bottom: 1px solid oklch(1 0 0 / 0.1);
    }
    @media (min-width: 720px) {
        .site-footer__brand { grid-template-columns: 1fr 1.4fr; gap: var(--space-2xl); }
    }
    /* v3.14.51 — Polish brand footer : frame circulaire subtile autour du
       logo pour qu'il se détache du fond dark, taille par défaut augmentée
       (36→56), label site name affiché quand un custom logo est défini. */
    .site-footer__mark {
        display: inline-flex; align-items: center; gap: var(--space-m);
        text-decoration: none;
        color: inherit;
        transition: transform var(--dur-base) var(--ease-out);
    }
    .site-footer__mark:hover { transform: translateY(-2px); }
    .site-footer__mark svg { flex-shrink: 0; }

    /* Frame circulaire autour du logo */
    .site-footer__mark-frame {
        position: relative;
        width: 72px; height: 72px;
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: oklch(1 0 0 / 0.06);
        border: 1px solid oklch(1 0 0 / 0.14);
        border-radius: 50%;
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.10),
                    0 4px 20px oklch(0 0 0 / 0.30);
        transition: background var(--dur-base), border-color var(--dur-base),
                    box-shadow var(--dur-base);
        overflow: hidden;
    }
    .site-footer__mark:hover .site-footer__mark-frame {
        background: oklch(1 0 0 / 0.10);
        border-color: oklch(1 0 0 / 0.22);
        box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14),
                    0 6px 24px oklch(0 0 0 / 0.42);
    }
    .site-footer__mark-frame img {
        height: 44px;
        width: auto;
        max-width: 80%;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.35));
    }
    /* Label site name discret affiché quand un custom logo est défini */
    .site-footer__mark-label {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 400;
        letter-spacing: -0.015em;
        color: #FAF6EE;
        line-height: 1.1;
        font-variation-settings: "opsz" 144, "SOFT" 40;
    }
    /* Wordmark texte historique (quand pas de custom logo) */
    .site-footer__mark-text strong {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--brand-sun);
        display: block;
        line-height: 1;
        margin-bottom: 0.3rem;
    }
    .site-footer__mark-text em {
        font-family: var(--font-body);
        font-style: normal;
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 75%, transparent);
        display: block;
    }
    /* Compat rétro : les anciennes règles ciblaient .site-footer__mark strong/em
       directement. On les conserve pour ne rien casser si du contenu ancien
       persiste dans le DOM ou dans un thème enfant. */
    .site-footer__mark > strong {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--brand-sun);
        display: block;
        line-height: 1;
        margin-bottom: 0.3rem;
    }
    .site-footer__mark > em {
        font-family: var(--font-body);
        font-style: normal;
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 75%, transparent);
        display: block;
    }
    .site-footer__signature {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.5vw, 2rem);
        font-weight: 300;
        line-height: 1.15;
        margin: 0;
        color: #FAF6EE;
        text-wrap: balance;
        max-width: 22ch;
        font-variation-settings: "opsz" 144, "SOFT" 50;
    }
    .site-footer__signature em {
        font-style: italic;
        color: var(--brand-sun);
        font-weight: 400;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    /* v3.14.20 — Fix overflow desktop : minmax(0, …) empêche les enfants
       de forcer le grid à dépasser sa propre largeur. Sans ça, le titre
       "EXPLORER" en wide-tracking + caps pousse la colonne à largeur
       intrinsèque, et la 4e col se fait tronquer à droite. */
    .site-footer__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    @media (min-width: 640px) {
        .site-footer__grid {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        }
    }
    @media (min-width: 980px) {
        .site-footer__grid {
            grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
            gap: var(--space-l);
        }
    }
    .site-footer__col { min-width: 0; } /* défense supplémentaire */

    /* v3.14.20 — Override avec spécificité forte + !important pour battre
       la règle theme.json `h3 { font-size: var(--wp--preset--font-size--step-3) }`
       (step-3 = 1.95-3.43rem clamp → titres "EXPLORER" gigantesques qui
       sortaient de la colonne et étaient tronqués à droite). */
    .site-footer h3,
    .site-footer .site-footer__title,
    .site-footer h3.site-footer__title {
        color: var(--brand-sun) !important;
        font-family: var(--font-body) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        margin: 0 0 var(--space-m) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .site-footer a { color: inherit; text-decoration: none; opacity: 0.9; transition: opacity var(--dur-fast); }
    .site-footer a:hover { opacity: 1; color: var(--brand-sun); }

    .site-footer__signature {
        font-family: var(--font-display);
        font-size: var(--step-3);
        font-weight: 300;
        font-style: italic;
        line-height: 1.15;
        color: oklch(0.96 0.012 85);
        max-width: 22ch;
        margin-bottom: var(--space-m);
    }

    .site-footer__menu {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.6rem;
        font-size: 0.95rem;
    }

    .site-footer__contact p {
        display: flex; align-items: flex-start; gap: 0.6rem;
        margin: 0 0 0.6rem;
        max-width: none;
        font-size: 0.92rem;
    }
    .site-footer__contact svg { color: var(--brand-sun); flex-shrink: 0; margin-top: 0.2rem; }

    .social-links {
        list-style: none; padding: 0; margin: var(--space-m) 0 0;
        display: flex; gap: 0.75rem;
    }
    .social-links a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px;
        border-radius: 50%;
        background: oklch(1 0 0 / 0.06);
        color: oklch(0.92 0.012 85);
        opacity: 1;
        transition: background var(--dur-fast), color var(--dur-fast);
    }
    .social-links a:hover {
        background: var(--brand-sun);
        color: var(--ink);
    }

    .site-footer__about {
        font-size: 0.92rem;
        line-height: 1.55;
        color: color-mix(in oklch, #FAF6EE 78%, transparent);
        margin: 0 0 var(--space-m);
        max-width: 38ch;
    }

    .site-footer__newsletter-intro {
        font-size: 0.88rem;
        color: color-mix(in oklch, #FAF6EE 75%, transparent);
        line-height: 1.5;
        margin: 0 0 var(--space-s);
        max-width: 30ch;
    }
    /* v3.14.52 — Polish newsletter form : glassmorphism, icône email, focus
       glow sun-tone, arrow SVG animé, feedback inline. */
    .newsletter-form {
        display: flex; flex-direction: column;
        gap: 0.5rem;
        margin-top: var(--space-s);
    }
    .newsletter-form__row {
        display: flex; gap: 4px;
        background: oklch(1 0 0 / 0.06);
        border: 1px solid oklch(1 0 0 / 0.14);
        border-radius: 999px;
        padding: 4px 4px 4px 14px;
        align-items: center;
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        transition: border-color var(--dur-fast),
                    background var(--dur-fast),
                    box-shadow var(--dur-base);
    }
    .newsletter-form__row:hover {
        border-color: oklch(1 0 0 / 0.24);
        background: oklch(1 0 0 / 0.08);
    }
    .newsletter-form__row:focus-within {
        border-color: var(--brand-sun);
        background: oklch(1 0 0 / 0.10);
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand-sun) 18%, transparent),
                    0 4px 18px color-mix(in oklch, var(--brand-sun) 14%, transparent);
    }
    .newsletter-form__icon {
        flex-shrink: 0;
        color: color-mix(in oklch, #FAF6EE 50%, transparent);
        display: inline-flex; align-items: center;
        transition: color var(--dur-fast);
    }
    .newsletter-form__row:focus-within .newsletter-form__icon { color: var(--brand-sun); }
    .newsletter-form input {
        background: transparent;
        border: 0;
        color: #FAF6EE;
        padding: 0.65rem 0.55rem;
        flex: 1; min-width: 0;
        font-family: var(--font-body);
        font-size: 0.92rem;
    }
    .newsletter-form input::placeholder {
        color: color-mix(in oklch, #FAF6EE 42%, transparent);
        font-style: italic;
    }
    .newsletter-form input:focus { outline: none; }
    .newsletter-form input:autofill,
    .newsletter-form input:-webkit-autofill {
        /* Empêche le bg jaune Chrome de casser le glassmorphism */
        -webkit-text-fill-color: #FAF6EE;
        -webkit-box-shadow: 0 0 0 100px oklch(0.10 0.014 70) inset !important;
        background-clip: text !important;
        transition: background-color 5000s ease-in-out 0s;
    }
    .newsletter-form__btn {
        flex-shrink: 0;
        width: 40px; height: 40px;
        background: var(--brand-sun);
        color: var(--ink);
        font-weight: 700;
        border-radius: 50%;
        border: 0;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-sun) 32%, transparent),
                    inset 0 1px 0 oklch(1 0 0 / 0.30);
        transition: transform var(--dur-base) var(--ease-back),
                    background var(--dur-fast),
                    box-shadow var(--dur-base);
    }
    .newsletter-form__btn svg {
        transition: transform var(--dur-base) var(--ease-out);
    }
    .newsletter-form__btn:hover {
        background: oklch(from var(--brand-sun) calc(l - 0.06) c h);
        transform: translateX(2px) scale(1.05);
        box-shadow: 0 6px 18px color-mix(in oklch, var(--brand-sun) 44%, transparent),
                    inset 0 1px 0 oklch(1 0 0 / 0.40);
    }
    .newsletter-form__btn:hover svg { transform: translateX(2px); }
    .newsletter-form__btn:active { transform: scale(0.96); }
    .newsletter-form__btn:focus-visible {
        outline: 2px solid #FAF6EE;
        outline-offset: 3px;
    }

    /* ─── Feedback inline (success/error) ─── */
    .newsletter-form__feedback {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
        margin: 0.3rem 0 0;
        padding: 0.5rem 0.85rem;
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.3;
        animation: oms-nl-feedback-in 0.4s var(--ease-out) both;
    }
    .newsletter-form__feedback--ok {
        background: color-mix(in oklch, var(--brand-leaf) 22%, oklch(0 0 0 / 0.30));
        color: color-mix(in oklch, var(--brand-leaf) 60%, #FAF6EE);
        border: 1px solid color-mix(in oklch, var(--brand-leaf) 38%, transparent);
    }
    .newsletter-form__feedback--invalid {
        background: color-mix(in oklch, var(--brand-earth) 26%, oklch(0 0 0 / 0.30));
        color: color-mix(in oklch, var(--brand-sun) 50%, #FAF6EE);
        border: 1px solid color-mix(in oklch, var(--brand-earth) 48%, transparent);
    }
    @keyframes oms-nl-feedback-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .newsletter-form__feedback { animation: none; }
    }

    /* ─── Partenaires footer — v3.14.52 polish ─────────────────── */
    .site-footer__partners-label {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-sun);
        margin: var(--space-l) 0 0.5rem;
        display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .site-footer__partners-label::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: linear-gradient(to right,
            color-mix(in oklch, var(--brand-sun) 32%, transparent),
            transparent);
        max-width: 2.5rem;
    }
    .site-footer__partners-list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-wrap: wrap;
        gap: 0.3rem 0.85rem;
        font-size: 0.85rem;
        line-height: 1.55;
        color: color-mix(in oklch, #FAF6EE 78%, transparent);
        max-width: none;
    }
    .site-footer__partners-list li {
        position: relative;
        display: inline-flex; align-items: center;
        transition: color var(--dur-fast);
    }
    /* Séparateur ⋅ entre items, sauf après le dernier */
    .site-footer__partners-list li:not(:last-child)::after {
        content: "";
        margin-left: 0.85rem;
        width: 3px; height: 3px;
        border-radius: 50%;
        background: color-mix(in oklch, var(--brand-sun) 55%, transparent);
        opacity: 0.7;
    }
    .site-footer__partners-list li:hover { color: #FAF6EE; }
    .site-footer__partners-list em {
        font-style: italic;
        font-weight: 400;
        color: inherit;
        font-variation-settings: "opsz" 14, "SOFT" 50;
    }

    .site-footer__bottom {
        margin-top: var(--space-2xl);
        padding-block: var(--space-l);
        border-top: 1px solid oklch(1 0 0 / 0.08);
        display: flex; flex-wrap: wrap; gap: var(--space-m);
        justify-content: space-between; align-items: center;
        font-size: 0.82rem;
        color: color-mix(in oklch, #FAF6EE 70%, transparent);
    }
    .site-footer__copy { margin: 0; line-height: 1.5; }
    .site-footer__copy strong { color: var(--brand-sun); font-weight: 600; }
    .site-footer__copy em {
        font-style: italic;
        font-family: var(--font-display);
        color: color-mix(in oklch, #FAF6EE 60%, transparent);
        font-size: 0.85rem;
    }
    .site-footer__legal {
        list-style: none; padding: 0; margin: 0;
        display: flex; gap: var(--space-m); flex-wrap: wrap;
    }
    .site-footer__legal a {
        color: color-mix(in oklch, #FAF6EE 70%, transparent);
        text-decoration: none;
        transition: color var(--dur-fast);
    }
    .site-footer__legal a:hover { color: var(--brand-sun); }

    /* v3.14.6 — Crédit agence (réalisation site) */
    .site-footer__credit {
        flex-basis: 100%;
        margin: var(--space-s) 0 0;
        padding-top: var(--space-s);
        border-top: 1px solid color-mix(in oklch, #FAF6EE 12%, transparent);
        font-size: 0.78rem;
        font-style: italic;
        font-family: var(--font-display);
        color: color-mix(in oklch, #FAF6EE 55%, transparent);
        text-align: center;
        letter-spacing: 0.02em;
    }
    .site-footer__credit a {
        color: color-mix(in oklch, #FAF6EE 80%, transparent);
        text-decoration: none;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 0.04em;
        border-bottom: 1px solid color-mix(in oklch, var(--brand-sun) 50%, transparent);
        padding-bottom: 1px;
        transition: color var(--dur-fast), border-color var(--dur-fast);
    }
    .site-footer__credit a:hover {
        color: var(--brand-sun);
        border-bottom-color: var(--brand-sun);
    }

    /* ── WhatsApp flottant ─────────────────────────────────────────
       Vrai logo officiel + double pulse (deux ondes décalées) + label
       qui se déploie au hover/focus. Vert WhatsApp #25D366 préservé. */
    .whatsapp-float {
        position: fixed;
        right: clamp(1rem, 3vw, 1.5rem);
        bottom: clamp(1rem, 3vw, 1.5rem);
        bottom: max(clamp(1rem, 3vw, 1.5rem), env(safe-area-inset-bottom, 0));
        z-index: 40;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        height: 60px;
        padding: 0 14px 0 14px;
        background: #25D366;
        color: #fff;
        border-radius: 999px;
        text-decoration: none;
        box-shadow:
            0 8px 24px oklch(0 0 0 / 0.20),
            0 2px 6px oklch(0 0 0 / 0.15),
            inset 0 0 0 0 oklch(1 0 0 / 0.15);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out),
                    padding var(--dur-base) var(--ease-out),
                    gap var(--dur-base) var(--ease-out);
    }
    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
        transform: translateY(-2px) scale(1.04);
        color: #fff;
        box-shadow:
            0 12px 36px oklch(0 0 0 / 0.28),
            0 4px 10px oklch(0 0 0 / 0.18),
            inset 0 0 0 1px oklch(1 0 0 / 0.20);
        outline: none;
    }
    .whatsapp-float:focus-visible {
        outline: 2px solid var(--brand-sun);
        outline-offset: 4px;
    }
    .whatsapp-float:active { transform: translateY(0) scale(1); }

    .whatsapp-float__icon {
        width: 32px; height: 32px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        /* Léger micro-mouvement pour signaler la vie sans être agressif */
        animation: whatsapp-tilt 6s ease-in-out infinite;
    }

    /* Label : caché par défaut sur desktop, apparaît au hover.
       Toujours visible sur écrans larges en survol uniquement. */
    .whatsapp-float__label {
        display: inline-block;
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        white-space: nowrap;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1;
        transition: max-width var(--dur-base) var(--ease-out),
                    opacity var(--dur-base) var(--ease-out),
                    margin-right var(--dur-base);
    }
    .whatsapp-float:hover .whatsapp-float__label,
    .whatsapp-float:focus-visible .whatsapp-float__label {
        max-width: 120px;
        opacity: 1;
        margin-right: 0.25rem;
    }
    /* Sur mobile, on garde le bouton circulaire (label toujours caché) */
    @media (max-width: 640px) {
        .whatsapp-float { padding: 0; width: 56px; height: 56px; justify-content: center; }
        .whatsapp-float__label { display: none; }
        .whatsapp-float__icon { width: 28px; height: 28px; }
    }

    /* DOUBLE PULSE — deux ondes décalées pour un effet vivant mais discret */
    .whatsapp-float::before,
    .whatsapp-float::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: #25D366;
        z-index: -1;
        pointer-events: none;
    }
    .whatsapp-float::before {
        animation: whatsapp-ripple 2.6s var(--ease-out) infinite;
    }
    .whatsapp-float::after {
        animation: whatsapp-ripple 2.6s var(--ease-out) infinite 1.3s; /* décalée de 1.3s */
        opacity: 0;
    }
    @keyframes whatsapp-ripple {
        0%   { transform: scale(1);    opacity: 0.45; }
        80%  { transform: scale(1.55); opacity: 0;    }
        100% { transform: scale(1.55); opacity: 0;    }
    }
    @keyframes whatsapp-tilt {
        0%, 100%  { transform: rotate(0deg); }
        2%        { transform: rotate(-12deg); }
        4%        { transform: rotate(10deg); }
        6%        { transform: rotate(-8deg); }
        8%        { transform: rotate(6deg); }
        10%, 100% { transform: rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) {
        .whatsapp-float::before,
        .whatsapp-float::after,
        .whatsapp-float__icon { animation: none; }
    }

    /* ── Bandeau cookies ─────────────────────────────────────────── */
    .cookie-banner {
        position: fixed;
        inset-inline: var(--rail); bottom: 1rem;
        z-index: 45;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-left: 3px solid var(--brand-leaf);
        padding: var(--space-s) var(--space-m);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-3);
        display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: space-between;
    }
    .cookie-banner p { margin: 0; max-width: 60ch; font-size: 0.92rem; }
    .cookie-banner__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

    /* ── Pagination ──────────────────────────────────────────────── */
    .nav-links, .pagination {
        display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
        margin-top: var(--space-xl);
    }
    .nav-links a, .nav-links span,
    .pagination a, .pagination span {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; height: 40px; padding: 0 0.75rem;
        background: var(--bg-elev);
        color: var(--ink);
        text-decoration: none;
        font-weight: 600;
        border-radius: var(--radius);
        border: 1px solid var(--line);
    }
    .nav-links .current, .pagination .current {
        background: var(--ink);
        color: var(--bg-paper);
        border-color: var(--ink);
    }
}

/* ========================================================================
   @layer signature — LE moment signature : carte du Sénégal narrative
   Le seul effet « waouh » du site. Tout le reste = retenue.
   ======================================================================== */
@layer signature {

    /* ─── HERO CINÉMATIQUE — photo terrain plein écran + Ken Burns ── */
    .hero-cine {
        position: relative;
        min-height: 100dvh;
        min-height: calc(var(--vh, 1vh) * 100);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #FAF6EE;
        overflow: hidden;
        isolation: isolate;
    }

    .hero-cine__media {
        position: absolute; inset: 0;
        z-index: -1;
        overflow: hidden;
    }

    .hero-cine__bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center;
        transform-origin: center center;
        animation: ken-burns 24s ease-in-out infinite alternate;
        will-change: transform;
    }
    @keyframes ken-burns {
        0%   { transform: scale(1.05) translate(0, 0); }
        100% { transform: scale(1.15) translate(-2%, 1%); }
    }

    .hero-cine__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg,
                oklch(0.13 0.012 85 / 0.40) 0%,
                oklch(0.13 0.012 85 / 0.30) 35%,
                oklch(0.13 0.012 85 / 0.55) 70%,
                oklch(0.10 0.012 85 / 0.92) 100%
            ),
            radial-gradient(ellipse at 80% 20%,
                color-mix(in oklch, var(--brand-sun) 12%, transparent) 0%,
                transparent 55%);
    }

    /* Pattern textile sénégalais subtil (motif géométrique en SVG inline data-URI).
       Inspiré des motifs tissés en bogolan / kente / wax — losanges + lignes. */
    .hero-cine__pattern {
        position: absolute; inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23E8A91C' stroke-width='0.6' opacity='0.10'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z'/%3E%3Cpath d='M0 40 L40 40 L40 80'/%3E%3Cpath d='M40 0 L40 40 L80 40'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 80px 80px;
        mix-blend-mode: overlay;
        opacity: 0.55;
    }

    .hero-cine__inner {
        position: relative;
        padding-block: var(--space-2xl) var(--space-xl);
        z-index: 1;
        width: 100%;
    }

    /* v3.14.8 — Tous les heroes (home + sub-pages) en full-bleed.
       Override commun de .rail max-width pour que les titres éditoriaux
       respirent sur grand écran (pas de bandes vides cream sur 1920px+).
       Padding-inline en clamp fluide : lisible de 600px à 2560px. */
    .hero-cine__inner,
    .hero__inner.rail,
    .apropos-hero__inner.rail,
    .domaines-hero__inner.rail,
    .projets-hero__inner.rail,
    .actu-hero__inner.rail,
    .galerie-hero__inner.rail,
    .contact-hero__inner.rail,
    .don-hero__inner.rail {
        max-width: none;
        padding-inline: clamp(1.5rem, 5vw, 6rem);
    }

    .hero-cine__kicker {
        font-family: var(--font-body);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-sun);
        margin: 0 0 var(--space-m);
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }
    .hero-cine__kicker-line {
        display: inline-block;
        width: 2.5rem; height: 1px;
        background: currentColor;
    }

    .hero-cine__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6.5rem);
        font-weight: 300;
        line-height: 0.95;
        letter-spacing: -0.025em;
        color: #FAF6EE;
        margin: 0 0 var(--space-m);
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .hero-cine__title em {
        font-style: italic;
        font-weight: 400;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }

    .hero-cine__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 300;
        line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 44ch;
        margin: 0 0 var(--space-l);
        text-shadow: 0 1px 12px oklch(0 0 0 / 0.3);
    }

    .hero-cine__actions {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--space-s) var(--space-m);
        margin-bottom: var(--space-xl);
    }

    /* Bandeau partenaires en bas du hero */
    .hero-cine__partners {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: var(--space-m);
        border-top: 1px solid color-mix(in oklch, #FAF6EE 25%, transparent);
        max-width: 100%;
    }
    @media (min-width: 720px) {
        .hero-cine__partners {
            flex-direction: row;
            align-items: center;
            gap: var(--space-m);
        }
    }
    .hero-cine__partners-label {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-sun);
        flex-shrink: 0;
    }
    .hero-cine__partners-list {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 0.9rem;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        line-height: 1.4;
    }

    /* Indicateur scroll */
    .hero-cine__scroll {
        position: absolute;
        bottom: var(--space-m);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        color: color-mix(in oklch, #FAF6EE 70%, transparent);
        text-decoration: none;
        font-size: 0.7rem;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        font-weight: 500;
        z-index: 2;
        animation: scroll-hint 2.4s ease-in-out infinite;
    }
    .hero-cine__scroll:hover { color: var(--brand-sun); }
    .hero-cine__scroll-line {
        display: block;
        width: 1px; height: 32px;
        background: linear-gradient(to bottom, currentColor, transparent);
    }
    @keyframes scroll-hint {
        0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
        50%      { transform: translate(-50%, 6px); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-cine__bg { animation: none; }
        .hero-cine__scroll { animation: none; }
    }

    /* ─── HERO ANCIEN (legacy fallback) ──────────────────────────── */
    .hero {
        position: relative;
        padding-block: var(--space-3xl) var(--space-2xl);
        background:
            radial-gradient(ellipse at top right, var(--brand-sun-soft) 0%, transparent 50%),
            var(--bg-paper);
        overflow: clip;
    }
    .hero__inner {
        display: grid;
        gap: var(--space-xl);
        align-items: end;
    }
    @media (min-width: 880px) {
        .hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); }
    }
    .hero__kicker {
        font-family: var(--font-body);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin-bottom: var(--space-m);
    }
    .hero__kicker::before {
        content: "";
        display: inline-block;
        width: 2.5rem; height: 1px;
        background: currentColor;
        margin-right: 0.75em;
        vertical-align: middle;
        transform: translateY(-2px);
    }
    .hero__title {
        font-family: var(--font-display);
        font-size: var(--step-5);
        font-weight: 300;
        line-height: 0.98;
        letter-spacing: var(--tracking-tight);
        text-wrap: balance;
        margin: 0 0 var(--space-m);
        font-variation-settings: "opsz" 144, "SOFT" 50;
    }
    .hero__title em {
        font-style: italic;
        font-weight: 400;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .hero__lead {
        font-family: var(--font-display);
        font-size: var(--step-1);
        font-weight: 300;
        line-height: 1.4;
        color: var(--ink-soft);
        max-width: 38ch;
        margin: 0 0 var(--space-l);
    }
    .hero__actions {
        display: flex; flex-wrap: wrap; gap: var(--space-s);
    }

    .hero__aside {
        position: relative;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: var(--step-0);
        line-height: 1.5;
        color: var(--ink-soft);
        padding-left: var(--space-m);
        border-left: 2px solid var(--brand-sun);
        max-width: 32ch;
    }
    .hero__aside cite {
        display: block;
        margin-top: var(--space-s);
        font-style: normal;
        font-family: var(--font-body);
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        color: var(--ink);
    }

    /* Indicateur de défilement subtil */
    .hero__scroll {
        position: absolute;
        bottom: var(--space-l); left: 50%;
        transform: translateX(-50%);
        font-size: 0.72rem;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        display: flex; flex-direction: column; align-items: center;
        gap: 0.5rem;
        animation: hint-scroll 2.4s var(--ease-inout) infinite;
    }
    .hero__scroll::after {
        content: "";
        width: 1px; height: 28px;
        background: linear-gradient(to bottom, var(--ink-faint), transparent);
    }
    @keyframes hint-scroll {
        0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
        50%      { transform: translate(-50%, 6px); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero__scroll { animation: none; }
    }

    /* ════════════════════════════════════════════════════════════
       HOMEPAGE v3.14.15 — Award-grade polish
       ════════════════════════════════════════════════════════════ */

    /* ─── ORNEMENT DE SECTION (line · dot · line) ─────────────── */
    .section-ornament {
        display: flex; align-items: center; justify-content: center;
        gap: 1rem;
        padding-block: var(--space-l);
        max-width: 240px;
        margin: 0 auto;
    }
    .section-ornament__line {
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--line-strong), transparent);
    }
    .section-ornament__dot {
        width: 6px; height: 6px;
        background: var(--brand-sun);
        border-radius: 50%;
        position: relative;
        box-shadow: 0 0 0 5px color-mix(in oklch, var(--brand-sun) 12%, transparent);
        animation: ornament-pulse 3s ease-in-out infinite;
    }
    @keyframes ornament-pulse {
        0%, 100% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--brand-sun) 12%, transparent); }
        50%      { box-shadow: 0 0 0 10px color-mix(in oklch, var(--brand-sun) 6%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
        .section-ornament__dot { animation: none; }
    }

    /* ─── INTRO chapitre éditorial v3.14.15 ──────────────────── */
    .intro {
        padding-block: var(--space-xl) var(--space-3xl);
        background: var(--bg-paper);
    }
    .intro__inner {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .intro__inner {
            grid-template-columns: 220px 1fr;
            gap: clamp(2rem, 6vw, 6rem);
            align-items: start;
        }
    }
    /* Marginalia sticky : grand "I" italique Fraunces */
    .intro__chapter {
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--space-s);
    }
    @media (min-width: 980px) {
        .intro__chapter {
            position: sticky;
            top: calc(var(--nav-h) + var(--space-l));
            align-self: start;
            text-align: right;
        }
    }
    .intro__chapter-numeral {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(7rem, 14vw, 11rem);
        line-height: 0.85;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        letter-spacing: -0.03em;
    }
    .intro__chapter small {
        font-family: var(--font-body);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        max-width: 18ch;
        align-self: end;
    }
    /* Body éditorial */
    .intro__body { max-width: 60ch; }
    .intro__eyebrow {
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-s);
        display: inline-block;
    }
    .intro__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3.2rem);
        font-weight: 300;
        line-height: 1.05;
        letter-spacing: -0.015em;
        margin: 0 0 var(--space-l);
        color: var(--ink);
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 50;
    }
    .intro__title em {
        font-style: italic; font-weight: 400;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .intro__paragraph p {
        font-size: var(--step-0);
        line-height: 1.7;
        margin: 0;
        color: var(--ink);
    }
    /* Drop cap : première lettre géante italique Fraunces */
    .has-drop-cap::first-letter {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 5em;
        line-height: 0.85;
        float: left;
        margin: 0.05em 0.15em 0 -0.05em;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    /* Carte Vision : encadrement bordée gauche en sun */
    .intro__vision {
        margin: var(--space-xl) 0;
        padding: var(--space-m) var(--space-l);
        background: color-mix(in oklch, var(--brand-sun) 7%, transparent);
        border-left: 3px solid var(--brand-sun);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        position: relative;
    }
    .intro__vision-eyebrow {
        display: inline-flex; align-items: center; gap: 0.6rem;
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-s);
    }
    .intro__vision-line {
        display: inline-block;
        width: 1.8rem; height: 1px;
        background: currentColor;
    }
    .intro__vision-quote {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: var(--step-1);
        line-height: 1.4;
        color: var(--ink);
        margin: 0;
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .intro__cta { margin-top: var(--space-l); }

    /* ─── DOMAINES v3.14.15 — liste + preview image hover ──────── */
    .domaines {
        padding-block: var(--space-xl) var(--space-3xl);
        background: var(--bg-paper);
    }
    .domaines__header {
        max-width: 60ch;
        margin: 0 0 var(--space-xl);
    }
    .domaines__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400;
        line-height: 1.05;
        margin: var(--space-s) 0 var(--space-m);
        color: var(--ink);
        text-wrap: balance;
    }
    .domaines__title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .domaines__lead {
        font-size: var(--step-0);
        color: var(--ink-soft);
        max-width: 56ch;
        margin: 0;
    }
    .domaines__layout {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .domaines__layout {
            grid-template-columns: 1.4fr 1fr;
            gap: var(--space-2xl);
            align-items: start;
        }
    }
    .domaines__list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        border-top: 1px solid var(--line);
    }
    .domaine {
        display: grid;
        gap: var(--space-m);
        grid-template-columns: 1fr;
        padding-block: var(--space-l);
        border-bottom: 1px solid var(--line);
        transition: background var(--dur-base) var(--ease-out),
                    padding-left var(--dur-base) var(--ease-out);
        cursor: pointer;
    }
    @media (min-width: 720px) {
        .domaine {
            grid-template-columns: 5rem 1fr auto;
            align-items: baseline;
        }
    }
    .domaine:hover {
        background: color-mix(in oklch, var(--brand-sun) 5%, transparent);
        padding-left: var(--space-s);
    }
    .domaine__num {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 3.2rem;
        line-height: 1;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        transition: color var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
    }
    .domaine:hover .domaine__num {
        color: var(--brand-earth-text);
        transform: translateX(-3px) rotate(-3deg);
    }
    .domaine__title {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
        margin: 0 0 0.4rem;
        color: var(--ink);
        transition: color var(--dur-fast);
        letter-spacing: -0.01em;
    }
    .domaine:hover .domaine__title { color: var(--brand-earth-text); }
    .domaine__desc {
        font-size: 0.98rem;
        color: var(--ink-soft);
        max-width: 56ch;
        margin: 0;
        line-height: 1.55;
    }
    .domaine__link {
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink-soft);
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: color var(--dur-fast), gap var(--dur-fast);
        white-space: nowrap;
        display: inline-flex; align-items: center;
        gap: 0.4rem;
    }
    .domaine__link svg { transition: transform var(--dur-fast) var(--ease-out); }
    .domaine:hover .domaine__link {
        color: var(--brand-earth-text);
    }
    .domaine:hover .domaine__link svg { transform: translateX(4px); }

    /* Preview image picker à droite — sticky desktop uniquement */
    .domaines__preview {
        position: relative;
        aspect-ratio: 4/5;
        background: var(--bg-elev);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-2);
        display: none; /* hidden on mobile */
    }
    @media (min-width: 980px) {
        .domaines__preview {
            display: block;
            position: sticky;
            top: calc(var(--nav-h) + var(--space-l));
            align-self: start;
        }
    }
    .domaines__preview img {
        width: 100%; height: 100%; object-fit: cover;
        transition: opacity var(--dur-base) var(--ease-out),
                    transform 8s linear;
    }
    .domaines__preview:hover img { transform: scale(1.04); }
    .domaines__preview-num {
        position: absolute;
        bottom: var(--space-m); left: var(--space-m);
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 3.5rem;
        line-height: 1;
        color: var(--brand-sun);
        text-shadow: 0 2px 16px oklch(0 0 0 / 0.5);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }

    /* ═══════════════════════════════════════════════════════════════
       SIGNATURE — Carte du Sénégal en scrollytelling
       Carte sticky à droite ; à gauche : les zones d'intervention
       s'enchaînent. Chaque zone allume son marqueur. À la fin, la
       carte est entièrement constellée d'or — métaphore visuelle
       de la couverture du Niombato par l'ADD.
       ═══════════════════════════════════════════════════════════════ */
    .zones {
        background: linear-gradient(180deg, var(--bg-paper) 0%, color-mix(in oklch, var(--brand-leaf) 6%, var(--bg-paper)) 100%);
        position: relative;
    }
    .zones__inner {
        display: grid;
        gap: var(--space-xl);
    }
    @media (min-width: 980px) {
        .zones__inner { grid-template-columns: 1fr 1.1fr; gap: var(--space-2xl); align-items: start; }
    }

    .zones__intro {
        padding-top: var(--space-2xl);
    }
    .zones__list {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: var(--space-xl);
    }
    .zone {
        opacity: 0.35;
        transition: opacity var(--dur-slow) var(--ease-out);
        padding-block: var(--space-s);
        border-left: 2px solid var(--line);
        padding-left: var(--space-m);
    }
    .zone[data-active] {
        opacity: 1;
        border-left-color: var(--brand-sun);
    }
    .zone__name {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        font-size: var(--step-3);
        margin: 0 0 0.4rem;
        color: var(--ink);
        line-height: 1;
    }
    .zone__role {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-s);
    }
    .zone__body {
        font-size: 0.98rem;
        line-height: var(--leading-body);
        color: var(--ink-soft);
        max-width: 50ch;
        margin: 0;
    }
    .zone__stat {
        margin-top: var(--space-s);
        font-family: var(--font-display);
        font-weight: 400;
        font-size: 1.4rem;
        color: var(--brand-leaf-text);
    }

    /* Carte sticky à droite */
    .zones__map {
        position: relative;
        padding-block: var(--space-xl);
    }
    @media (min-width: 980px) {
        .zones__map {
            position: sticky;
            top: calc(var(--nav-h) + var(--space-l));
            height: calc(100dvh - var(--nav-h) - var(--space-xl));
            align-self: start;
        }
    }
    .zones__map-frame {
        background: var(--bg-elev);
        border-radius: var(--radius-lg);
        padding: var(--space-m);
        box-shadow: var(--shadow-2);
        height: 100%;
        display: flex; flex-direction: column;
    }
    .zones__map-caption {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        text-align: center;
        margin-top: var(--space-s);
    }
    .zones__map svg {
        width: 100%; height: 100%;
        max-height: 70vh;
        flex: 1;
    }
    .zones__map .map-country {
        fill: color-mix(in oklch, var(--brand-leaf) 10%, var(--bg-paper));
        stroke: var(--brand-leaf-deep);
        stroke-width: 1.5;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 0 oklch(0 0 0 / .08));
    }
    .zones__map .map-river {
        fill: none;
        stroke: color-mix(in oklch, var(--brand-leaf) 30%, var(--bg-paper));
        stroke-width: 1;
        stroke-linecap: round;
    }
    .zones__map .map-gambia {
        fill: var(--bg-paper);
        stroke: var(--line-strong);
        stroke-width: 1;
    }
    .zones__map .map-label {
        font-family: var(--font-body);
        font-size: 9px;
        font-weight: 600;
        fill: var(--ink-soft);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .zones__map .zone-marker {
        cursor: default;
    }
    .zones__map .zone-marker__dot {
        fill: var(--brand-leaf);
        opacity: 0.35;
        transition: fill var(--dur-base) var(--ease-out), opacity var(--dur-base);
        r: 5;
    }
    .zones__map .zone-marker__halo {
        fill: var(--brand-sun);
        opacity: 0;
        transition: opacity var(--dur-base);
        r: 16;
    }
    .zones__map .zone-marker__label {
        font-family: var(--font-display);
        font-size: 11px;
        font-style: italic;
        font-weight: 500;
        fill: var(--ink);
        opacity: 0.6;
        transition: opacity var(--dur-base);
    }
    /* État activé : marqueur illuminé en or */
    .zones__map .zone-marker[data-active] .zone-marker__dot {
        fill: var(--brand-sun);
        opacity: 1;
        r: 7;
    }
    .zones__map .zone-marker[data-active] .zone-marker__halo {
        opacity: 0.5;
        animation: marker-pulse 2.4s var(--ease-inout) infinite;
    }
    .zones__map .zone-marker[data-active] .zone-marker__label {
        opacity: 1;
        fill: var(--brand-earth);
    }
    /* Une fois visitée, garde le vert profond pour montrer le parcours */
    .zones__map .zone-marker[data-visited]:not([data-active]) .zone-marker__dot {
        fill: var(--brand-leaf-deep);
        opacity: 0.9;
    }
    @keyframes marker-pulse {
        0%, 100% { transform: scale(1); opacity: 0.5; transform-origin: center; }
        50%      { transform: scale(1.4); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .zone, .zones__map .zone-marker__dot, .zones__map .zone-marker__halo,
        .zones__map .zone-marker__label { transition: none; }
        .zones__map .zone-marker[data-active] .zone-marker__halo { animation: none; }
        /* En reduced-motion, tous les marqueurs sont allumés d'emblée */
        .zones__map .zone-marker .zone-marker__dot { fill: var(--brand-leaf-deep); opacity: 1; }
        .zone { opacity: 1; }
    }

    /* ─── COMPTEURS habités v3.14.15 — gros chiffres + tendance ─── */
    .stats {
        background: var(--bg-elev);
        padding-block: var(--space-2xl) var(--space-3xl);
        position: relative;
    }
    .stats__header {
        max-width: 60ch;
        margin: 0 0 var(--space-2xl);
    }
    .stats__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400;
        line-height: 1.05;
        margin: var(--space-s) 0 var(--space-m);
        color: var(--ink);
        text-wrap: balance;
    }
    .stats__title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .stats__lead {
        font-size: var(--step-0);
        color: var(--ink-soft);
        max-width: 56ch;
        margin: 0;
    }
    .stats__list {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
        .stats__list { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    }
    @media (min-width: 980px) {
        .stats__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
    }
    .stat {
        display: flex; flex-direction: column;
        padding-top: var(--space-m);
        gap: 0.4rem;
        border-top: 1px solid var(--line);
        transition: border-top-color var(--dur-base) var(--ease-out);
    }
    .stat:hover { border-top-color: var(--brand-sun); }
    .stat__number-wrap {
        display: inline-flex; align-items: baseline; gap: 0.1em;
        line-height: 0.9;
    }
    .stat__number {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(2.6rem, 6vw, 4.4rem);
        line-height: 0.9;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        letter-spacing: -0.025em;
    }
    .stat__suffix {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(1.6rem, 3vw, 2.6rem);
        color: var(--brand-sun);
        line-height: 0.9;
    }
    .stat__title-line { margin-top: var(--space-xs); }
    .stat__title {
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .stat__note {
        font-size: 0.85rem;
        line-height: 1.45;
        color: var(--ink-soft);
        max-width: 28ch;
    }
    .stat__trend {
        display: inline-flex; align-items: center; gap: 0.35rem;
        margin-top: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--brand-leaf-text);
        letter-spacing: 0.02em;
    }
    .stat__trend-arrow {
        display: inline-block;
        font-size: 1rem;
        line-height: 1;
        transition: transform var(--dur-base) var(--ease-back);
    }
    .stat:hover .stat__trend-arrow { transform: translate(2px, -2px) scale(1.15); }

    /* ─── PROJETS en magazine v3.14.15 — alternance + numéro géant ── */
    .projets {
        padding-block: var(--space-xl) var(--space-3xl);
    }
    .projets__header {
        max-width: 60ch;
        margin: 0 0 var(--space-2xl);
    }
    .projets__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400;
        line-height: 1.05;
        margin: var(--space-s) 0 0;
        color: var(--ink);
        text-wrap: balance;
    }
    .projets__title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .projets__list {
        display: flex; flex-direction: column;
        gap: var(--space-3xl);
        margin-top: var(--space-l);
    }
    .projet-feature {
        position: relative;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
        align-items: center;
    }
    @media (min-width: 880px) {
        .projet-feature {
            grid-template-columns: 1.15fr 1fr;
            gap: var(--space-2xl);
        }
        /* Alternance : projet pair → media à droite, content à gauche */
        .projet-feature--alt {
            grid-template-columns: 1fr 1.15fr;
        }
        .projet-feature--alt .projet-feature__content { order: 1; }
        .projet-feature--alt .projet-feature__media   { order: 2; }
        .projet-feature--alt .projet-feature__num     { right: auto; left: -2rem; }
    }
    /* Numéro géant marginalia italique Fraunces */
    .projet-feature__num {
        position: absolute;
        top: -3.5rem; right: -1.5rem;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(6rem, 12vw, 10rem);
        line-height: 0.85;
        color: color-mix(in oklch, var(--brand-earth) 12%, transparent);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        letter-spacing: -0.04em;
        z-index: 0;
        pointer-events: none;
        transition: color var(--dur-slow) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
    }
    .projet-feature:hover .projet-feature__num {
        color: color-mix(in oklch, var(--brand-earth) 24%, transparent);
        transform: scale(1.04) rotate(-2deg);
    }
    .projet-feature__media {
        position: relative;
        aspect-ratio: 4/3;
        background: var(--bg-elev);
        overflow: hidden;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-2);
        z-index: 1;
    }
    .projet-feature__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.4s var(--ease-out);
        will-change: transform;
    }
    .projet-feature:hover .projet-feature__media img { transform: scale(1.05); }
    .projet-feature__media-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to top, oklch(0.10 0.012 85 / 0.25) 0%, transparent 50%);
        opacity: 0; transition: opacity var(--dur-base);
        pointer-events: none;
    }
    .projet-feature:hover .projet-feature__media-overlay { opacity: 1; }
    .projet-feature__content {
        position: relative; z-index: 2;
    }
    .projet-feature__category {
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-leaf-text);
        margin: 0 0 var(--space-s);
    }
    .projet-feature__title {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 2.6vw, 2.4rem);
        font-weight: 400;
        line-height: 1.1;
        margin: 0 0 var(--space-s);
        letter-spacing: -0.015em;
    }
    .projet-feature__title a {
        color: var(--ink);
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-size: 0 1px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast);
    }
    .projet-feature__title a:hover {
        color: var(--brand-earth-text);
        background-size: 100% 1px;
    }
    .projet-feature__excerpt {
        color: var(--ink-soft);
        max-width: 50ch;
        margin: 0 0 var(--space-m);
        line-height: 1.6;
    }
    .projet-feature__meta {
        display: grid;
        gap: var(--space-s) var(--space-m);
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        margin: 0 0 var(--space-m);
        padding-top: var(--space-s);
        border-top: 1px solid var(--line);
    }
    .projet-feature__meta dt {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0 0 0.15rem;
    }
    .projet-feature__meta dd {
        font-size: 0.95rem;
        color: var(--ink);
        margin: 0;
        font-weight: 500;
    }
    .projet-feature__cta {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        text-decoration: none;
        letter-spacing: 0.02em;
        padding: 0.5rem 0;
    }
    .projet-feature__cta svg { transition: transform var(--dur-base) var(--ease-out); }
    .projet-feature__cta:hover svg { transform: translateX(6px); }
    .projets__footer {
        text-align: center;
        margin: var(--space-2xl) 0 0;
    }

    /* ─── DON CTA ─────────────────────────────────────────────────── */
    /* v3.14.1 — bg deep bordeaux statique → texte STATIQUE cream.
       Avant : --bg-paper flippait en dark-sepia, devenait invisible sur bordeaux. */
    .don-cta {
        background: var(--brand-earth);
        color: var(--on-brand-light);
        padding-block: var(--space-3xl);
        position: relative;
        overflow: hidden;
    }
    .don-cta::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(circle at 80% 0%, color-mix(in oklch, var(--brand-sun) 30%, transparent) 0%, transparent 40%),
            radial-gradient(circle at 0% 100%, color-mix(in oklch, var(--brand-leaf) 25%, transparent) 0%, transparent 50%);
        opacity: 0.45;
        pointer-events: none;
    }
    .don-cta__inner {
        position: relative;
        display: grid; gap: var(--space-l);
        align-items: end;
    }
    @media (min-width: 880px) {
        .don-cta__inner { grid-template-columns: 1.4fr 1fr; }
    }
    .don-cta h2 {
        color: var(--on-brand-light);   /* stable cream — lisible sur bordeaux dans les 2 modes */
        font-family: var(--font-display);
        font-size: var(--step-4);
        font-weight: 300;
        line-height: 1;
        letter-spacing: var(--tracking-tight);
        margin: 0;
        font-variation-settings: "opsz" 144, "SOFT" 100;
    }
    .don-cta h2 em {
        font-style: italic;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .don-cta__lead {
        font-size: var(--step-0);
        max-width: 50ch;
        color: oklch(0.95 0.012 85);
        margin: 0 0 var(--space-m);
        line-height: 1.55;
    }
    /* v3.14.14 — Bandeau d'urgence rassurant (no banking data) */
    .don-cta__urgency {
        font-size: 0.95rem;
        max-width: 50ch;
        color: color-mix(in oklch, var(--on-brand-light) 80%, transparent);
        margin: 0 0 var(--space-l);
        padding: var(--space-s) var(--space-m);
        background: oklch(1 0 0 / 0.08);
        border-left: 3px solid var(--brand-sun);
        border-radius: 0 var(--radius) var(--radius) 0;
        line-height: 1.5;
    }
    .don-cta__urgency strong {
        display: block;
        color: var(--brand-sun);
        font-weight: 600;
        margin-bottom: 0.3rem;
    }
    /* Social-proof trust line en bas du CTA */
    .don-cta__trust {
        font-size: 0.85rem;
        font-style: italic;
        margin: var(--space-m) 0 0;
        color: color-mix(in oklch, var(--on-brand-light) 70%, transparent);
        font-family: var(--font-display);
    }
    .don-cta__action {
        display: flex; flex-direction: column;
        align-items: flex-start; gap: var(--space-s);
    }
    @media (min-width: 880px) {
        .don-cta__action { align-items: flex-end; text-align: right; }
    }

    /* ─── PARTENAIRES v3.14.15 — marquee scroll seamless ─────────── */
    .partenaires {
        padding-block: var(--space-xl) var(--space-2xl);
        background: var(--bg-paper);
        overflow: hidden;
    }
    .partenaires__header {
        text-align: center;
        max-width: 56ch;
        margin: 0 auto var(--space-xl);
    }
    .partenaires__title {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 2.6vw, 2.2rem);
        font-weight: 400;
        line-height: 1.1;
        margin: var(--space-s) 0;
        color: var(--ink);
    }
    .partenaires__title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .partenaires__lead {
        color: var(--ink-soft);
        font-size: 0.95rem;
        line-height: 1.55;
        margin: 0;
    }
    /* Marquee infini seamless — track dupliqué x2, translate -50% */
    .partenaires__marquee {
        position: relative;
        overflow: hidden;
        padding-block: var(--space-m);
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }
    .partenaires__track {
        display: flex; align-items: center;
        gap: clamp(2.5rem, 6vw, 5rem);
        width: max-content;
        animation: marquee-scroll 40s linear infinite;
        will-change: transform;
    }
    @keyframes marquee-scroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .partenaires__marquee:hover .partenaires__track,
    .partenaires__marquee:focus-within .partenaires__track {
        animation-play-state: paused;
    }
    @media (prefers-reduced-motion: reduce) {
        .partenaires__track {
            animation: none;
            flex-wrap: wrap;
            justify-content: center;
        }
    }
    .partenaire-logo {
        flex-shrink: 0;
        max-width: 160px;
        opacity: 0.55;
        filter: grayscale(1);
        transition: opacity var(--dur-base), filter var(--dur-base), transform var(--dur-base) var(--ease-out);
    }
    .partenaire-logo:hover {
        opacity: 1;
        filter: grayscale(0);
        transform: scale(1.05);
    }
    .partenaire-logo img { width: 100%; height: auto; max-height: 56px; object-fit: contain; }

    /* v3.14.26 — Variante text-only pour les partenaires sans logo uploadé */
    .partenaire-logo--text {
        max-width: none;
        opacity: 0.85;
        filter: none;
        font-family: var(--font-display);
        font-size: clamp(0.95rem, 1.2vw, 1.1rem);
        font-weight: 400;
        line-height: 1.3;
        color: var(--ink);
        white-space: nowrap;
        padding: 0.4rem 0.6rem;
    }
    .partenaire-logo--text strong {
        font-weight: 600;
        color: var(--brand-earth-text);
    }
    .partenaire-logo--text em {
        font-style: italic;
        font-weight: 300;
        color: var(--ink-soft);
        margin-left: 0.2em;
    }
    .partenaire-logo--text:hover {
        opacity: 1;
        transform: scale(1.04);
    }

    /* ═══════════════════════════════════════════════════════════════
       SINGLE ACTUALITÉ v3.14.29 — magazine éditorial
       ═══════════════════════════════════════════════════════════════ */

    /* ── HERO full-bleed ─────────────────────────────────────────── */
    .single-actu__hero {
        position: relative;
        min-height: 70vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .single-actu__hero-media {
        position: absolute; inset: 0; z-index: -1; overflow: hidden;
    }
    .single-actu__hero-bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .single-actu__hero-overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg,
                oklch(0.10 0.012 85 / 0.30) 0%,
                oklch(0.10 0.012 85 / 0.60) 60%,
                oklch(0.10 0.012 85 / 0.95) 100%);
    }
    .single-actu__hero-inner {
        padding-block: var(--space-2xl) var(--space-xl);
        max-width: none !important;
        padding-inline: clamp(1.5rem, 5vw, 6rem) !important;
        width: 100%; position: relative;
    }

    .single-actu__breadcrumb {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 500;
        color: color-mix(in oklch, #FAF6EE 75%, transparent);
        margin: 0 0 var(--space-l);
    }
    .single-actu__breadcrumb a {
        color: inherit;
        text-decoration: none;
        transition: color var(--dur-fast);
    }
    .single-actu__breadcrumb a:hover { color: var(--brand-sun); }
    .single-actu__breadcrumb-current {
        color: var(--brand-sun);
        font-weight: 600;
    }

    .single-actu__eyebrow {
        display: inline-flex; flex-wrap: wrap; align-items: center;
        gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--brand-sun);
        margin: 0 0 var(--space-m);
    }
    .single-actu__dot { opacity: 0.5; }
    .single-actu__cat a { color: inherit; text-decoration: none; }
    .single-actu__cat a:hover { color: #FAF6EE; }

    .single-actu__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 4.4rem);
        font-weight: 300;
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: #FAF6EE;
        margin: 0 0 var(--space-m);
        max-width: 30ch;
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .single-actu__lead {
        font-family: var(--font-display);
        font-size: clamp(1.1rem, 1.6vw, 1.4rem);
        font-style: italic;
        font-weight: 300;
        line-height: 1.45;
        color: color-mix(in oklch, #FAF6EE 90%, transparent);
        max-width: 50ch;
        margin: 0;
        font-variation-settings: "opsz" 144, "WONK" 1;
    }

    /* ── CORPS ARTICLE + SHARE RAIL ─────────────────────────────── */
    .single-actu__body {
        padding-block: var(--space-2xl) var(--space-3xl);
        background: var(--bg-paper);
    }
    .single-actu__grid {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .single-actu__grid {
            grid-template-columns: 56px minmax(0, 68ch) 1fr;
            gap: var(--space-2xl);
            align-items: start;
        }
    }

    /* Share rail (sticky desktop, en haut mobile) */
    .single-actu__share-rail {
        display: flex; flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    @media (min-width: 980px) {
        .single-actu__share-rail {
            position: sticky;
            top: calc(var(--nav-h) + var(--space-l));
            flex-direction: column;
            align-self: start;
            gap: 0.4rem;
        }
    }
    .single-actu__share-label {
        font-family: var(--font-body);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0 0.5rem 0 0;
    }
    @media (min-width: 980px) {
        .single-actu__share-label {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            margin: 0 0 var(--space-s);
        }
    }
    .single-actu__share-btn {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--ink);
        text-decoration: none;
        cursor: pointer;
        transition: background var(--dur-fast), border-color var(--dur-fast),
                    color var(--dur-fast), transform var(--dur-base) var(--ease-back);
    }
    .single-actu__share-btn:hover {
        background: var(--brand-earth);
        border-color: var(--brand-earth);
        color: var(--on-brand-light);
        transform: scale(1.08) rotate(-4deg);
    }
    .single-actu__share-btn--wa:hover {
        background: #25D366;
        border-color: #1ebe5b;
        color: #fff;
    }
    .single-actu__share-btn--fb:hover {
        background: #1877F2;
        border-color: #1877F2;
        color: #fff;
    }
    .single-actu__share-btn--x:hover {
        background: #000;
        border-color: #000;
        color: #fff;
    }
    .single-actu__share-btn--copy { background: transparent; }
    .single-actu__share-copied {
        position: absolute;
        left: calc(100% + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
        background: var(--brand-leaf);
        color: var(--on-brand-light);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.25rem 0.6rem;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity var(--dur-fast);
        pointer-events: none;
    }
    .single-actu__share-btn--copy.is-copied .single-actu__share-copied { opacity: 1; }

    /* ── PROSE (corps de l'article) ──────────────────────────────── */
    .single-actu__article {
        max-width: 68ch;
        font-family: var(--font-body);
        font-size: var(--step-0);
        line-height: 1.75;
        color: var(--ink);
    }
    .single-actu__article > *:first-child { margin-top: 0; }
    .single-actu__article > p:first-of-type::first-letter {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 5em;
        line-height: 0.85;
        float: left;
        margin: 0.05em 0.15em 0 -0.05em;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .single-actu__article h2 {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.4vw, 2.1rem);
        font-weight: 400;
        line-height: 1.15;
        margin: var(--space-xl) 0 var(--space-m);
        color: var(--ink);
        letter-spacing: -0.01em;
    }
    .single-actu__article h3 {
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 1.8vw, 1.55rem);
        font-weight: 500;
        line-height: 1.25;
        margin: var(--space-l) 0 var(--space-s);
        color: var(--ink);
    }
    .single-actu__article p {
        margin: 0 0 var(--space-m);
        max-width: none;
    }
    .single-actu__article ul,
    .single-actu__article ol {
        margin: 0 0 var(--space-m);
        padding-left: 1.5rem;
    }
    .single-actu__article li {
        margin-bottom: 0.5rem;
        line-height: 1.65;
    }
    .single-actu__article strong { font-weight: 600; color: var(--ink); }
    .single-actu__article em { font-style: italic; color: var(--brand-earth-text); }
    .single-actu__article blockquote {
        margin: var(--space-l) 0;
        padding: var(--space-s) var(--space-l);
        border-left: 3px solid var(--brand-sun);
        background: color-mix(in oklch, var(--brand-sun) 6%, transparent);
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.15rem;
        line-height: 1.5;
        color: var(--ink);
        font-variation-settings: "opsz" 144, "WONK" 1;
        border-radius: 0 var(--radius) var(--radius) 0;
    }
    .single-actu__article a {
        color: var(--brand-earth-text);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        transition: color var(--dur-fast);
    }
    .single-actu__article a:hover {
        color: var(--brand-earth);
        text-decoration-thickness: 2px;
    }
    .single-actu__article img,
    .single-actu__article figure {
        margin: var(--space-l) 0;
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .single-actu__article figcaption {
        font-size: 0.85rem;
        font-style: italic;
        color: var(--ink-soft);
        text-align: center;
        margin-top: var(--space-xs);
    }

    /* ── FOOTER (tags + publish info) ────────────────────────────── */
    .single-actu__footer {
        max-width: 68ch;
        margin: var(--space-xl) 0 0;
        margin-inline: auto;
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
    }
    @media (min-width: 980px) {
        .single-actu__footer { margin-left: calc(56px + var(--space-2xl)); }
    }
    .single-actu__tags {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 0.5rem;
        margin: 0 0 var(--space-m);
    }
    .single-actu__tags-label {
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-right: 0.4rem;
    }
    .single-actu__tags a {
        display: inline-block;
        padding: 0.3rem 0.75rem;
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--brand-earth-text);
        text-decoration: none;
        transition: background var(--dur-fast);
    }
    .single-actu__tags a:hover {
        background: color-mix(in oklch, var(--brand-earth) 16%, transparent);
    }
    .single-actu__publish-info {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 0.9rem;
        color: var(--ink-soft);
        margin: 0;
    }

    /* ── RELATED ACTUALITÉS ──────────────────────────────────────── */
    .single-actu__related {
        padding-block: var(--space-2xl) var(--space-3xl);
        background: var(--bg-elev);
        position: relative;
    }
    .single-actu__related-header {
        max-width: 60ch;
        margin: 0 0 var(--space-xl);
    }
    .single-actu__related-title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        font-weight: 400;
        line-height: 1.05;
        margin: var(--space-s) 0 0;
        color: var(--ink);
        text-wrap: balance;
    }
    .single-actu__related-title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .single-actu__related-grid {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
        .single-actu__related-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── CTA DON FOOTER ──────────────────────────────────────────── */
    .single-actu__cta {
        padding-block: var(--space-3xl);
        background: var(--brand-earth);
        color: var(--on-brand-light);
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .single-actu__cta::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(circle at 80% 20%, color-mix(in oklch, var(--brand-sun) 22%, transparent) 0%, transparent 50%),
            radial-gradient(circle at 10% 80%, color-mix(in oklch, var(--brand-leaf) 18%, transparent) 0%, transparent 50%);
        opacity: 0.5;
        pointer-events: none;
        z-index: -1;
    }
    .single-actu__cta-inner {
        text-align: center;
        max-width: 56ch;
        margin-inline: auto;
    }
    .single-actu__cta-title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
        font-weight: 300;
        line-height: 1.1;
        margin: 0 0 var(--space-m);
        color: var(--on-brand-light);
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 80;
    }
    .single-actu__cta-title em {
        font-style: italic;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "WONK" 1;
    }
    .single-actu__cta-lead {
        color: color-mix(in oklch, var(--on-brand-light) 88%, transparent);
        margin: 0 0 var(--space-l);
        font-size: 1.02rem;
        line-height: 1.6;
    }

    /* ─── ACTUALITÉS v3.14.15 — featured + 2 secondaires ─────────── */
    .actualites {
        padding-block: var(--space-xl) var(--space-3xl);
        background: var(--bg-elev);
    }
    .actualites__header {
        display: grid;
        gap: var(--space-m);
        grid-template-columns: 1fr;
        margin: 0 0 var(--space-xl);
    }
    @media (min-width: 720px) {
        .actualites__header {
            grid-template-columns: 1fr auto;
            align-items: end;
        }
    }
    .actualites__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400;
        line-height: 1.05;
        margin: var(--space-s) 0 0;
        color: var(--ink);
        text-wrap: balance;
    }
    .actualites__title em {
        font-style: italic; font-weight: 300;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .actualites__header-link {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        text-decoration: none;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .actualites__header-link svg { transition: transform var(--dur-base) var(--ease-out); }
    .actualites__header-link:hover svg { transform: translateX(6px); }
    .actualites__grid {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .actualites__grid {
            grid-template-columns: 1.4fr 1fr;
            grid-template-rows: auto auto;
            gap: var(--space-l);
        }
        .actu-card--featured {
            grid-row: span 2;
        }
    }
    .actu-card { display: block; }
    .actu-card__inner {
        display: flex; flex-direction: column;
        background: var(--bg-paper);
        text-decoration: none;
        color: inherit;
        height: 100%;
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out);
    }
    .actu-card__inner:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-3);
    }
    .actu-card__media {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--bg-elev);
    }
    .actu-card--featured .actu-card__media { aspect-ratio: 4/3; }
    .actu-card__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.4s var(--ease-out);
        will-change: transform;
    }
    .actu-card__inner:hover .actu-card__media img { transform: scale(1.04); }
    .actu-card__overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to top, oklch(0.10 0.012 85 / 0.18), transparent 50%);
        opacity: 0; transition: opacity var(--dur-base);
        pointer-events: none;
    }
    .actu-card__inner:hover .actu-card__overlay { opacity: 1; }
    .actu-card__body {
        padding: var(--space-m) var(--space-l) var(--space-l);
        display: flex; flex-direction: column;
        gap: var(--space-s);
        flex: 1;
    }
    .actu-card--featured .actu-card__body { padding: var(--space-l); }
    .actu-card__meta {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-leaf-text);
        margin: 0;
    }
    .actu-card__title {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
        line-height: 1.15;
        margin: 0;
        color: var(--ink);
        transition: color var(--dur-fast);
        letter-spacing: -0.01em;
    }
    .actu-card--featured .actu-card__title { font-size: var(--step-3); }
    .actu-card__inner:hover .actu-card__title { color: var(--brand-earth-text); }
    .actu-card__excerpt {
        color: var(--ink-soft);
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .actu-card__cta {
        margin-top: auto;
        display: inline-flex; align-items: center; gap: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.02em;
    }
    .actu-card__cta svg { transition: transform var(--dur-base) var(--ease-out); }
    .actu-card__inner:hover .actu-card__cta svg { transform: translateX(5px); }

    /* ─── TÉMOIGNAGES v3.14.15 — pull-quote théâtral ─────────────── */
    .temoignages {
        position: relative;
        padding-block: var(--space-2xl) var(--space-3xl);
        overflow: hidden;
        isolation: isolate;
    }
    /* Marque décorative géante en arrière-plan */
    .temoignages__deco-quote {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(20rem, 50vw, 40rem);
        line-height: 0.8;
        color: var(--brand-sun);
        opacity: 0.08;
        pointer-events: none;
        z-index: -1;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        user-select: none;
    }
    .temoignages__header {
        text-align: center;
        max-width: 50ch;
        margin: 0 auto var(--space-l);
    }
    .temoignage-pull {
        max-width: 60ch;
        margin: 0 auto;
        text-align: center;
        position: relative;
    }
    .temoignage-pull__quote {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(1.4rem, 3vw, 2.4rem);
        line-height: 1.3;
        color: var(--ink);
        margin: 0 0 var(--space-l);
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
        letter-spacing: -0.005em;
    }
    .temoignage-pull__quote::before {
        content: "\201C";
        display: block;
        font-size: 4rem;
        color: var(--brand-sun);
        line-height: 0.4;
        margin-bottom: var(--space-m);
        font-family: var(--font-display);
        font-style: italic;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .temoignage-pull__footer {
        display: inline-flex; align-items: center; gap: var(--space-s);
        padding-top: var(--space-m);
        border-top: 1px solid var(--line);
        margin: 0 auto;
    }
    .temoignage-pull__photo {
        width: 56px; height: 56px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 4px 12px oklch(0 0 0 / 0.08);
    }
    .temoignage-pull__attribution {
        text-align: left;
    }
    .temoignage-pull__author {
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        margin: 0;
        letter-spacing: 0.01em;
    }
    .temoignage-pull__role {
        font-size: 0.82rem;
        color: var(--ink-faint);
        margin: 0.1rem 0 0;
    }

    /* ─── PROJET PHARE — grille container-query ───────────────────── */
    @container (min-width: 880px) {
        .phare-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2xl) !important; }
    }

    /* ─── VOIX DU PROJET — cartes vidéo lazy click-to-play ───────── */
    .voix-projet { padding-block: var(--space-3xl); }
    .voix-grid {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .voix-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
    }
    .voix-card {
        background: var(--bg-elev);
        overflow: hidden;
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .voix-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
    .voix-card__play {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        background: var(--bg-deep);
        overflow: hidden;
        cursor: pointer;
        border: 0; padding: 0;
    }
    .voix-card__poster {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base);
    }
    .voix-card:hover .voix-card__poster {
        transform: scale(1.03);
        filter: brightness(0.92);
    }
    .voix-card__overlay {
        position: absolute; inset: 0;
        display: grid; place-items: center;
        background: linear-gradient(180deg, transparent 40%, oklch(0 0 0 / .4) 100%);
        pointer-events: none;
    }
    .voix-card__btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 64px; height: 64px;
        border-radius: 50%;
        background: var(--brand-earth);
        color: var(--bg-paper);
        box-shadow: 0 4px 20px oklch(0 0 0 / .3), 0 0 0 8px oklch(1 0 0 / .12);
        transition: transform var(--dur-base) var(--ease-back), background var(--dur-base);
    }
    .voix-card:hover .voix-card__btn,
    .voix-card__play:focus-visible .voix-card__btn {
        transform: scale(1.1);
        background: var(--brand-sun);
        color: var(--ink);
    }
    .voix-card__btn svg { margin-left: 3px; /* centre optique du triangle */ }
    .voix-card__duration {
        position: absolute;
        bottom: var(--space-s); right: var(--space-s);
        padding: 0.35rem 0.75rem;
        background: oklch(0 0 0 / .6);
        color: oklch(0.96 0.012 85);
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 4px;
    }
    .voix-card__body {
        padding: var(--space-m);
        display: flex; flex-direction: column; gap: 0.4rem;
    }
    .voix-card__context {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-leaf-text);
        margin: 0;
    }
    .voix-card__speaker {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
        line-height: 1.15;
        margin: 0;
        color: var(--ink);
    }
    .voix-card__role {
        font-size: 0.95rem;
        color: var(--ink-soft);
        margin: 0;
        max-width: none;
    }
    /* Le vrai lecteur, injecté en remplacement après clic */
    .voix-card video {
        width: 100%;
        height: 100%;
        display: block;
        background: var(--bg-deep);
        aspect-ratio: 16/9;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE FAIRE UN DON — éditorial cinématique
       ═══════════════════════════════════════════════════════════════ */

    .don-hero {
        position: relative;
        min-height: 70vh;
        color: #FAF6EE;
        display: flex;
        align-items: end;
        overflow: hidden;
        isolation: isolate;
    }
    .don-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .don-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 24s ease-in-out infinite alternate;
    }
    .don-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.55) 0%, oklch(0.13 0.012 85 / 0.85) 100%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 30%, transparent) 0%, transparent 60%);
    }
    .don-hero__inner { padding-block: var(--space-2xl) var(--space-xl); width: 100%; position: relative; }
    .don-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .don-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .don-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 6vw, 5.5rem);
        font-weight: 300; line-height: 0.98; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .don-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .don-hero__lead {
        font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 50ch; margin: 0 0 var(--space-l);
    }

    /* ─── Section impact (chiffres habités) ─────────────────────── */
    .don-impact { padding-block: var(--space-3xl); background: var(--bg-elev); }
    .don-impact__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .don-impact__title {
        font-family: var(--font-display);
        font-size: var(--step-4); font-weight: 400; line-height: 1.05;
        margin: 0; color: var(--ink);
    }
    .don-impact__title em {
        font-style: italic; color: var(--brand-earth-text); font-weight: 300;
    }
    .don-impact__grid {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
        .don-impact__grid { grid-template-columns: repeat(3, 1fr); }
    }
    .don-impact__item {
        padding: var(--space-l) 0;
        border-top: 1px solid var(--line);
    }
    .don-impact__amount {
        display: block;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(2.5rem, 5vw, 4rem);
        line-height: 1;
        color: var(--brand-earth-text);
        margin-bottom: var(--space-s);
        font-variation-settings: "opsz" 144;
    }
    .don-impact__amount span {
        font-style: normal;
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--ink-faint);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        vertical-align: middle;
        margin-left: 0.4rem;
    }
    .don-impact__item p {
        font-size: 0.98rem;
        color: var(--ink-soft);
        margin: 0;
        max-width: 28ch;
    }

    /* ─── Section modes de don ──────────────────────────────────── */
    .don-modes { padding-block: var(--space-3xl); }
    .don-modes__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .don-modes__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400;
        margin: 0; color: var(--ink);
    }
    .don-modes__grid {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: 1px;
        grid-template-columns: 1fr;
        background: var(--line);
        border: 1px solid var(--line);
    }
    @media (min-width: 720px) { .don-modes__grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1080px) { .don-modes__grid { grid-template-columns: repeat(4, 1fr); } }
    .don-mode-card {
        background: var(--bg-elev);
        padding: var(--space-l) var(--space-m);
        display: flex; flex-direction: column;
        gap: var(--space-s);
        transition: background var(--dur-base);
    }
    .don-mode-card:hover {
        background: color-mix(in oklch, var(--brand-sun) 8%, var(--bg-elev));
    }
    .don-mode-card__num {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
        font-size: 2.2rem;
        line-height: 1;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144;
    }
    .don-mode-card h3 {
        font-family: var(--font-display);
        font-size: var(--step-1); font-weight: 500;
        margin: 0; color: var(--ink); line-height: 1.2;
    }
    .don-mode-card p {
        font-size: 0.92rem;
        color: var(--ink-soft);
        margin: 0;
        max-width: 32ch;
    }
    .don-modes__note {
        max-width: 800px; margin: var(--space-2xl) 0 0;
        padding: var(--space-m) var(--space-l);
        border-left: 3px solid var(--brand-sun);
        background: color-mix(in oklch, var(--brand-sun) 6%, transparent);
        color: var(--ink);
    }
    .don-modes__note p { margin: 0; }

    /* — Don hero : pills modes — */
    .don-hero__actions {
        display: flex; flex-wrap: wrap;
        gap: var(--space-s) var(--space-m);
        margin-bottom: var(--space-xl);
    }
    .don-hero__modes {
        display: flex; flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs);
        padding-top: var(--space-m);
        border-top: 1px solid color-mix(in oklch, #FAF6EE 22%, transparent);
    }
    .don-hero__modes-label {
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun);
        margin-right: var(--space-s);
    }
    .don-hero__mode {
        display: inline-flex; align-items: center; gap: 0.35rem;
        padding: 0.35rem 0.75rem;
        background: oklch(1 0 0 / 0.08);
        border: 1px solid oklch(1 0 0 / 0.15);
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 500;
        color: #FAF6EE;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* — Section "Pourquoi soutenir" : 3 chiffres habités — */
    .don-why { padding-block: var(--space-3xl); background: var(--bg-paper); }
    .don-why__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .don-why__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; margin: 0;
        color: var(--ink); text-wrap: balance;
    }
    .don-why__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .don-why__list {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) { .don-why__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }
    .don-why__item {
        padding: var(--space-l) 0 var(--space-l);
        border-top: 1px solid var(--line-strong);
    }
    .don-why__num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(3rem, 6vw, 5rem);
        line-height: 1;
        color: var(--brand-earth-text);
        display: block;
        margin-bottom: var(--space-s);
        font-variation-settings: "opsz" 144;
    }
    .don-why__num small {
        font-family: var(--font-body);
        font-style: normal;
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--ink-faint);
        display: block;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-top: 0.4rem;
    }
    .don-why__item p {
        color: var(--ink-soft);
        max-width: 32ch;
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.55;
    }
    .don-why__item strong { color: var(--ink); font-weight: 600; }

    /* — Section "Comment ça marche" : 3 étapes — */
    .don-how {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
    }
    .don-how__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .don-how__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; margin: 0;
        color: var(--ink); text-wrap: balance;
    }
    .don-how__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .don-how__steps {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) { .don-how__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }

    .don-how-step {
        display: flex; flex-direction: column;
        gap: var(--space-m);
        padding: var(--space-l);
        background: var(--bg-paper);
        border-left: 3px solid var(--brand-sun);
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .don-how-step:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2);
        border-left-color: var(--brand-earth-text);
    }
    .don-how-step__num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 3rem;
        line-height: 1;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144;
    }
    .don-how-step__body h3 {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 500;
        margin: 0 0 var(--space-s);
        color: var(--ink);
        line-height: 1.2;
    }
    .don-how-step__body p {
        color: var(--ink-soft);
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    /* — Section "Trust" : partenaires — */
    .don-trust {
        padding-block: var(--space-3xl);
        background: var(--bg-deep);
        color: #FAF6EE;
    }
    .don-trust .eyebrow { color: var(--brand-sun); }
    .don-trust__inner { max-width: 60ch; margin-inline: auto; text-align: center; }
    .don-trust__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
        font-weight: 400; line-height: 1.1;
        margin: 0 0 var(--space-l);
        color: #FAF6EE; text-wrap: balance;
    }
    .don-trust__title em { font-style: italic; color: var(--brand-sun); font-weight: 300; }
    .don-trust__partners {
        list-style: none; padding: 0; margin: 0 0 var(--space-l);
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--space-s);
    }
    .don-trust__partners li {
        padding: 0.5rem 1rem;
        background: oklch(1 0 0 / 0.08);
        border: 1px solid oklch(1 0 0 / 0.15);
        border-radius: 999px;
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        font-size: 0.92rem;
        color: #FAF6EE;
    }
    .don-trust__note {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 1.15rem;
        line-height: 1.4;
        color: color-mix(in oklch, #FAF6EE 80%, transparent);
        margin: 0;
        max-width: 50ch;
        margin-inline: auto;
    }

    /* — Section témoignage — */
    .don-testimonial {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
    }
    .don-testimonial__quote {
        max-width: 60ch;
        margin: 0 auto var(--space-xl);
        text-align: center;
        position: relative;
    }
    .don-testimonial__quote::before {
        content: "“";
        display: block;
        font-family: var(--font-display);
        font-size: 4rem;
        color: var(--brand-sun);
        line-height: 0.5;
        margin-bottom: var(--space-s);
    }
    .don-testimonial__quote p {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(1.4rem, 2.5vw, 1.8rem);
        line-height: 1.4;
        color: var(--ink);
        margin: 0 0 var(--space-m);
        max-width: none;
        text-wrap: balance;
    }
    .don-testimonial__quote cite {
        font-family: var(--font-body);
        font-style: normal;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.02em;
    }
    .don-testimonial__cta {
        text-align: center;
        padding-top: var(--space-l);
        border-top: 1px solid var(--line);
        max-width: 60ch;
        margin-inline: auto;
    }
    .don-testimonial__cta p {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--ink-soft);
        margin: 0 0 var(--space-s);
    }

    /* Scroll-driven reveal pour toute la page don */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .don-why__item,
            .don-how-step,
            .don-impact__item {
                animation: don-section-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
            }
            @keyframes don-section-in {
                from { opacity: 0; transform: translateY(30px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            .don-testimonial__quote {
                animation: don-quote-in linear both;
                animation-timeline: view();
                animation-range: entry 10% cover 40%;
            }
            @keyframes don-quote-in {
                from { opacity: 0; transform: translateY(20px); filter: blur(2px); }
                to   { opacity: 1; transform: translateY(0); filter: blur(0); }
            }
        }
    }

    /* ─── Section formulaire (magazine 2 cols) ──────────────────── */
    .don-form-section { padding-block: var(--space-3xl); background: var(--bg-elev); }
    .don-form-section__layout {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .don-form-section__layout { grid-template-columns: 1fr 1.5fr; gap: var(--space-2xl); align-items: start; }
    }
    .don-form-section__aside { position: sticky; top: calc(var(--nav-h) + var(--space-m)); }
    .don-form-section__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m); color: var(--ink);
    }
    .don-form-section__intro {
        color: var(--ink-soft);
        max-width: 36ch;
        margin: 0 0 var(--space-l);
    }
    .don-form-section__assurance {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column; gap: 0.5rem;
        font-size: 0.92rem;
        color: var(--ink-soft);
    }
    .don-form-section__assurance li::first-letter { color: var(--brand-leaf-text); font-weight: 700; }
    .don-form-section__main {
        background: var(--bg-paper);
        padding: var(--space-l);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
    }
    @media (min-width: 720px) {
        .don-form-section__main { padding: var(--space-xl); }
    }
    .don-form__rgpd { color: var(--ink-faint); font-size: 0.85rem; margin-top: var(--space-s); }
    .don-form__actions { margin-top: var(--space-l); }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "CONTACT" — award-grade : 3 canaux + form magazine + carte
       ═══════════════════════════════════════════════════════════════ */

    /* — I. HERO ——————————————————————————————————————————————— */
    .contact-hero {
        position: relative;
        min-height: 70vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .contact-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .contact-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .contact-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.45) 0%, oklch(0.10 0.012 85 / 0.94) 100%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-leaf) 25%, transparent) 0%, transparent 55%);
    }
    .contact-hero__inner { padding-block: var(--space-2xl) var(--space-xl); width: 100%; position: relative; }
    .contact-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .contact-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .contact-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.6rem, 6.5vw, 5.5rem);
        font-weight: 300; line-height: 0.96; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 20ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .contact-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .contact-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.5vw, 1.3rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 56ch; margin: 0 0 var(--space-l);
    }
    .contact-hero__channels {
        display: flex; flex-wrap: wrap; gap: var(--space-s);
    }
    /* v3.14.20 — Force cream/white sur le label + icône :
       sans !important, la règle theme.json `a { color: var(--wp--preset--color--earth) }`
       prend le dessus et rend le label en bordeaux/terra-cotta illisible
       sur le fond glassmorphism sombre. */
    .contact-hero__channel,
    a.contact-hero__channel {
        display: inline-flex; align-items: center; gap: 0.55rem;
        padding: 0.6rem 1.1rem;
        background: oklch(1 0 0 / 0.10);
        border: 1px solid oklch(1 0 0 / 0.22);
        border-radius: 999px;
        color: #FAF6EE !important;
        font-family: var(--font-body);
        font-size: 0.92rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    }
    .contact-hero__channel svg {
        color: var(--brand-sun);          /* icône or sahélien */
        flex-shrink: 0;
    }
    .contact-hero__channel:hover,
    a.contact-hero__channel:hover {
        background: oklch(1 0 0 / 0.18);
        border-color: var(--brand-sun);
        transform: translateY(-2px);
        color: #FAF6EE !important;
    }
    .contact-hero__channel--wa,
    a.contact-hero__channel--wa {
        background: #25D366;
        border-color: #1ebe5b;
        color: #FFFFFF !important;
    }
    .contact-hero__channel--wa svg { color: #FFFFFF; }
    .contact-hero__channel--wa:hover,
    a.contact-hero__channel--wa:hover {
        background: #1ebe5b;
        border-color: #19a04d;
        color: #FFFFFF !important;
    }

    /* — II. 3 CANAUX EN CARTES ————————————————————————————— */
    .contact-channels {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .contact-channels__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .contact-channels__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; margin: 0;
        color: var(--ink);
    }
    .contact-channels__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .contact-channels__grid {
        display: grid; gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) { .contact-channels__grid { grid-template-columns: repeat(3, 1fr); } }

    .contact-channel {
        display: flex; flex-direction: column;
        gap: var(--space-s);
        padding: var(--space-l);
        background: var(--bg-elev);
        text-decoration: none;
        color: inherit;
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base);
        position: relative;
        overflow: hidden;
    }
    .contact-channel:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-2);
        background: color-mix(in oklch, var(--brand-sun) 4%, var(--bg-elev));
    }
    .contact-channel--wa,
    a.contact-channel--wa {
        background: #25D366;
        color: #FFFFFF !important;
    }
    .contact-channel--wa:hover,
    a.contact-channel--wa:hover {
        background: #1ebe5b;
        color: #FFFFFF !important;
    }

    .contact-channel__icon {
        width: 56px; height: 56px;
        background: color-mix(in oklch, var(--brand-earth) 10%, transparent);
        color: var(--brand-earth-text);
        border-radius: 50%;
        display: grid; place-items: center;
        margin-bottom: var(--space-s);
        transition: transform var(--dur-base) var(--ease-back), background var(--dur-base);
    }
    .contact-channel--wa .contact-channel__icon {
        background: oklch(1 0 0 / 0.18);
        color: #FAF6EE;
    }
    .contact-channel:hover .contact-channel__icon {
        transform: scale(1.1) rotate(-4deg);
        background: var(--brand-sun);
        color: var(--ink);
    }
    .contact-channel--wa:hover .contact-channel__icon {
        background: oklch(1 0 0 / 0.25);
        color: #FAF6EE;
    }

    .contact-channel__title {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 500; margin: 0;
        line-height: 1.1;
    }
    .contact-channel__desc {
        margin: 0;
        font-size: 0.95rem;
        color: var(--ink-soft);
        line-height: 1.5;
    }
    .contact-channel--wa .contact-channel__desc {
        color: color-mix(in oklch, #FAF6EE 88%, transparent);
    }
    .contact-channel__phone,
    .contact-channel__email {
        margin: 0;
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        font-size: 1.1rem;
        color: var(--brand-earth-text);
    }
    .contact-channel--wa .contact-channel__phone,
    .contact-channel--wa .contact-channel__email { color: #FAF6EE; }

    .contact-channel__cta {
        margin-top: auto;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.04em;
        display: inline-block;
        transition: transform var(--dur-fast);
    }
    .contact-channel--wa .contact-channel__cta { color: #FAF6EE; }
    .contact-channel:hover .contact-channel__cta { transform: translateX(4px); }

    /* — III. FORMULAIRE MAGAZINE ———————————————————————————— */
    .contact-form-section {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
    }
    .contact-form-section__layout {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .contact-form-section__layout { grid-template-columns: 1fr 1.5fr; gap: var(--space-2xl); align-items: start; }
    }
    .contact-form-section__aside { position: sticky; top: calc(var(--nav-h) + var(--space-m)); }
    .contact-form-section__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m); color: var(--ink);
    }
    .contact-form-section__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .contact-form-section__lead {
        color: var(--ink-soft);
        max-width: 36ch;
        margin: 0 0 var(--space-l);
    }
    .contact-form-section__what {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column; gap: 0.5rem;
        font-size: 0.95rem; color: var(--ink-soft);
    }
    .contact-form-section__what li::first-letter { color: var(--brand-leaf-text); font-weight: 700; }

    .contact-form-section__main {
        background: var(--bg-paper);
        padding: var(--space-l);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
    }
    @media (min-width: 720px) {
        .contact-form-section__main { padding: var(--space-xl); }
    }
    .contact-form__rgpd { color: var(--ink-faint); font-size: 0.85rem; margin-top: var(--space-s); }
    .contact-form__actions { margin-top: var(--space-l); }

    /* — IV. COORDONNÉES + CARTE ——————————————————————————— */
    .contact-info {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .contact-info__grid {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .contact-info__grid { grid-template-columns: 1fr 1.5fr; gap: var(--space-2xl); align-items: start; }
    }
    .contact-info__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-l); color: var(--ink);
    }
    .contact-info__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .contact-info__list {
        margin: 0;
        display: flex; flex-direction: column;
        gap: var(--space-m);
    }
    .contact-info__list > div {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding-bottom: var(--space-s);
        border-bottom: 1px solid var(--line);
    }
    .contact-info__list dt {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0;
    }
    .contact-info__list dd {
        margin: 0;
        font-size: 1rem;
        color: var(--ink);
        line-height: 1.5;
    }
    .contact-info__list dd a {
        color: var(--brand-earth-text);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .contact-info__map {
        aspect-ratio: 4/3;
        background: var(--bg-elev);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-1);
        position: relative;
    }
    .contact-info__map iframe {
        width: 100%; height: 100%;
        border: 0; display: block;
        filter: contrast(1.05) saturate(0.85);
        transition: filter var(--dur-base);
    }
    .contact-info__map:hover iframe { filter: contrast(1.1) saturate(1); }

    /* — V. CTA FOOTER ———————————————————————————————————————— */
    .contact-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-deep);
        color: #FAF6EE;
        text-align: center;
        overflow: hidden;
        position: relative;
    }
    .contact-cta::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at center top, color-mix(in oklch, var(--brand-sun) 16%, transparent) 0%, transparent 60%),
            radial-gradient(ellipse at center bottom, color-mix(in oklch, var(--brand-earth) 20%, transparent) 0%, transparent 60%);
        opacity: 0.6; pointer-events: none;
    }
    .contact-cta__inner {
        position: relative;
        max-width: 60ch;
        margin-inline: auto;
    }
    .contact-cta__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m);
        color: #FAF6EE;
        text-wrap: balance;
    }
    .contact-cta__title em { font-style: italic; color: var(--brand-sun); font-weight: 300; }
    .contact-cta__lead {
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        max-width: 50ch;
        margin: 0 auto var(--space-l);
    }
    .contact-cta__actions {
        display: flex; justify-content: center;
        gap: var(--space-m); flex-wrap: wrap;
    }

    /* Scroll-driven reveal pour toute la page Contact */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .contact-channel {
                animation: contact-channel-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
            }
            @keyframes contact-channel-in {
                from { opacity: 0; transform: translateY(30px); }
                to   { opacity: 1; transform: translateY(0); }
            }
        }
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "GALERIE" — masonry award-grade + lightbox natif
       ═══════════════════════════════════════════════════════════════ */

    /* — I. HERO ——————————————————————————————————————————————— */
    .galerie-hero {
        position: relative;
        min-height: 70vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .galerie-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .galerie-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .galerie-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.45) 0%, oklch(0.10 0.012 85 / 0.95) 100%),
            radial-gradient(ellipse at bottom right, color-mix(in oklch, var(--brand-leaf) 22%, transparent) 0%, transparent 55%);
    }
    .galerie-hero__inner { padding-block: var(--space-2xl) var(--space-xl); width: 100%; position: relative; }
    .galerie-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .galerie-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .galerie-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 300; line-height: 0.95; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 18ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .galerie-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .galerie-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.6vw, 1.35rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 56ch; margin: 0 0 var(--space-l);
    }
    .galerie-hero__counter {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 500;
        color: color-mix(in oklch, #FAF6EE 78%, transparent);
        letter-spacing: 0.04em;
    }
    .galerie-hero__counter span {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        color: var(--brand-sun);
        font-size: 1.15em;
        margin-right: 0.1em;
    }

    /* — II. FILTRES (sticky) ——————————————————————————————— */
    .galerie-filters {
        position: sticky;
        top: var(--nav-h);
        z-index: 30;
        background: color-mix(in oklch, var(--bg-paper) 95%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-block: 1px solid var(--line);
        padding-block: var(--space-s);
    }
    .galerie-filters__inner {
        display: flex; align-items: center;
        gap: var(--space-s); flex-wrap: wrap;
    }
    .galerie-filters__label {
        font-size: 0.78rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--ink-faint);
        margin-right: var(--space-s);
    }
    .galerie-filter {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0.9rem;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
    }
    .galerie-filter span {
        font-size: 0.7rem;
        color: var(--ink-faint);
        font-weight: 600;
        padding: 0.05rem 0.4rem;
        background: var(--bg-paper);
        border-radius: 999px;
    }
    .galerie-filter:hover { border-color: var(--brand-earth-text); color: var(--brand-earth-text); }
    .galerie-filter.is-active { background: var(--ink); color: var(--bg-paper); border-color: var(--ink); }
    .galerie-filter.is-active span { background: oklch(1 0 0 / 0.15); color: var(--brand-sun); }

    /* — III. MASONRY GRID asymétrique ——————————————————————— */
    .galerie-grid-section {
        padding-block: var(--space-l) var(--space-3xl);
        background: var(--bg-paper);
    }

    .galerie-grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: 4px;
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        grid-auto-flow: dense;
    }
    @media (min-width: 540px) {
        .galerie-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
    }
    @media (min-width: 880px) {
        .galerie-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 6px; }
    }
    @media (min-width: 1240px) {
        .galerie-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; }
    }

    /* Tuiles asymétriques */
    .galerie-tile { position: relative; overflow: hidden; }
    @media (min-width: 540px) {
        .galerie-tile--tall { grid-row: span 2; }
    }
    @media (min-width: 880px) {
        .galerie-tile--wide { grid-column: span 2; }
    }

    .galerie-tile__inner {
        display: block;
        width: 100%; height: 100%;
        position: relative;
        overflow: hidden;
        background: var(--bg-elev);
        cursor: zoom-in;
        border: 0; padding: 0;
        font: inherit; color: inherit;
        text-align: left;
    }
    .galerie-tile--video .galerie-tile__inner { cursor: pointer; }

    .galerie-tile__inner img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 1.4s var(--ease-out), filter 0.5s;
    }
    .galerie-tile__inner:hover img,
    .galerie-tile__inner:focus-visible img {
        transform: scale(1.08);
        filter: brightness(0.85) saturate(1.15);
    }

    .galerie-tile__placeholder {
        width: 100%; height: 100%;
        background: linear-gradient(135deg, var(--bg-deep), var(--brand-earth));
    }

    /* Bouton play vidéo */
    .galerie-tile__play {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 64px; height: 64px;
        background: var(--brand-earth);
        color: var(--bg-paper);
        border-radius: 50%;
        display: grid; place-items: center;
        box-shadow: 0 4px 20px oklch(0 0 0 / 0.3);
        transition: transform var(--dur-base) var(--ease-back), background var(--dur-base);
    }
    .galerie-tile__inner:hover .galerie-tile__play {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--brand-sun);
        color: var(--ink);
    }
    .galerie-tile__play svg { margin-left: 3px; }

    /* Badge "Vidéo" en haut à droite */
    .galerie-tile__badge {
        position: absolute;
        top: var(--space-s); right: var(--space-s);
        padding: 0.2rem 0.6rem;
        background: oklch(0 0 0 / 0.55);
        color: #FAF6EE;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: 4px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Caption en bas (apparaît au hover) */
    .galerie-tile__caption {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: var(--space-m);
        background: linear-gradient(to top, oklch(0 0 0 / 0.85) 0%, transparent 100%);
        color: #FAF6EE;
        font-family: var(--font-body);
        font-size: 0.85rem;
        line-height: 1.4;
        font-weight: 500;
        transform: translateY(100%);
        opacity: 0;
        transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
    }
    .galerie-tile__inner:hover .galerie-tile__caption,
    .galerie-tile__inner:focus-visible .galerie-tile__caption {
        transform: translateY(0);
        opacity: 1;
    }

    /* Scroll-driven reveal */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .galerie-tile {
                animation: galerie-tile-in linear both;
                animation-timeline: view();
                animation-range: entry 0% cover 30%;
            }
            @keyframes galerie-tile-in {
                from { opacity: 0; transform: scale(0.96); }
                to   { opacity: 1; transform: scale(1); }
            }
        }
    }

    .galerie-grid-section__empty {
        text-align: center;
        padding-block: var(--space-3xl);
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.3rem;
        color: var(--ink-soft);
        max-width: 60ch; margin-inline: auto;
    }

    /* — IV. LIGHTBOX HTML <dialog> natif ————————————————————— */
    .galerie-lightbox {
        width: 100vw; max-width: 100vw;
        height: 100dvh; max-height: 100dvh;
        margin: 0; padding: 0;
        border: 0; outline: 0;
        background: oklch(0 0 0 / 0.92);
        color: #FAF6EE;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        overflow: hidden;
    }
    .galerie-lightbox::backdrop {
        background: oklch(0 0 0 / 0.85);
        backdrop-filter: blur(8px);
    }
    .galerie-lightbox[open] {
        display: grid;
        grid-template-rows: 1fr auto;
        gap: var(--space-m);
        padding: var(--space-xl);
    }
    @starting-style {
        .galerie-lightbox[open] { opacity: 0; transform: scale(0.96); }
    }
    .galerie-lightbox {
        transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
        transition-behavior: allow-discrete;
    }

    .galerie-lightbox__close {
        position: absolute;
        top: var(--space-m); right: var(--space-m);
        width: 48px; height: 48px;
        background: oklch(1 0 0 / 0.1);
        border: 1px solid oklch(1 0 0 / 0.2);
        color: #FAF6EE;
        border-radius: 50%;
        display: grid; place-items: center;
        z-index: 10;
        transition: background var(--dur-fast), transform var(--dur-fast);
    }
    .galerie-lightbox__close:hover {
        background: var(--brand-earth);
        transform: scale(1.1);
    }

    .galerie-lightbox__inner {
        display: grid; place-items: center;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .galerie-lightbox__inner img,
    .galerie-lightbox__inner video {
        max-width: 100%; max-height: 100%;
        object-fit: contain;
        display: block;
    }
    .galerie-lightbox__caption {
        text-align: center;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.1rem;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        margin: 0;
        max-width: 70ch;
        margin-inline: auto;
    }
    .galerie-lightbox__caption:empty { display: none; }

    /* — V. CTA FOOTER ———————————————————————————————————————— */
    .galerie-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
        border-top: 1px solid var(--line);
    }
    .galerie-cta__inner {
        display: grid; gap: var(--space-2xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .galerie-cta__inner { grid-template-columns: 1.3fr 1fr; align-items: center; }
    }
    .galerie-cta__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m);
        color: var(--ink);
        text-wrap: balance;
    }
    .galerie-cta__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .galerie-cta__lead {
        color: var(--ink-soft);
        max-width: 50ch;
        margin: 0 0 var(--space-l);
    }
    .galerie-cta__don {
        padding: var(--space-l);
        background: var(--bg-deep);
        color: #FAF6EE;
        border-left: 4px solid var(--brand-sun);
    }
    .galerie-cta__don-title {
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.3;
        margin: 0 0 var(--space-s);
        color: #FAF6EE;
    }
    .galerie-cta__don p {
        color: color-mix(in oklch, #FAF6EE 80%, transparent);
        font-size: 0.95rem;
        margin: 0 0 var(--space-m);
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "ACTUALITÉS" — magazine éditorial award-grade
       ═══════════════════════════════════════════════════════════════ */

    /* — I. HERO ——————————————————————————————————————————————— */
    .actu-hero {
        position: relative;
        min-height: 70vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .actu-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .actu-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .actu-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.45) 0%, oklch(0.10 0.012 85 / 0.94) 100%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 22%, transparent) 0%, transparent 55%);
    }
    .actu-hero__inner { padding-block: var(--space-2xl) var(--space-xl); width: 100%; position: relative; }
    .actu-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .actu-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .actu-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 300; line-height: 0.95; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 18ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .actu-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .actu-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 56ch; margin: 0;
    }

    /* — II. FEATURED ARTICLE (magazine grand format) ————————— */
    .actu-featured {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .actu-featured__inner {
        display: block;
        text-decoration: none;
        color: inherit;
        background: var(--bg-elev);
        overflow: hidden;
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .actu-featured__inner:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
    @media (min-width: 880px) {
        .actu-featured__inner {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            align-items: stretch;
        }
    }

    .actu-featured__media {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
        background: var(--bg-paper);
    }
    @media (min-width: 880px) {
        .actu-featured__media { aspect-ratio: auto; min-height: 500px; }
    }
    .actu-featured__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.5s var(--ease-out);
    }
    .actu-featured__inner:hover .actu-featured__media img { transform: scale(1.05); }

    .actu-featured__body {
        padding: var(--space-l) var(--space-xl) var(--space-xl);
        display: flex; flex-direction: column;
        justify-content: center;
        gap: var(--space-m);
    }
    .actu-featured__label {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 0.5rem 0.75rem;
        margin: 0;
        font-size: 0.82rem;
        color: var(--ink-soft);
    }
    .actu-featured__pill {
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: #FAF6EE;
        background: var(--brand-earth);
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
    }
    .actu-featured__label time {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 0.92rem;
        color: var(--ink-soft);
    }
    .actu-featured__cat { color: var(--brand-leaf-text); font-weight: 600; }
    .actu-featured__cat a { color: inherit; text-decoration: none; }

    .actu-featured__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 400; line-height: 1.05;
        margin: 0;
        color: var(--ink);
        text-wrap: balance;
        letter-spacing: -0.015em;
        transition: color var(--dur-fast);
    }
    .actu-featured__inner:hover .actu-featured__title { color: var(--brand-earth-text); }
    .actu-featured__excerpt {
        color: var(--ink-soft);
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.6;
        max-width: 50ch;
    }
    .actu-featured__cta {
        display: inline-flex; align-items: center; gap: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.03em;
    }
    .actu-featured__cta span { transition: transform var(--dur-fast) var(--ease-out); }
    .actu-featured__inner:hover .actu-featured__cta span { transform: translateX(4px); }

    /* — III. FILTRES ———————————————————————————————————————— */
    .actu-filters {
        position: sticky;
        top: var(--nav-h);
        z-index: 30;
        background: color-mix(in oklch, var(--bg-paper) 95%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-block: 1px solid var(--line);
        padding-block: var(--space-s);
    }
    .actu-filters__inner {
        display: flex; align-items: center;
        gap: var(--space-s); flex-wrap: wrap;
    }
    .actu-filters__label {
        font-size: 0.78rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--ink-faint);
        margin-right: var(--space-s);
    }
    .actu-filter {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 0.85rem;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
    }
    .actu-filter span {
        font-size: 0.7rem;
        color: var(--ink-faint);
        font-weight: 600;
        padding: 0.05rem 0.4rem;
        background: var(--bg-paper);
        border-radius: 999px;
    }
    .actu-filter:hover { border-color: var(--brand-earth-text); color: var(--brand-earth-text); }
    .actu-filter.is-active { background: var(--ink); color: var(--bg-paper); border-color: var(--ink); }
    .actu-filter.is-active span { background: oklch(1 0 0 / 0.15); color: var(--brand-sun); }

    /* — IV. GRILLE DES ARTICLES ——————————————————————————————— */
    .actu-grid-section {
        padding-block: var(--space-2xl) var(--space-3xl);
        background: var(--bg-paper);
    }
    .actu-grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-xl) var(--space-l);
        grid-template-columns: 1fr;
        counter-reset: actu;
    }
    @media (min-width: 640px) { .actu-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 980px) { .actu-grid { grid-template-columns: repeat(3, 1fr); } }

    .actu-card-li { counter-increment: actu; }
    .actu-card { height: 100%; }
    .actu-card__inner {
        display: flex; flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: inherit;
        background: var(--bg-elev);
        overflow: hidden;
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .actu-card__inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
    .actu-card__media {
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--bg-paper);
    }
    .actu-card__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.2s var(--ease-out), filter 0.4s;
    }
    .actu-card__inner:hover .actu-card__media img {
        transform: scale(1.05);
        filter: brightness(0.96) saturate(1.05);
    }
    .actu-card__body {
        padding: var(--space-m);
        display: flex; flex-direction: column;
        flex: 1;
        gap: var(--space-s);
        position: relative;
    }
    /* Numéro chronologique discret en haut à droite */
    .actu-card__body::before {
        content: counter(actu, decimal-leading-zero);
        position: absolute;
        top: var(--space-m); right: var(--space-m);
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 0.9rem;
        color: var(--ink-faint);
        letter-spacing: 0.05em;
    }
    .actu-card__meta {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
        margin: 0;
        font-size: 0.82rem;
        color: var(--ink-faint);
        padding-right: 3rem; /* laisse place au counter */
    }
    .actu-card__meta time {
        font-family: var(--font-display);
        font-style: italic;
        color: var(--ink-soft);
    }
    .actu-card__cat { color: var(--brand-leaf-text); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .actu-card__cat a { color: inherit; text-decoration: none; }
    .actu-card__title {
        font-family: var(--font-display);
        font-size: var(--step-1);
        font-weight: 500; line-height: 1.2;
        margin: 0;
        color: var(--ink);
        transition: color var(--dur-fast);
    }
    .actu-card__inner:hover .actu-card__title { color: var(--brand-earth-text); }
    .actu-card__excerpt {
        color: var(--ink-soft);
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.55;
        flex: 1;
    }
    .actu-card__cta {
        display: inline-flex; align-items: center; gap: 0.4rem;
        margin-top: auto;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.04em;
    }
    .actu-card__cta span { transition: transform var(--dur-fast) var(--ease-out); }
    .actu-card__inner:hover .actu-card__cta span { transform: translateX(4px); }

    /* Scroll-driven reveal */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .actu-card-li {
                animation: actu-card-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
            }
            @keyframes actu-card-in {
                from { opacity: 0; transform: translateY(30px); }
                to   { opacity: 1; transform: translateY(0); }
            }
        }
    }

    /* Pagination */
    .actu-pagination {
        display: flex; justify-content: center;
        gap: 0.5rem; flex-wrap: wrap;
        margin-top: var(--space-2xl);
    }
    .actu-pagination .page-numbers {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; height: 40px; padding: 0 0.85rem;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        color: var(--ink);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: var(--radius);
        transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    }
    .actu-pagination .page-numbers:hover { border-color: var(--brand-earth-text); color: var(--brand-earth-text); }
    .actu-pagination .page-numbers.current {
        background: var(--ink); color: var(--bg-paper); border-color: var(--ink);
    }

    .actu-grid-section__empty {
        text-align: center;
        padding-block: var(--space-3xl);
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.3rem;
        color: var(--ink-soft);
    }

    /* — V. CTA NEWSLETTER ——————————————————————————————————— */
    .actu-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
        border-top: 1px solid var(--line);
    }
    .actu-cta__inner {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: 1fr;
        align-items: end;
    }
    @media (min-width: 880px) {
        .actu-cta__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-2xl); }
    }
    .actu-cta__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.8rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m);
        color: var(--ink);
        text-wrap: balance;
    }
    .actu-cta__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .actu-cta__lead {
        color: var(--ink-soft);
        max-width: 50ch;
        margin: 0;
    }
    .actu-cta__form {
        display: flex; flex-direction: column; gap: 0.5rem;
    }
    .actu-cta__form input[type="email"] {
        padding: 0.85rem 1rem;
        border: 1px solid var(--line-strong);
        background: var(--bg-paper);
        color: var(--ink);
        border-radius: var(--radius);
        font-size: 1rem;
    }
    .actu-cta__form input[type="email"]:focus {
        outline: 2px solid var(--brand-sun);
        outline-offset: 2px;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "NOS PROJETS" — award-grade v3.14.11
       ═══════════════════════════════════════════════════════════════ */

    /* ─── I. HERO IMMERSIF ──────────────────────────────────────── */
    .projets-hero {
        position: relative;
        min-height: 85vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .projets-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .projets-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 28s ease-in-out infinite alternate;
    }
    .projets-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.45) 0%, oklch(0.10 0.012 85 / 0.94) 100%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-earth) 32%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 14%, transparent) 0%, transparent 50%);
    }
    /* Grid pattern décoratif (lignes éditoriales) */
    .projets-hero__grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
        background-size: clamp(60px, 6vw, 96px) clamp(60px, 6vw, 96px);
        mix-blend-mode: overlay;
        pointer-events: none;
        opacity: 0.7;
    }
    .projets-hero__inner {
        padding-block: var(--space-2xl) var(--space-l);
        width: 100%; position: relative;
    }
    .projets-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .projets-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .projets-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 300; line-height: 0.95; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 22ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .projets-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .projets-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 56ch; margin: 0 0 var(--space-xl);
    }
    /* Scroll indicator (lien vers #methode) */
    .projets-hero__scroll {
        display: inline-flex; align-items: center; gap: 0.6rem;
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        text-decoration: none;
        padding: var(--space-s) 0;
        transition: color var(--dur-fast), gap var(--dur-fast);
    }
    .projets-hero__scroll-line {
        display: inline-block; width: 2.5rem; height: 1px;
        background: currentColor;
        transition: width var(--dur-base) var(--ease-out);
    }
    .projets-hero__scroll:hover { color: var(--brand-sun); gap: 1.2rem; }
    .projets-hero__scroll:hover .projets-hero__scroll-line { width: 4rem; }

    /* ─── II. MÉTHODE — Timeline horizontale ──────────────────── */
    .projets-approach {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .projets-approach__inner {
        display: flex; flex-direction: column;
        gap: var(--space-2xl);
    }
    .projets-approach__header { max-width: 56ch; }
    .projets-approach__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-s) 0 0; color: var(--ink);
        text-wrap: balance;
        letter-spacing: -0.01em;
    }
    .projets-approach__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }

    .projets-approach__timeline {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-l);
        position: relative;
    }
    @media (min-width: 880px) {
        .projets-approach__timeline {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-l);
        }
        /* Ligne horizontale décorative reliant les 3 numéros */
        .projets-approach__timeline::before {
            content: "";
            position: absolute;
            top: 28px;
            left: 8%; right: 8%;
            height: 1px;
            background: linear-gradient(to right,
                transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
            z-index: 0;
        }
    }
    .projets-approach__step {
        position: relative; z-index: 1;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: var(--space-m);
        padding-top: var(--space-s);
    }
    .projets-approach__step-num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 2.6rem; line-height: 1;
        color: var(--brand-earth-text);
        background: var(--bg-paper);
        width: 56px; height: 56px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        margin: 0;
        transition: background var(--dur-base) var(--ease-out),
                    border-color var(--dur-base) var(--ease-out),
                    color var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
    }
    .projets-approach__step:hover .projets-approach__step-num {
        background: var(--brand-earth);
        border-color: var(--brand-earth);
        color: var(--on-brand-light);
        transform: scale(1.08) rotate(-4deg);
    }
    .projets-approach__step-body h3 {
        font-family: var(--font-display);
        font-size: 1.25rem; font-weight: 500;
        line-height: 1.3; margin: 0 0 var(--space-xs);
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .projets-approach__step-body p {
        margin: 0;
        font-size: 0.96rem; line-height: 1.6;
        color: var(--ink-soft);
        max-width: 36ch;
    }

    /* ─── III. CHIFFRES CLÉS (bandeau dark) ───────────────────── */
    .projets-stats {
        position: relative;
        padding-block: var(--space-2xl);
        background: var(--bg-deep);
        color: #FAF6EE;
        overflow: hidden;
        isolation: isolate;
    }
    .projets-stats__pattern {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.05) 1px, transparent 1px);
        background-size: 60px 60px;
        opacity: 0.5;
        pointer-events: none;
        mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    }
    .projets-stats__inner { position: relative; }
    .projets-stats__list {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr 1fr;
    }
    @media (min-width: 720px) {
        .projets-stats__list { grid-template-columns: repeat(4, 1fr); }
    }
    .projets-stats__item {
        display: flex; flex-direction: column;
        padding-top: var(--space-m);
        border-top: 1px solid oklch(1 0 0 / 0.18);
        gap: 0.4rem;
        transition: border-color var(--dur-base) var(--ease-out);
    }
    .projets-stats__item:hover { border-top-color: var(--brand-sun); }
    .projets-stats__num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(2.2rem, 4.5vw, 3.4rem);
        line-height: 1;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
        letter-spacing: -0.02em;
    }
    .projets-stats__label {
        font-size: 0.78rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 78%, transparent);
    }

    /* ─── IV. FILTRES STICKY (pill + slide indicator) ─────────── */
    .projets-filters {
        position: sticky;
        top: var(--nav-h);
        z-index: 30;
        background: color-mix(in oklch, var(--bg-paper) 94%, transparent);
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-block: 1px solid var(--line);
        padding-block: var(--space-s);
    }
    .projets-filters__inner {
        display: flex; align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .projets-filters__label {
        display: inline-flex; align-items: center; gap: 0.4rem;
        font-size: 0.78rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--ink-faint);
        margin-right: var(--space-s);
    }
    .projets-filters__label svg { color: var(--brand-earth-text); }

    .projets-filter {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.95rem;
        background: color-mix(in oklch, var(--ink) 4%, transparent);
        border: 1px solid var(--line);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        transition: background var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast),
                    color var(--dur-fast),
                    transform var(--dur-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }
    .projets-filter span {
        font-size: 0.7rem;
        color: var(--ink-faint);
        font-weight: 600;
        padding: 0.1rem 0.45rem;
        background: var(--bg-paper);
        border: 1px solid var(--line);
        border-radius: 999px;
        transition: all var(--dur-fast);
    }
    .projets-filter:hover {
        border-color: var(--brand-earth-text);
        color: var(--brand-earth-text);
        transform: translateY(-1px);
    }
    .projets-filter:active { transform: scale(0.96); }
    .projets-filter.is-active {
        background: var(--brand-earth);
        color: var(--on-brand-light);
        border-color: var(--brand-earth);
        box-shadow: 0 4px 14px color-mix(in oklch, var(--brand-earth) 22%, transparent);
    }
    .projets-filter.is-active span {
        background: oklch(1 0 0 / 0.18);
        color: var(--brand-sun);
        border-color: transparent;
    }

    /* ─── V + VI. GRILLE BENTO ASYMÉTRIQUE ───────────────────── */
    .projets-grid-section { padding-block: var(--space-2xl) var(--space-3xl); }
    .projets-grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(280px, auto);
    }
    @media (min-width: 760px) {
        .projets-grid {
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(240px, auto);
            gap: var(--space-l);
        }
        /* PROJET PHARE — col 1-3, row span 2, panel horizontal */
        .projet-tile--feature {
            grid-column: span 4;
            grid-row: span 1;
        }
        /* Cycle 2 — portrait, span 1 col × 2 rows */
        .projet-tile--c2 { grid-column: span 2; grid-row: span 2; }
        /* Cycles 3 et 4 — paysage normal */
        .projet-tile--c3 { grid-column: span 2; grid-row: span 1; }
        .projet-tile--c4 { grid-column: span 2; grid-row: span 1; }
        /* Cycle 5 — wide (full width) */
        .projet-tile--c5 { grid-column: span 4; grid-row: span 1; }
        /* Cycle 6 — portrait tall */
        .projet-tile--c6 { grid-column: span 2; grid-row: span 2; }
    }
    @media (min-width: 1200px) {
        /* Sur grand écran on bascule en grille 6 col plus dense */
        .projets-grid { grid-template-columns: repeat(6, 1fr); }
        .projet-tile--feature { grid-column: span 6; grid-row: span 1; }
        .projet-tile--c2 { grid-column: span 2; grid-row: span 2; }
        .projet-tile--c3 { grid-column: span 2; grid-row: span 1; }
        .projet-tile--c4 { grid-column: span 2; grid-row: span 1; }
        .projet-tile--c5 { grid-column: span 4; grid-row: span 1; }
        .projet-tile--c6 { grid-column: span 2; grid-row: span 2; }
    }

    .projet-tile { display: block; }
    .projet-tile__inner {
        position: relative;
        display: block;
        background: var(--bg-elev);
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        height: 100%;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out);
    }
    .projet-tile__inner:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-3);
    }
    @media (min-width: 760px) {
        .projet-tile--feature .projet-tile__inner {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            min-height: 480px;
        }
    }

    .projet-tile__media {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--bg-paper);
    }
    .projet-tile--feature .projet-tile__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
    .projet-tile--c2 .projet-tile__media,
    .projet-tile--c6 .projet-tile__media { aspect-ratio: 3/4; height: 100%; }
    .projet-tile--c5 .projet-tile__media { aspect-ratio: 16/7; }
    .projet-tile__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.6s var(--ease-out), filter 0.5s;
        will-change: transform;
    }
    .projet-tile__inner:hover .projet-tile__media img {
        transform: scale(1.06);
        filter: brightness(0.94) saturate(1.08);
    }
    /* Overlay sombre subtil au hover pour faire ressortir la couche body en feature */
    .projet-tile__overlay {
        position: absolute; inset: 0;
        background: linear-gradient(to top,
            oklch(0.12 0.012 85 / 0.6) 0%,
            oklch(0.12 0.012 85 / 0.0) 50%);
        opacity: 0; transition: opacity var(--dur-base);
        pointer-events: none;
    }
    .projet-tile__inner:hover .projet-tile__overlay { opacity: 1; }

    .projet-tile__num {
        position: absolute;
        top: var(--space-m); left: var(--space-m);
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 1.6rem;
        line-height: 1;
        color: #FAF6EE;
        background: oklch(0 0 0 / 0.5);
        padding: 0.3rem 0.7rem;
        border-radius: 4px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 2;
        transition: transform var(--dur-base) var(--ease-back);
    }
    .projet-tile__inner:hover .projet-tile__num {
        transform: scale(1.08) rotate(-3deg);
    }
    .projet-tile--feature .projet-tile__num {
        font-size: 2.4rem;
        background: transparent;
        color: var(--brand-sun);
        backdrop-filter: none;
        padding: 0;
        text-shadow: 0 2px 20px oklch(0 0 0 / 0.5);
    }

    .projet-tile__body {
        padding: var(--space-m) var(--space-l) var(--space-l);
        display: flex; flex-direction: column;
        gap: var(--space-s);
    }
    .projet-tile--feature .projet-tile__body {
        padding: var(--space-xl) var(--space-xl) var(--space-l);
        justify-content: center;
    }
    .projet-tile__category {
        font-size: 0.7rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-leaf-text);
        margin: 0;
    }
    .projet-tile__category a { color: inherit; text-decoration: none; }
    .projet-tile__title {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400; line-height: 1.15;
        margin: 0;
        color: var(--ink);
        transition: color var(--dur-fast);
        letter-spacing: -0.01em;
    }
    .projet-tile--feature .projet-tile__title { font-size: var(--step-3); font-weight: 400; }
    .projet-tile__inner:hover .projet-tile__title { color: var(--brand-earth-text); }
    .projet-tile__excerpt {
        color: var(--ink-soft);
        margin: 0;
        font-size: 0.94rem;
        line-height: 1.6;
        text-wrap: pretty;
    }
    .projet-tile__meta {
        display: grid;
        gap: var(--space-xs);
        grid-template-columns: 1fr 1fr;
        margin: var(--space-s) 0;
        padding-top: var(--space-s);
        border-top: 1px solid var(--line);
    }
    .projet-tile__meta > div { display: flex; flex-direction: column; gap: 0.1rem; }
    .projet-tile__meta dt {
        font-size: 0.68rem; font-weight: 600;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0;
    }
    .projet-tile__meta dd {
        font-size: 0.88rem;
        color: var(--ink);
        margin: 0;
    }
    .projet-tile__cta {
        display: inline-flex; align-items: center;
        gap: 0.5rem;
        margin-top: auto;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--brand-earth-text);
        letter-spacing: 0.04em;
    }
    .projet-tile__cta-arrow { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
    .projet-tile__inner:hover .projet-tile__cta-arrow { transform: translateX(6px); }

    /* Stagger reveal — chaque tile retardé via --reveal-delay (posé en PHP) */
    @media (prefers-reduced-motion: no-preference) {
        .projet-tile.reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
                        transform 0.7s var(--ease-out) var(--reveal-delay, 0ms);
        }
        .projet-tile.reveal.is-visible,
        .projet-tile.reveal[data-revealed] {
            opacity: 1;
            transform: translateY(0);
        }
        @supports (animation-timeline: view()) {
            .projet-tile.reveal {
                animation: tile-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
                animation-delay: var(--reveal-delay, 0ms);
                opacity: 1; transform: none; /* reset JS fallback */
                transition: none;
            }
            @keyframes tile-in {
                from { opacity: 0; transform: translateY(40px); }
                to   { opacity: 1; transform: translateY(0); }
            }
        }
    }

    .projets-grid-section__empty {
        text-align: center;
        padding-block: var(--space-2xl);
        max-width: 60ch; margin-inline: auto;
        color: var(--ink-soft);
        display: flex; flex-direction: column;
        align-items: center; gap: var(--space-s);
    }
    .projets-grid-section__empty svg {
        color: var(--ink-faint);
        opacity: 0.5;
        margin-bottom: var(--space-s);
    }
    .projets-grid-section__empty p {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.3rem;
        margin: 0;
        color: var(--ink);
    }
    .projets-grid-section__empty-sub {
        font-family: var(--font-body) !important;
        font-style: normal !important;
        font-size: 0.95rem !important;
        color: var(--ink-soft) !important;
        margin-bottom: var(--space-m) !important;
    }

    /* ─── VII. LOGOS PARTENAIRES (strip) ──────────────────────── */
    .projets-partners {
        padding-block: var(--space-xl);
        background: var(--bg-paper);
        border-top: 1px solid var(--line);
    }
    .projets-partners__label {
        text-align: center;
        display: block;
        margin: 0 0 var(--space-m);
        color: var(--ink-faint);
    }
    .projets-partners__list {
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        gap: var(--space-s) var(--space-m);
        font-family: var(--font-display);
        font-size: clamp(0.95rem, 1.3vw, 1.15rem);
        font-weight: 400;
        line-height: 1.4;
        color: var(--ink-soft);
        text-align: center;
    }
    .projets-partners__item em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 400;
        font-variation-settings: "opsz" 144, "WONK" 1;
    }
    .projets-partners__sep {
        color: var(--ink-faint);
        opacity: 0.5;
    }

    /* ─── VIII. CTA TRI-ACTION FOOTER ────────────────────────── */
    .projets-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-deep);
        color: #FAF6EE;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }
    .projets-cta::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 18%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-earth) 22%, transparent) 0%, transparent 55%);
        opacity: 0.7; pointer-events: none;
        z-index: -1;
    }
    .projets-cta__inner {
        position: relative;
        display: grid;
        gap: var(--space-2xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .projets-cta__inner { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--space-3xl); }
    }
    .projets-cta__primary { max-width: 50ch; }
    .projets-cta__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-s) 0 var(--space-m);
        color: #FAF6EE;
        text-wrap: balance;
        letter-spacing: -0.015em;
    }
    .projets-cta__title em {
        font-style: italic; color: var(--brand-sun);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .projets-cta__lead {
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        margin: 0;
        font-size: 1.05rem; line-height: 1.6;
    }

    .projets-cta__actions {
        display: grid;
        gap: var(--space-s);
        grid-template-columns: 1fr;
    }
    @media (min-width: 480px) {
        .projets-cta__actions { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 980px) {
        .projets-cta__actions { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; }
    }

    .projets-cta__card {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: var(--space-s);
        row-gap: 0.15rem;
        align-items: center;
        padding: var(--space-m) var(--space-l);
        background: oklch(1 0 0 / 0.06);
        border: 1px solid oklch(1 0 0 / 0.12);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: #FAF6EE;
        transition: background var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast),
                    transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base);
        position: relative; overflow: hidden;
    }
    .projets-cta__card::before {
        content: "";
        position: absolute; inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                                    oklch(1 0 0 / 0.10) 0%, transparent 50%);
        opacity: 0; transition: opacity var(--dur-fast);
        pointer-events: none;
    }
    .projets-cta__card:hover {
        background: oklch(1 0 0 / 0.10);
        border-color: oklch(1 0 0 / 0.22);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px oklch(0 0 0 / 0.25);
    }
    .projets-cta__card:hover::before { opacity: 1; }
    .projets-cta__card-icon {
        grid-row: 1 / 3;
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        background: oklch(1 0 0 / 0.10);
        border-radius: 50%;
        color: #FAF6EE;
        transition: background var(--dur-fast), transform var(--dur-base) var(--ease-back);
    }
    .projets-cta__card:hover .projets-cta__card-icon {
        background: oklch(1 0 0 / 0.18);
        transform: scale(1.08) rotate(-4deg);
    }
    .projets-cta__card-label {
        font-family: var(--font-body);
        font-size: 0.98rem;
        font-weight: 600;
        color: #FAF6EE;
        letter-spacing: 0.01em;
    }
    .projets-cta__card-sub {
        font-size: 0.78rem;
        color: color-mix(in oklch, #FAF6EE 65%, transparent);
        letter-spacing: 0.02em;
    }
    /* Variantes : Don accent earth, WhatsApp accent vert */
    .projets-cta__card--don {
        background: color-mix(in oklch, var(--brand-earth) 50%, transparent);
        border-color: var(--brand-earth);
    }
    .projets-cta__card--don:hover {
        background: color-mix(in oklch, var(--brand-earth) 70%, transparent);
        border-color: var(--brand-sun);
    }
    .projets-cta__card--don .projets-cta__card-icon {
        background: oklch(1 0 0 / 0.18);
        color: var(--brand-sun);
    }
    .projets-cta__card--wa .projets-cta__card-icon {
        background: #25D366;
        color: #fff;
    }
    .projets-cta__card--wa:hover .projets-cta__card-icon {
        background: #1ebe5b;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE PROJETS — v3.14.33 polish (hero pills, segmented filter,
       status badge, shine sweep, section header, mobile responsive)
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Hero : mini-stats pills (en cours / réalisés / total) ─── */
    .projets-hero__pills {
        display: flex; flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0 0 var(--space-l);
    }
    .projets-hero__pill {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.85rem;
        background: oklch(1 0 0 / 0.10);
        border: 1px solid oklch(1 0 0 / 0.20);
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: color-mix(in oklch, #FAF6EE 90%, transparent);
        transition: background var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast),
                    transform var(--dur-base) var(--ease-back);
    }
    .projets-hero__pill:hover {
        background: oklch(1 0 0 / 0.16);
        border-color: oklch(1 0 0 / 0.32);
        transform: translateY(-2px);
    }
    .projets-hero__pill strong {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        font-size: 1.05rem;
        color: #FAF6EE;
        font-variation-settings: "opsz" 144, "WONK" 1;
    }
    .projets-hero__pill--live {
        border-color: color-mix(in oklch, var(--brand-sun) 55%, transparent);
        background: color-mix(in oklch, var(--brand-sun) 12%, transparent);
    }
    .projets-hero__pill--live strong { color: var(--brand-sun); }
    .projets-hero__pill-dot {
        width: 8px; height: 8px;
        background: var(--brand-sun);
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--brand-sun);
        animation: oms-pulse-dot 2.2s var(--ease-out) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        .projets-hero__pill-dot { animation: none; }
    }
    @keyframes oms-pulse-dot {
        0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-sun) 70%, transparent); }
        70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--brand-sun) 0%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-sun) 0%, transparent); }
    }
    .projets-hero__pill--done {
        border-color: color-mix(in oklch, var(--brand-leaf) 55%, transparent);
        background: color-mix(in oklch, var(--brand-leaf) 14%, transparent);
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
    }
    .projets-hero__pill--done svg { color: color-mix(in oklch, var(--brand-leaf) 80%, #FAF6EE); }
    .projets-hero__pill--done strong { color: color-mix(in oklch, var(--brand-leaf) 70%, #FAF6EE); }
    .projets-hero__pill--total {
        border-color: oklch(1 0 0 / 0.25);
        background: oklch(1 0 0 / 0.06);
    }

    /* ─── Filtres v3.14.33 — Dual-row sticky bar ─── */
    .projets-filters--dual {
        padding-block: var(--space-s);
    }
    .projets-filters--dual .rail {
        display: flex; flex-direction: column;
        gap: 0.55rem;
    }
    .projets-filters__row {
        display: flex; align-items: center;
        gap: var(--space-s);
        flex-wrap: wrap;
    }
    .projets-filters__row--status { gap: 0.85rem; }
    .projets-filters__chips {
        display: flex; align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* ─── Segmented control (Statut) ─── */
    .projets-segmented {
        position: relative;
        display: inline-flex;
        align-items: stretch;
        padding: 4px;
        background: color-mix(in oklch, var(--ink) 5%, transparent);
        border: 1px solid var(--line);
        border-radius: 999px;
        gap: 2px;
        box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.04);
        flex: 0 1 auto;
        max-width: 100%;
    }
    .projets-segmented__indicator {
        position: absolute;
        top: 4px; bottom: 4px;
        left: 4px;
        width: calc((100% - 8px) / 3);
        border-radius: 999px;
        background: var(--bg-elev);
        box-shadow: 0 2px 8px oklch(0 0 0 / 0.08),
                    0 1px 0 oklch(1 0 0 / 0.5) inset;
        transition: transform var(--dur-base) var(--ease-back);
        pointer-events: none;
        z-index: 0;
        border: 1px solid color-mix(in oklch, var(--brand-earth) 18%, transparent);
    }
    .projets-segmented[data-active-idx="0"] .projets-segmented__indicator { transform: translateX(0); }
    .projets-segmented[data-active-idx="1"] .projets-segmented__indicator { transform: translateX(100%); }
    .projets-segmented[data-active-idx="2"] .projets-segmented__indicator { transform: translateX(200%); }

    .projets-segmented__btn {
        position: relative;
        z-index: 1;
        flex: 1 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0.4rem;
        padding: 0.45rem 0.95rem;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink-soft);
        text-decoration: none;
        border-radius: 999px;
        white-space: nowrap;
        letter-spacing: 0.01em;
        transition: color var(--dur-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }
    .projets-segmented__btn:hover:not(.is-active) {
        color: var(--ink);
    }
    .projets-segmented__btn.is-active {
        color: var(--brand-earth-text);
    }
    .projets-segmented__label { line-height: 1; }
    .projets-segmented__count {
        font-family: var(--font-body);
        font-size: 0.68rem;
        font-weight: 700;
        padding: 0.1rem 0.4rem;
        background: color-mix(in oklch, var(--ink) 8%, transparent);
        color: var(--ink-faint);
        border-radius: 999px;
        line-height: 1.2;
        min-width: 1.5rem;
        text-align: center;
        transition: background var(--dur-fast), color var(--dur-fast);
    }
    .projets-segmented__btn.is-active .projets-segmented__count {
        background: color-mix(in oklch, var(--brand-earth) 18%, transparent);
        color: var(--brand-earth-text);
    }
    /* Dot pulsant (En cours) */
    .projets-segmented__dot {
        width: 7px; height: 7px;
        background: var(--brand-sun);
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--brand-sun);
        animation: oms-pulse-dot 2.2s var(--ease-out) infinite;
    }
    .projets-segmented__btn--live.is-active .projets-segmented__count {
        background: color-mix(in oklch, var(--brand-sun) 22%, transparent);
        color: color-mix(in oklch, var(--brand-earth) 70%, var(--brand-sun));
    }
    .projets-segmented__icon { color: var(--brand-leaf-text); }
    .projets-segmented__btn--done.is-active { color: var(--brand-leaf-text); }
    .projets-segmented__btn--done.is-active .projets-segmented__count {
        background: color-mix(in oklch, var(--brand-leaf) 18%, transparent);
        color: var(--brand-leaf-text);
    }
    @media (prefers-reduced-motion: reduce) {
        .projets-segmented__indicator { transition: none; }
        .projets-segmented__dot { animation: none; }
    }

    /* ─── Section header (eyebrow + compteur + reset) ─── */
    .projets-grid-section__header {
        display: flex; align-items: center;
        flex-wrap: wrap;
        gap: var(--space-s) var(--space-l);
        margin-bottom: var(--space-xl);
        padding-bottom: var(--space-m);
        border-bottom: 1px solid var(--line);
    }
    /* v3.14.44 — Le H2 « X projets trouvés » a été retiré : l'eyebrow prend
       toute la largeur restante pour pousser le bouton Reset à droite. */
    .projets-grid-section__header .eyebrow {
        margin: 0;
        flex: 1 1 auto;
    }
    .projets-grid-section__title {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 2.6vw, 2rem);
        font-weight: 400;
        letter-spacing: -0.015em;
        line-height: 1.15;
        color: var(--ink);
        margin: 0;
        flex: 1 1 auto;
    }
    .projets-grid-section__reset {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.9rem;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--brand-earth-text);
        background: transparent;
        border: 1px solid color-mix(in oklch, var(--brand-earth) 32%, transparent);
        border-radius: 999px;
        text-decoration: none;
        transition: background var(--dur-fast), color var(--dur-fast),
                    border-color var(--dur-fast), transform var(--dur-fast);
    }
    .projets-grid-section__reset:hover {
        background: color-mix(in oklch, var(--brand-earth) 10%, transparent);
        border-color: var(--brand-earth);
        transform: translateX(-2px);
    }
    .projets-grid-section__reset svg {
        transition: transform var(--dur-base) var(--ease-out);
    }
    .projets-grid-section__reset:hover svg {
        transform: rotate(-90deg);
    }

    /* ─── Badge statut sur projet-tile ─── */
    .projet-tile__badge {
        position: absolute;
        top: var(--space-m); right: var(--space-m);
        z-index: 3;
        display: inline-flex; align-items: center;
        gap: 0.35rem;
        padding: 0.32rem 0.7rem;
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        line-height: 1;
        white-space: nowrap;
        transition: transform var(--dur-base) var(--ease-back);
    }
    .projet-tile__inner:hover .projet-tile__badge {
        transform: translateY(-2px) scale(1.04);
    }
    .projet-tile__badge--en_cours {
        background: color-mix(in oklch, var(--brand-sun) 26%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
        border: 1px solid color-mix(in oklch, var(--brand-sun) 60%, transparent);
    }
    .projet-tile__badge--realise {
        background: color-mix(in oklch, var(--brand-leaf) 32%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
        border: 1px solid color-mix(in oklch, var(--brand-leaf) 65%, transparent);
    }
    .projet-tile__badge svg { display: inline-block; }
    .projet-tile__badge-dot {
        width: 7px; height: 7px;
        background: var(--brand-sun);
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--brand-sun);
        animation: oms-pulse-dot 2.2s var(--ease-out) infinite;
        flex-shrink: 0;
    }
    @media (prefers-reduced-motion: reduce) {
        .projet-tile__badge-dot { animation: none; }
    }
    /* Sur tile feature : badge un peu plus grand */
    .projet-tile--feature .projet-tile__badge {
        top: var(--space-l); right: var(--space-l);
        padding: 0.45rem 0.95rem;
        font-size: 0.78rem;
    }

    /* ─── Shine sweep sur projet-tile au hover ─── */
    .projet-tile__shine {
        position: absolute; inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg,
            transparent 35%,
            oklch(1 0 0 / 0.22) 50%,
            transparent 65%);
        background-size: 250% 100%;
        background-position: 200% 0;
        opacity: 0;
        mix-blend-mode: overlay;
        transition: background-position 1.2s var(--ease-out),
                    opacity 0.3s var(--ease-out);
        z-index: 2;
    }
    @media (prefers-reduced-motion: no-preference) {
        .projet-tile__inner:hover .projet-tile__shine {
            background-position: -100% 0;
            opacity: 1;
        }
    }

    /* ─── Polish : projet-tile aspect-ratio plus harmonieux ─── */
    .projet-tile__inner {
        will-change: transform;
    }
    .projet-tile__inner::after {
        /* Liseré subtil de la carte au hover (ring), z par-dessus l'image. */
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        pointer-events: none;
        box-shadow: 0 0 0 0 transparent;
        transition: box-shadow var(--dur-base) var(--ease-out);
    }
    .projet-tile__inner:hover::after {
        box-shadow: 0 0 0 1px color-mix(in oklch, var(--brand-earth) 28%, transparent);
    }
    .projet-tile__inner:focus-visible {
        outline: 2px solid var(--brand-earth);
        outline-offset: 3px;
    }

    /* Empty state : icône plus douce avec hover */
    .projets-grid-section__empty svg {
        animation: oms-empty-pulse 4s var(--ease-out) infinite;
    }
    @keyframes oms-empty-pulse {
        0%, 100% { opacity: 0.4; }
        50%      { opacity: 0.7; }
    }
    @media (prefers-reduced-motion: reduce) {
        .projets-grid-section__empty svg { animation: none; }
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "DOMAINES D'INTERVENTION" — award-grade
       ═══════════════════════════════════════════════════════════════ */

    /* — I. HERO ——————————————————————————————————————————————— */
    .domaines-hero {
        position: relative;
        min-height: 85vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .domaines-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .domaines-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 28s ease-in-out infinite alternate;
    }
    .domaines-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.55) 0%, oklch(0.10 0.012 85 / 0.95) 100%),
            radial-gradient(ellipse at top left, color-mix(in oklch, var(--brand-leaf) 25%, transparent) 0%, transparent 55%);
    }
    .domaines-hero__inner { padding-block: var(--space-2xl) var(--space-l); width: 100%; position: relative; }
    .domaines-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .domaines-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .domaines-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 300; line-height: 0.96; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 22ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .domaines-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .domaines-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 60ch; margin: 0 0 var(--space-l);
    }

    /* TOC dans hero : 5 ancres avec numéros */
    .domaines-hero__toc {
        display: flex; flex-wrap: wrap; gap: var(--space-s);
        margin-top: var(--space-m);
    }
    .domaines-hero__toc a {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.85rem;
        background: oklch(1 0 0 / 0.08);
        border: 1px solid oklch(1 0 0 / 0.12);
        border-radius: 999px;
        color: #FAF6EE;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    }
    .domaines-hero__toc a span {
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        color: var(--brand-sun);
        font-size: 0.95rem;
    }
    .domaines-hero__toc a:hover {
        background: oklch(1 0 0 / 0.14);
        border-color: var(--brand-sun);
        transform: translateY(-2px);
    }

    /* — II. AXE BLOCKS — sections magazine alternées ———————— */
    .axe-block {
        padding-block: var(--space-3xl);
        position: relative;
        scroll-margin-top: var(--nav-h);
    }
    .axe-block:nth-child(even) { background: var(--bg-elev); }
    .axe-block:nth-child(odd)  { background: var(--bg-paper); }

    .axe-block__grid {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
        align-items: center;
    }
    @media (min-width: 880px) {
        .axe-block__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-2xl); }
        .axe-block--reverse .axe-block__grid > :first-child { order: 2; }
    }

    /* Colonne média */
    .axe-block__media {
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
        background: var(--bg-elev);
    }
    .axe-block__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 12s linear, filter 0.5s;
    }
    .axe-block:hover .axe-block__media img {
        transform: scale(1.06);
    }
    .axe-block__num {
        position: absolute;
        bottom: var(--space-m); left: var(--space-m);
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(5rem, 12vw, 9rem);
        line-height: 0.8;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "WONK" 1;
        text-shadow: 0 4px 24px oklch(0 0 0 / 0.5);
        pointer-events: none;
    }

    /* Colonne body */
    .axe-block__kicker {
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-s);
    }
    .axe-block__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-m);
        color: var(--ink);
        text-wrap: balance;
        letter-spacing: -0.015em;
    }
    .axe-block__lead {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 1.25rem;
        line-height: 1.45;
        color: var(--ink-soft);
        margin: 0 0 var(--space-m);
        max-width: 52ch;
    }
    .axe-block__desc {
        color: var(--ink-soft);
        margin: 0 0 var(--space-l);
        max-width: 54ch;
    }

    .axe-block__actions {
        background: color-mix(in oklch, var(--brand-sun) 6%, transparent);
        border-left: 2px solid var(--brand-sun);
        padding: var(--space-m) var(--space-l);
        margin-bottom: var(--space-l);
    }
    .axe-block__actions-label {
        font-size: 0.78rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-earth-text);
        margin: 0 0 var(--space-s);
    }
    .axe-block__actions ul {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        gap: 0.6rem;
    }
    .axe-block__actions li {
        position: relative;
        padding-left: 1.4em;
        color: var(--ink);
        font-size: 0.96rem;
        line-height: 1.45;
    }
    .axe-block__actions li::before {
        content: "→";
        position: absolute; left: 0;
        color: var(--brand-earth-text);
        font-weight: 600;
    }

    .axe-block__stat {
        display: flex; flex-direction: column;
        padding-top: var(--space-s);
        border-top: 1px solid var(--line-strong);
        max-width: 38ch;
    }
    .axe-block__stat-num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(2rem, 4vw, 2.8rem);
        line-height: 1;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144;
        margin-bottom: 0.3rem;
    }
    .axe-block__stat-label {
        font-size: 0.88rem;
        color: var(--ink-soft);
        line-height: 1.4;
    }

    /* Scroll-driven : axe-block reveal */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .axe-block__media,
            .axe-block__body {
                animation: axe-block-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
            }
            @keyframes axe-block-in {
                from { opacity: 0; transform: translateY(40px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            .axe-block__num {
                animation: axe-num-in linear both;
                animation-timeline: view();
                animation-range: entry 0% cover 40%;
            }
            @keyframes axe-num-in {
                from { opacity: 0; transform: translateY(60px) rotate(-8deg); }
                to   { opacity: 1; transform: translateY(0) rotate(0); }
            }
            .axe-block__actions li {
                animation: axe-action-in linear both;
                animation-timeline: view();
                animation-range: entry 10% cover 45%;
            }
            @keyframes axe-action-in {
                from { opacity: 0; transform: translateX(-12px); }
                to   { opacity: 1; transform: translateX(0); }
            }
        }
    }

    /* — III. FOOTER CTA ———————————————————————————————————————— */
    .domaines-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-deep);
        color: #FAF6EE;
    }
    .domaines-cta__inner {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
        align-items: end;
    }
    @media (min-width: 880px) {
        .domaines-cta__inner { grid-template-columns: 1.5fr 1fr; gap: var(--space-2xl); }
    }
    .domaines-cta .eyebrow { color: var(--brand-sun); }
    .domaines-cta__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-l);
        color: #FAF6EE;
        max-width: 22ch;
        text-wrap: balance;
    }
    .domaines-cta__title em { font-style: italic; color: var(--brand-sun); font-weight: 300; }
    .domaines-cta__zones {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-wrap: wrap;
        gap: 0.5rem;
    }
    .domaines-cta__zones li {
        padding: 0.5rem 1rem;
        background: oklch(1 0 0 / 0.06);
        border: 1px solid oklch(1 0 0 / 0.12);
        border-radius: 999px;
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        font-size: 0.92rem;
        color: #FAF6EE;
    }
    .domaines-cta__action {
        display: flex; flex-direction: column;
        gap: var(--space-m);
        align-items: flex-start;
    }
    @media (min-width: 880px) { .domaines-cta__action { align-items: flex-end; text-align: right; } }
    .domaines-cta__hook {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 1.2rem;
        line-height: 1.45;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        max-width: 28ch;
        margin: 0;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "QUI SOMMES-NOUS" — award-grade
       ═══════════════════════════════════════════════════════════════ */

    /* — I. HERO ——————————————————————————————————————————————— */
    .apropos-hero {
        position: relative;
        min-height: 80vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .apropos-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .apropos-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 28s ease-in-out infinite alternate;
    }
    .apropos-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.4) 0%, oklch(0.10 0.012 85 / 0.92) 100%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 25%, transparent) 0%, transparent 55%);
    }
    .apropos-hero__inner { padding-block: var(--space-2xl) var(--space-xl); width: 100%; position: relative; }
    .apropos-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .apropos-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .apropos-hero__title {
        font-family: var(--font-display);
        font-size: clamp(3rem, 8vw, 7rem);
        font-weight: 300; line-height: 0.92; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0;
        max-width: 18ch;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .apropos-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .apropos-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 50ch; margin: var(--space-l) 0 0;
    }

    /* — II. MISSION (chapitre I) ——————————————————————————————— */
    .apropos-mission { padding-block: var(--space-3xl); background: var(--bg-paper); }
    .apropos-mission__inner {
        display: grid; gap: var(--space-xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .apropos-mission__inner { grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: start; }
    }
    .apropos-mission__chapter {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(6rem, 12vw, 10rem);
        line-height: 0.9;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144;
    }
    .apropos-mission__chapter small {
        display: block;
        font-family: var(--font-body);
        font-style: normal; font-weight: 600;
        font-size: 0.72rem;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: var(--space-s);
    }
    .apropos-mission__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 400; line-height: 1.05;
        margin: 0 0 var(--space-l); color: var(--ink);
        text-wrap: balance;
    }
    .apropos-mission__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }
    .apropos-mission__lead {
        font-size: 1.05rem; line-height: 1.65;
        color: var(--ink); max-width: 56ch;
        margin: 0 0 1em;
    }
    .apropos-mission__body p { color: var(--ink-soft); max-width: 56ch; }

    /* — III. TIMELINE 2010 → 2025 ——————————————————————————————— */
    .apropos-timeline { padding-block: var(--space-3xl); background: var(--bg-elev); }
    .apropos-timeline__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .apropos-timeline__title {
        font-family: var(--font-display);
        font-size: var(--step-4); font-weight: 400;
        margin: 0; color: var(--ink);
    }
    .apropos-timeline__title em { font-style: italic; color: var(--brand-earth-text); font-weight: 300; }

    .timeline {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
    }
    .timeline__item {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: var(--space-m);
        padding-block: var(--space-l);
        position: relative;
    }
    @media (min-width: 720px) {
        .timeline__item { grid-template-columns: 80px 120px 1fr; gap: var(--space-l); }
    }
    .timeline__rail {
        position: relative;
        display: flex; justify-content: center;
    }
    .timeline__dot {
        position: absolute; top: 0.5rem;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--bg-paper);
        border: 2px solid var(--line-strong);
        box-shadow: 0 0 0 6px var(--bg-elev);
        z-index: 2;
        transition: background var(--dur-base) var(--ease-out),
                    border-color var(--dur-base),
                    transform var(--dur-base) var(--ease-back);
    }
    .timeline__item.is-active .timeline__dot,
    .timeline__item:hover .timeline__dot {
        background: var(--brand-sun);
        border-color: var(--brand-earth-text);
        transform: scale(1.4);
    }
    .timeline__line {
        position: absolute; top: 1.5rem; bottom: -3.5rem;
        left: 50%; transform: translateX(-50%);
        width: 1px;
        background: linear-gradient(to bottom, var(--line-strong), var(--line));
    }
    .timeline__item:last-child .timeline__line { display: none; }
    .timeline__year {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(2rem, 4vw, 3.5rem);
        line-height: 1;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144;
        grid-column: span 1;
    }
    @media (max-width: 719px) {
        .timeline__year { grid-row: 1; grid-column: 2; font-size: 2rem; }
        .timeline__content { grid-column: 2; }
    }
    .timeline__step-title {
        font-family: var(--font-display);
        font-size: var(--step-2); font-weight: 500;
        margin: 0 0 0.4rem; color: var(--ink);
    }
    .timeline__content p {
        color: var(--ink-soft);
        max-width: 56ch;
        margin: 0;
        font-size: 0.98rem;
    }

    /* Scroll-driven : timeline items se révèlent un par un */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .timeline__item {
                animation: timeline-item-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 35%;
            }
            @keyframes timeline-item-in {
                from { opacity: 0; transform: translateY(40px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            .timeline__dot {
                animation: timeline-dot-fill linear both;
                animation-timeline: view();
                animation-range: entry 20% cover 50%;
            }
            @keyframes timeline-dot-fill {
                to { background: var(--brand-sun); border-color: var(--brand-earth-text); transform: scale(1.3); }
            }
        }
    }

    /* — IV. VISION pleine page ——————————————————————————————— */
    .apropos-vision {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
        position: relative;
        overflow: hidden;
    }
    .apropos-vision::before {
        /* Très grand guillemet décoratif en arrière-plan */
        content: "“";
        position: absolute;
        top: -3rem; left: -2rem;
        font-family: var(--font-display);
        font-size: clamp(20rem, 35vw, 32rem);
        color: var(--brand-sun);
        opacity: 0.10;
        line-height: 0.8;
        pointer-events: none;
        z-index: 0;
    }
    .eyebrow--center { display: block; text-align: center; }
    /* v3.14.53 — Fix CRITIQUE : `max-width: 28ch` était calculé contre la
       font-size du <blockquote> (1rem hérité du body) au lieu du <p> interne
       (clamp 1.8-3.2rem). Résultat : le conteneur faisait ~224px, chaque
       mot italique géant tombait sur sa propre ligne et le bloc se collait
       à gauche au lieu d'être centré (28ch trop étroit pour balance + auto).
       Fix : on pose font-size sur le blockquote lui-même, max-width passe
       en unités absolues (rem), et on force margin-inline: auto +
       display: block + text-align: center pour blinder le centrage. */
    .apropos-vision__quote {
        position: relative; z-index: 1;
        display: block;
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 4vw, 3.2rem);
        max-width: min(38rem, 92%);
        margin: var(--space-l) auto 0 auto;
        text-align: center;
    }
    .apropos-vision__quote p {
        font-family: inherit;
        font-style: italic; font-weight: 300;
        font-size: inherit;
        line-height: 1.2;
        color: var(--ink);
        margin: 0 auto;
        max-width: 100%;
        text-wrap: balance;
        text-align: center;
        font-variation-settings: "opsz" 144, "SOFT" 80;
    }
    .apropos-vision__quote cite {
        display: block;
        margin-top: var(--space-l);
        font-family: var(--font-body);
        font-style: normal;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-earth-text);
        text-align: center;
    }

    /* — V. ÉQUIPE ————————————————————————————————————————————— */
    .apropos-team { padding-block: var(--space-3xl); background: var(--bg-elev); }
    .apropos-team__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .apropos-team__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; margin: 0;
        color: var(--ink);
    }
    .apropos-team__grid {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) { .apropos-team__grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 980px) { .apropos-team__grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1300px) { .apropos-team__grid { grid-template-columns: repeat(4, 1fr); } }
    .team-card {
        background: var(--bg-paper);
        overflow: hidden;
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
    }
    .team-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2);
    }
    .team-card__media {
        aspect-ratio: 3/4;
        background: var(--bg-elev);
        overflow: hidden;
    }
    .team-card__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.2s var(--ease-out), filter 0.5s;
        filter: grayscale(0.4);
    }
    .team-card:hover .team-card__media img {
        transform: scale(1.05);
        filter: grayscale(0);
    }
    .team-card__body {
        padding: var(--space-m);
    }
    .team-card__name {
        font-family: var(--font-display);
        font-size: var(--step-1); font-weight: 500;
        margin: 0 0 0.2rem; color: var(--ink);
    }
    .team-card__role {
        font-size: 0.85rem;
        color: var(--brand-earth-text);
        font-weight: 600;
        letter-spacing: 0.02em;
        margin: 0;
    }

    /* — VI. TROIS ENGAGEMENTS ——————————————————————————————— */
    .apropos-engagements { padding-block: var(--space-3xl); background: var(--bg-paper); }
    .apropos-engagements__header { max-width: 60ch; margin-bottom: var(--space-2xl); }
    .apropos-engagements__title {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400; margin: 0;
        color: var(--ink);
    }
    .engagements {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column;
        border-top: 1px solid var(--line);
    }
    .engagement {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-m);
        padding-block: var(--space-xl);
        border-bottom: 1px solid var(--line);
        transition: background var(--dur-base);
    }
    @media (min-width: 720px) {
        .engagement { grid-template-columns: 200px 1fr; gap: var(--space-2xl); align-items: baseline; }
    }
    .engagement:hover { background: color-mix(in oklch, var(--brand-sun) 4%, transparent); }
    .engagement__num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(4rem, 8vw, 6.5rem);
        line-height: 0.9;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144;
    }
    .engagement__title {
        font-family: var(--font-display);
        font-size: var(--step-2); font-weight: 500;
        margin: 0 0 var(--space-s); color: var(--ink);
    }
    .engagement__body {
        color: var(--ink-soft);
        max-width: 58ch;
        margin: 0;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Scroll-driven engagements */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .engagement {
                animation: engagement-in linear both;
                animation-timeline: view();
                animation-range: entry 5% cover 40%;
            }
            @keyframes engagement-in {
                from { opacity: 0; transform: translateY(30px); }
                to   { opacity: 1; transform: translateY(0); }
            }
        }
    }

    /* — VII. FOOTER CTA ——————————————————————————————————————— */
    .apropos-cta {
        padding-block: var(--space-3xl);
        background:
            linear-gradient(180deg, transparent 0%, oklch(0.13 0.012 85 / 0.04) 100%),
            var(--bg-paper);
        border-top: 1px solid var(--line);
    }
    .apropos-cta__inner {
        display: grid;
        gap: var(--space-2xl);
        grid-template-columns: 1fr;
        align-items: end;
    }
    @media (min-width: 880px) {
        .apropos-cta__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-3xl); }
    }
    .apropos-cta__stats {
        display: grid;
        gap: var(--space-l);
        grid-template-columns: repeat(3, 1fr);
    }
    .apropos-cta__stat {
        display: flex; flex-direction: column;
        padding-top: var(--space-s);
        border-top: 1px solid var(--line-strong);
    }
    .apropos-cta__stat-num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        line-height: 1;
        color: var(--brand-earth-text);
        font-variation-settings: "opsz" 144;
        margin-bottom: 0.3rem;
    }
    .apropos-cta__stat-label {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--ink-faint);
    }
    .apropos-cta__title {
        font-family: var(--font-display);
        font-size: var(--step-3);
        font-weight: 400;
        line-height: 1.05;
        margin: 0 0 var(--space-l);
        color: var(--ink);
        text-wrap: balance;
    }
    .apropos-cta__title em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 300;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGES ÉDITORIALES (À PROPOS, DOMAINES, GALERIE, MENTIONS, etc.)
       — traitement cinématique pour rompre le côté "thème générique"
       ═══════════════════════════════════════════════════════════════ */
    .page-editorial { background: var(--bg-paper); }

    .page-editorial__hero {
        position: relative;
        min-height: 60vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden;
        isolation: isolate;
        margin-bottom: var(--space-2xl);
    }
    .page-editorial__hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .page-editorial__hero-bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .page-editorial__hero-overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.5) 0%, oklch(0.13 0.012 85 / 0.85) 100%),
            radial-gradient(ellipse at bottom right, color-mix(in oklch, var(--brand-earth) 25%, transparent) 0%, transparent 50%);
    }
    .page-editorial__hero-inner {
        position: relative;
        padding-block: var(--space-2xl) var(--space-xl);
        width: 100%;
    }
    .page-editorial__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .page-editorial__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .page-editorial__title {
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 6vw, 5rem);
        font-weight: 300; line-height: 0.98; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0;
        max-width: 22ch;
        text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .page-editorial__lead {
        font-family: var(--font-display);
        font-size: clamp(1.05rem, 1.6vw, 1.4rem);
        font-weight: 300; font-style: italic;
        line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 50ch;
        margin: var(--space-m) 0 0;
    }

    .page-editorial__body {
        padding-block: 0 var(--space-2xl);
    }
    .page-editorial__content {
        max-width: 70ch;
        margin-inline: auto;
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--ink);
    }
    .page-editorial__content h2 {
        font-family: var(--font-display);
        font-size: var(--step-3); font-weight: 400;
        margin-top: 2.5em; margin-bottom: 0.5em;
        line-height: 1.1;
        color: var(--ink);
        position: relative;
        padding-top: 1em;
    }
    .page-editorial__content h2::before {
        content: "";
        position: absolute; top: 0; left: 0;
        width: 3rem; height: 2px;
        background: var(--brand-sun);
    }
    .page-editorial__content h3 {
        font-family: var(--font-display);
        font-size: var(--step-2); font-weight: 500;
        margin-top: 2em; margin-bottom: 0.4em;
        color: var(--ink);
    }
    .page-editorial__content p { color: var(--ink); margin-bottom: 1.2em; }
    .page-editorial__content ul,
    .page-editorial__content ol { padding-left: 1.4em; margin-bottom: 1.2em; }
    .page-editorial__content li { color: var(--ink); margin-bottom: 0.3em; }
    .page-editorial__content blockquote {
        border-left: 3px solid var(--brand-sun);
        background: color-mix(in oklch, var(--brand-sun) 8%, transparent);
        padding: var(--space-m) var(--space-l);
        margin: 2em 0;
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--step-1);
        line-height: 1.4;
        color: var(--ink);
    }
    .page-editorial__content blockquote p { margin: 0; }
    .page-editorial__content a {
        color: var(--brand-earth-text);
        text-decoration: underline;
        text-underline-offset: 0.25em;
        text-decoration-thickness: 1px;
    }
    .page-editorial__content img { border-radius: var(--radius-md); box-shadow: var(--shadow-1); }

    .page-editorial__footer {
        padding-block: var(--space-l) var(--space-3xl);
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
        align-items: center;
        border-top: 1px solid var(--line);
        max-width: 70ch;
        margin-inline: auto;
        margin-top: var(--space-2xl);
    }
    @media (min-width: 640px) {
        .page-editorial__footer { grid-template-columns: 1fr auto; }
    }
    .page-editorial__breadcrumb {
        margin: 0;
        font-size: 0.92rem;
    }
    .page-editorial__breadcrumb a {
        color: var(--ink-soft);
        text-decoration: none;
        transition: color var(--dur-fast);
    }
    .page-editorial__breadcrumb a:hover { color: var(--brand-earth-text); }
    .page-editorial__cta {
        display: flex; align-items: center; gap: var(--space-m);
        flex-wrap: wrap;
    }
    .page-editorial__cta-text {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--ink-soft);
        margin: 0;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE "NOS PUBLICATIONS" — award-grade v3.14.36
       Centre de ressources : rapports / études / mémoires / médiathèques.
       ═══════════════════════════════════════════════════════════════ */

    /* ─── I. HERO ─────────────────────────────────────────────── */
    .publications-hero {
        position: relative;
        min-height: 78vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .publications-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .publications-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 28s ease-in-out infinite alternate;
    }
    .publications-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.52) 0%, oklch(0.10 0.012 85 / 0.95) 100%),
            radial-gradient(ellipse at bottom right, color-mix(in oklch, var(--brand-earth) 28%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at top left, color-mix(in oklch, var(--brand-sun) 14%, transparent) 0%, transparent 50%);
    }
    .publications-hero__grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
        background-size: clamp(60px, 6vw, 96px) clamp(60px, 6vw, 96px);
        mix-blend-mode: overlay;
        pointer-events: none;
        opacity: 0.7;
    }
    .publications-hero__inner { padding-block: var(--space-2xl) var(--space-l); width: 100%; position: relative; }
    .publications-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .publications-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .publications-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 300; line-height: 0.95; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 22ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .publications-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .publications-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
        font-weight: 300; line-height: 1.5;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 60ch; margin: 0 0 var(--space-l);
    }
    .publications-hero__pills {
        display: flex; gap: 0.5rem; flex-wrap: wrap;
        margin: 0 0 var(--space-l);
    }
    .publications-hero__pill {
        display: inline-flex; align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.85rem;
        background: oklch(1 0 0 / 0.10);
        border: 1px solid oklch(1 0 0 / 0.22);
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        font-size: 0.82rem; font-weight: 500;
        color: color-mix(in oklch, #FAF6EE 90%, transparent);
    }
    .publications-hero__pill strong {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        font-size: 1.05rem;
        color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "WONK" 1;
    }
    .publications-hero__scroll {
        display: inline-flex; align-items: center; gap: 0.6rem;
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        text-decoration: none;
        padding: var(--space-s) 0;
        transition: color var(--dur-fast), gap var(--dur-fast);
    }
    .publications-hero__scroll-line {
        display: inline-block; width: 2.5rem; height: 1px;
        background: currentColor;
        transition: width var(--dur-base) var(--ease-out);
    }
    .publications-hero__scroll:hover { color: var(--brand-sun); gap: 1.2rem; }
    .publications-hero__scroll:hover .publications-hero__scroll-line { width: 4rem; }

    /* ─── II. TOC STICKY ─────────────────────────────────────── */
    .publications-toc {
        position: sticky;
        top: var(--nav-h);
        z-index: 30;
        background: color-mix(in oklch, var(--bg-paper) 94%, transparent);
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-block: 1px solid var(--line);
        padding-block: var(--space-s);
    }
    .publications-toc__inner {
        display: flex; gap: 0.4rem; flex-wrap: wrap;
        align-items: center;
    }
    .publications-toc__link {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.95rem;
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: 0.86rem; font-weight: 500;
        color: var(--ink-soft);
        text-decoration: none;
        transition: background var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast),
                    color var(--dur-fast),
                    transform var(--dur-fast);
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    .publications-toc__link svg { color: var(--brand-earth-text); transition: transform var(--dur-base) var(--ease-back); }
    .publications-toc__link em {
        font-style: normal;
        font-family: var(--font-body);
        font-size: 0.68rem; font-weight: 700;
        padding: 0.1rem 0.4rem;
        background: color-mix(in oklch, var(--brand-earth) 12%, transparent);
        color: var(--brand-earth-text);
        border-radius: 999px;
        line-height: 1.2;
        min-width: 1.5rem;
        text-align: center;
    }
    .publications-toc__link:hover {
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        border-color: color-mix(in oklch, var(--brand-earth) 38%, transparent);
        color: var(--brand-earth-text);
        transform: translateY(-1px);
    }
    .publications-toc__link:hover svg {
        transform: scale(1.1) rotate(-4deg);
    }

    /* ─── III–V. SECTIONS de publications ─────────────────────── */
    .publications-section {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
        position: relative;
        scroll-margin-top: calc(var(--nav-h) + 80px); /* offset pour TOC sticky */
    }
    .publications-section--alt { background: var(--bg-elev); }
    .publications-section__header {
        max-width: 60ch;
        margin-bottom: var(--space-2xl);
    }
    .publications-section__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-s) 0 var(--space-s);
        color: var(--ink);
        letter-spacing: -0.015em;
        text-wrap: balance;
    }
    .publications-section__title em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .publications-section__lead {
        color: var(--ink-soft);
        font-size: 1.02rem;
        line-height: 1.6;
        margin: 0;
        max-width: 56ch;
    }

    /* ─── Grille de publications (cards) ─────────────────────── */
    .publications-grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 760px) {
        .publications-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1200px) {
        .publications-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .publication-card {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 0 var(--space-m);
        padding: var(--space-l);
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out),
                    border-color var(--dur-base);
        position: relative;
        overflow: hidden;
    }
    .publications-section--alt .publication-card { background: var(--bg-paper); }
    .publication-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--brand-earth);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--dur-base) var(--ease-out);
    }
    .publication-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-3);
        border-color: color-mix(in oklch, var(--brand-earth) 28%, var(--line));
    }
    .publication-card:hover::before { transform: scaleX(1); }
    .publication-card__icon {
        grid-row: 1 / 3;
        width: 56px; height: 70px;
        display: inline-flex; flex-direction: column;
        align-items: center; justify-content: center;
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        border-radius: var(--radius-sm);
        color: var(--brand-earth-text);
        gap: 0.15rem;
        transition: background var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
    }
    .publication-card__icon--leaf {
        background: color-mix(in oklch, var(--brand-leaf) 10%, transparent);
        color: var(--brand-leaf-text);
    }
    .publication-card__icon--sun {
        background: color-mix(in oklch, var(--brand-sun) 14%, transparent);
        color: color-mix(in oklch, var(--brand-earth) 60%, var(--brand-sun));
    }
    .publication-card:hover .publication-card__icon {
        transform: scale(1.06) rotate(-3deg);
    }
    .publication-card__icon-ext {
        font-family: var(--font-body);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.78;
    }
    .publication-card__body {
        grid-column: 2;
        display: flex; flex-direction: column;
        gap: var(--space-xs);
        min-width: 0;
    }
    .publication-card__title {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1.25;
        margin: 0;
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .publication-card__title a {
        color: inherit;
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast);
    }
    .publication-card__title a:hover {
        background-size: 100% 1px;
        color: var(--brand-earth-text);
    }
    .publication-card__excerpt {
        color: var(--ink-soft);
        font-size: 0.92rem;
        line-height: 1.5;
        margin: 0;
        text-wrap: pretty;
    }
    .publication-card__meta {
        display: grid;
        gap: 0.1rem var(--space-m);
        grid-template-columns: 1fr 1fr;
        margin: var(--space-xs) 0 0;
        padding-top: var(--space-s);
        border-top: 1px solid var(--line);
    }
    .publication-card__meta > div { display: flex; flex-direction: column; }
    .publication-card__meta dt {
        font-size: 0.62rem; font-weight: 600;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0;
    }
    .publication-card__meta dd {
        font-size: 0.85rem;
        color: var(--ink);
        margin: 0;
        line-height: 1.3;
    }
    /* v3.14.50 — Couleurs FIXES (hexa) pour garantir un contraste WCAG AA dans
       tous les modes (light / dark / auto + system-dark). Les tokens
       --brand-earth* sont adaptatifs et inversent leur sens en dark mode
       (-deep devient PLUS CLAIR que -base), ce qui détruisait la lisibilité.
       Pour un CTA de téléchargement à très forte emphase, on bypasse le
       système adaptatif et on impose le bordeaux #8B1E1E + texte cream
       #FAF6EE. !important blinde toute règle générique sur `a`. */
    .publication-card__cta {
        grid-column: 1 / -1;
        margin-top: var(--space-m);
        display: inline-flex !important;
        align-items: center; justify-content: center;
        gap: 0.5rem;
        padding: 0.85rem 1.2rem;
        background-color: #8B1E1E !important;
        color: #FAF6EE !important;
        border: 1px solid #8B1E1E !important;
        border-radius: var(--radius-sm);
        text-decoration: none !important;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.2;
        min-height: 44px; /* a11y : zone tactile ≥ 44px */
        text-shadow: 0 1px 0 oklch(0 0 0 / 0.18); /* renforce lisibilité */
        transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-base), border-color var(--dur-fast);
    }
    .publication-card__cta svg {
        color: #FAF6EE !important;
        stroke: #FAF6EE !important;
        fill: none !important;
        transition: transform var(--dur-base) var(--ease-out);
        flex-shrink: 0;
    }
    .publication-card__cta span { color: #FAF6EE !important; }
    .publication-card__cta:hover {
        background-color: #6B1818 !important; /* bordeaux assombri */
        border-color: #6B1818 !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 22px oklch(0 0 0 / 0.28);
    }
    .publication-card__cta:hover svg { transform: translateY(2px); }
    .publication-card__cta:focus-visible {
        outline: 3px solid #E8A91C; /* or sahélien — visible sur bordeaux ET sur cream */
        outline-offset: 3px;
    }
    /* Override : en dark mode on garde EXACTEMENT le même rendu — la lisibilité
       prime sur l'adaptation thématique pour ce bouton à très forte emphase. */
    :root[data-theme="dark"] .publication-card__cta,
    :root[data-theme="dark"] .publication-card__cta span,
    :root[data-theme="dark"] .publication-card__cta svg {
        color: #FAF6EE !important;
        stroke: #FAF6EE !important;
    }
    @media (prefers-color-scheme: dark) {
        :root[data-theme="auto"] .publication-card__cta,
        :root[data-theme="auto"] .publication-card__cta span,
        :root[data-theme="auto"] .publication-card__cta svg {
            color: #FAF6EE !important;
            stroke: #FAF6EE !important;
        }
    }

    /* ─── VI. MÉDIATHÈQUE — onglets segmented ─────────────────── */
    .publications-mediatheque .publications-section__header { margin-bottom: var(--space-l); }
    .publications-media-tabs {
        position: relative;
        display: inline-flex;
        align-items: stretch;
        padding: 4px;
        background: color-mix(in oklch, var(--ink) 5%, transparent);
        border: 1px solid var(--line);
        border-radius: 999px;
        gap: 2px;
        box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.04);
        margin-bottom: var(--space-2xl);
        max-width: 100%;
    }
    .publications-media-tabs__indicator {
        position: absolute;
        top: 4px; bottom: 4px;
        left: 4px;
        /* v3.14.43 — Largeur et position dynamiques selon --tabs-count
           et --active-tab posés en inline-style sur .publications-media-tabs.
           Permet aux onglets vides d'être masqués sans casser l'animation. */
        width: calc((100% - 8px) / var(--tabs-count, 3));
        transform: translateX(calc(100% * var(--active-tab, 0)));
        border-radius: 999px;
        background: var(--bg-elev);
        box-shadow: 0 2px 8px oklch(0 0 0 / 0.08),
                    0 1px 0 oklch(1 0 0 / 0.5) inset;
        transition: transform var(--dur-base) var(--ease-back);
        pointer-events: none;
        z-index: 0;
        border: 1px solid color-mix(in oklch, var(--brand-earth) 18%, transparent);
    }

    .publications-media-tabs__btn {
        position: relative;
        z-index: 1;
        flex: 1 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0.45rem;
        padding: 0.5rem 1.1rem;
        font-family: var(--font-body);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--ink-soft);
        text-decoration: none;
        border-radius: 999px;
        white-space: nowrap;
        transition: color var(--dur-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }
    .publications-media-tabs__btn:hover:not(.is-active) { color: var(--ink); }
    .publications-media-tabs__btn.is-active { color: var(--brand-earth-text); }
    .publications-media-tabs__btn em {
        font-style: normal;
        font-family: var(--font-body);
        font-size: 0.66rem;
        font-weight: 700;
        padding: 0.1rem 0.4rem;
        background: color-mix(in oklch, var(--ink) 8%, transparent);
        color: var(--ink-faint);
        border-radius: 999px;
        line-height: 1.2;
        min-width: 1.5rem;
        text-align: center;
        transition: background var(--dur-fast), color var(--dur-fast);
    }
    .publications-media-tabs__btn.is-active em {
        background: color-mix(in oklch, var(--brand-earth) 18%, transparent);
        color: var(--brand-earth-text);
    }
    @media (prefers-reduced-motion: reduce) {
        .publications-media-tabs__indicator { transition: none; }
    }

    /* ─── Grille photos / vidéos (masonry-style) ─────────────── */
    .publications-media-grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-s);
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    @media (min-width: 640px) {
        .publications-media-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
    }
    @media (min-width: 980px) {
        .publications-media-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
    }
    /* Pattern asymétrique : 1 tile sur 5 prend 2 rows */
    .publications-media-grid > li:nth-child(5n+1) { grid-row: span 2; }
    .publications-media-grid > li:nth-child(7n+3) { grid-column: span 2; }

    .publications-media-tile { position: relative; }
    .publications-media-tile__inner {
        position: relative;
        display: block;
        width: 100%; height: 100%;
        border: 0; padding: 0; margin: 0;
        background: var(--bg-paper);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out);
    }
    .publications-media-tile__inner img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.4s var(--ease-out);
    }
    .publications-media-tile__inner:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
    .publications-media-tile__inner:hover img { transform: scale(1.06); }
    .publications-media-tile__inner:focus-visible {
        outline: 2px solid var(--brand-earth);
        outline-offset: 3px;
    }
    .publications-media-tile__caption {
        position: absolute; left: 0; right: 0; bottom: 0;
        padding: var(--space-m);
        background: linear-gradient(to top, oklch(0 0 0 / 0.7) 0%, transparent 100%);
        color: #FAF6EE;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.3;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dur-base), transform var(--dur-base);
        pointer-events: none;
    }
    .publications-media-tile__inner:hover .publications-media-tile__caption,
    .publications-media-tile__inner:focus-visible .publications-media-tile__caption {
        opacity: 1; transform: none;
    }
    .publications-media-tile__placeholder {
        width: 100%; height: 100%;
        background:
            linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-paper) 100%);
    }
    .publications-media-tile__play {
        position: absolute; top: 50%; left: 50%;
        width: 56px; height: 56px;
        transform: translate(-50%, -50%);
        background: oklch(0 0 0 / 0.55);
        color: #FAF6EE;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
        transition: background var(--dur-fast), transform var(--dur-base) var(--ease-back);
    }
    .publications-media-tile__inner:hover .publications-media-tile__play {
        background: var(--brand-earth);
        transform: translate(-50%, -50%) scale(1.08);
    }

    /* ─── Podcasts (liste audio + meta) ──────────────────────── */
    .publications-podcasts {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: var(--space-m);
    }
    .publications-podcast {
        background: var(--bg-paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--space-l);
        display: flex; flex-direction: column;
        gap: var(--space-s);
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base);
    }
    .publications-podcast:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-3);
    }
    .publications-podcast__head {
        display: flex; align-items: center; gap: var(--space-m);
    }
    .publications-podcast__icon {
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in oklch, var(--brand-sun) 18%, transparent);
        border-radius: 50%;
        color: color-mix(in oklch, var(--brand-earth) 60%, var(--brand-sun));
        flex-shrink: 0;
    }
    .publications-podcast__title-block { min-width: 0; flex: 1; }
    .publications-podcast__title {
        font-family: var(--font-display);
        font-size: 1.15rem; font-weight: 500;
        margin: 0;
        line-height: 1.25;
        color: var(--ink);
    }
    .publications-podcast__title a {
        color: inherit; text-decoration: none;
        transition: color var(--dur-fast);
    }
    .publications-podcast__title a:hover { color: var(--brand-earth-text); }
    .publications-podcast__meta {
        margin: 0.15rem 0 0;
        font-size: 0.78rem;
        color: var(--ink-faint);
        display: flex; gap: 0.4rem; flex-wrap: wrap;
        letter-spacing: 0.02em;
    }
    .publications-podcast__excerpt {
        color: var(--ink-soft);
        font-size: 0.92rem;
        line-height: 1.55;
        margin: 0;
    }
    .publications-podcast__audio {
        width: 100%;
        margin-top: var(--space-xs);
    }

    /* ─── Empty state ─────────────────────────────────────────── */
    .publications-empty {
        text-align: center;
        padding: var(--space-2xl) var(--space-l);
        background: var(--bg-elev);
        border: 1px dashed var(--line);
        border-radius: var(--radius-md);
        color: var(--ink-soft);
        display: flex; flex-direction: column;
        align-items: center; gap: var(--space-s);
    }
    .publications-section--alt .publications-empty { background: var(--bg-paper); }
    .publications-empty svg { color: var(--ink-faint); opacity: 0.5; }
    .publications-empty p {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.15rem;
        margin: 0;
        color: var(--ink);
    }
    .publications-empty__cta {
        margin-top: var(--space-xs);
        color: var(--brand-earth-text);
        font-weight: 600;
        text-decoration: none;
        font-size: 0.92rem;
        transition: color var(--dur-fast), gap var(--dur-fast);
        display: inline-flex; align-items: center; gap: 0.3rem;
    }
    .publications-empty__cta:hover { color: var(--brand-earth); gap: 0.6rem; }

    /* ─── VII. CTA footer ─────────────────────────────────────── */
    .publications-cta {
        padding-block: var(--space-3xl);
        background: var(--bg-deep);
        color: #FAF6EE;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }
    .publications-cta::before {
        content: "";
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 16%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-earth) 22%, transparent) 0%, transparent 55%);
        opacity: 0.7; pointer-events: none;
        z-index: -1;
    }
    .publications-cta__inner {
        display: grid;
        gap: var(--space-2xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .publications-cta__inner { grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--space-3xl); }
    }
    .publications-cta__primary { max-width: 52ch; }
    .publications-cta__title {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-s) 0 var(--space-m);
        color: #FAF6EE;
        text-wrap: balance;
        letter-spacing: -0.015em;
    }
    .publications-cta__title em {
        font-style: italic; color: var(--brand-sun);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .publications-cta__lead {
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        margin: 0; font-size: 1.02rem; line-height: 1.6;
    }
    .publications-cta__actions {
        display: grid; gap: var(--space-s);
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
        .publications-cta__actions { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 980px) {
        .publications-cta__actions { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; }
    }
    .publications-cta__card {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: var(--space-s);
        row-gap: 0.15rem;
        align-items: center;
        padding: var(--space-m) var(--space-l);
        background: oklch(1 0 0 / 0.06);
        border: 1px solid oklch(1 0 0 / 0.12);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: #FAF6EE;
        transition: background var(--dur-fast), border-color var(--dur-fast),
                    transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base);
    }
    .publications-cta__card:hover {
        background: oklch(1 0 0 / 0.10);
        border-color: oklch(1 0 0 / 0.22);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px oklch(0 0 0 / 0.25);
    }
    .publications-cta__card-icon {
        grid-row: 1 / 3;
        width: 48px; height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        background: oklch(1 0 0 / 0.10);
        border-radius: 50%;
        color: #FAF6EE;
        transition: background var(--dur-fast), transform var(--dur-base) var(--ease-back);
    }
    .publications-cta__card:hover .publications-cta__card-icon {
        background: oklch(1 0 0 / 0.18);
        transform: scale(1.08) rotate(-4deg);
    }
    .publications-cta__card-label {
        font-family: var(--font-body);
        font-size: 0.98rem;
        font-weight: 600;
        color: #FAF6EE;
        letter-spacing: 0.01em;
    }
    .publications-cta__card-sub {
        font-size: 0.78rem;
        color: color-mix(in oklch, #FAF6EE 65%, transparent);
        letter-spacing: 0.02em;
    }
    .publications-cta__card--don {
        background: color-mix(in oklch, var(--brand-earth) 50%, transparent);
        border-color: var(--brand-earth);
    }
    .publications-cta__card--don:hover {
        background: color-mix(in oklch, var(--brand-earth) 70%, transparent);
        border-color: var(--brand-sun);
    }
    .publications-cta__card--don .publications-cta__card-icon {
        background: oklch(1 0 0 / 0.18);
        color: var(--brand-sun);
    }

    /* ═══════════════════════════════════════════════════════════════
       SINGLE PROJET — award-grade v3.14.45
       Layout : hero immersif + sidebar sticky + content + gallery
                + engage bandeau + projets connexes + nav prev/next.
       ═══════════════════════════════════════════════════════════════ */

    /* ─── I. HERO ─────────────────────────────────────────────── */
    .single-projet-hero {
        position: relative;
        min-height: 72vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .single-projet-hero--plain {
        min-height: auto;
        padding-block: var(--space-3xl) var(--space-2xl);
        background: var(--bg-deep);
    }
    .single-projet-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .single-projet-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 30s ease-in-out infinite alternate;
    }
    .single-projet-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.42) 0%, oklch(0.10 0.012 85 / 0.92) 100%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-earth) 28%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 12%, transparent) 0%, transparent 50%);
    }
    .single-projet-hero__grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
        background-size: clamp(60px, 6vw, 96px) clamp(60px, 6vw, 96px);
        mix-blend-mode: overlay;
        pointer-events: none;
        opacity: 0.6;
    }
    .single-projet-hero__inner {
        padding-block: var(--space-2xl) var(--space-l);
        width: 100%; position: relative;
    }
    /* Breadcrumb editorial */
    .single-projet-hero__breadcrumb {
        display: inline-flex; align-items: center; gap: 0.4rem;
        font-family: var(--font-body);
        font-size: 0.74rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 75%, transparent);
        margin: 0 0 var(--space-l);
    }
    .single-projet-hero__breadcrumb a {
        color: inherit;
        text-decoration: none;
        transition: color var(--dur-fast);
    }
    .single-projet-hero__breadcrumb a:hover { color: var(--brand-sun); }
    .single-projet-hero__breadcrumb svg { opacity: 0.5; }
    .single-projet-hero__breadcrumb [aria-current] {
        color: #FAF6EE;
        font-weight: 700;
        max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Méta : status badge + kicker domaine */
    .single-projet-hero__meta {
        display: flex; flex-wrap: wrap;
        align-items: center; gap: 0.75rem;
        margin: 0 0 var(--space-m);
    }
    .single-projet-hero__badge {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.85rem;
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 700;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        line-height: 1;
    }
    .single-projet-hero__badge--en_cours {
        background: color-mix(in oklch, var(--brand-sun) 26%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
        border: 1px solid color-mix(in oklch, var(--brand-sun) 60%, transparent);
    }
    .single-projet-hero__badge--realise {
        background: color-mix(in oklch, var(--brand-leaf) 32%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
        border: 1px solid color-mix(in oklch, var(--brand-leaf) 65%, transparent);
    }
    .single-projet-hero__badge-dot {
        width: 7px; height: 7px;
        background: var(--brand-sun);
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--brand-sun);
        animation: oms-pulse-dot 2.2s var(--ease-out) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        .single-projet-hero__badge-dot { animation: none; }
    }
    .single-projet-hero__kicker {
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun);
        display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .single-projet-hero__kicker-line {
        display: inline-block; width: 2rem; height: 1px;
        background: currentColor; opacity: 0.6;
    }
    /* Titre éditorial */
    .single-projet-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 5.6vw, 4.8rem);
        font-weight: 300; line-height: 1.02; letter-spacing: -0.025em;
        color: #FAF6EE;
        margin: 0 0 var(--space-m);
        max-width: 28ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .single-projet-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(0.98rem, 1.4vw, 1.2rem);
        font-weight: 300; line-height: 1.55;
        color: color-mix(in oklch, #FAF6EE 90%, transparent);
        max-width: 60ch;
        margin: 0 0 var(--space-l);
    }
    /* Scroll indicator */
    .single-projet-hero__scroll {
        display: inline-flex; align-items: center; gap: 0.6rem;
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: color-mix(in oklch, #FAF6EE 85%, transparent);
        text-decoration: none;
        padding: var(--space-s) 0;
        transition: color var(--dur-fast), gap var(--dur-fast);
    }
    .single-projet-hero__scroll-line {
        display: inline-block; width: 2.5rem; height: 1px;
        background: currentColor;
        transition: width var(--dur-base) var(--ease-out);
    }
    .single-projet-hero__scroll:hover { color: var(--brand-sun); gap: 1.2rem; }
    .single-projet-hero__scroll:hover .single-projet-hero__scroll-line { width: 4rem; }

    /* ─── II. LAYOUT : sidebar + main ─────────────────────────── */
    .single-projet-layout {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
        scroll-margin-top: calc(var(--nav-h) + 20px);
    }
    .single-projet-layout__inner {
        display: grid;
        gap: var(--space-2xl);
        grid-template-columns: 1fr;
    }
    @media (min-width: 980px) {
        .single-projet-layout__inner {
            grid-template-columns: 280px 1fr;
            gap: var(--space-3xl);
            align-items: start;
        }
    }
    @media (min-width: 1200px) {
        .single-projet-layout__inner { grid-template-columns: 320px 1fr; }
    }

    /* Sidebar sticky */
    .single-projet-layout__sidebar {
        position: relative;
    }
    @media (min-width: 980px) {
        .single-projet-layout__sidebar {
            position: sticky;
            top: calc(var(--nav-h) + 24px);
            align-self: start;
        }
    }

    /* ─── Facts cards ─── */
    .single-projet-facts {
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--space-l);
        display: flex; flex-direction: column;
        gap: var(--space-m);
        box-shadow: var(--shadow-1);
    }
    .single-projet-facts__title {
        font-family: var(--font-body);
        font-size: 0.72rem; font-weight: 700;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0;
        padding-bottom: var(--space-s);
        border-bottom: 1px solid var(--line);
    }
    .single-projet-fact {
        display: flex; align-items: start;
        gap: var(--space-s);
        padding-block: 0.15rem;
    }
    .single-projet-fact__icon {
        flex-shrink: 0;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        border-radius: 50%;
        color: var(--brand-earth-text);
        transition: background var(--dur-fast), transform var(--dur-base) var(--ease-back);
    }
    .single-projet-fact:hover .single-projet-fact__icon {
        background: color-mix(in oklch, var(--brand-earth) 16%, transparent);
        transform: scale(1.06) rotate(-3deg);
    }
    .single-projet-fact__label {
        font-family: var(--font-body);
        font-size: 0.66rem; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0;
        line-height: 1.2;
    }
    .single-projet-fact__value {
        font-family: var(--font-display);
        font-size: 0.96rem; font-weight: 500;
        line-height: 1.3;
        color: var(--ink);
        margin: 0.1rem 0 0;
    }

    /* CTA sidebar : Soutenir ce projet */
    .single-projet-facts__cta {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 0.55rem;
        padding: 0.9rem 1.2rem;
        background: var(--brand-earth);
        color: var(--on-brand-light);
        text-decoration: none;
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-base);
        position: relative;
        overflow: hidden;
    }
    .single-projet-facts__cta::before {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(115deg, transparent 35%, oklch(1 0 0 / 0.2) 50%, transparent 65%);
        background-size: 200% 100%;
        background-position: 200% 0;
        transition: background-position 0.8s var(--ease-out);
        pointer-events: none;
    }
    .single-projet-facts__cta:hover {
        background: color-mix(in oklch, var(--brand-earth) 86%, black);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px color-mix(in oklch, var(--brand-earth) 32%, transparent);
    }
    .single-projet-facts__cta:hover::before { background-position: -100% 0; }

    /* Share row */
    .single-projet-facts__share {
        display: flex; align-items: center;
        gap: 0.5rem;
        padding-top: var(--space-s);
        border-top: 1px solid var(--line);
    }
    .single-projet-facts__share-label {
        font-family: var(--font-body);
        font-size: 0.66rem; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint);
        margin-right: auto;
    }
    .single-projet-facts__share a {
        width: 30px; height: 30px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: color-mix(in oklch, var(--ink) 6%, transparent);
        color: var(--ink-soft);
        transition: background var(--dur-fast), color var(--dur-fast),
                    transform var(--dur-fast) var(--ease-out);
    }
    .single-projet-facts__share a:hover {
        background: var(--brand-earth);
        color: var(--on-brand-light);
        transform: translateY(-2px);
    }

    /* ─── Main content ─── */
    .single-projet-layout__main { min-width: 0; }
    .single-projet-content {
        font-family: var(--font-body);
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--ink);
        max-width: 66ch;
    }
    .single-projet-content > *:first-child { margin-top: 0; }
    .single-projet-content h2 {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 400; line-height: 1.15;
        margin: 2.2em 0 0.5em;
        color: var(--ink);
        letter-spacing: -0.015em;
        position: relative;
        padding-top: 0.8em;
    }
    .single-projet-content h2::before {
        content: "";
        position: absolute; top: 0; left: 0;
        width: 2.5rem; height: 2px;
        background: var(--brand-sun);
    }
    .single-projet-content h3 {
        font-family: var(--font-display);
        font-size: 1.3rem; font-weight: 500;
        margin: 2em 0 0.5em;
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .single-projet-content p { margin: 0 0 1.1em; }
    .single-projet-content a {
        color: var(--brand-earth-text);
        text-decoration: underline;
        text-underline-offset: 0.2em;
        text-decoration-thickness: 1px;
    }
    .single-projet-content ul,
    .single-projet-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
    .single-projet-content li { margin-bottom: 0.35em; }
    .single-projet-content blockquote {
        border-left: 3px solid var(--brand-sun);
        background: color-mix(in oklch, var(--brand-sun) 6%, transparent);
        padding: var(--space-m) var(--space-l);
        margin: 1.6em 0;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.15rem;
        line-height: 1.5;
        color: var(--ink);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .single-projet-content blockquote p { margin: 0; }
    .single-projet-content img {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        margin-block: 1.6em;
    }

    /* ─── III. Galerie photo (bento + lightbox) ─── */
    .single-projet-gallery {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
        border-top: 1px solid var(--line);
    }
    .single-projet-gallery__header {
        margin-bottom: var(--space-l);
    }
    .single-projet-gallery__title {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-xs) 0 0;
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .single-projet-gallery__title em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .single-projet-gallery__grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-s);
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    @media (min-width: 640px) {
        .single-projet-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
    }
    /* Tile asymétrique : 1 sur 5 prend 2 rows pour casser la grille */
    .single-projet-gallery__grid > li:nth-child(5n+1) { grid-row: span 2; }

    .single-projet-gallery__inner {
        position: relative;
        display: block;
        width: 100%; height: 100%;
        border: 0; padding: 0; margin: 0;
        background: var(--bg-paper);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out);
    }
    .single-projet-gallery__inner img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.4s var(--ease-out);
    }
    .single-projet-gallery__inner:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
    .single-projet-gallery__inner:hover img { transform: scale(1.06); }
    .single-projet-gallery__inner:focus-visible {
        outline: 2px solid var(--brand-earth);
        outline-offset: 3px;
    }
    .single-projet-gallery__caption {
        position: absolute; left: 0; right: 0; bottom: 0;
        padding: var(--space-m);
        background: linear-gradient(to top, oklch(0 0 0 / 0.7) 0%, transparent 100%);
        color: #FAF6EE;
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.3;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dur-base), transform var(--dur-base);
        pointer-events: none;
    }
    .single-projet-gallery__inner:hover .single-projet-gallery__caption,
    .single-projet-gallery__inner:focus-visible .single-projet-gallery__caption {
        opacity: 1; transform: none;
    }

    /* ─── IV. Engage bandeau (earth full-width) ─── */
    .single-projet-engage {
        padding-block: var(--space-2xl);
        background:
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-sun) 14%, transparent) 0%, transparent 55%),
            var(--brand-earth);
        color: var(--on-brand-light);
        position: relative;
        overflow: hidden;
    }
    .single-projet-engage::before {
        content: "";
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.06) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.06) 1px, transparent 1px);
        background-size: 60px 60px;
        opacity: 0.5; pointer-events: none;
        mask-image: radial-gradient(ellipse at center, black, transparent 80%);
    }
    .single-projet-engage__inner {
        position: relative;
        display: grid;
        gap: var(--space-l);
        align-items: center;
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .single-projet-engage__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); }
    }
    .single-projet-engage__primary { max-width: 50ch; }
    .single-projet-engage__primary .eyebrow { color: var(--brand-sun); }
    .single-projet-engage__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        font-weight: 400; line-height: 1.08;
        margin: var(--space-xs) 0 var(--space-s);
        color: var(--on-brand-light);
        letter-spacing: -0.015em;
        text-wrap: balance;
    }
    .single-projet-engage__title em {
        font-style: italic; color: var(--brand-sun);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .single-projet-engage__lead {
        font-size: 0.98rem;
        line-height: 1.55;
        color: color-mix(in oklch, var(--on-brand-light) 88%, transparent);
        margin: 0;
    }
    .single-projet-engage__actions {
        display: flex; flex-wrap: wrap;
        gap: var(--space-s);
    }
    .single-projet-engage__btn {
        display: inline-flex; align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.2rem;
        border-radius: var(--radius-sm);
        text-decoration: none;
        font-family: var(--font-body);
        font-size: 0.92rem; font-weight: 600;
        letter-spacing: 0.02em;
        background: oklch(1 0 0 / 0.10);
        border: 1px solid oklch(1 0 0 / 0.25);
        color: var(--on-brand-light);
        transition: background var(--dur-fast), border-color var(--dur-fast),
                    transform var(--dur-fast) var(--ease-out);
    }
    .single-projet-engage__btn:hover {
        background: oklch(1 0 0 / 0.18);
        border-color: oklch(1 0 0 / 0.45);
        transform: translateY(-2px);
    }
    .single-projet-engage__btn--primary {
        background: var(--brand-sun);
        border-color: var(--brand-sun);
        color: var(--brand-earth);
    }
    .single-projet-engage__btn--primary:hover {
        background: color-mix(in oklch, var(--brand-sun) 88%, white);
        border-color: var(--brand-sun);
    }

    /* ─── V. Projets connexes ─── */
    .single-projet-related {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .single-projet-related__header {
        max-width: 56ch;
        margin-bottom: var(--space-xl);
    }
    .single-projet-related__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        font-weight: 400; line-height: 1.05;
        margin: var(--space-xs) 0 0;
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .single-projet-related__title em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .single-projet-related__grid {
        list-style: none; padding: 0; margin: 0;
        display: grid;
        gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
        .single-projet-related__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1100px) {
        .single-projet-related__grid { grid-template-columns: repeat(3, 1fr); }
    }
    .single-projet-related__card { display: block; }
    .single-projet-related__link {
        display: block;
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        box-shadow: var(--shadow-1);
        transition: transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out),
                    border-color var(--dur-base);
    }
    .single-projet-related__link:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-3);
        border-color: color-mix(in oklch, var(--brand-earth) 28%, var(--line));
    }
    .single-projet-related__media {
        position: relative;
        aspect-ratio: 16/10;
        overflow: hidden;
    }
    .single-projet-related__media img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.4s var(--ease-out);
    }
    .single-projet-related__link:hover .single-projet-related__media img {
        transform: scale(1.06);
    }
    .single-projet-related__badge {
        position: absolute; top: 0.6rem; right: 0.6rem;
        display: inline-flex; align-items: center;
        gap: 0.3rem;
        padding: 0.28rem 0.6rem;
        font-family: var(--font-body);
        font-size: 0.65rem; font-weight: 700;
        letter-spacing: 0.04em; text-transform: uppercase;
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        line-height: 1;
    }
    .single-projet-related__badge--en_cours {
        background: color-mix(in oklch, var(--brand-sun) 26%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
    }
    .single-projet-related__badge--realise {
        background: color-mix(in oklch, var(--brand-leaf) 32%, oklch(0 0 0 / 0.55));
        color: #FAF6EE;
    }
    .single-projet-related__badge-dot {
        width: 6px; height: 6px;
        background: var(--brand-sun);
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--brand-sun);
        animation: oms-pulse-dot 2.2s var(--ease-out) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
        .single-projet-related__badge-dot { animation: none; }
    }
    .single-projet-related__body {
        padding: var(--space-m) var(--space-l);
        display: flex; flex-direction: column;
        gap: 0.4rem;
    }
    .single-projet-related__name {
        font-family: var(--font-display);
        font-size: 1.15rem; font-weight: 500;
        line-height: 1.2;
        margin: 0;
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .single-projet-related__link:hover .single-projet-related__name {
        color: var(--brand-earth-text);
    }
    .single-projet-related__zone {
        font-family: var(--font-body);
        font-size: 0.82rem;
        color: var(--ink-soft);
        margin: 0;
        display: inline-flex; align-items: center;
        gap: 0.35rem;
    }
    .single-projet-related__zone svg { color: var(--brand-earth-text); flex-shrink: 0; }
    .single-projet-related__arrow {
        display: inline-flex; align-items: center;
        gap: 0.4rem;
        margin-top: var(--space-xs);
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--brand-earth-text);
    }
    .single-projet-related__arrow svg {
        transition: transform var(--dur-base) var(--ease-out);
    }
    .single-projet-related__link:hover .single-projet-related__arrow svg {
        transform: translateX(4px);
    }

    /* ─── VI. Navigation prev/next ─── */
    .single-projet-nav {
        padding-block: var(--space-l);
        background: var(--bg-elev);
        border-top: 1px solid var(--line);
    }
    .single-projet-nav__inner {
        display: grid;
        gap: var(--space-s);
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
        .single-projet-nav__inner { grid-template-columns: 1fr 1fr; gap: var(--space-m); }
    }
    .single-projet-nav__link {
        display: inline-flex; align-items: center;
        gap: var(--space-s);
        padding: var(--space-m) var(--space-l);
        background: var(--bg-paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: inherit;
        transition: background var(--dur-fast), border-color var(--dur-fast),
                    transform var(--dur-fast) var(--ease-out);
        min-height: 76px;
    }
    .single-projet-nav__link:hover {
        background: var(--bg-elev);
        border-color: color-mix(in oklch, var(--brand-earth) 32%, var(--line));
        transform: translateY(-2px);
    }
    .single-projet-nav__link--prev { justify-content: flex-start; }
    .single-projet-nav__link--next { justify-content: flex-end; text-align: right; }
    .single-projet-nav__link--placeholder { visibility: hidden; }
    .single-projet-nav__arrow {
        flex-shrink: 0;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        border-radius: 50%;
        color: var(--brand-earth-text);
        transition: background var(--dur-fast), color var(--dur-fast),
                    transform var(--dur-base) var(--ease-back);
    }
    .single-projet-nav__link:hover .single-projet-nav__arrow {
        background: var(--brand-earth);
        color: var(--on-brand-light);
    }
    .single-projet-nav__link--prev:hover .single-projet-nav__arrow { transform: translateX(-3px); }
    .single-projet-nav__link--next:hover .single-projet-nav__arrow { transform: translateX(3px); }
    .single-projet-nav__meta {
        display: flex; flex-direction: column;
        gap: 0.2rem;
        min-width: 0;
    }
    .single-projet-nav__direction {
        font-family: var(--font-body);
        font-size: 0.66rem; font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-faint);
        line-height: 1.2;
    }
    .single-projet-nav__title {
        font-family: var(--font-display);
        font-size: 0.98rem; font-weight: 500;
        line-height: 1.25;
        color: var(--ink);
        letter-spacing: -0.005em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .single-projet-nav__link:hover .single-projet-nav__title { color: var(--brand-earth-text); }

    /* ─── REVEAL au scroll (CSS natif, pas de JS) ─────────────────── */
    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: view()) {
            .reveal {
                animation: reveal-anim linear both;
                animation-timeline: view();
                animation-range: entry 0% cover 30%;
            }
            @keyframes reveal-anim {
                from { opacity: 0; transform: translateY(24px); }
                to   { opacity: 1; transform: none; }
            }
        }
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE « DEMANDER UNE AIDE » — v3.14.58 award-grade
       Formulaire pour bénéficiaires qui sollicitent l'ADD.
       ═══════════════════════════════════════════════════════════════ */

    /* ─── I. HERO ─────────────────────────────────────────────── */
    .aide-hero {
        position: relative;
        min-height: 65vh;
        color: #FAF6EE;
        display: flex; align-items: end;
        overflow: hidden; isolation: isolate;
    }
    .aide-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .aide-hero__bg {
        width: 100%; height: 100%; object-fit: cover; object-position: center;
        animation: ken-burns 28s ease-in-out infinite alternate;
    }
    .aide-hero__overlay {
        position: absolute; inset: 0;
        background:
            linear-gradient(180deg, oklch(0.13 0.012 85 / 0.50) 0%, oklch(0.10 0.012 85 / 0.95) 100%),
            radial-gradient(ellipse at top right, color-mix(in oklch, var(--brand-leaf) 22%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at bottom left, color-mix(in oklch, var(--brand-earth) 28%, transparent) 0%, transparent 55%);
    }
    .aide-hero__grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
        background-size: clamp(60px, 6vw, 96px) clamp(60px, 6vw, 96px);
        mix-blend-mode: overlay;
        pointer-events: none;
        opacity: 0.65;
    }
    .aide-hero__inner { padding-block: var(--space-2xl) var(--space-l); width: 100%; position: relative; }
    .aide-hero__kicker {
        font-size: var(--step--1); font-weight: 600;
        letter-spacing: var(--tracking-wide); text-transform: uppercase;
        color: var(--brand-sun); margin: 0 0 var(--space-m);
        display: inline-flex; align-items: center; gap: 0.75rem;
    }
    .aide-hero__kicker-line { display: inline-block; width: 2.5rem; height: 1px; background: currentColor; }
    .aide-hero__title {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 6vw, 5rem);
        font-weight: 300; line-height: 0.98; letter-spacing: -0.025em;
        color: #FAF6EE; margin: 0 0 var(--space-m);
        max-width: 22ch; text-wrap: balance;
        font-variation-settings: "opsz" 144, "SOFT" 40;
        text-shadow: 0 2px 30px oklch(0 0 0 / 0.4);
    }
    .aide-hero__title em {
        font-style: italic; font-weight: 400; color: var(--brand-sun);
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .aide-hero__lead {
        font-family: var(--font-display);
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 300; line-height: 1.55;
        color: color-mix(in oklch, #FAF6EE 92%, transparent);
        max-width: 58ch; margin: 0;
    }

    /* ─── II. STEPS (3 étapes) ────────────────────────────────── */
    .aide-steps {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .aide-steps__header { max-width: 56ch; margin-bottom: var(--space-2xl); }
    .aide-steps__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        font-weight: 400; line-height: 1.08;
        margin: var(--space-xs) 0 0;
        color: var(--ink);
        letter-spacing: -0.015em;
        text-wrap: balance;
    }
    .aide-steps__title em {
        font-style: italic;
        color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .aide-steps__list {
        list-style: none; padding: 0; margin: 0;
        display: grid; gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 880px) {
        .aide-steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
    }
    .aide-step {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: var(--space-m);
        position: relative;
    }
    .aide-step__num {
        font-family: var(--font-display);
        font-style: italic; font-weight: 300;
        font-size: 2.4rem; line-height: 1;
        color: var(--brand-earth-text);
        background: color-mix(in oklch, var(--brand-earth) 8%, transparent);
        width: 64px; height: 64px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid color-mix(in oklch, var(--brand-earth) 22%, transparent);
        border-radius: 50%;
        transition: background var(--dur-base) var(--ease-out),
                    transform var(--dur-base) var(--ease-back);
    }
    .aide-step:hover .aide-step__num {
        background: var(--brand-earth);
        color: var(--on-brand-light);
        transform: scale(1.06) rotate(-3deg);
    }
    .aide-step h3 {
        font-family: var(--font-display);
        font-size: 1.2rem; font-weight: 500; line-height: 1.25;
        margin: 0 0 var(--space-xs);
        color: var(--ink);
        letter-spacing: -0.005em;
    }
    .aide-step p {
        margin: 0;
        font-size: 0.95rem; line-height: 1.6;
        color: var(--ink-soft);
    }

    /* ─── III. CRITÈRES D'ÉLIGIBILITÉ ─────────────────────────── */
    .aide-criteres {
        padding-block: var(--space-3xl);
        background: var(--bg-elev);
    }
    .aide-criteres__header { max-width: 56ch; margin-bottom: var(--space-xl); }
    .aide-criteres__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        font-weight: 400; line-height: 1.08;
        margin: var(--space-xs) 0 0;
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .aide-criteres__title em {
        font-style: italic; color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .aide-criteres__grid {
        display: grid; gap: var(--space-l);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
        .aide-criteres__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
    }
    .aide-critere {
        background: var(--bg-paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--space-l);
        box-shadow: var(--shadow-1);
    }
    .aide-critere h3 {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 500;
        margin: 0 0 var(--space-s);
        color: var(--brand-earth-text);
        letter-spacing: -0.005em;
    }
    .aide-critere ul {
        list-style: none; padding: 0; margin: 0;
    }
    .aide-critere li {
        padding: 0.4rem 0 0.4rem 1.4rem;
        position: relative;
        font-size: 0.92rem;
        line-height: 1.5;
        color: var(--ink-soft);
        border-bottom: 1px solid color-mix(in oklch, var(--line) 60%, transparent);
    }
    .aide-critere li:last-child { border-bottom: 0; }
    .aide-critere li::before {
        content: "›";
        position: absolute; left: 0;
        color: var(--brand-sun);
        font-weight: 700;
        font-size: 1.1rem;
        line-height: 1.5;
    }

    /* ─── IV. FORMULAIRE ──────────────────────────────────────── */
    .aide-form-section {
        padding-block: var(--space-3xl);
        background: var(--bg-paper);
    }
    .aide-form-section__header { max-width: 56ch; margin-bottom: var(--space-xl); }
    .aide-form-section__title {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
        font-weight: 400; line-height: 1.08;
        margin: var(--space-xs) 0 var(--space-s);
        color: var(--ink);
        letter-spacing: -0.015em;
    }
    .aide-form-section__title em {
        font-style: italic; color: var(--brand-earth-text);
        font-weight: 300;
        font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    .aide-form-section__intro {
        font-size: 1rem; line-height: 1.6;
        color: var(--ink-soft);
        margin: 0 0 var(--space-l);
        max-width: 58ch;
    }

    .aide-form {
        max-width: 760px;
        margin: 0 auto;
        display: flex; flex-direction: column;
        gap: var(--space-l);
    }
    .aide-form__group {
        background: var(--bg-elev);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: var(--space-l);
        box-shadow: var(--shadow-1);
        border: 0; /* reset fieldset native border */
        padding: var(--space-l);
        background: var(--bg-elev);
        border-left: 3px solid var(--brand-earth);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
    .aide-form__group legend {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--brand-earth-text);
        padding: 0 0.5rem 0 0;
        margin-bottom: var(--space-m);
        letter-spacing: -0.005em;
    }
    .aide-form__rgpd {
        margin: 0;
        color: var(--ink-faint);
        font-size: 0.85rem;
        line-height: 1.55;
    }
    .aide-form__rgpd a {
        color: var(--brand-earth-text);
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .aide-form__actions {
        margin-top: var(--space-s);
    }
}

/* ========================================================================
   @layer dark-overrides — affinements ciblés (mode sombre)
   v3.11 — Refonte DRY : la quasi-totalité de la palette est désormais gérée
   par light-dark() dans @layer tokens. Ici on garde uniquement les règles
   qui ne peuvent PAS s'exprimer comme un simple swap de token : SVG (carte
   du Sénégal), logos partenaires (grayscale inversé), gradients radiaux
   spécifiques au dark.
   ======================================================================== */
@layer dark-overrides {

    /* ─── Carte du Sénégal — fills et tracés (light-dark inline) ─────
       Les <path> SVG ne peuvent pas piocher dans des tokens via attribut
       fill="...". On override en CSS avec light-dark() pour rester DRY. */
    .zones__map .map-country {
        fill: light-dark(
            color-mix(in oklch, oklch(0.56 0.14 142) 8%, oklch(1 0 0)),
            color-mix(in oklch, oklch(0.72 0.14 142) 18%, oklch(0.20 0.014 70))
        );
        stroke: var(--brand-leaf);
        filter: light-dark(none, drop-shadow(0 1px 0 oklch(0 0 0 / .3)));
    }
    .zones__map .map-gambia {
        fill: var(--bg-paper);
        stroke: var(--line-strong);
    }
    .zones__map .map-river {
        stroke: light-dark(
            color-mix(in oklch, oklch(0.56 0.14 142) 30%, oklch(1 0 0)),
            color-mix(in oklch, oklch(0.72 0.14 142) 40%, oklch(0.20 0.014 70))
        );
    }
    .zones__map .map-label             { fill: var(--ink-soft); }
    .zones__map .zone-marker__label    { fill: var(--ink); }
    .zones__map .zone-marker[data-active] .zone-marker__label {
        fill: var(--brand-sun);
    }

    /* ─── Hero — gradient radial signature (sun en haut à droite) ─── */
    .hero {
        background:
            radial-gradient(ellipse at top right,
                var(--brand-sun-soft) 0%, transparent 50%),
            linear-gradient(180deg,
                var(--bg-paper) 0%,
                color-mix(in oklch, var(--bg-paper) 80%, var(--brand-earth) 20%) 100%
            );
    }

    /* ─── Sections "blanches" en clair → glissent en bg-elev en dark ──
       Pas un simple swap : en clair ces sections n'ont pas de fond explicite
       (transparent sur paper). En dark on veut un demi-ton plus haut que paper
       pour les différencier visuellement. light-dark(transparent, --bg-elev). */
    .domaines, .stats, .voix-projet, .actualites {
        background: light-dark(transparent, var(--bg-elev));
    }

    /* ─── Don CTA : bordeaux ajusté pour rester lisible des deux côtés ── */
    .don-cta {
        background: light-dark(
            oklch(0.38 0.13 35),
            oklch(0.32 0.13 35)
        );
    }

    /* ─── Partenaires : grayscale en clair, inversion intelligente en dark.
       En dark, les logos noir-sur-blanc deviennent invisibles ; le filtre
       invert+hue-rotate les ramène en clair-sur-sombre sans perdre la couleur. */
    .partenaire-logo {
        opacity: light-dark(0.7, 0.82);
        filter: light-dark(
            grayscale(1) contrast(0.9),
            grayscale(0.3) invert(0.95) hue-rotate(180deg) brightness(1.05)
        );
        transition: opacity var(--dur-fast), filter var(--dur-fast);
    }
    .partenaire-logo:hover {
        opacity: 1;
        filter: light-dark(
            grayscale(0),
            grayscale(0) invert(0.95) hue-rotate(180deg) brightness(1.1)
        );
    }

    /* ─── Cookie banner : garder lisible (utilise --bg-elev → adapte tout seul). */
    .cookie-banner {
        background: var(--bg-elev);
        color: var(--ink);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-2);
    }

    /* ─── Lightbox galerie : préserver fidélité images, retirer le filtre
       d'ambiance (data-raw appliqué via JS). Reset défensif au cas où.   */
    .galerie-lightbox img,
    .galerie-lightbox video {
        filter: none !important;
    }

    /* ─── Code blocs / blockquotes : ambiance "carnet" en dark ──────── */
    pre, code, kbd, samp {
        background: light-dark(
            color-mix(in oklch, oklch(0.18 0.012 85) 4%, oklch(1 0 0)),
            color-mix(in oklch, oklch(0.96 0.010 80) 6%, oklch(0.16 0.014 70))
        );
        color: var(--ink);
        border-radius: var(--radius);
    }
    pre { padding: var(--space-s); overflow-x: auto; }
    code, kbd, samp { padding: 0.15em 0.4em; font-size: 0.92em; }

    blockquote {
        border-left: 3px solid var(--brand-earth);
        padding-left: var(--space-m);
        margin-left: 0;
        font-style: italic;
        font-family: var(--font-display);
        color: var(--ink-soft);
        background: light-dark(transparent, color-mix(in oklch, var(--brand-earth) 8%, transparent));
        padding-block: var(--space-2xs);
    }

    /* ─── Inputs natifs : color-scheme already set au niveau :root,
       mais on force accent-color spécifique pour les contrôles natifs. */
    input, textarea, select {
        accent-color: var(--brand-earth-text);
    }
    input[type="checkbox"], input[type="radio"] {
        accent-color: var(--brand-leaf-text);
    }
}

/* ========================================================================
   @layer utilities — petites classes outils (à utiliser avec parcimonie)
   ======================================================================== */
@layer utilities {
    .visually-hidden,
    .screen-reader-text {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%);
        white-space: nowrap; border: 0;
    }
    .text-center { text-align: center; }
    .mt-xl { margin-top: var(--space-xl) !important; }
    .mt-2xl { margin-top: var(--space-2xl) !important; }
    .no-margin { margin: 0 !important; }
    .container-query { container-type: inline-size; }
}

/* ========================================================================
   Print
   ======================================================================== */
@media print {
    .site-header, .site-nav-mobile, .menu-toggle, .whatsapp-float,
    .cookie-banner, .hero__scroll, .site-footer__bottom .social-links { display: none !important; }
    body { background: #fff; color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}