/* ==========================================================================
   YouthShare Initiatives : feuille de style unique (FR et EN)
   Ordre : polices, tokens, base, structure globale, accueil, pages internes,
   laboratoires, pages légales, utilitaires, mode sombre, mouvement réduit.
   Toutes les couleurs passent par les tokens ; ne pas coder de couleur en dur
   dans les pages HTML (utiliser les classes .tone-*).
   ========================================================================== */

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

/* ---------- Polices auto-hébergées (variables, WOFF2) ---------- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Police de repli ajustée pour limiter le décalage au chargement (CLS) */
@font-face { font-family: "Grotesk Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Couleurs de marque */
    --encre: #0B0F13;
    --encre-2: #12171C;
    --encre-3: #1B2027;
    --craie: #F7F7F5;
    --papier: #EFEDE7;
    --sable: #E2DED3;
    --rouge: #C5192D;
    --rouge-fonce: #A01223;
    --magenta: #DD1367;           /* décor, grands aplats */
    --magenta-texte: #C8105A;     /* texte et boutons sur fond clair (5,3:1) */
    --magenta-fonce: #A80D4B;
    --vert: #3F7E44;
    --vert-texte: #2F6A35;        /* texte vert sur fond clair (≥ 5,5:1) */
    /* Versions lumineuses pour fonds sombres (≥ 6,5:1 sur --encre) */
    --rose-lumiere: #FF6FA8;
    --rouge-lumiere: #FF7A8A;
    --vert-lumiere: #7CC383;

    /* Rôles (mode clair) */
    --bg: var(--craie);
    --bg-alt: var(--papier);
    --surface: #FFFFFF;
    --fg: var(--encre);
    --fg-muted: #4A4F57;          /* 7,7:1 sur craie */
    --fg-subtle: #5C6168;         /* 5,8:1 sur craie */
    --line: rgba(11, 15, 19, 0.12);
    --line-strong: rgba(11, 15, 19, 0.24);
    --accent: var(--magenta-texte);
    --accent-hover: var(--magenta-fonce);
    --focus: #1A5FD0;

    /* Sections sombres (identiques dans les deux modes) */
    --dark-bg: var(--encre);
    --dark-bg-2: var(--encre-2);
    --dark-fg: #F2F1EE;
    --dark-muted: #A6A9AE;        /* 8,2:1 sur encre */
    --dark-line: rgba(247, 247, 245, 0.14);

    /* Typographie */
    --font-display: "Space Grotesk", "Grotesk Fallback", system-ui, sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-xs: 0.8125rem;                                     /* 13px, plancher */
    --t-sm: 0.9375rem;                                     /* 15px */
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);      /* 16 → 18px */
    --t-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.4rem);
    --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --t-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);
    --t-h2: clamp(2rem, 1.45rem + 2.6vw, 3.75rem);
    --t-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5.75rem);
    --t-display: clamp(2.9rem, 1.4rem + 7vw, 8.25rem);
    --track-tight: -0.035em;

    /* Espacements */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
    --section-y: clamp(4rem, 2.6rem + 6vw, 8.5rem);
    --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
    --max: 1280px;
    --max-text: 68ch;
    --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));

    /* Formes et mouvement */
    --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(11, 15, 19, 0.05), 0 6px 18px -10px rgba(11, 15, 19, 0.18);
    --shadow-2: 0 1px 2px rgba(11, 15, 19, 0.06), 0 24px 48px -24px rgba(11, 15, 19, 0.28);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 160ms; --t-med: 360ms; --t-slow: 700ms;

    /* Signature tissée (quatre brins de la marque) */
    --weave: linear-gradient(90deg, var(--rouge) 0 25%, var(--magenta) 25% 50%, var(--vert) 50% 75%, var(--encre) 75% 100%);
    --header-h: 4.5rem;

    color-scheme: light;
  }

  /* Tons : un laboratoire = une couleur */
  .tone-vert, .lab-palaver    { --tone: var(--vert);    --tone-text: var(--vert-texte);    --tone-glow: var(--vert-lumiere); }
  .tone-rouge, .lab-agora     { --tone: var(--rouge);   --tone-text: var(--rouge);         --tone-glow: var(--rouge-lumiere); }
  .tone-magenta, .lab-boussole{ --tone: var(--magenta); --tone-text: var(--magenta-texte); --tone-glow: var(--rose-lumiere); }
  .tone-encre, .lab-forge     { --tone: #2A3038;        --tone-text: var(--encre);         --tone-glow: #D9D4C7; }
  .tone-futurs, .lab-futurs   { --tone: #B8123F;        --tone-text: #B8123F;              --tone-glow: #FF8FA0; }
  .tone-craie                 { --tone: var(--sable);   --tone-text: var(--encre);         --tone-glow: #D9D4C7; }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, picture { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; }
  p, li, h1, h2, h3, h4, blockquote { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.65;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: var(--track-tight);
    text-wrap: balance;
  }
  h1 { font-size: var(--t-h1); font-weight: 700; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
  h4 { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.01em; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  strong { font-weight: 600; }
  ::selection { background: var(--magenta); color: #fff; }

  :focus { outline: none; }
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible,
  .section-dark :focus-visible, .shift-page :focus-visible, .lab-hero :focus-visible,
  .feed :focus-visible, .reach :focus-visible, .newsletter :focus-visible, .final-cta :focus-visible {
    outline-color: #8AB4FF;
  }
}

/* ==========================================================================
   STRUCTURE GLOBALE
   ========================================================================== */
@layer layout {
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* Lien d'évitement */
  .skip-link {
    position: absolute; left: var(--gutter); top: -100px; z-index: 1000;
    padding: 0.75rem 1.25rem; border-radius: var(--r-pill);
    background: var(--encre); color: var(--craie); font-weight: 600; text-decoration: none;
    transition: top var(--t-fast) var(--ease);
  }
  .skip-link:focus { top: 0.75rem; }

  main { display: block; }
  main:focus { outline: none; }

  /* Barre de progression de lecture */
  .scroll-progress {
    position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; z-index: 120;
    background: var(--weave); transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
    pointer-events: none;
  }

  /* ---------- Barre utilitaire ---------- */
  .utility-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    min-height: 2.5rem; padding: 0 var(--pad-x);
    background: var(--encre); color: var(--dark-muted); font-size: var(--t-xs);
  }
  .u-tagline { letter-spacing: 0.02em; display: none; }
  .u-right { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
  .u-right > a { text-decoration: none; padding: 0.6rem 0; }
  .u-right > a:hover { color: var(--dark-fg); }
  .u-social { display: flex; gap: var(--s-1); }
  .u-social a, .footer-social a {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.5rem; color: inherit;
    border-radius: var(--r-sm); transition: color var(--t-fast);
  }
  .u-social a:hover { color: var(--dark-fg); }
  .u-social svg { width: 1rem; height: 1rem; }
  .u-lang { display: flex; align-items: center; gap: 2px; padding-left: var(--s-4); border-left: 1px solid var(--dark-line); }
  .u-lang a {
    display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.5rem;
    text-decoration: none; font-weight: 600; letter-spacing: 0.06em; border-radius: var(--r-sm);
  }
  .u-lang a[aria-current="true"] { color: var(--dark-fg); }
  .u-lang a[aria-current="true"]::after { content: ""; display: block; width: 1rem; height: 2px; background: var(--magenta); margin-top: -0.6rem; }
  @media (min-width: 720px) { .u-tagline { display: block; } }

  /* Signature tissée */
  .weave-strip { display: flex; height: 4px; }
  .ws-seg { flex: 1; }
  .ws-1 { background: var(--rouge); } .ws-2 { background: var(--magenta); }
  .ws-3 { background: var(--vert); } .ws-4 { background: var(--encre-3); }

  /* ---------- En-tête ---------- */
  .main-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    min-height: var(--header-h); padding: 0 var(--pad-x);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-med), box-shadow var(--t-med);
  }
  .main-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  }
  body.nav-open .main-header::before { background: var(--bg); }
  .main-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11, 15, 19, 0.5); }

  .logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--fg); flex-shrink: 0; }
  .logo-mark { width: 2.6rem; height: 2.6rem; }
  .logo-mark .strand { transition: transform var(--t-slow) var(--ease); transform-origin: 280px 280px; }
  .logo:hover .logo-mark .strand-0 { transform: translateX(-6px); }
  .logo:hover .logo-mark .strand-180 { transform: translateX(6px); }
  .logo:hover .logo-mark .strand-90 { transform: translateY(-6px); }
  .logo-word { display: flex; flex-direction: column; line-height: 1; }
  .ys-name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.03em; }
  .ys-sub { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.32em; color: var(--rouge); margin-top: 0.3rem; }

  /* ---------- Navigation ---------- */
  .main-nav { display: flex; align-items: center; gap: var(--s-2); }
  .nav-list { display: flex; align-items: center; gap: var(--s-1); list-style: none; }
  .nav-list > li { position: relative; }
  .nav-list > li > a, .nav-list > li > button {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.9rem;
    font-size: var(--t-sm); font-weight: 500; text-decoration: none; color: var(--fg);
    border-radius: var(--r-pill); transition: background var(--t-fast);
  }
  .nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li > button[aria-expanded="true"] { background: var(--bg-alt); }
  .nav-list > li > a[aria-current="page"], .nav-list > li.is-current > button { box-shadow: inset 0 -2px 0 var(--magenta); border-radius: 0; }
  .caret { width: 0.6rem; height: 0.6rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast); }
  button[aria-expanded="true"] .caret { transform: translateY(2px) rotate(225deg); }

  .dropdown {
    position: absolute; top: calc(100% + 0.5rem); left: 50%; translate: -50% 0; min-width: 20rem;
    padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
  }
  .nav-list > li:hover > .dropdown, .nav-list > li > button[aria-expanded="true"] + .dropdown, .nav-list > li:focus-within > .dropdown {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .dropdown a {
    display: block; padding: 0.8rem 1rem; border-radius: var(--r-md); text-decoration: none;
    font-weight: 600; font-size: var(--t-sm); color: var(--fg);
  }
  .dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--bg-alt); }
  .dd-desc { display: block; margin-top: 0.15rem; font-weight: 400; font-size: var(--t-xs); color: var(--fg-muted); }

  .nav-cta, .btn-primary, .btn-ghost, .btn-dark {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 3rem; padding: 0 1.5rem; border-radius: var(--r-pill);
    font-weight: 600; font-size: var(--t-sm); text-decoration: none; letter-spacing: 0;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease);
  }
  .nav-list > li > a.nav-cta { background: var(--encre); color: var(--craie); padding: 0 1.25rem; margin-left: var(--s-2); }
  .nav-list > li > a.nav-cta:hover { background: var(--magenta-texte); }

  .search-btn, .nav-toggle {
    display: none; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--fg);
  }
  .js .search-btn { display: inline-grid; }
  .search-btn:hover, .nav-toggle:hover { background: var(--bg-alt); }
  .search-btn svg { width: 1.2rem; height: 1.2rem; }
  .nav-toggle-bar { display: block; width: 1.3rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
  .nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Navigation mobile (< 1024px) */
  @media (max-width: 1023.98px) {
    .js .nav-toggle { display: inline-grid; align-content: center; }
    .main-header { flex-wrap: wrap; }
    .js .nav-list {
      position: fixed; inset: var(--nav-top, 6.5rem) 0 0 0; z-index: 99;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: var(--s-3) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity var(--t-med), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
    }
    .js .main-nav.open .nav-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    html:not(.js) .main-nav { width: 100%; padding-bottom: var(--s-3); }
    html:not(.js) .nav-list { flex-wrap: wrap; }
    .nav-list > li { border-bottom: 1px solid var(--line); }
    .nav-list > li > a, .nav-list > li > button {
      width: 100%; justify-content: space-between; min-height: 4rem; padding: 0 0.25rem;
      font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; border-radius: 0;
    }
    .nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li > button[aria-expanded="true"] { background: none; }
    .nav-list > li.is-current > button, .nav-list > li > a[aria-current="page"] { box-shadow: none; color: var(--magenta-texte); }
    .nav-list > li > button .caret { width: 0.7rem; height: 0.7rem; border-width: 2px; }
    .dropdown {
      position: static; translate: none; min-width: 0; margin: 0 0 var(--s-4); padding: var(--s-2); border: 0; border-radius: var(--r-lg);
      box-shadow: none; background: var(--bg-alt);
      display: none; opacity: 1; visibility: visible; transform: none;
    }
    .dropdown a { padding: 0.85rem 1rem; font-size: 1rem; border-radius: var(--r-md); }
    .dropdown a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--magenta); }
    .dd-desc { font-size: var(--t-sm); margin-top: 0.2rem; }
    .nav-list > li > button[aria-expanded="true"] + .dropdown { display: block; }
    .nav-list > li:hover > .dropdown, .nav-list > li:focus-within > .dropdown { opacity: 1; }
    .nav-list > li:not(:has(> button[aria-expanded="true"])):hover > .dropdown { display: none; }
    .nav-list > li > a.nav-cta { margin: var(--s-6) 0 0; justify-content: center; font-family: var(--font-body); font-size: 1.05rem; border-radius: var(--r-pill); min-height: 3.5rem; }
    .nav-list > li > a.nav-cta::after { content: "→"; }
    .nav-list > li:last-child { border-bottom: 0; }
    body.nav-open { overflow: hidden; }
  }
  @media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    .js .main-nav.open .nav-list > li { animation: menu-entre 420ms var(--ease) both; }
    .js .main-nav.open .nav-list > li:nth-child(2) { animation-delay: 40ms; }
    .js .main-nav.open .nav-list > li:nth-child(3) { animation-delay: 80ms; }
    .js .main-nav.open .nav-list > li:nth-child(4) { animation-delay: 120ms; }
    .js .main-nav.open .nav-list > li:nth-child(5) { animation-delay: 160ms; }
    @keyframes menu-entre { from { opacity: 0; transform: translateY(10px); } }
  }

  /* ---------- Recherche (dialogue) ---------- */
  .search-dialog {
    width: min(42rem, calc(100% - 2 * var(--gutter))); max-height: min(80vh, 44rem); margin: 8vh auto auto;
    padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); color: var(--fg); box-shadow: var(--shadow-2); overflow: hidden;
  }
  .search-dialog::backdrop { background: rgba(11, 15, 19, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .search-dialog[open] { display: flex; flex-direction: column; animation: pop-in var(--t-med) var(--ease); }
  .search-field { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .search-field svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--fg-muted); }
  .search-field input { flex: 1; min-width: 0; min-height: 3rem; border: 0; background: none; font-size: 1.15rem; }
  .search-field input:focus-visible { outline: none; }
  .search-close { min-height: 2.5rem; padding: 0 0.8rem; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; color: var(--fg-muted); border: 1px solid var(--line); }
  .search-close:hover { color: var(--fg); border-color: var(--line-strong); }
  .search-status { padding: var(--s-3) var(--s-5) 0; font-size: var(--t-xs); color: var(--fg-muted); }
  .search-results { list-style: none; overflow-y: auto; padding: var(--s-2); }
  .search-results a { display: block; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); text-decoration: none; }
  .search-results a:hover, .search-results a:focus-visible { background: var(--bg-alt); }
  .search-results strong { display: block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; }
  .search-results span { display: block; font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.5; }
  .search-results mark { background: color-mix(in srgb, var(--magenta) 22%, transparent); color: inherit; border-radius: 2px; }

  /* ---------- Bouton haut de page ---------- */
  .back-to-top {
    position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90;
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--encre); color: var(--craie); box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity var(--t-med), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .back-to-top svg { width: 1.2rem; height: 1.2rem; }
  .back-to-top:hover { background: var(--magenta-texte); }
}

/* ==========================================================================
   COMPOSANTS PARTAGÉS
   ========================================================================== */
@layer components {
  /* Boutons */
  .btn-primary { background: var(--magenta-texte); color: #fff; }
  .btn-primary:hover { background: var(--magenta-fonce); }
  .btn-primary:active, .btn-ghost:active, .btn-dark:active { transform: translateY(1px); }
  .btn-ghost { border: 1.5px solid var(--line-strong); color: var(--fg); background: transparent; }
  .btn-ghost:hover { border-color: var(--fg); }
  .btn-dark { background: var(--encre); color: var(--craie); }
  .btn-dark:hover { background: var(--encre-3); }
  .btn-primary .arrow, .btn-ghost .arrow, .btn-dark .arrow, .text-link .arrow { transition: transform var(--t-fast) var(--ease); }
  .btn-primary:hover .arrow, .btn-ghost:hover .arrow, .btn-dark:hover .arrow, .text-link:hover .arrow { transform: translateX(3px); }

  .text-link, .sr-cta, .link-cta, .f-more {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
    font-weight: 600; text-decoration: none; color: var(--fg);
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.55rem) / 100% 1.5px no-repeat;
    transition: background-size var(--t-med) var(--ease), color var(--t-fast);
  }
  .text-link:hover, .sr-cta:hover, .link-cta:hover, .f-more:hover { background-size: 0 1.5px; background-position: 100% calc(100% - 0.55rem); }
  .sr-cta::after, .link-cta[href$=".html"]::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
  .sr-cta:hover::after, .link-cta:hover::after { transform: translateX(3px); }

  .accent { color: var(--accent); }

  /* Surtitre : la signature tissée en tête de section */
  .section-eyebrow, .page-hero-eyebrow, .eyebrow {
    display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: var(--s-5);
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-muted);
  }
  .section-eyebrow::before, .page-hero-eyebrow::before, .eyebrow::before {
    content: ""; flex-shrink: 0; width: 2rem; height: 4px; border-radius: 2px; background: var(--weave);
  }

  /* Sections génériques */
  .section { padding: var(--section-y) var(--pad-x); }
  .section > h2 { max-width: 20ch; margin-bottom: var(--s-6); }
  .section > p, .section > ul, .section > .accordion, .section > .steps-list { max-width: var(--max-text); }
  .section > p + p { margin-top: var(--s-4); }
  .section > p { color: var(--fg-muted); }
  .section > p.large, .large {
    max-width: 30ch; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem);
    line-height: 1.2; letter-spacing: -0.025em; color: var(--fg); font-weight: 500; text-wrap: balance;
  }
  .section-narrow { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .section-narrow > p.large { max-width: 34ch; }
  .section-alt { background: var(--bg-alt); }
  .section-dark { background: var(--dark-bg); color: var(--dark-fg); --fg-muted: var(--dark-muted); --line: var(--dark-line); --accent: var(--rose-lumiere); }
  .section-dark > p { color: var(--dark-muted); }
  .section-dark .section-eyebrow { color: var(--dark-muted); }
  .section > .accordion, .section > .stat-stack { margin-top: var(--s-7); }
  .section > p + .accordion { margin-top: var(--s-6); }

  .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-muted); max-width: 56ch; }

  /* Liste à puces tissées */
  .bullet-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .bullet-list li {
    display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline;
    padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.45;
    counter-increment: puce;
  }
  .bullet-list { counter-reset: puce; }
  .bullet-list li::before {
    content: counter(puce, decimal-leading-zero); font-family: var(--font-display); font-size: var(--t-xs);
    font-weight: 600; letter-spacing: 0.08em; color: var(--accent);
  }

  /* Accordéon (<details>, fonctionne sans JavaScript) */
  .accordion { border-top: 1px solid var(--line); }
  .accordion-item { border-bottom: 1px solid var(--line); }
  .accordion-btn {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
    min-height: 4rem; padding: var(--s-4) 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3;
  }
  .accordion-btn::-webkit-details-marker { display: none; }
  .accordion-btn:hover { color: var(--accent); }
  .accordion-plus {
    position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1.5px solid var(--line-strong); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease);
  }
  .accordion-plus::before, .accordion-plus::after {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 0.9rem; height: 1.5px; background: currentColor;
    translate: -50% -50%; transition: transform var(--t-med) var(--ease);
  }
  .accordion-plus::after { transform: rotate(90deg); }
  .accordion-item[open] .accordion-plus { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: rotate(180deg); }
  .section-dark .accordion-item[open] .accordion-plus { background: var(--dark-fg); border-color: var(--dark-fg); color: var(--dark-bg); }
  .accordion-item[open] .accordion-plus::after { transform: rotate(0deg); }
  .accordion-panel { padding: 0 3.5rem var(--s-5) 0; color: var(--fg-muted); max-width: 62ch; }
  .accordion-item[open] .accordion-panel { animation: fade-down var(--t-med) var(--ease); }

  /* Chiffres clés empilés */
  .stat-stack { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .stat-stack-item {
    display: grid; gap: var(--s-3) var(--s-7); padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .stat-stack-num {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
    line-height: 0.9; letter-spacing: -0.05em; color: var(--tone-glow, var(--rose-lumiere));
  }
  .stat-stack-num span { font-size: 0.5em; margin-left: 0.05em; }
  .stat-stack-item p { max-width: 44ch; color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.5; }
  .stat-stack-item a { color: var(--fg); }
  @media (min-width: 760px) { .stat-stack-item { grid-template-columns: minmax(14rem, 0.8fr) 1.2fr; } }

  /* Étapes */
  .steps-list { display: grid; gap: var(--s-4); counter-reset: etape; margin-top: var(--s-6); }
  .step-item {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start;
    padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
    transition: border-color var(--t-fast), transform var(--t-med) var(--ease), box-shadow var(--t-med);
  }
  .step-item:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
  .step-num {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--encre); color: var(--craie); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  }
  .step-item:nth-child(4n+2) .step-num { background: var(--rouge); }
  .step-item:nth-child(4n+3) .step-num { background: var(--magenta-texte); }
  .step-item:nth-child(4n+4) .step-num { background: var(--vert); }
  .step-item h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .step-item p { color: var(--fg-muted); }
  @media (min-width: 900px) {
    .section > .steps-list { max-width: none; grid-template-columns: repeat(2, 1fr); }
  }

  /* Bandeau d'appel simple */
  .cta-simple {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; justify-items: start; gap: var(--s-6);
    margin: 0 var(--gutter) var(--section-y); padding: clamp(2.5rem, 1.5rem + 5vw, 6rem);
    border-radius: var(--r-xl); background: var(--rouge); color: #fff;
  }
  .cta-simple::after {
    content: ""; position: absolute; z-index: -1; inset: -20% -10% -20% 55%;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 14px, transparent 14px 26px);
    transform: skewX(-12deg); mask: linear-gradient(90deg, transparent, #000 40%);
  }
  .cta-simple h2 { max-width: 18ch; color: #fff; }
  .cta-simple .btn-primary, .cta-simple .btn-dark { background: var(--encre); color: var(--craie); }
  .cta-simple .btn-primary:hover, .cta-simple .btn-dark:hover { background: #000; }
  @media (min-width: 1360px) { .cta-simple { margin-inline: auto; max-width: calc(var(--max) + 2 * var(--gutter)); } }

  /* ---------- Cartes publication ---------- */
  .feed { position: relative; padding: var(--section-y) var(--pad-x); background: var(--dark-bg); color: var(--dark-fg); --line: var(--dark-line); }
  .feed-inner { display: grid; gap: var(--s-7); }
  .feed-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); }
  .feed-head h2 { max-width: 16ch; }
  .feed-head > a {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.4rem;
    border: 1.5px solid var(--dark-line); border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: var(--t-sm);
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .feed-head > a:hover { border-color: var(--dark-fg); }
  .feed-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
  .feed-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--r-lg); background: var(--encre-2); border: 1px solid var(--dark-line);
    transition: transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med);
  }
  .feed-card:hover { transform: translateY(-4px); border-color: rgba(247, 247, 245, 0.32); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
  .feed-card:focus-within { border-color: rgba(247, 247, 245, 0.5); }
  .feed-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tone, var(--encre-3)); }
  .feed-card-media img, .feed-card-media svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
  .feed-card:hover .feed-card-media img { transform: scale(1.05); }
  .feed-card-body { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; padding: var(--s-5); }
  .feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-xs); color: var(--dark-muted); }
  .feed-date { font-size: var(--t-xs); color: var(--dark-muted); font-variant-numeric: tabular-nums; }
  .feed-tag {
    display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); font-weight: 600; color: var(--dark-fg);
  }
  .feed-tag::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tone-glow, var(--rose-lumiere)); }
  .feed-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
  .feed-title a { text-decoration: none; }
  .feed-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .feed-title a:focus-visible { outline: none; }
  .feed-arrow {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: auto; border-radius: 50%;
    border: 1.5px solid var(--dark-line); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease);
  }
  .feed-arrow svg { width: 1rem; height: 1rem; }
  .feed-card:hover .feed-arrow { background: var(--dark-fg); color: var(--dark-bg); border-color: var(--dark-fg); transform: rotate(-45deg); }
  .feed-tile { display: none; border-radius: var(--r-lg); overflow: hidden; min-height: 14rem; }
  .page-lab .feed-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
  .feed-tile img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) { .feed-tile { display: block; } }
  .feed-disclaimer { padding-top: var(--s-5); border-top: 1px solid var(--dark-line); font-size: var(--t-sm); color: var(--dark-muted); }
  /* Carte à la une (première carte de l'accueil) */
  @media (min-width: 1000px) {
    .page-home .feed-grid { grid-template-columns: repeat(6, 1fr); }
    .page-home .feed-card { grid-column: span 2; }
    .page-home .feed-card:first-child { grid-column: span 4; grid-row: span 2; }
    .page-home .feed-card:first-child .feed-card-media { aspect-ratio: auto; flex: 1; min-height: 18rem; }
    .page-home .feed-card:first-child .feed-title { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.3rem); max-width: 22ch; }
    .page-home .feed-card:nth-child(n+4) .feed-card-media { display: none; }
    .page-home .feed-card:first-child:nth-last-child(5) ~ .feed-card:nth-child(n+4) { grid-column: span 3; }
  }
  @media (max-width: 999.98px) { .page-home .feed-card:nth-child(n+2) .feed-card-media { display: none; } }

  /* ---------- Lettre d'information ---------- */
  .newsletter { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--pad-x); background: var(--encre-2); color: var(--dark-fg); border-top: 1px solid var(--dark-line); }
  .newsletter-inner { display: grid; gap: var(--s-6); align-items: end; }
  .newsletter-inner > * { min-width: 0; }
  .newsletter h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); max-width: 18ch; }
  .newsletter-intro { margin-top: var(--s-4); color: var(--dark-muted); max-width: 46ch; }
  .newsletter-form label { display: block; margin-bottom: var(--s-2); font-size: var(--t-sm); font-weight: 600; }
  .nl-field {
    display: flex; gap: var(--s-2); padding: 0.375rem; border-radius: var(--r-pill);
    background: rgba(247, 247, 245, 0.06); border: 1.5px solid var(--dark-line); transition: border-color var(--t-fast);
  }
  .nl-field:focus-within { border-color: var(--dark-fg); }
  .nl-field input {
    flex: 1; min-width: 0; min-height: 3rem; padding: 0 1rem; border: 0; background: none; color: var(--dark-fg); font-size: 1rem;
  }
  .nl-field input::placeholder { color: #8E9399; }
  .nl-field input:focus-visible { outline: none; }
  .nl-field button {
    flex-shrink: 0; min-height: 3rem; padding: 0 1.4rem; border-radius: var(--r-pill);
    background: var(--magenta-texte); color: #fff; font-weight: 600; font-size: var(--t-sm); transition: background var(--t-fast);
  }
  .nl-field button:hover { background: var(--magenta-fonce); }
  .nl-note { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--dark-muted); }
  .nl-note a { color: var(--dark-fg); }
  .nl-status { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--vert-lumiere); min-height: 1.5em; }
  .nl-status.is-error { color: var(--rouge-lumiere); }
  @media (min-width: 900px) { .newsletter-inner { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }

  /* ---------- Pied de page ---------- */
  .site-footer { position: relative; overflow: hidden; padding: var(--s-9) var(--pad-x) calc(var(--s-6) + env(safe-area-inset-bottom)); background: var(--encre); color: var(--dark-muted); font-size: var(--t-sm); }
  .footer-top { display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .footer-brand { grid-column: 1 / -1; display: grid; gap: var(--s-4); max-width: 26rem; }
  .footer-logo { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--dark-fg); text-decoration: none; }
  .footer-logo img { width: 3rem; height: 3rem; }
  .footer-logo .ys-name { font-size: 1.4rem; }
  .footer-brand p { color: var(--dark-muted); }
  .f-more { color: var(--dark-fg); }
  .footer-social { display: flex; gap: var(--s-2); }
  .footer-social a { border: 1px solid var(--dark-line); border-radius: 50%; width: 2.75rem; height: 2.75rem; }
  .footer-social a:hover { color: var(--dark-fg); border-color: var(--dark-fg); }
  .footer-social svg { width: 1.05rem; height: 1.05rem; }
  .footer-title { margin-bottom: var(--s-4); font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-fg); }
  .footer-col ul { list-style: none; display: grid; gap: 0; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; color: var(--dark-muted); transition: color var(--t-fast); overflow-wrap: anywhere; }
  .footer-col a:hover { color: var(--dark-fg); }
  .footer-col address { font-style: normal; line-height: 1.7; margin-top: var(--s-2); }
  .footer-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.6rem; background: var(--tone-glow); }
  .footer-wordmark {
    margin: var(--s-8) 0 var(--s-5); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8;
    font-size: min(15rem, 16.5vw); color: transparent; -webkit-text-stroke: 1px rgba(247, 247, 245, 0.18);
    white-space: nowrap; user-select: none;
  }
  .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--dark-line); font-size: var(--t-xs); }
  .footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .footer-legal-links a { color: var(--dark-muted); }
  .footer-legal-links a:hover { color: var(--dark-fg); }
  @media (min-width: 1000px) {
    .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }
    .footer-brand { grid-column: auto; }
  }
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
@layer pages {
  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-content: end; gap: var(--s-7);
    min-height: min(52rem, calc(100svh - var(--header-h) - 2.75rem));
    padding: var(--s-9) var(--pad-x) var(--s-6);
    background: var(--encre); color: var(--craie);
  }
  .hero-media { position: absolute; inset: 0; z-index: -2; }
  .hero-media img, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-film { opacity: 0; transition: opacity 1.2s var(--ease); }
  .hero-film.is-playing { opacity: 1; }
  .hero-film-overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgba(11, 15, 19, 0.55) 0%, rgba(11, 15, 19, 0.25) 35%, rgba(11, 15, 19, 0.9) 100%),
      linear-gradient(90deg, rgba(11, 15, 19, 0.75) 0%, rgba(11, 15, 19, 0) 70%);
  }
  .hero-inner { display: grid; gap: var(--s-5); max-width: 62rem; }
  .hero-kicker { color: rgba(247, 247, 245, 0.8); margin-bottom: 0; }
  .hero-tagline {
    font-size: var(--t-display); line-height: 0.92; letter-spacing: -0.05em; font-weight: 700; text-wrap: balance;
  }
  .hero-tagline .accent { color: var(--rose-lumiere); }
  .hero-lede { max-width: 38ch; font-size: var(--t-lead); line-height: 1.5; color: rgba(247, 247, 245, 0.86); }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .hero .btn-ghost { color: var(--craie); border-color: rgba(247, 247, 245, 0.4); }
  .hero .btn-ghost:hover { border-color: var(--craie); background: rgba(247, 247, 245, 0.08); }
  .hero-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding-top: var(--s-5); border-top: 1px solid rgba(247, 247, 245, 0.18);
  }
  .hero-labs { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
  .hero-labs a {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem;
    border-radius: var(--r-pill); background: rgba(247, 247, 245, 0.08); border: 1px solid rgba(247, 247, 245, 0.14);
    font-size: var(--t-xs); font-weight: 600; text-decoration: none; color: var(--craie);
    background-color: rgba(11, 15, 19, 0.45); transition: background var(--t-fast), border-color var(--t-fast);
  }
  .hero-labs a::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tone-glow); }
  .hero-labs a:hover { background: rgba(247, 247, 245, 0.16); border-color: rgba(247, 247, 245, 0.36); }
  .hero-pause {
    display: none; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-pill);
    color: var(--craie); font-size: var(--t-xs); font-weight: 600; border: 1px solid rgba(247, 247, 245, 0.24);
  }
  .hero-pause:hover { border-color: var(--craie); }
  .hero-pause svg { width: 0.85rem; height: 0.85rem; }
  .hero.has-video .hero-pause { display: inline-flex; }

  /* ---------- Introduction ---------- */
  .home-intro { display: grid; gap: var(--s-6); padding: var(--section-y) var(--pad-x) var(--s-8); }
  .home-intro h2 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.75rem); max-width: 14ch; }
  .home-intro-body { display: grid; gap: var(--s-5); align-content: end; justify-items: start; }
  .home-intro-body p { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-muted); max-width: 40ch; }
  @media (min-width: 960px) { .home-intro { grid-template-columns: 1.3fr 1fr; gap: var(--s-9); } }

  /* ---------- Trois forces ---------- */
  .impact-grid { display: grid; gap: var(--s-4); padding: 0 var(--pad-x) var(--section-y); }
  .impact-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
    min-height: 22rem; padding: var(--s-6); border-radius: var(--r-xl); text-decoration: none;
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  }
  .impact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .impact-card h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.035em; }
  .impact-card p { margin-top: var(--s-3); max-width: 30ch; }
  .impact-card--dark { background: var(--encre); color: var(--craie); }
  .impact-card--dark p { color: var(--dark-muted); }
  .impact-card--red { background: var(--rouge); color: #fff; }
  .impact-card--red p { color: rgba(255, 255, 255, 0.9); }
  .impact-card--light { background: var(--surface); color: var(--fg); border: 1px solid var(--line); }
  .impact-card--light p { color: var(--fg-muted); }
  .impact-icon { display: block; font-size: 2rem; line-height: 1; margin-bottom: var(--s-5); color: var(--rose-lumiere); }
  .impact-card--red .impact-icon { color: #fff; }
  .impact-link {
    display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-4);
    border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
    font-weight: 600; font-size: var(--t-sm);
  }
  .impact-link b { font-weight: 400; transition: transform var(--t-med) var(--ease); }
  .impact-card:hover .impact-link b { transform: translate(3px, -3px); }
  .impact-card--red::after {
    content: ""; position: absolute; z-index: -1; right: -15%; top: -10%; width: 70%; height: 120%;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 12px, transparent 12px 22px);
    transform: rotate(14deg);
  }
  .impact-globe { position: relative; width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .impact-globe::before { content: ""; position: absolute; inset: 0 22%; border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .impact-globe i { position: absolute; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--magenta); }
  .impact-globe i:nth-child(1) { top: 18%; left: 20%; } .impact-globe i:nth-child(2) { top: 10%; right: 26%; background: var(--rouge); }
  .impact-globe i:nth-child(3) { top: 46%; left: 46%; background: var(--vert); } .impact-globe i:nth-child(4) { bottom: 22%; right: 12%; }
  .impact-globe i:nth-child(5) { bottom: 10%; left: 32%; background: var(--rouge); }
  @media (min-width: 900px) { .impact-grid { grid-template-columns: 1fr 1fr 1fr; } }

  /* ---------- Thématiques (5 laboratoires en mosaïque) ---------- */
  .topics { padding: var(--section-y) var(--pad-x); }
  .topics-inner { display: grid; gap: var(--s-7); }
  .topics-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); }
  .topics-head > a {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1.4rem;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: var(--t-sm);
  }
  .topics-head > a:hover { border-color: var(--fg); }
  .topics-grid { display: grid; gap: var(--s-4); }
  .topic-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl);
    background: var(--encre-2); color: var(--dark-fg);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  }
  .topic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .topic-card-media { aspect-ratio: 16 / 7; overflow: hidden; }
  @media (min-width: 760px) { .topic-card-media { aspect-ratio: 16 / 10; } }
  .topic-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
  .topic-card:hover .topic-card-media img { transform: scale(1.06); }
  .topic-card-body { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6) var(--s-6); flex: 1; align-content: start; }
  .topic-name-en { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone-glow, var(--dark-muted)); }
  .topic-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
  .topic-title a { text-decoration: none; }
  .topic-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .topic-title a:focus-visible { outline: none; }
  .topic-card:focus-within { outline: 3px solid #8AB4FF; outline-offset: 3px; }
  .topic-desc { color: var(--dark-muted); max-width: 40ch; }
  .topic-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--s-3); font-weight: 600; font-size: var(--t-sm); }
  .topic-link svg { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
  .topic-card:hover .topic-link svg { transform: translateX(4px); }
  @media (min-width: 760px) {
    .topics-grid { grid-template-columns: repeat(2, 1fr); }
    .topic-card:first-child { grid-column: 1 / -1; }
  }
  @media (min-width: 1100px) {
    .topics-grid { grid-template-columns: repeat(6, 1fr); }
    .topic-card { grid-column: span 2; }
    .topic-card:nth-child(1), .topic-card:nth-child(2) { grid-column: span 3; }
    .topic-card:nth-child(1) .topic-card-media, .topic-card:nth-child(2) .topic-card-media { aspect-ratio: 16 / 8; }
  }

  /* ---------- Portée ---------- */
  .reach { padding: var(--section-y) var(--pad-x); background: var(--dark-bg); color: var(--dark-fg); }
  .reach-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
  .reach-head h2 { max-width: 16ch; }
  .reach-head p { color: var(--dark-muted); max-width: 52ch; }
  .reach-inner { display: grid; gap: 0; border-top: 1px solid var(--dark-line); }
  .reach-item { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-bottom: 1px solid var(--dark-line); }
  .reach-num { font-family: var(--font-display); font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .reach-dash { width: 2.5rem; height: 4px; border-radius: 2px; background: var(--weave); }
  .reach-label { color: var(--dark-muted); max-width: 30ch; }
  .reach-label strong { color: var(--dark-fg); }
  @media (min-width: 900px) {
    .reach-inner { grid-template-columns: repeat(var(--cols, 3), 1fr); border-bottom: 1px solid var(--dark-line); }
    .reach-item { padding: var(--s-6) var(--s-6) var(--s-7) 0; border-bottom: 0; }
    .reach-item + .reach-item { padding-left: var(--s-6); border-left: 1px solid var(--dark-line); }
  }

  /* ---------- Manifeste ---------- */
  .manifesto { padding: var(--section-y) var(--pad-x); }
  .manifesto-inner p {
    max-width: 20ch; margin-inline: auto; text-align: center; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.2rem, 1rem + 5.4vw, 6.25rem); line-height: 1; letter-spacing: -0.045em; text-wrap: balance;
  }
  .mw { color: var(--fg); }
  .dim .mw, .mw.dim { color: var(--fg-subtle); }
  .pop .mw, .mw.pop { color: var(--accent); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .mw { animation: mot-encre linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
      .pop .mw, .mw.pop { animation-name: mot-magenta; }
      .dim .mw, .mw.dim { animation-name: mot-gris; }
    }
  }
  @keyframes mot-encre { from { color: color-mix(in srgb, var(--fg) 22%, var(--bg)); } to { color: var(--fg); } }
  @keyframes mot-magenta { from { color: color-mix(in srgb, var(--fg) 22%, var(--bg)); } to { color: var(--accent); } }
  @keyframes mot-gris { from { color: color-mix(in srgb, var(--fg) 15%, var(--bg)); } to { color: var(--fg-subtle); } }

  /* ---------- Appel final ---------- */
  .final-cta {
    position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: var(--s-6);
    margin: 0 var(--gutter) var(--section-y); padding: clamp(3.5rem, 2rem + 7vw, 8rem) var(--gutter);
    border-radius: var(--r-xl); background: var(--rouge); color: #fff; text-align: center;
  }
  .final-cta::before, .final-cta::after {
    content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; width: 34%;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 14px, transparent 14px 26px);
  }
  .final-cta::before { left: -6%; transform: skewX(-14deg); }
  .final-cta::after { right: -6%; transform: skewX(-14deg); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 14px, transparent 14px 26px); }
  .final-cta h2 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.5rem); max-width: 14ch; }
  .final-cta p { max-width: 44ch; color: rgba(255, 255, 255, 0.92); font-size: var(--t-lead); }
  .final-cta .btn-primary { background: var(--encre); }
  .final-cta .btn-primary:hover { background: #000; }
  @media (min-width: 1360px) { .final-cta { margin-inline: auto; max-width: calc(var(--max) + 2 * var(--gutter)); } }

  /* ==========================================================================
     PAGES INTERNES
     ========================================================================== */
  .page-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: var(--s-5); align-content: end;
    min-height: clamp(26rem, 20rem + 18vw, 38rem);
    padding: var(--s-8) var(--pad-x) clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .page-hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 1.5rem + 4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.045em; }
  .page-hero .lead { margin-top: var(--s-2); }
  .page-hero-eyebrow { margin-bottom: 0; }
  .breadcrumb { font-size: var(--t-xs); color: var(--fg-muted); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; list-style: none; }
  .breadcrumb li { display: inline-flex; align-items: center; }
  .breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--fg-subtle); }
  .breadcrumb a { color: var(--fg-muted); text-decoration: none; display: inline-block; padding: 0.4rem 0; }
  .breadcrumb a:hover { color: var(--fg); text-decoration: underline; }
  .breadcrumb [aria-current] { color: var(--fg); font-weight: 600; padding: 0.4rem 0; }

  /* Art tissé à droite du titre */
  .hero-stripes, .page-hero-shapes {
    position: absolute; z-index: -1; top: 0; bottom: 0; right: calc(var(--pad-x) * 0.4); width: min(42%, 30rem);
    display: none; pointer-events: none;
  }
  .hero-stripes { display: none; gap: 10px; align-items: stretch; mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
  .hero-stripes span { flex: 1; border-radius: 999px; background: var(--sable); transform-origin: top; }
  .hero-stripes span:nth-child(4n+1) { background: var(--rouge); }
  .hero-stripes span:nth-child(4n+2) { background: var(--sable); }
  .hero-stripes span:nth-child(4n+3) { background: var(--magenta); }
  .hero-stripes span:nth-child(5n) { background: var(--vert); }
  .hero-stripes span:nth-child(odd) { margin-top: 18%; }
  .hero-stripes span:nth-child(even) { margin-bottom: 18%; }
  .page-hero-shapes img { width: 100%; height: 100%; object-fit: contain; opacity: 0.9; }
  @media (min-width: 900px) {
    .hero-stripes { display: flex; }
    .page-hero-shapes { display: block; }
    .page-hero h1, .page-hero .lead { max-width: min(18ch, 58%); }
    .page-hero .lead { max-width: min(56ch, 55%); }
  }

  /* Lignes éditoriales (qui sommes-nous, thématiques, action) */
  .shift-page { background: var(--dark-bg); color: var(--dark-fg); counter-reset: ligne; --fg-muted: var(--dark-muted); --line: var(--dark-line); --accent: var(--rose-lumiere); }
  .shift-row {
    display: grid; gap: var(--s-5) var(--s-9); padding: clamp(3rem, 2rem + 4vw, 6rem) var(--pad-x);
    border-bottom: 1px solid var(--dark-line); counter-increment: ligne;
  }
  .shift-row:last-child { border-bottom: 0; }
  .sr-left { display: grid; gap: var(--s-5); align-content: start; }
  .sr-left::before {
    content: counter(ligne, decimal-leading-zero); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
    letter-spacing: 0.14em; color: var(--dark-muted);
  }
  .sr-left h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem); max-width: 15ch; }
  .sr-left h2 .accent { color: var(--tone-glow, var(--rose-lumiere)); display: block; font-weight: 500; }
  .sr-icon {
    order: -1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--tone, var(--magenta)); color: #fff;
  }
  .sr-icon.tone-craie { color: var(--encre); background: var(--sable); }
  .sr-icon svg { width: 55%; height: 55%; }
  .sr-right { display: grid; gap: var(--s-4); align-content: start; max-width: 62ch; color: var(--dark-muted); font-size: var(--t-lead); line-height: 1.6; }
  .sr-right strong { color: var(--dark-fg); }
  .sr-right ul { display: grid; gap: var(--s-2); padding-left: 1.25rem; }
  .sr-right li::marker { color: var(--tone-glow, var(--rose-lumiere)); }
  .sr-tag {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: var(--r-pill);
    border: 1px solid var(--dark-line); font-size: var(--t-xs); font-weight: 600; color: var(--dark-fg);
  }
  .sr-tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tone-glow, var(--rose-lumiere)); }
  .shift-page .sr-cta { color: var(--dark-fg); justify-self: start; font-size: var(--t-base); }
  @media (min-width: 960px) {
    .shift-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .sr-left { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  }

  /* Grille des laboratoires */
  .lab-grid-section { padding: var(--section-y) var(--pad-x); }
  .lab-grid-head { margin-bottom: var(--s-7); }
  .lab-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
  .lab-tile {
    position: relative; display: grid; gap: var(--s-6); align-content: space-between; min-height: 15rem; padding: var(--s-5);
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none;
    transition: transform var(--t-med) var(--ease), border-color var(--t-fast), box-shadow var(--t-med), background var(--t-med);
  }
  .lab-tile:hover { transform: translateY(-4px); border-color: var(--tone, var(--line-strong)); box-shadow: var(--shadow-2); }
  .lab-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--tone, var(--encre)); color: #fff; }
  .lab-tile.tone-encre .lab-icon { background: var(--encre); }
  .lab-icon svg { width: 55%; height: 55%; }
  .lab-tile h3 { font-size: 1.5rem; }
  .lab-arrow { position: absolute; top: var(--s-5); right: var(--s-5); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--line); transition: background var(--t-fast), transform var(--t-med) var(--ease); }
  .lab-arrow svg { width: 1rem; height: 1rem; }
  .lab-tile:hover .lab-arrow { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(-45deg); }

  /* Repères historiques */
  .history-quote {
    max-width: 30ch; margin: 0 0 var(--s-8); padding-left: var(--s-5); border-left: 4px solid var(--magenta);
    font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500;
  }
  .facts-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .fact-item { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
  .fact-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
  .fact-label { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--fg-muted); }

  /* S'impliquer */
  .involve-split { display: grid; gap: var(--s-4); padding: var(--section-y) var(--pad-x); }
  .involve-panel {
    display: grid; gap: var(--s-5); align-content: start; justify-items: start; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--fg);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-fast);
  }
  .involve-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
  .involve-panel h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); }
  .involve-panel p { color: var(--fg-muted); max-width: 44ch; font-size: var(--t-lead); line-height: 1.55; }
  .involve-icon-circle { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--tone, var(--rouge)); color: #fff; }
  .involve-icon-circle svg { width: 50%; height: 50%; }
  .involve-panel .btn-ghost { margin-top: var(--s-3); }
  .involve-panel:hover .btn-ghost { border-color: var(--fg); background: var(--fg); color: var(--bg); }
  @media (min-width: 900px) { .involve-split { grid-template-columns: 1fr 1fr; } }

  /* Contact */
  .contact-methods { display: grid; gap: var(--s-3); padding: 0 var(--pad-x) var(--section-y); }
  @media (min-width: 760px) { .contact-methods { grid-template-columns: repeat(2, 1fr); } }
  .contact-method {
    display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
  }
  .contact-method h2, .contact-method h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }
  .contact-method p { color: var(--fg-muted); font-size: var(--t-sm); }
  .contact-method .link-cta { justify-self: start; margin-top: auto; overflow-wrap: anywhere; }

  /* ==========================================================================
     LABORATOIRES
     ========================================================================== */
  .lab-hero { display: grid; background: var(--dark-bg); color: var(--dark-fg); }
  .lab-hero-text { display: grid; gap: var(--s-5); align-content: end; padding: var(--s-8) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem); }
  .lab-hero-text .breadcrumb, .lab-hero-text .breadcrumb a { color: var(--dark-muted); }
  .lab-hero-text .breadcrumb [aria-current] { color: var(--dark-fg); }
  .lab-hero-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--tone); color: #fff; }
  .lab-forge .lab-hero-icon { background: var(--craie); color: var(--encre); }
  .lab-hero-icon svg { width: 55%; height: 55%; }
  .lab-hero h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; max-width: 12ch; }
  .lab-hero-text > p:not(.eyebrow) { font-size: var(--t-lead); line-height: 1.55; color: var(--dark-muted); max-width: 48ch; }
  .lab-hero-kicker { color: var(--tone-glow); margin-bottom: 0; }
  .lab-hero-kicker::before { background: var(--tone-glow); }
  .lab-hero-art { position: relative; min-height: 16rem; overflow: hidden; background: var(--tone); }
  .lab-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 960px) {
    .lab-hero { grid-template-columns: 1.1fr 0.9fr; min-height: min(44rem, calc(100svh - var(--header-h) - 2.75rem)); }
    .lab-hero-text { padding-left: var(--pad-x); padding-right: var(--s-8); }
    .lab-hero-art { min-height: 0; }
  }
  .page-lab .section-dark .stat-stack-num { color: var(--tone-glow); }
  .page-lab .bullet-list li::before, .page-lab .section > .accent { color: var(--tone-text); }
  .page-lab .section-dark .bullet-list li::before { color: var(--tone-glow); }

  .cross-promo {
    display: grid; gap: var(--s-6); padding: var(--section-y) var(--pad-x); background: var(--bg-alt);
  }
  .cross-promo h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem); max-width: 18ch; }
  .cross-promo h2 a { color: var(--tone-text, var(--accent)); text-decoration-thickness: 2px; }
  .cross-promo > div { display: grid; gap: var(--s-4); justify-items: start; align-content: start; color: var(--fg-muted); max-width: 52ch; }
  .cp-lead { font-size: var(--t-lead); color: var(--fg); font-weight: 500; line-height: 1.45; }
  .cross-promo .btn-primary { margin-top: var(--s-3); }
  @media (min-width: 960px) { .cross-promo { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }

  .contact-block { display: grid; gap: var(--s-5); padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--pad-x); background: var(--dark-bg); color: var(--dark-fg); }
  .contact-block + .contact-block { border-top: 1px solid var(--dark-line); }
  .contact-block h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
  .contact-block > div { display: grid; gap: var(--s-5); justify-items: start; color: var(--dark-muted); max-width: 56ch; font-size: var(--t-lead); line-height: 1.55; }
  .resource-columns { display: grid !important; gap: 0 var(--s-6); max-width: none !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); width: 100%; }
  .resource-columns ul { list-style: none; display: grid; }
  .resource-columns li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--dark-line); color: var(--dark-fg); font-size: var(--t-base); }
  .resource-columns li::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tone-glow, var(--rose-lumiere)); translate: 0 -0.1em; }
  @media (min-width: 960px) { .contact-block { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-9); } }

  /* ==========================================================================
     PAGES LÉGALES
     ========================================================================== */
  .legal-wrap { max-width: calc(var(--max-text) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--section-y); }
  .legal-wrap h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); }
  .legal-wrap h2:first-child { margin-top: 0; }
  .legal-wrap p, .legal-wrap li { color: var(--fg-muted); }
  .legal-wrap p + p { margin-top: var(--s-3); }
  .legal-wrap ul { padding-left: 1.25rem; display: grid; gap: var(--s-2); margin-top: var(--s-3); }
  .legal-wrap a { color: var(--fg); font-weight: 500; }
  .legal-wrap dl { display: grid; gap: 0; margin-top: var(--s-4); border-top: 1px solid var(--line); }
  .legal-wrap dl > div { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .legal-wrap dt { font-weight: 600; font-size: var(--t-sm); }
  .legal-wrap dd { color: var(--fg-muted); }
  @media (min-width: 640px) { .legal-wrap dl > div { grid-template-columns: 13rem 1fr; } }
  .legal-updated { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-sm); }

  /* Page 404 */
  .error-page { display: grid; place-content: center; justify-items: start; gap: var(--s-5); min-height: 70vh; padding: var(--s-9) var(--pad-x); }
  .error-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 3rem + 14vw, 14rem); line-height: 0.8; letter-spacing: -0.06em; background: var(--weave); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ==========================================================================
   PAGE PUBLICATIONS
   ========================================================================== */
@layer pages {
  .tone-ys { --tone: var(--encre); --tone-text: var(--fg-muted); --tone-glow: var(--dark-fg); }

  /* À la une */
  .pub-feature-wrap { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--pad-x) 0; }
  .pub-feature {
    position: relative; isolation: isolate; display: grid; overflow: hidden;
    border-radius: var(--r-xl); background: var(--dark-bg); color: var(--dark-fg);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med);
  }
  .pub-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .pub-feature:focus-within { outline: 3px solid #8AB4FF; outline-offset: 4px; }
  .pub-feature-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tone); }
  .pub-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
  .pub-feature:hover .pub-feature-media img { transform: scale(1.04); }
  .pub-feature-body { display: grid; gap: var(--s-4); align-content: center; justify-items: start; padding: clamp(1.75rem, 1rem + 3vw, 4rem); }
  .pub-feature-kicker { margin-bottom: 0; color: var(--tone-glow); }
  .pub-feature-kicker::before { background: var(--tone-glow); }
  .pub-feature .pub-meta { grid-area: auto; color: var(--dark-muted); }
  .pub-feature .pub-type { color: var(--tone-glow); }
  .pub-feature-title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 20ch; }
  .pub-feature-title a { text-decoration: none; }
  .pub-feature-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .pub-feature-title a:focus-visible { outline: none; }
  .pub-feature-lab { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--dark-muted); max-width: 46ch; }
  .pub-feature-lab strong { color: var(--dark-fg); }
  .pub-feature-cta { margin-top: var(--s-3); color: var(--dark-fg); border-color: var(--dark-line); }
  .pub-feature:hover .pub-feature-cta { background: var(--dark-fg); color: var(--dark-bg); border-color: var(--dark-fg); }
  .pub-feature:hover .pub-feature-cta .arrow { transform: translateX(3px); }
  @media (min-width: 960px) {
    .pub-feature { grid-template-columns: 1.05fr 1fr; min-height: 28rem; }
    .pub-feature-media { aspect-ratio: auto; }
  }

  /* Index */
  .pubs { padding: var(--section-y) var(--pad-x) var(--s-8); }
  .pubs-head { display: grid; gap: var(--s-4); align-items: end; }
  .pubs-head p { color: var(--fg-muted); max-width: 52ch; }
  @media (min-width: 960px) { .pubs-head { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
  .pubs-head:not(:has(> p)) { grid-template-columns: 1fr; }

  /* Barre de filtres collante */
  .pubs-bar {
    position: sticky; top: var(--header-h); z-index: 20; margin: var(--s-6) calc(-1 * var(--pad-x)) 0;
    padding: var(--s-3) var(--pad-x); border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .pub-filter { border: 0; min-width: 0; }
  @media (max-width: 700px) {
    .pubs-bar { padding-block: var(--s-2); }
    .pub-filter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pub-chips label { padding: 0 0.95rem; }
  }
  .pub-filter legend { padding: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
  .pub-chips {
    display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: 0.3rem;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    mask: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .pub-chips::-webkit-scrollbar { display: none; }
  .pub-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pub-chips label {
    flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
    font-size: var(--t-sm); font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--fg); background: var(--surface);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  }
  .pub-chips label:hover { border-color: var(--fg); }
  .pub-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tone); transition: background var(--t-fast); }
  .pub-chips input:checked + label { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .pub-chips input:checked + label[class*="tone-"] { background: var(--tone); border-color: var(--tone); color: #fff; }
  .pub-chips input:checked + label .pub-dot { background: #fff; }
  .pub-chips input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* Mois */
  .pub-index { display: grid; }
  .pub-month { display: grid; gap: var(--s-2) var(--s-7); padding: var(--s-6) 0 var(--s-4); border-bottom: 1px solid var(--line); }
  .pub-month-title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
  @media (min-width: 900px) {
    .pub-month { grid-template-columns: 13rem 1fr; padding-top: var(--s-4); }
    .pub-month-title { position: sticky; top: calc(var(--header-h) + 5rem); align-self: start; padding-top: var(--s-5); }
  }
  .pub-row time { display: none; }
  .pub-list { list-style: none; }
  .pub-item + .pub-item { border-top: 1px solid var(--line); }

  /* Ligne de publication */
  .pub-row {
    position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta go" "title go" "lab go";
    gap: var(--s-2) var(--s-5); align-items: center;
    margin-inline: calc(-1 * var(--s-4)); padding: var(--s-5) var(--s-4); border-radius: var(--r-md);
    transition: background var(--t-fast);
  }
  .pub-row::before {
    content: ""; position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4); width: 3px; border-radius: 3px;
    background: var(--tone); transform: scaleY(0); transition: transform var(--t-med) var(--ease);
  }
  .pub-row:hover, .pub-row:focus-within { background: var(--surface); }
  .pub-row:hover::before, .pub-row:focus-within::before { transform: scaleY(1); }
  .pub-row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
  .pub-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--t-xs); color: var(--fg-muted); }
  .pub-type { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone-text); }
  .pub-title { grid-area: title; font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.65rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 44ch; text-wrap: balance; }
  .pub-title a { text-decoration: none; }
  .pub-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .pub-title a:focus-visible { outline: none; }
  .pub-lab { grid-area: lab; display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); color: var(--fg-muted); }
  .pub-lab-icon { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tone); color: #fff; }
  .pub-lab-icon svg { width: 62%; height: 62%; }
  .pub-lab-icon.tone-ys { background: var(--weave); }
  .pub-feature-lab .pub-lab-icon { width: 2.4rem; height: 2.4rem; }
  .pub-go {
    grid-area: go; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1.5px solid var(--line-strong); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-med) var(--ease);
  }
  .pub-go svg { width: 1rem; height: 1rem; }
  .pub-row:hover .pub-go { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(-45deg); }

  /* Filtrage sans JavaScript (:has) ; site.js pose aussi l'attribut hidden */
  .pubs:has(#pf-palaver:checked) .pub-item:not(.lab-palaver), .pubs:has(#pf-palaver:checked) .pub-month:not(.has-palaver) { display: none; }
  .pubs:has(#pf-agora:checked) .pub-item:not(.lab-agora), .pubs:has(#pf-agora:checked) .pub-month:not(.has-agora) { display: none; }
  .pubs:has(#pf-boussole:checked) .pub-item:not(.lab-boussole), .pubs:has(#pf-boussole:checked) .pub-month:not(.has-boussole) { display: none; }
  .pubs:has(#pf-forge:checked) .pub-item:not(.lab-forge), .pubs:has(#pf-forge:checked) .pub-month:not(.has-forge) { display: none; }
  .pubs:has(#pf-futurs:checked) .pub-item:not(.lab-futurs), .pubs:has(#pf-futurs:checked) .pub-month:not(.has-futurs) { display: none; }

  .pub-follow { background: var(--bg-alt); }
  .pub-follow .lab-grid-head { display: grid; gap: var(--s-4); }
  @media (max-width: 759.98px) {
    .lab-tile { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); min-height: 0; padding: var(--s-4); }
    .lab-tile h3 { font-size: 1.2rem; }
    .lab-tile .lab-arrow { position: static; }
  }
}

/* ==========================================================================
   ARTICLES : couvertures, index, page article
   ========================================================================== */
@layer pages {
  /* Couverture tissée (remplace les images) */
  .pub-cover {
    position: relative; overflow: hidden; display: flex; align-items: flex-end;
    background: var(--tone); color: #fff; aspect-ratio: 16 / 9; padding: var(--s-5);
  }
  .pub-cover-weave {
    position: absolute; inset: -20%; opacity: 0.32;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 10px, transparent 10px 26px),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 10px, transparent 10px 26px);
    transform: rotate(-12deg); transition: transform var(--t-slow) var(--ease);
  }
  .feed-card:hover .pub-cover-weave, .pub-feature:hover .pub-cover-weave { transform: rotate(-12deg) scale(1.08); }
  .pub-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.45)); }
  .pub-cover-label {
    position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); line-height: 1.1; max-width: 14ch;
  }
  .pub-cover--xl .pub-cover-label { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); max-width: 12ch; }
  .pub-cover.tone-encre { background: #2A3038; }
  .feed-card-media.pub-cover { aspect-ratio: 16 / 9; }
  @media (min-width: 1000px) { .page-home .feed-card:first-child .feed-card-media.pub-cover { aspect-ratio: auto; } }

  .pub-lang {
    display: inline-grid; place-items: center; min-width: 2rem; height: 1.35rem; padding: 0 0.4rem; border-radius: 4px;
    border: 1px solid currentColor; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85;
  }
  .pub-dek { grid-area: dek; color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.55; max-width: 70ch;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pub-row--article { grid-template-areas: "meta go" "title go" "dek go" "lab go"; }
  .pub-row--article time { display: inline; }
  .pub-avatar {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--tone); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  }
  .pub-avatar.tone-encre { background: #2A3038; }
  .pub-avatar.tone-magenta { background: var(--magenta-texte); }
  .pub-avatar--lg { width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
  .pub-avatar--xl { width: 4rem; height: 4rem; font-size: 1.2rem; }
  .pub-place { color: var(--fg-subtle); }
  .pub-place::before { content: "·"; margin: 0 0.45rem; }
  .pub-feature-dek { color: var(--dark-muted); font-size: var(--t-lead); line-height: 1.5; max-width: 52ch;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .pub-feature .pub-lang { color: var(--dark-fg); }
  .pub-feature-media.pub-cover { aspect-ratio: 16 / 10; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
  @media (min-width: 960px) { .pub-feature-media.pub-cover { aspect-ratio: auto; } }
  .feed-author { font-size: var(--t-sm); color: var(--dark-muted); }
  .feed-meta .pub-lang { color: var(--dark-fg); }
  .feed-intro { margin-top: var(--s-4); color: var(--dark-muted); max-width: 52ch; }
  .feed-dek { display: none; color: var(--dark-muted); line-height: 1.55; max-width: 56ch; }
  @media (min-width: 1000px) {
    .page-home .feed-card:first-child .feed-dek { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-lead); }
    .page-home .feed-card:nth-child(n+4) .pub-cover { display: none; }
  }
  @media (max-width: 999.98px) { .page-home .feed-card:nth-child(n+2) .pub-cover { display: none; } }
  .cta-simple .cta-text { max-width: 52ch; color: rgba(255, 255, 255, 0.92); font-size: var(--t-lead); line-height: 1.5; }

  /* Filtre par thème */
  .pubs:has(#pf-societe:checked) .pub-item:not(.th-societe), .pubs:has(#pf-societe:checked) .pub-month:not(.has-th-societe) { display: none; }
  .pubs:has(#pf-climat:checked) .pub-item:not(.th-climat), .pubs:has(#pf-climat:checked) .pub-month:not(.has-th-climat) { display: none; }
  .pubs:has(#pf-innovation:checked) .pub-item:not(.th-innovation), .pubs:has(#pf-innovation:checked) .pub-month:not(.has-th-innovation) { display: none; }
  .pubs:has(#pf-odd:checked) .pub-item:not(.th-odd), .pubs:has(#pf-odd:checked) .pub-month:not(.has-th-odd) { display: none; }

  /* ---------- Page article ---------- */
  .article-head {
    display: grid; gap: var(--s-5); justify-items: start;
    padding: var(--s-8) var(--pad-x) var(--s-7); border-bottom: 1px solid var(--line);
    background:
      linear-gradient(90deg, var(--tone) 0 6px, transparent 6px) no-repeat,
      var(--bg);
  }
  .article-head > * { max-width: 52rem; }
  .article-kicker { margin-bottom: 0; color: var(--tone-text); }
  .article-kicker::before { background: var(--tone); }
  .article-head h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 22ch; }
  .article-dek { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-muted); max-width: 60ch; }
  .article-byline { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); width: 100%; max-width: 52rem; }
  .article-byline p { display: grid; gap: 0.15rem; font-size: var(--t-sm); }
  .article-byline p span { color: var(--fg-muted); }
  .article-version { font-size: var(--t-sm); color: var(--fg-muted); }
  .article-version a { color: var(--tone-text); font-weight: 600; }

  .prose { padding: var(--s-8) var(--gutter) var(--s-7); max-width: calc(68ch + 2 * var(--gutter)); margin-inline: auto; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.75; }
  .prose > * + * { margin-top: 1.15em; }
  .prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.15; margin-top: 2em; letter-spacing: -0.025em; }
  .prose h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); margin-top: 1.8em; }
  .prose h4 { font-size: 1.15rem; margin-top: 1.6em; letter-spacing: -0.01em; }
  .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.6em; }
  .prose a { color: var(--tone-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
  .prose a:hover { text-decoration-thickness: 2px; }
  .prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 0.5em; }
  .prose li::marker { color: var(--tone-text); }
  .prose blockquote {
    margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 4px solid var(--tone);
    font-family: var(--font-display); font-size: 1.2em; line-height: 1.45; color: var(--fg); letter-spacing: -0.01em;
  }
  .prose blockquote p + p { margin-top: 0.8em; }
  .prose sub { vertical-align: baseline; font-size: var(--t-sm); line-height: 1.55; color: var(--fg-muted); }
  .prose ol:has(sub), .prose ul:has(sub) { font-size: var(--t-sm); }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
  .prose th, .prose td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .prose th { font-weight: 600; }
  .prose hr { border: 0; height: 4px; width: 3rem; background: var(--weave); border-radius: 2px; margin: 2.5em 0; }
  .prose strong { font-weight: 650; }

  .article-foot { padding: 0 var(--gutter) var(--section-y); max-width: calc(68ch + 2 * var(--gutter)); margin-inline: auto; display: grid; gap: var(--s-5); }
  .article-author {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start;
    padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  }
  .article-author-title { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-2); }
  .article-author-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
  .article-author-name span { display: block; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 400; color: var(--fg-muted); letter-spacing: 0; margin-top: 0.1rem; }
  .article-author p + p { margin-top: var(--s-3); color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .article-author .link-cta { margin-top: var(--s-2); font-size: var(--t-sm); }
  .article-author .link-cta::after { content: "↗"; }
  @media (max-width: 559.98px) { .article-author { grid-template-columns: 1fr; } }
  .article-origin { font-size: var(--t-sm); color: var(--fg-muted); }
  .article-related .feed-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
}

/* ==========================================================================
   IMAGES DES ARTICLES, PHOTOS DES AUTEURS, ODD
   ========================================================================== */
@layer pages {
  .pub-cover.has-img { padding: 0; background: var(--encre-3); }
  .pub-cover.has-img::after { display: none; }
  .pub-cover.has-img picture, .pub-cover.has-img img { display: block; width: 100%; height: 100%; }
  .pub-cover.has-img img { object-fit: cover; transition: transform var(--t-slow) var(--ease); }
  .feed-card:hover .pub-cover.has-img img, .pub-feature:hover .pub-cover.has-img img { transform: scale(1.04); }
  .pub-avatar.has-photo { padding: 0; overflow: hidden; background: var(--sable); }
  .pub-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .article-cover { max-width: calc(52rem + 2 * var(--gutter)); margin: var(--s-7) auto 0; padding: 0 var(--gutter); }
  .article-cover img { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--bg-alt); }

  .article-sdgs { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .article-sdgs-title { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-3); }
  .sdg-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .sdg { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.8rem 0.25rem 0.25rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--fg); background: var(--bg); }
  .sdg-num { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; }
  .sdg-1 .sdg-num { background: #E5243B; color: #FFFFFF; }
  .sdg-2 .sdg-num { background: #DDA63A; color: #0B0F13; }
  .sdg-3 .sdg-num { background: #4C9F38; color: #0B0F13; }
  .sdg-4 .sdg-num { background: #C5192D; color: #FFFFFF; }
  .sdg-5 .sdg-num { background: #FF3A21; color: #0B0F13; }
  .sdg-6 .sdg-num { background: #26BDE2; color: #0B0F13; }
  .sdg-7 .sdg-num { background: #FCC30B; color: #0B0F13; }
  .sdg-8 .sdg-num { background: #A21942; color: #FFFFFF; }
  .sdg-9 .sdg-num { background: #FD6925; color: #0B0F13; }
  .sdg-10 .sdg-num { background: #DD1367; color: #FFFFFF; }
  .sdg-11 .sdg-num { background: #FD9D24; color: #0B0F13; }
  .sdg-12 .sdg-num { background: #BF8B2E; color: #0B0F13; }
  .sdg-13 .sdg-num { background: #3F7E44; color: #FFFFFF; }
  .sdg-14 .sdg-num { background: #0A97D9; color: #0B0F13; }
  .sdg-15 .sdg-num { background: #56C02B; color: #0B0F13; }
  .sdg-16 .sdg-num { background: #00689D; color: #FFFFFF; }
  .sdg-17 .sdg-num { background: #19486A; color: #FFFFFF; }

  .search-kind { display: block; font-style: normal; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.15rem; }
}

/* ==========================================================================
   PAGE CONTRIBUTRICES ET CONTRIBUTEURS
   ========================================================================== */
@layer pages {
  /* Mosaïque tissée des auteurs (décor) */
  .ctb-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
  .ctb-mosaic {
    position: absolute; z-index: -1; top: 50%; right: var(--pad-x); translate: 0 -50%;
    display: none; grid-template-columns: repeat(5, 4.25rem); gap: 0.85rem; margin-top: -1.3rem;
  }
  .ctb-mosaic .pub-avatar { width: 4.25rem; height: 4.25rem; font-size: 1rem; box-shadow: 0 0 0 4px var(--bg), var(--shadow-1); }
  .ctb-mosaic .pub-avatar:nth-child(5n+2), .ctb-mosaic .pub-avatar:nth-child(5n+4) { translate: 0 2.55rem; }
  .ctb-mosaic .pub-avatar:nth-child(3n) { opacity: 0.88; }
  @media (min-width: 1000px) {
    .ctb-mosaic { display: grid; }
    .ctb-hero h1, .ctb-hero .lead { max-width: min(18ch, 52%); }
    .ctb-hero .lead { max-width: min(54ch, 50%); }
  }
  @media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
    .ctb-mosaic .pub-avatar { animation: flotte 7s ease-in-out infinite alternate; }
    .ctb-mosaic .pub-avatar:nth-child(2n) { animation-delay: -2s; }
    .ctb-mosaic .pub-avatar:nth-child(3n) { animation-delay: -4s; animation-duration: 9s; }
  }
  @keyframes flotte { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

  /* Grille des fiches */
  .ctb-grid { list-style: none; display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); margin-top: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  .ctb {
    position: relative; height: 100%; display: flex; flex-direction: column; gap: var(--s-4);
    padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); padding-top: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
    overflow: hidden; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-fast);
  }
  .ctb::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone);
  }
  .ctb-card:hover .ctb, .ctb-card:target .ctb { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
  .ctb-card:target .ctb { outline: 3px solid var(--tone); outline-offset: 3px; }
  .ctb-card { scroll-margin-top: calc(var(--header-h) + 6rem); }
  .ctb-grid .pub-item + .pub-item { border-top: 0; }
  .ctb-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "photo id" "photo count"; column-gap: var(--s-4); row-gap: var(--s-2); align-items: center; }
  .ctb-avatar { grid-area: photo; align-self: start; width: 4.5rem; height: 4.5rem; font-size: 1.2rem; }
  .ctb-id { grid-area: id; min-width: 0; }
  .ctb-name { font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
  .ctb-place { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 0.35rem; font-size: var(--t-sm); line-height: 1.4; color: var(--fg-muted); }
  .ctb-place svg { margin-top: 0.15em; }
  .ctb-place svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; color: var(--tone-text); }

  /* Icône du nombre de contributions */
  .ctb-count {
    grid-area: count; justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.8rem 0.35rem 0.6rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tone) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); color: var(--fg);
  }
  .ctb-count svg { width: 1.15rem; height: 1.15rem; color: var(--tone-text); }
  .ctb-count-num { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: -0.03em; }
  .ctb-count-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.2; white-space: nowrap; }
  .ctb-card.tone-encre .ctb-count { background: var(--bg-alt); border-color: var(--line-strong); }

  .ctb-bio { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .ctb-more summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--fg); list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }
  .ctb-more summary::-webkit-details-marker { display: none; }
  .ctb-more summary::after { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font-weight: 400; transition: transform var(--t-med) var(--ease); }
  .ctb-more[open] summary::after { transform: rotate(45deg); }
  .ctb-more p { margin-top: var(--s-2); color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .ctb-label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-2); }
  .sdg-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .sdg-mini .sdg { padding: 0; border: 0; background: none; }
  .sdg-mini .sdg-num { min-width: 2rem; height: 2rem; border-radius: 6px; font-size: 0.875rem; }
  .ctb-articles { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .ctb-articles ol { list-style: none; display: grid; gap: 0; }
  .ctb-articles li { display: grid; gap: 0.15rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
  .ctb-articles li:last-child { border-bottom: 0; }
  .ctb-articles a { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; color: var(--fg); }
  .ctb-articles a:hover { color: var(--tone-text); text-decoration: underline; text-underline-offset: 0.2em; }
  .ctb-articles time { font-size: var(--t-xs); color: var(--fg-muted); }
  .ctb-linkedin { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; font-size: var(--t-sm); font-weight: 600; color: var(--fg); }
  .ctb-linkedin:hover { color: var(--tone-text); }
  @media (max-width: 520px) {
    .ctb { gap: var(--s-3); }
    .ctb-avatar { width: 3.75rem; height: 3.75rem; }
    .ctb-head { column-gap: var(--s-3); }
  }
  .article-author-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); }
  .article-author-links .link-cta::after { content: "→"; }
  .article-author-links .link-cta[href*="linkedin"]::after { content: "↗"; }

  /* Filtre par continent (même mécanique que les publications) */
  .pubs:has(#pf-afrique:checked) .pub-item:not(.th-afrique), .pubs:has(#pf-europe:checked) .pub-item:not(.th-europe),
  .pubs:has(#pf-asie:checked) .pub-item:not(.th-asie), .pubs:has(#pf-ameriques:checked) .pub-item:not(.th-ameriques) { display: none; }
}

/* ==========================================================================
   PUBLIER AVEC YOUTHSHARE, S'IMPLIQUER, PLATEFORMES
   ========================================================================== */
@layer pages {
  .pg-body { padding: var(--section-y) var(--pad-x) var(--s-8); }
  .pg-body > .pg-content { max-width: 68rem; margin-inline: auto; }
  .pg-content { display: grid; gap: clamp(3.5rem, 2.5rem + 3vw, 6rem); min-width: 0; }
  .pg-section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .pg-section > h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: 22ch; }
  .pg-section > h2 + .accordion { margin-top: var(--s-5); }
  .pg-intro { margin-top: var(--s-4); color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.55; max-width: 60ch; }

  /* Formats */
  .pg-formats { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .pg-format { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--magenta); }
  .pg-format:nth-child(2) { border-top-color: var(--rouge); } .pg-format:nth-child(3) { border-top-color: var(--vert); }
  .pg-format h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .pg-format p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }

  /* Trois colonnes : auteurs, après la publication */
  .pg-trio { list-style: none; display: grid; gap: var(--s-5); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .pg-trio-item { padding-top: var(--s-4); border-top: 3px solid var(--magenta); }
  .pg-trio-item:nth-child(2) { border-top-color: var(--rouge); } .pg-trio-item:nth-child(3) { border-top-color: var(--vert); }
  .pg-trio-item h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .pg-trio-item p { color: var(--fg-muted); line-height: 1.6; }
  .pg-more { margin-top: var(--s-5); }
  .pg-more a { font-weight: 600; color: var(--fg); text-underline-offset: 0.25em; }
  .pg-format-expect { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .pg-format-expect strong { color: var(--fg); font-weight: 600; }
  .pg-note { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 4px solid var(--vert); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--bg-alt); color: var(--fg); line-height: 1.6; max-width: 62ch; }

  /* Thèmes et laboratoires */
  .pg-themes { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pg-theme { display: grid; gap: var(--s-4); align-content: space-between; min-height: 8.5rem; padding: var(--s-5); border-radius: var(--r-lg); background: var(--tone); color: #fff; text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .pg-theme.tone-encre { background: #2A3038; } .pg-theme.tone-vert { background: var(--vert-texte); } .pg-theme.tone-magenta { background: var(--magenta-texte); }
  .pg-theme:hover, .pg-theme:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2, 0 12px 30px rgba(11, 15, 19, 0.18)); }
  .pg-theme-name { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; line-height: 1.2; }
  .pg-theme-read { font-size: var(--t-sm); font-weight: 600; color: #fff; }
  .pg-subtitle { margin-top: var(--s-7); font-size: var(--t-xs); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
  .pg-labs { list-style: none; display: grid; margin-top: var(--s-3); border-top: 1px solid var(--line); }
  .pg-lab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); min-height: 3.25rem; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
  .pg-lab-name { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lead); }
  .pg-lab-name::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--tone); }
  .pg-lab-domain { color: var(--fg-muted); font-size: var(--t-sm); }
  .pg-lab:hover .pg-lab-name, .pg-lab:focus-visible .pg-lab-name { text-decoration: underline; text-underline-offset: 0.25em; }

  /* Préparer votre texte */
  .pg-prep { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
  @media (min-width: 860px) { .pg-prep { grid-template-columns: 1fr 1fr; } }
  .pg-prep-col { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
  .pg-prep-col h3 { font-size: var(--t-h4); margin-bottom: var(--s-4); }
  .pg-structure { list-style: none; counter-reset: plan; display: grid; gap: var(--s-3); }
  .pg-structure li { counter-increment: plan; position: relative; padding-left: 2.5rem; line-height: 1.55; }
  .pg-structure li::before { content: counter(plan); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--encre); color: var(--craie); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; }
  .pg-dossier { list-style: none; display: grid; gap: var(--s-2); }
  .pg-dossier li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
  .pg-dossier li::before { content: ""; position: absolute; left: 0.15rem; top: 0.2em; width: 1.05rem; height: 1.05rem; border-radius: 0.3rem; border: 2px solid var(--vert); }
  .pg-dossier li::after { content: ""; position: absolute; left: 0.5rem; top: 0.38em; width: 0.3rem; height: 0.55rem; border: solid var(--vert); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .pg-prep-note { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .pg-prep-note a { color: var(--fg); font-weight: 600; }

  /* Intelligence artificielle */
  .pg-ai { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-6); }
  @media (min-width: 760px) { .pg-ai { grid-template-columns: 1fr 1fr; } }
  .pg-ai-panel { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
  .pg-ai-panel--ok { border-top: 4px solid var(--vert); } .pg-ai-panel--no { border-top: 4px solid var(--rouge); }
  .pg-ai-panel--ok .pg-decision-icon { background: var(--vert); } .pg-ai-panel--no .pg-decision-icon { background: var(--rouge); }
  .pg-ai-panel h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .pg-ai-panel p { color: var(--fg-muted); line-height: 1.6; }

  /* Règles numérotées */
  .pg-rules { list-style: none; counter-reset: regle; display: grid; gap: 0; margin-top: var(--s-6); border-top: 1px solid var(--line); }
  .pg-rule { counter-increment: regle; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
  .pg-rule::before { content: counter(regle, decimal-leading-zero); grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.04em; line-height: 1; color: var(--magenta-texte); }
  .pg-rule h3 { font-size: var(--t-h4); }
  .pg-rule p { margin-top: var(--s-2); color: var(--fg-muted); line-height: 1.6; max-width: 62ch; }
  .pg-rules--3 { border-top: 0; }
  @media (min-width: 900px) { .pg-rules--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .pg-rules--3 .pg-rule { border-bottom: 0; border-top: 1px solid var(--line); } }

  /* Contrôles (bloc sombre) */
  .pg-dark { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--r-xl); background: var(--dark-bg); color: var(--dark-fg); --fg-muted: var(--dark-muted); }
  .pg-checks { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pg-check { padding: var(--s-5); border-radius: var(--r-lg); background: rgba(247, 247, 245, 0.05); border: 1px solid var(--dark-line); }
  .pg-check-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--magenta-texte); color: #fff; margin-bottom: var(--s-4); }
  .pg-check:nth-child(2) .pg-check-icon { background: var(--rouge); } .pg-check:nth-child(3) .pg-check-icon { background: var(--vert); }
  .pg-check-icon svg { width: 1.5rem; height: 1.5rem; }
  .pg-check h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .pg-check p { color: var(--dark-muted); font-size: var(--t-sm); line-height: 1.6; }

  /* Parcours : frise verticale */
  .pg-steps { list-style: none; counter-reset: etape; position: relative; display: grid; gap: var(--s-4); margin-top: var(--s-6); }
  .pg-steps::before { content: ""; position: absolute; left: 1.375rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--weave); background-size: 2px 100%; opacity: 0.6; }
  .pg-step { counter-increment: etape; position: relative; padding: var(--s-4) var(--s-5) var(--s-4) 4.25rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
  .pg-step::before {
    content: counter(etape); position: absolute; left: 0; top: var(--s-4); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: 0;
    border-radius: 50%; background: var(--encre); color: var(--craie); font-family: var(--font-display); font-weight: 700; box-shadow: 0 0 0 5px var(--bg);
  }
  .pg-step:nth-child(4n+2)::before { background: var(--rouge); } .pg-step:nth-child(4n+3)::before { background: var(--magenta-texte); } .pg-step:nth-child(4n+4)::before { background: var(--vert); }
  .pg-step h3 { font-size: var(--t-h4); }
  .pg-step p { margin-top: var(--s-1); color: var(--fg-muted); line-height: 1.6; }
  .section > .pg-steps { max-width: 52rem; }

  /* Décisions du comité */
  .pg-decisions { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pg-decision { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
  .pg-decision-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; margin-bottom: var(--s-3); color: #fff; }
  .pg-decision-icon svg { width: 1.4rem; height: 1.4rem; }
  .pg-decision--ok .pg-decision-icon { background: var(--vert); }
  .pg-decision--edit .pg-decision-icon { background: #8A5A00; }
  .pg-decision--no .pg-decision-icon { background: var(--rouge); }
  .pg-decision h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
  .pg-decision p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .pg-reasons { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-alt); border-left: 4px solid var(--rouge); }
  .pg-reasons h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
  .pg-reasons ul { list-style: none; display: grid; gap: 0.5rem; }
  @media (min-width: 760px) { .pg-reasons ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
  .pg-reasons li { position: relative; padding-left: 1.4rem; color: var(--fg); line-height: 1.5; }
  .pg-reasons li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 2px; background: var(--rouge); }

  /* Plateformes partenaires */
  .pg-cta { display: grid; gap: var(--s-6); margin: 0 var(--gutter) var(--section-y); padding: clamp(2rem, 1.5rem + 3vw, 4.5rem); border-radius: var(--r-xl); background: var(--rouge); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
  .pg-cta::after { content: ""; position: absolute; z-index: -1; inset: -20% -10% -20% 60%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 14px, transparent 14px 26px); transform: skewX(-12deg); }
  .pg-cta-head h2 { color: #fff; max-width: 20ch; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); }
  .pg-cta-head p { margin-top: var(--s-3); color: rgba(255, 255, 255, 0.92); font-size: var(--t-lead); max-width: 52ch; }
  .pg-cta-head a { color: #fff; font-weight: 600; }
  .platforms { list-style: none; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .platform { display: grid; gap: var(--s-3); align-content: start; justify-items: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); }
  .platform-name { font-size: var(--t-h4); }
  .platform p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .platform-btn svg { width: 1rem; height: 1rem; }
  @media (min-width: 1360px) { .pg-cta { margin-inline: auto; max-width: calc(var(--max) + 2 * var(--gutter)); } }

  /* S'impliquer : trois voies */
  .involve-split--3 { list-style: none; }
  .involve-split--3 > li { display: grid; }
  .involve-split--3 .involve-panel { border-top: 5px solid var(--tone); }
  @media (min-width: 1000px) { .involve-split--3 { grid-template-columns: repeat(3, 1fr); } }
  .inv-process > h2 { max-width: 24ch; }
}

/* ==========================================================================
   APPARITION AU DÉFILEMENT (amélioration progressive)
   Le contenu n'est masqué que si JavaScript est actif ET le mouvement autorisé.
   ========================================================================== */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
    .js .reveal.is-visible { opacity: 1; transform: none; }
    .js .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
    .js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
    .js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: 70ms; }
    .js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: 140ms; }
    .js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: 210ms; }
    .js .reveal-stagger.is-visible > :nth-child(5) { transition-delay: 280ms; }
    .js .reveal-stagger.is-visible > :nth-child(n+6) { transition-delay: 340ms; }

    .hero-inner > * { animation: monte 900ms var(--ease) both; }
    .hero-inner > :nth-child(2) { animation-delay: 80ms; }
    .hero-inner > :nth-child(3) { animation-delay: 180ms; }
    .hero-inner > :nth-child(4) { animation-delay: 260ms; }
    .hero-stripes span { animation: brin 1.1s var(--ease) both; }
    .hero-stripes span:nth-child(2n) { animation-delay: 90ms; }
    .hero-stripes span:nth-child(3n) { animation-delay: 160ms; }
    .ws-seg { animation: tisse 1.2s var(--ease) both; transform-origin: left; }
    .ws-2 { animation-delay: 80ms; } .ws-3 { animation-delay: 160ms; } .ws-4 { animation-delay: 240ms; }
  }
  @keyframes monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes brin { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes tisse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .placeholder { background: color-mix(in srgb, var(--magenta) 14%, transparent); padding: 0 0.3em; border-radius: 4px; }
}

/* ==========================================================================
   MODE SOMBRE (préférence système)
   Les sections déjà sombres gardent leur rendu ; les surfaces claires basculent.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1216;
    --bg-alt: #13181D;
    --surface: #171C22;
    --fg: #EDEBE6;
    --fg-muted: #A9ADB3;
    --fg-subtle: #8E9399;
    --line: rgba(247, 247, 245, 0.12);
    --line-strong: rgba(247, 247, 245, 0.26);
    --accent: var(--rose-lumiere);
    --focus: #8AB4FF;
    --dark-bg: #07090C;
    --dark-bg-2: #0C0F13;
    --sable: #2A2F36;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 28px 56px -24px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
  .tone-vert, .lab-palaver { --tone-text: var(--vert-lumiere); }
  .tone-rouge, .lab-agora { --tone-text: var(--rouge-lumiere); }
  .tone-magenta, .lab-boussole { --tone-text: var(--rose-lumiere); }
  .tone-encre, .lab-forge, .tone-craie { --tone-text: #D9D4C7; }
  .tone-futurs, .lab-futurs { --tone-text: #FF8FA0; }
  .feed, .reach, .shift-page, .section-dark, .contact-block, .lab-hero, .site-footer { background: var(--dark-bg); }
  .feed-card, .topic-card { background: #10141A; }
  .newsletter { background: var(--dark-bg-2); }
  .ys-sub { color: var(--rouge-lumiere); }
  .nav-list > li > a.nav-cta, .btn-dark, .step-num, .back-to-top, .skip-link { background: var(--craie); color: var(--encre); }
  .nav-list > li > a.nav-cta:hover { background: var(--rose-lumiere); }
  .logo-mark rect[fill="#0B0F13"] { fill: #F7F7F5; }
  .impact-card--light .impact-globe i:nth-child(1) { background: var(--rose-lumiere); }
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-film { display: none; }
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */
@media print {
  .utility-bar, .weave-strip, .main-header, .newsletter, .back-to-top, .scroll-progress, .hero-media, .search-dialog, .site-footer .footer-wordmark { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .feed, .reach, .shift-page, .section-dark, .lab-hero, .contact-block, .site-footer { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* HERO : SYMBOLE TISSÉ */
@layer pages {
  .hero-weave {
    position: relative; z-index: 0; pointer-events: none;
    width: 5.5rem; margin-bottom: calc(var(--s-4) - var(--s-7));
    filter: drop-shadow(0 1.5rem 3rem rgba(11, 15, 19, 0.55));
  }
  .hw-mark { display: block; width: 100%; height: auto; overflow: visible; }
  .hw-band { transition: opacity 400ms var(--ease); }
  @media (min-width: 64rem) {
    .hero-weave { position: absolute; top: 44%; right: var(--pad-x); translate: 0 -50%; width: clamp(16rem, 27vw, 27rem); margin: 0; }
    .hero-inner { max-width: min(62rem, calc(100% - clamp(16rem, 27vw, 27rem) - 3rem)); }
  }
  /* Survol d'un laboratoire : sa bande ressort */
  .hero:has(.hero-labs .tone-rouge:is(:hover, :focus-visible)) .hw-band:not(.b-rouge),
  .hero:has(.hero-labs .tone-magenta:is(:hover, :focus-visible)) .hw-band:not(.b-magenta),
  .hero:has(.hero-labs .tone-vert:is(:hover, :focus-visible)) .hw-band:not(.b-vert),
  .hero:has(.hero-labs .tone-encre:is(:hover, :focus-visible)) .hw-band:not(.b-encre) { opacity: 0.16; }

  @media (prefers-reduced-motion: no-preference) {
    .hw-band.b-rouge   { --d: 150ms; }
    .hw-band.b-magenta { --d: 450ms; }
    .hw-band.b-vert    { --d: 750ms; }
    .hw-band.b-encre   { --d: 1050ms; }
    .hw-thread:nth-of-type(2) { --k: 60ms; }
    .hw-thread:nth-of-type(3) { --k: 120ms; }
    .hw-thread:nth-of-type(4) { --k: 180ms; }
    .hw-thread:nth-of-type(5) { --k: 240ms; }
    .hw-base {
      transform-box: fill-box; transform-origin: 0 50%;
      animation: hw-trame 650ms var(--ease) both; animation-delay: var(--d, 0ms);
    }
    .hw-thread {
      stroke-dasharray: 1; stroke-dashoffset: 0;
      animation: hw-fil 900ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + 120ms + var(--k, 0ms));
    }
    /* Une fois la vidéo lancée, le moulinet tourne très lentement (le bouton Pause l'arrête) */
    .hero.has-video .hw-mark { animation: hw-tour 140s linear 2.6s infinite; }
    .hero:has(.hero-pause[aria-pressed="true"]) .hw-mark { animation-play-state: paused; }
  }
  @keyframes hw-trame { from { transform: scaleX(0); opacity: 0; } }
  @keyframes hw-fil { from { stroke-dashoffset: 1; } }
  @keyframes hw-tour { to { rotate: 360deg; } }
}
@media print { .hero-weave { display: none !important; } }

/* PISTES DE RECHERCHE */
@layer pages {
  .pg-note--lab { border-left-color: var(--magenta); margin-top: var(--s-6); }
  .pg-note--lab a { display: inline-block; margin-top: var(--s-2); font-weight: 600; color: var(--fg); }

  /* Un laboratoire et ses dix pistes */
  .tp-lab { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .tp-lab-head { position: relative; display: grid; gap: var(--s-3); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-radius: var(--r-xl); background: var(--encre); color: var(--craie); overflow: hidden; isolation: isolate; }
  .tp-lab-head::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 8px; background: var(--tone-glow); }
  .tp-lab-head::after { content: ""; position: absolute; z-index: -1; inset: -30% -8% -30% 74%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tone-glow) 32%, transparent) 0 12px, transparent 12px 24px); transform: skewX(-14deg); }
  .tp-lab-head h2 { color: var(--craie); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
  .tp-lab-lead { max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; color: rgba(247, 247, 245, 0.86); }
  .tp-lab .tp-lab-head .tp-lab-link { color: var(--craie); }
  .tp-lab-link { justify-self: start; font-weight: 600; color: var(--fg); text-underline-offset: 0.25em; }
  .tp-cards { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-4); }
  @media (min-width: 760px) { .tp-cards { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 759px) { .tp-lab-head::after { display: none; } }
  .tp-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tone); transition: border-color var(--t-fast), transform var(--t-fast); }
  .tp-card:hover { transform: translateY(-2px); }
  .tp-card h3 { font-size: var(--t-h4); line-height: 1.25; }
  .tp-card > p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
  .tp-card > .tp-dig { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--tone-text); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; }
  .tp-questions { list-style: none; display: grid; gap: var(--s-2); }
  .tp-questions li { position: relative; padding-left: 1.1rem; font-size: var(--t-sm); line-height: 1.5; color: var(--fg); }
  .tp-questions li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--tone); }
  .tp-cta-link { margin-top: var(--s-4); }
  .tp-cta-link a { color: #fff; font-weight: 600; text-underline-offset: 0.25em; }

  /* Bloc des pages laboratoires */
  .tp-labblock { padding: var(--section-y) var(--pad-x); background: var(--bg-alt); }
  .tp-labblock-inner { display: grid; gap: var(--s-6); max-width: var(--max); margin-inline: auto; }
  @media (min-width: 960px) { .tp-labblock-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
  .tp-labblock-head { display: grid; gap: var(--s-3); }
  .tp-labblock-head h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: 16ch; }
  .tp-labblock-head p { color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; }
  .tp-labblock-list { list-style: none; display: grid; border-top: 1px solid var(--line); }
  @media (min-width: 700px) { .tp-labblock-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
  .tp-labblock-list li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; line-height: 1.3; }
  .tp-labblock-list li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tone-glow); transform: translateY(-0.1em); }
}
@media print { .tp-lab-head { background: #fff !important; color: #000 !important; } }

/* DRAPEAUX ET ICÔNES ODD */
@layer pages {
  .flag { display: inline-block; width: 1.4em; height: auto; margin-right: 0.45em; vertical-align: -0.18em; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); }
  .ctb-place .flag { flex-shrink: 0; margin: 0.15em 0.1em 0 0; }
  .article-byline .flag, .article-author-name .flag { width: 1.3em; }
  .sdg-icon { display: block; flex-shrink: 0; border-radius: 6px; }
  .sdg-list .sdg { padding: 0.3rem 0.9rem 0.3rem 0.3rem; gap: 0.65rem; border-radius: var(--r-md); }
  .sdg-list .sdg-icon { width: 2.5rem; height: 2.5rem; }
  .sdg-mini { gap: 0.5rem; }
  .sdg-mini .sdg-icon { width: 3rem; height: 3rem; border-radius: 8px; transition: transform var(--t-fast) var(--ease); }
  .sdg-mini .sdg:hover .sdg-icon { transform: translateY(-2px); }
}

/* GRAPHIQUES ET TABLEAUX DANS LES ARTICLES */
@layer pages {
  .article-chart { margin: var(--s-7) 0; }
  .article-chart img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
  .article-chart figcaption { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-muted); }
  .article-chart-link { display: inline-block; margin-top: 0.35rem; font-weight: 600; color: var(--fg); }
  .article-chart-link::after { content: " ↗"; }
  .table-scroll { margin: var(--s-6) 0 var(--s-3); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; }
  .table-scroll table { display: table; overflow: visible; width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.4; }
  .table-scroll th, .table-scroll td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
  .table-scroll thead th { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); background: var(--bg-alt); }
  .table-scroll tbody tr:last-child td { border-bottom: 0; }
  .table-scroll .num { text-align: right; font-variant-numeric: tabular-nums; }
  .table-scroll td:first-child { font-weight: 600; }
}