/* ====================================================================
   Planisphère carré · Site V1
   Design : Geoffrey Dorne · 2026
   --------------------------------------------------------------------
   Pile typo : TheBoldFont (titres carrés) + Inter (corps) + Fraunces italic (incipits)
   Mobile-first · responsive · animations CSS motion + JS reveals
   ==================================================================== */

/* ──────────────────────────────────────────────────────────────────────
   FONTS
   ────────────────────────────────────────────────────────────────────── */
/* THE BOLD FONT PRO — version pro complète (juin 2026). Remplace THEBOLD2
   (sous-ensemble livré en mai) et TheBoldFont-FREEVERSION. Le nom de famille
   "TheBold2" est conservé pour ne pas casser les références existantes. */
@font-face {
    font-family: "TheBold2";
    src: url("../fonts/THEBOLDFONT-PRO.otf") format("opentype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ──────────────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Palette V1.2 — calée sur l'identité graphique officielle (Jojo, mai 2026).
       Logique CMYK transposée en hex web :
         Bleu marine     C100 M100  → #1A237E  (textes courants)
         Bleu cobalt     C100 M30   → #0057B8  (titres bleus, type "Planisphère")
         Violet prune    C60 M100   → #7B2A8B  (eyebrows / sous-titres)
         Bleu ciel       C30        → #C5E1F0  (labels légers, fonds sombres)
         Magenta 100     M100       → #EC008C  (CTA ponctuels uniquement)
         Magenta 90      M90        → #EE2A82  (accents principaux)
         Magenta 50      M50        → #F08FBA  (accents secondaires / hover)
       Sables papier conservés (#F4F1EA / #EAE4D7) — réponse à la question
       blanc-écran : oui, le pur blanc éblouit, on garde le sable doux. */

    --c-bg:        #F4F1EA;   /* sable clair — fond principal */
    --c-bg-2:      #EAE4D7;   /* sable plus foncé — surfaces alternées */
    --c-ink:       #1A237E;   /* BLEU MARINE — texte courant (remplace l'ancien noir bleuté) */
    --c-ink-soft:  #4D5A70;   /* gris bleuté pour textes secondaires */

    --c-blue:      #0057B8;   /* bleu cobalt — titres, CTA principal */
    --c-blue-deep: #1A237E;   /* bleu marine — overlays, fonds sombres (= --c-ink) */
    --c-blue-mid:  #5892B5;   /* bleu intermédiaire — accents */
    --c-blue-soft: #C5E1F0;   /* bleu ciel C30 — textes sur fonds sombres, labels légers */

    --c-prune:     #7B2A8B;   /* VIOLET PRUNE C60 M100 — eyebrows, sous-titres */
    --c-magenta:   #EE2A82;   /* MAGENTA 90 — accents principaux */
    --c-magenta-100: #EC008C; /* MAGENTA 100 — CTA ponctuels uniquement (réservé) */
    --c-rose:      #F08FBA;   /* MAGENTA 50 — accents secondaires, hover */

    /* Alias rétrocompatibles : les anciens noms continuent de fonctionner */
    --c-accent:    var(--c-magenta);    /* magenta 90 par défaut */
    --c-accent-2:  var(--c-blue-mid);   /* highlights bleus */

    --c-border:    #D6D0C2;
    --c-paper:     #FBF9F4;

    /* Typo (V1.2 — alignée sur l'identité graphique : THEBOLD2 + Barlow) */
    --f-display: "TheBold2", "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
    --f-sans:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-italic:  "Fraunces", Georgia, "Times New Roman", serif;
    --f-mono:    "SFMono-Regular", "Consolas", "Monaco", monospace;

    /* Espaces — échelle modulaire */
    --sp-1:  0.5rem;
    --sp-2:  1rem;
    --sp-3:  1.5rem;
    --sp-4:  2rem;
    --sp-5:  3rem;
    --sp-6:  5rem;
    --sp-7:  8rem;
    --sp-8:  12rem;

    /* Layout — colonnes élargies en V1.1 (retour client : trop fines sur desktop) */
    --max-w:        1240px;
    --max-w-narrow: 820px;   /* +100px : approfondir / cta */
    --max-w-tribune: 780px;  /* +120px : tribune sur la home */
    --radius:       2px;
    --radius-lg:    6px;

    /* Motion */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:      180ms;
    --t-med:       320ms;
    --t-slow:      640ms;
    --t-vslow:     1200ms;
    --t-image:     700ms; /* zoom images : rapide mais progressif */
    --ease-image:  cubic-bezier(0.22, 0.61, 0.36, 1); /* démarre vif, finit doux (ease-out cubic) */
}

/* ──────────────────────────────────────────────────────────────────────
   RESET LIGHT
   ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

button { font: inherit; cursor: pointer; }

a {
    color: var(--c-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--c-accent); }

::selection {
    background: var(--c-accent);
    color: var(--c-paper);
}

/* ──────────────────────────────────────────────────────────────────────
   TYPO MACRO
   ────────────────────────────────────────────────────────────────────── */
.display, .display-xl, .display-lg, .display-md,
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 var(--sp-3);
    text-transform: uppercase;
    font-feature-settings: "kern" 1, "liga" 0;
}

.display-xl {
    font-size: clamp(3rem, 11vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: -0.035em;
}

.display-lg {
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.9;
}

.display-md {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 0.95;
}

h2.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 0.95;
}

h3.subsection-title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1;
    margin-bottom: var(--sp-2);
}

h4 {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
}

.eyebrow {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-prune);   /* violet prune (V1.2 — sous-titres / eyebrows) */
    margin: 0 0 var(--sp-3);
    display: inline-block;
}
.eyebrow::before {
    content: "▣";
    color: var(--c-magenta); /* magenta 90 — accent ponctuel */
    margin-right: 0.5em;
    font-size: 0.85em;
}

.lead {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--c-ink-soft);
    font-weight: 400;
    max-width: 56ch;
    margin: 0 0 var(--sp-4);
}

/* V1.6.2 (mai 2026) — page Approfondir : retour client sur l'alternance perçue
   entre .lead (big) et <p> standard (body 17px). On bumpe les paragraphes
   standards inside .container / .container-narrow pour rapprocher les deux
   tailles, sans toucher au module timeline (jalons historiques) ni aux
   légendes de slider. Référence : taille « lead » de la page d'accueil. */
/* V1.7.13 (juin 2026) — on EXCLUT .section-letter (sinon la règle générique
   ramène les A. B. C. à 1.18rem alors qu'on veut les énormes). */
.page-approfondir main .container > p:not(.section-letter),
.page-approfondir main .container-narrow > p:not(.section-letter),
.page-approfondir main .container > .intro-text p,
.page-approfondir main .container-narrow .intro-text p,
.page-approfondir main .container .section-head > p:not(.eyebrow):not(.lead):not(.section-letter) {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    line-height: 1.7;
}
/* La timeline (jalons) reste avec sa propre taille (volontairement compacte). */
.page-approfondir .timeline-event,
.page-approfondir .timeline-year {
    font-size: inherit;
}

.italic-em {
    font-family: var(--f-italic);
    font-style: italic;
    font-weight: 400;
    color: var(--c-blue);
}

.center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; }

/* ──────────────────────────────────────────────────────────────────────
   LAYOUT
   ────────────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.container-narrow {
    max-width: var(--max-w-narrow);
}

.container-tribune {
    max-width: var(--max-w-tribune);
}

.section {
    padding: clamp(3rem, 8vw, 7rem) 0;
    scroll-margin-top: 80px;
    position: relative;
}

.section-alt {
    background: var(--c-bg-2);
}

.section-dark {
    background: var(--c-ink);
    color: var(--c-paper);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
    color: var(--c-paper);
}
.section-dark .lead { color: var(--c-blue-soft); }
.section-dark a { color: var(--c-blue-soft); }
.section-dark a:hover { color: var(--c-accent); }

.section-blue {
    background: var(--c-blue);
    color: var(--c-paper);
}
.section-blue h1, .section-blue h2, .section-blue h3 {
    color: var(--c-paper);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
@media (min-width: 760px) {
    .two-col { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
}

.three-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 760px) {
    .three-col { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}

.four-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
@media (min-width: 900px) {
    .four-col { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
}

/* ──────────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────────── */
.btn {
    --bg: var(--c-blue);
    --fg: var(--c-paper);
    --bd: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    font-family: var(--f-sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--bg);
    color: var(--fg);
    border: 1.5px solid var(--bd);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "→";
    transition: transform var(--t-fast) var(--ease-out);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 35, 126, 0.15);
    color: var(--fg); /* IMPORTANT : écrase la règle globale a:hover qui passerait sinon en orange */
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
    --bg: var(--c-blue);
    --fg: var(--c-paper);
}
.btn-primary:hover {
    --bg: var(--c-accent);
}

/* CTA principal très ponctuel — magenta 100 (réservé Signer la tribune) */
.btn-accent {
    --bg: var(--c-magenta-100);
    --fg: var(--c-paper);
}
.btn-accent:hover {
    --bg: var(--c-prune);
}

.btn-secondary {
    --bg: transparent;
    --fg: var(--c-blue);
    --bd: var(--c-blue);
}
.btn-secondary:hover {
    --bg: var(--c-blue);
    --fg: var(--c-paper);
}

.btn-ghost-light {
    --bg: transparent;
    --fg: var(--c-paper);
    --bd: rgba(255,255,255,0.45);
}
.btn-ghost-light:hover {
    --bg: var(--c-paper);
    --fg: var(--c-ink);
    --bd: var(--c-paper);
}

.btn-no-arrow::after { display: none; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.8rem; }

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.cta-row.center { justify-content: center; }

/* ──────────────────────────────────────────────────────────────────────
   HEADER + DRAWER MENU
   ────────────────────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: clamp(0.7rem, 1.4vw, 1.1rem) 0;
    transition: background var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out),
                backdrop-filter var(--t-med) var(--ease-out);
    background: transparent;
}
.site-header.is-scrolled,
.site-header.is-light {
    background: rgba(244, 241, 234, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(26, 35, 126, 0.06);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--f-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--c-paper);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
.is-scrolled .logo,
.is-light .logo {
    color: var(--c-ink);
}
.logo-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1.5px solid currentColor;
    transition: transform var(--t-med) var(--ease-out);
}
.logo:hover .logo-mark { transform: rotate(45deg); }
.logo-mark-inner {
    width: 14px;
    height: 14px;
    background: currentColor;
    transition: transform var(--t-med) var(--ease-out);
}
.logo:hover .logo-mark-inner { transform: rotate(-45deg); }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: var(--radius);
    color: var(--c-paper);
    font-family: var(--f-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
    position: relative;
    z-index: 110;
}

/* ──────────────────────────────────────────────────────────────────────
   NAV DESKTOP — permanente, sans fond, ≥ 900px
   (mobile : .nav-toggle prend le relais avec le drawer plein écran)
   ────────────────────────────────────────────────────────────────────── */
.nav-desktop {
    display: none; /* mobile-first : caché par défaut */
}
.nav-desktop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.2rem);
}
.nav-desktop-list a {
    font-family: var(--f-sans);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-paper);
    text-decoration: none;
    padding: 0.4rem 0;
    position: relative;
    transition: color var(--t-fast) var(--ease-out);
}
.nav-desktop-list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-med) var(--ease-out);
}
.nav-desktop-list a:hover::after,
.nav-desktop-list a.is-current::after {
    transform: scaleX(1);
}
/* Hover & current : fushia (magenta 90) — V1.2 */
.nav-desktop-list a.is-current { color: var(--c-magenta); }
.nav-desktop-list a:hover      { color: var(--c-magenta); }

/* En contexte clair (header scrolled / page interne) — texte sombre, hover fushia */
.is-scrolled .nav-desktop-list a,
.is-light .nav-desktop-list a {
    color: var(--c-ink);
}
.is-scrolled .nav-desktop-list a.is-current,
.is-scrolled .nav-desktop-list a:hover,
.is-light .nav-desktop-list a.is-current,
.is-light .nav-desktop-list a:hover {
    color: var(--c-magenta);
}

@media (min-width: 900px) {
    .nav-desktop { display: flex; align-items: center; }
    .nav-toggle  { display: none; }
}
.is-scrolled .nav-toggle,
.is-light .nav-toggle {
    color: var(--c-ink);
}
/* Hover uniquement sur devices avec souris (pas sur tap mobile qui causait blanc-sur-blanc) */
@media (hover: hover) and (pointer: fine) {
    .nav-toggle:hover {
        background: currentColor;
    }
    .nav-toggle:hover .nav-toggle-label,
    .nav-toggle:hover .nav-toggle-icon span {
        color: var(--c-paper);
        background: var(--c-paper);
    }
    .is-scrolled .nav-toggle:hover .nav-toggle-label,
    .is-light .nav-toggle:hover .nav-toggle-label {
        color: var(--c-bg);
    }
}

.nav-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}
.nav-toggle-icon span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--t-med) var(--ease-out),
                opacity var(--t-fast) var(--ease-out);
    transform-origin: center;
}
body.menu-open .nav-toggle-icon span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
body.menu-open .nav-toggle-icon span:nth-child(2) {
    opacity: 0;
}
body.menu-open .nav-toggle-icon span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}
body.menu-open .nav-toggle-label .label-open { display: none; }
.nav-toggle-label .label-close { display: none; }
body.menu-open .nav-toggle-label .label-close { display: inline; }

/* DRAWER OVERLAY — pleine page mais site visible derrière en flou */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 35, 126, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out);
}
body.menu-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
}

.nav-panel {
    position: fixed;
    inset: 0;
    z-index: 105;
    pointer-events: none; /* le panel ne capture rien quand fermé */
    visibility: hidden;
    display: grid;
    place-items: center;
    padding: var(--sp-7) var(--sp-3) var(--sp-4);
    transition: visibility 0s linear var(--t-med);
}
body.menu-open .nav-panel {
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.nav-panel-inner {
    pointer-events: none; /* IMPORTANT : pas de clics fantômes quand menu fermé */
    width: 100%;
    max-width: 760px;
    text-align: center;
    color: var(--c-paper);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-med) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
}
body.menu-open .nav-panel-inner {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1.5vw, 0.9rem);
}
.nav-list li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out);
}
body.menu-open .nav-list li { opacity: 1; transform: translateY(0); }
body.menu-open .nav-list li:nth-child(1) { transition-delay: 100ms; }
body.menu-open .nav-list li:nth-child(2) { transition-delay: 160ms; }
body.menu-open .nav-list li:nth-child(3) { transition-delay: 220ms; }
body.menu-open .nav-list li:nth-child(4) { transition-delay: 280ms; }
body.menu-open .nav-list li:nth-child(5) { transition-delay: 340ms; }
body.menu-open .nav-list li:nth-child(6) { transition-delay: 400ms; }

.nav-list a {
    display: inline-block;
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 7vw, 5rem);
    text-transform: uppercase;
    color: var(--c-paper);
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 0.2em 0;
    position: relative;
    transition: color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
.nav-list a::before {
    content: counter(nav-counter, decimal-leading-zero) " ";
    counter-increment: nav-counter;
    position: absolute;
    left: -3.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--c-blue-soft);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
@media (min-width: 760px) {
    .nav-list a:hover {
        color: var(--c-accent-2);
        transform: translateX(8px);
    }
    .nav-list a:hover::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}
.nav-list { counter-reset: nav-counter; }

.nav-cta-row {
    margin-top: var(--sp-4);
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.nav-meta {
    margin-top: var(--sp-5);
    font-size: 0.78rem;
    color: var(--c-blue-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nav-meta a {
    color: var(--c-blue-soft);
    text-decoration: none;
    margin: 0 0.4em;
}
.nav-meta a:hover { color: var(--c-paper); }

/* Site reste scrollable derrière le menu — on ne lock pas */
body.menu-open { /* pas de overflow:hidden, scroll préservé */ }

/* ──────────────────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--c-paper);
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.hero-bg-img {
    width: 100%;
    height: 110%;
    object-fit: cover;
    object-position: center;
    transform: translateY(0) scale(1.04);
    transition: transform var(--t-vslow) var(--ease-out);
    will-change: transform;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Overlay éclairci (V1.1) — moins lourd en haut, vignette douce en bas
       pour préserver la lisibilité de la typo blanche. */
    background:
        linear-gradient(
            180deg,
            rgba(26, 35, 126, 0.32) 0%,
            rgba(26, 35, 126, 0.10) 35%,
            rgba(26, 35, 126, 0.05) 60%,
            rgba(26, 35, 126, 0.55) 100%
        );
}

.hero-inner {
    width: 100%;
    padding: var(--sp-6) 0 clamp(3rem, 8vw, 6rem);
    position: relative;
}

.hero-tag {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-paper);
    opacity: 0.8;
    /* V1.7.4 (juin 2026) — retour client : remonter ENCORE
       « Projection Peirce quinconce » (3e passe). */
    margin: -8rem 0 var(--sp-1);
    padding-bottom: 3em;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.hero-tag::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--c-paper);
    opacity: 0.5;
}

.hero-title {
    font-family: var(--f-display);
    font-size: clamp(3.2rem, 11vw, 9.5rem);
    /* V1.7.3 (juin 2026) — encore plus serré (3e passe) :
       les 3 lignes doivent être quasi-collées. */
    line-height: 0.72;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--c-paper);
    margin: 0 0 var(--sp-4);
    max-width: 14ch;
}
.hero-title .em {
    font-family: var(--f-italic);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.02em;
    color: var(--c-paper);
    display: inline-block;
    line-height: 0.65;
    /* V1.7.3 (juin 2026) — on remonte physiquement « comme vous ne l'avez »
       avec une translation verticale, indépendamment du line-height
       (qui ne suffit pas à compenser le half-leading de Fraunces italic). */
    transform: translateY(-0.18em);
}

.hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    color: var(--c-paper);
    opacity: 0.92;
    max-width: 52ch;
    font-weight: 400;
    margin: 0 0 var(--sp-4);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    position: relative;
    z-index: 4; /* au-dessus de hero-scroll, hero-meta et de l'overlay sombre */
}
.hero-inner { position: relative; z-index: 3; }
.hero-scroll, .hero-meta { z-index: 2; }

.hero-meta {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 4vw, 2.5rem);
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    font-family: var(--f-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-paper);
    opacity: 0.7;
    text-align: right;
}
@media (min-width: 1100px) {
    .hero-meta { display: flex; }
}
.hero-meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-meta-line::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--c-paper);
}

.hero-scroll {
    position: absolute;
    bottom: clamp(1rem, 2.5vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: var(--c-paper);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-decoration: none;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transition: opacity var(--t-fast) var(--ease-out);
}
.hero-scroll:hover { opacity: 1; color: var(--c-paper); }
.hero-scroll::after {
    content: "";
    width: 1px;
    height: 36px;
    background: var(--c-paper);
    animation: scroll-line 2.4s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scroll-line {
    0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* HERO compact pour pages secondaires */
.hero-page {
    position: relative;
    padding: clamp(8rem, 14vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--c-ink);
    color: var(--c-paper);
    overflow: hidden;
    isolation: isolate;
}
.hero-page-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.35;
    overflow: hidden;
}
.hero-page-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    filter: contrast(1.1) saturate(0.8);
}
.hero-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(26, 35, 126,0.7) 0%,
        rgba(26, 35, 126,0.95) 100%);
}
.hero-page .hero-tag { color: var(--c-blue-soft); opacity: 1; }
.hero-page .hero-tag::before { background: var(--c-blue-soft); opacity: 1; }
.hero-page-title {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--c-paper);
    margin: 0 0 var(--sp-3);
}
.hero-page-title .em {
    font-family: var(--f-italic);
    font-style: italic;
    text-transform: none;
    color: var(--c-magenta);  /* fushia (magenta 90) — V1.2 : "pourquoi" approfondir / "pour" ressources */
    font-weight: 400;
}
.hero-page-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    color: var(--c-paper);
    opacity: 0.85;
    max-width: 60ch;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION : LE CONCEPT (intro)
   ────────────────────────────────────────────────────────────────────── */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 900px) {
    .intro-grid { grid-template-columns: 1fr 1fr; }
    /* Variante : image à gauche, texte à droite (V1.1 — bloc "Fini les cartes surréalistes") */
    .intro-grid.intro-grid-reversed .intro-text { order: 2; }
    .intro-grid.intro-grid-reversed .intro-figure { order: 1; }
}
.intro-text p {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
    margin: 0 0 var(--sp-3);
}
.intro-text strong {
    color: var(--c-blue);
    font-weight: 600;
}

.intro-figure {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--c-bg-2);
}
.intro-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-image) var(--ease-image),
                filter var(--t-image) var(--ease-image);
    will-change: transform;
}
.intro-figure:hover img {
    transform: scale(1.05);
}
.intro-figure-caption {
    position: absolute;
    left: var(--sp-2);
    bottom: var(--sp-2);
    background: rgba(26, 35, 126, 0.7);
    color: var(--c-paper);
    font-family: var(--f-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.4rem 0.7rem;
}

/* Variante "naturelle" — l'image dicte son propre ratio, sans crop ni cadre carré.
   Utilisée pour le bloc "Fini les cartes surréalistes" où l'image (Mercator vs
   Peirce, tailles réelles) doit être vue dans son intégralité. */
.intro-figure.intro-figure-natural {
    aspect-ratio: auto;
    background: transparent;
    overflow: visible;
}
.intro-figure.intro-figure-natural img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.intro-figure.intro-figure-natural:hover img {
    transform: none;
}

/* V1.5 (mai 2026) — Image pleine largeur sous le bloc "Le concept".
   Pas de container ni de marges. Le pinch-zoom natif du navigateur fonctionne
   sur smartphone (pas de touch-action/user-select qui bloquerait). */
.concept-figure-full {
    margin: var(--sp-4) 0 0;
    width: 100%;
    overflow: hidden;
    background: var(--c-bg-2);
}
.concept-figure-full img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Macro pull-quote — phrase d'accroche pleine largeur */
.macro-quote {
    padding: clamp(3rem, 8vw, 6rem) 0;
    text-align: center;
}
.macro-quote-text {
    font-family: var(--f-italic);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    line-height: 1.25;
    color: var(--c-blue);
    max-width: 28ch;
    margin: 0 auto;
    position: relative;
}
.macro-quote-text::before,
.macro-quote-text::after {
    font-family: var(--f-italic);
    color: var(--c-accent);
    font-size: 1.4em;
    line-height: 0;
    position: relative;
    top: 0.25em;
}
.macro-quote-text::before { content: "« "; }
.macro-quote-text::after { content: " »"; }
.macro-quote-author {
    margin-top: var(--sp-3);
    font-family: var(--f-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-ink-soft);
}

/* Variante compacte de la citation (mai 2026, demande client) :
   on garde la même typo / centrage mais on réduit drastiquement
   les paddings verticaux de la section ET du bloc interne. */
.section.section-tight {
    padding: clamp(1rem, 2.5vw, 2rem) 0;
}
.macro-quote.macro-quote-compact {
    padding: 0;
}
.macro-quote.macro-quote-compact .macro-quote-text {
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}
.macro-quote.macro-quote-compact .macro-quote-author {
    margin-top: var(--sp-2);
}

/* ──────────────────────────────────────────────────────────────────────
   NI CENTRE, NI PÉRIPHÉRIE — animation 4 carrés (V1.1)
   États :
     1) grille 2×2 (état initial)
     2) ligne horizontale de 4 tuiles (hg pivote -90° et se loge à gauche
        de bg ; hd pivote +90° et se loge à droite de bd)
     3) nouvelle grille 2×2 réagencée (rotations cumulées de 180° pour
        hg et hd, qui passent SOUS bg et bd)

   Pourquoi positionnement absolu plutôt que grid : grid-column / grid-row
   ne s'animent pas en CSS, on aurait des sauts. Avec position absolute +
   transform (translate + rotate), tout est interpolé proprement en une
   seule transition (translation + rotation simultanées).
   Les tuiles sont strictement bord à bord (pas de gap).
   ────────────────────────────────────────────────────────────────────── */
.ni-centre-anim {
    max-width: 1000px;
    margin: 0 auto;
}
.ni-centre-stage {
    position: relative;
    aspect-ratio: 2 / 1;
    width: 100%;
    overflow: hidden;
}
.ni-centre-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;   /* container 2:1 → chaque tuile est carrée (25% × 50%) */
    height: 50%;
    transform-origin: center center;
    /* !important pour ne pas se faire écraser par une autre règle générique */
    transition: transform 1.8s cubic-bezier(0.65, 0.05, 0.36, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

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

/* Logique V1.3 (mai 2026 — repris de la démo qui fonctionne bien) :
   transitions data-state plutôt que keyframes auto.
   - état 1 → état 2 : TOUS pivotent ±90° (bg/bd en place, hg/hd glissent aux extrémités)
   - état 2 → état 3 : hg/hd font 180° de plus (±270° cumulés) et glissent sous bg/bd,
     bg/bd remontent en rangée du haut. */

/* V1.6.2 (mai 2026) — retour client : la face NORD doit être au début (état 1)
   et la face SUD à la fin (état 3). Les transformations des états 1 et 3 ont
   été permutées : ce qui était l'état 3 devient l'état 1, et inversement. */
.ni-centre-stage[data-state="1"] .ni-centre-tile[data-pos="bg"] { transform: translate(100%, 0%)   rotate(-90deg); }
.ni-centre-stage[data-state="1"] .ni-centre-tile[data-pos="bd"] { transform: translate(200%, 0%)   rotate(90deg); }
.ni-centre-stage[data-state="1"] .ni-centre-tile[data-pos="hg"] { transform: translate(100%, 100%) rotate(-270deg); }
.ni-centre-stage[data-state="1"] .ni-centre-tile[data-pos="hd"] { transform: translate(200%, 100%) rotate(270deg); }

/* V1.5 (mai 2026) — état intermédiaire "1b" pour l'effet "souder en 2 colonnes"
   (demande client : "découpage en 2"). Utilisé lors des transitions 1 ↔ 2 :
   la colonne gauche (hg+bg) glisse vers la gauche soudée, la colonne droite
   (hd+bd) glisse vers la droite soudée — pas encore de rotation. */
/* V1.7.5 (juin 2026) — séquence Vue atlantique en 2 phases (retour client) :
   Phase 1 (état "1b") : les 2 paires verticales se séparent latéralement
                          SANS pivoter (on conserve les rotations de l'état Nord).
   Phase 2 (état "2")  : chaque paire « se couche » vers l'extérieur
                          (gauche → -90°, droite → +90°) et les 2 rectangles
                          allongés se touchent bout à bout. */

/* État 1b : séparation horizontale, rotations identiques à l'état 1 (Nord) */
.ni-centre-stage[data-state="1b"] .ni-centre-tile[data-pos="bg"] { transform: translate(0%,   0%)   rotate(-90deg); }
.ni-centre-stage[data-state="1b"] .ni-centre-tile[data-pos="hg"] { transform: translate(0%,   100%) rotate(-270deg); }
.ni-centre-stage[data-state="1b"] .ni-centre-tile[data-pos="bd"] { transform: translate(300%, 0%)   rotate(90deg); }
.ni-centre-stage[data-state="1b"] .ni-centre-tile[data-pos="hd"] { transform: translate(300%, 100%) rotate(270deg); }

/* État 2 (Atlantique) : long rectangle horizontal centré verticalement
   dans la scène (V1.7.6 : translateY 100% → 50%, retour client).
   Rotation additionnelle de ±90° par rapport à 1b. */
.ni-centre-stage[data-state="2"] .ni-centre-tile[data-pos="bg"] { transform: translate(0%,   50%) rotate(-180deg); }
.ni-centre-stage[data-state="2"] .ni-centre-tile[data-pos="hg"] { transform: translate(100%, 50%) rotate(-360deg); }
.ni-centre-stage[data-state="2"] .ni-centre-tile[data-pos="hd"] { transform: translate(200%, 50%) rotate(360deg); }
.ni-centre-stage[data-state="2"] .ni-centre-tile[data-pos="bd"] { transform: translate(300%, 50%) rotate(180deg); }

/* V1.7.7 (juin 2026) — État 3 (Vue Sud) recalibré pour la transition 2 → 3 :
   Depuis le long rectangle (état 2) :
   - BG (bord gauche) glisse SOUS HG en pivotant -180° (rotation vers la gauche)
   - BD (bord droit)  glisse SOUS HD en pivotant +180° (rotation vers la droite)
   - HG et HD remontent d'une demi-tuile pour aligner le 2×2.
   Les rotations sont cumulatives (par rapport à l'état 2) pour forcer le bon sens
   d'animation (CSS prendrait sinon le chemin le plus court). Visuellement
   -360°/+360° = 0°, c'est juste la trajectoire qui change. */
.ni-centre-stage[data-state="3"] .ni-centre-tile[data-pos="hg"] { transform: translate(100%, 0%)   rotate(-360deg); }
.ni-centre-stage[data-state="3"] .ni-centre-tile[data-pos="hd"] { transform: translate(200%, 0%)   rotate(360deg); }
.ni-centre-stage[data-state="3"] .ni-centre-tile[data-pos="bg"] { transform: translate(100%, 100%) rotate(-360deg); }
.ni-centre-stage[data-state="3"] .ni-centre-tile[data-pos="bd"] { transform: translate(200%, 100%) rotate(360deg); }

/* Boutons de pilotage : pilotage manuel de l'animation par l'utilisateur. */
.ni-centre-controls {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}
.ni-centre-step {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.7rem 1.1rem;
    border: 1.5px solid var(--c-ink);
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-radius: var(--radius);
}
.ni-centre-step:hover {
    background: var(--c-ink);
    color: var(--c-paper);
}
.ni-centre-step.is-active {
    background: var(--c-ink);
    color: var(--c-paper);
}
.ni-centre-step.ni-centre-next {
    border-color: var(--c-accent);
    color: var(--c-accent);
}
.ni-centre-step.ni-centre-next:hover {
    background: var(--c-accent);
    color: var(--c-paper);
}

/* V1.6 (mai 2026) — sur mobile la carte magique paraissait petite.
   Retour client (2e itération) : la faire en PLEINE COLONNE — on neutralise
   complètement le padding du .container, et on reset le max-width du
   .container-narrow parent pour qu'il n'écrase pas la stage. */
@media (max-width: 600px) {
    .ni-centre-anim {
        margin-left:  calc(-1 * clamp(1rem, 4vw, 2.5rem));
        margin-right: calc(-1 * clamp(1rem, 4vw, 2.5rem));
        max-width: none;
        width: 100vw;
    }
    /* La stage occupe maintenant toute la largeur de l'écran. */
    .ni-centre-stage {
        width: 100%;
    }
    .ni-centre-controls {
        padding: 0 clamp(1rem, 4vw, 2.5rem);
        gap: 0.4rem;
        margin-top: var(--sp-2);
    }
    .ni-centre-step {
        font-size: 0.72rem;
        padding: 0.55rem 0.7rem;
        letter-spacing: 0.08em;
    }
}

/* (Note : la règle prefers-reduced-motion qui mettait transition:none ici
   a été retirée — elle pouvait masquer l'animation chez certains utilisateurs
   sans qu'ils sachent que leur OS / navigateur a ce mode activé.) */

/* ──────────────────────────────────────────────────────────────────────
   CARTE INTERACTIVE
   ────────────────────────────────────────────────────────────────────── */
.section-map {
    background: var(--c-ink);
    color: var(--c-paper);
    padding: clamp(3rem, 7vw, 6rem) 0 0;
    overflow: hidden;
}
.section-map .section-head {
    text-align: center;
    margin-bottom: var(--sp-4);
}
.section-map h2 { color: var(--c-paper); }
.section-map .lead { color: var(--c-blue-soft); margin-left: auto; margin-right: auto; }

/* Légende des contrôles de la carte (V1.1) — affiche en clair ce que font
   les curseurs Observable (qui sont actuellement en noir-sur-bleu, peu
   lisibles, tant que Nicolas n'a pas restylé son notebook). */
.map-controls-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-3) auto var(--sp-4);
    max-width: 760px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius);
}
.map-control-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: 0.86rem;
    color: var(--c-blue-soft);
}
.map-control-key {
    font-family: var(--f-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-accent-2);
}
.map-control-desc {
    color: var(--c-blue-soft);
    font-size: 0.82rem;
    opacity: 0.9;
}

.map-frame {
    position: relative;
    width: 100%;
    /* V1.1 : la carte est TOUJOURS carrée — taille max contrainte par le viewport
       (98vw mobile, ~ 90vh sur desktop, plafonnée à 90vmin pour rester carrée). */
    max-width: min(90vh, 90vmin);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: var(--c-blue-deep);
    overflow: hidden;
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--c-blue-deep);
}

/* Shield anti scroll-trap (V1.1)
   Couvre l'iframe par défaut → la molette scrolle la page.
   Au clic, le shield disparaît → la carte devient interactive.
   Au mouseleave de la map-frame, le shield revient.
   Géré dans app.js via [data-map-shield]. */
.map-scroll-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        rgba(26, 35, 126, 0) 0%,
        rgba(26, 35, 126, 0.15) 100%
    );
    color: var(--c-paper);
    text-align: center;
    transition: opacity var(--t-fast) var(--ease-out);
    user-select: none;
}
.map-scroll-shield:hover {
    background: linear-gradient(
        180deg,
        rgba(26, 35, 126, 0.05) 0%,
        rgba(26, 35, 126, 0.30) 100%
    );
}
.map-shield-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    background: rgba(26, 35, 126, 0.78);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: var(--c-paper);
    font-family: var(--f-sans);
    font-size: 0.86rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    border-radius: var(--radius);
}
.map-shield-hint {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    color: var(--c-blue-soft);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
    opacity: 0.85;
}
.map-frame.is-active .map-scroll-shield,
.pierce-frame.is-active .map-scroll-shield {
    opacity: 0;
    pointer-events: none;
}

.map-caption {
    text-align: center;
    color: var(--c-blue-soft);
    font-size: 0.82rem;
    padding: var(--sp-3) var(--sp-3);
    letter-spacing: 0.05em;
    background: var(--c-ink);
}
.map-caption a { color: var(--c-paper); }

.map-note {
    background: var(--c-blue-deep);
    color: var(--c-blue-soft);
    padding: var(--sp-3);
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ──────────────────────────────────────────────────────────────────────
   TRIBUNE — typographique, dépliable
   ────────────────────────────────────────────────────────────────────── */
.section-tribune {
    background: var(--c-bg-2);
    padding: clamp(4rem, 10vw, 8rem) 0;
    position: relative;
    overflow: hidden;
}
.section-tribune::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: clamp(40px, 6vw, 80px);
    background: var(--c-accent);
}

.tribune-eyebrow {
    text-align: center;
    font-family: var(--f-sans);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--c-accent);
    margin: 0 0 var(--sp-4);
}

.tribune-title {
    font-family: var(--f-display);
    font-size: clamp(3rem, 11vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-ink);
    margin: 0 auto var(--sp-4);
    /* pas de max-width — chaque ligne se centre dans le container parent */
}
.tribune-line {
    display: block;
    text-align: center;
}
/* Compensation visuelle ciblée pour la première ligne ("Remplaçons")
   La cédille de Ç a une advance-width métrique inférieure à sa largeur visuelle
   (le pied de la cédille déborde à gauche). Le navigateur centre sur l'advance,
   donc le mot apparaît visuellement décalé à droite. On décale physiquement
   le bloc vers la gauche pour rééquilibrer l'optique. */
.tribune-line:first-child {
    transform: translateX(-0.12em);
}
/* Et un micro-ajustement aussi sur les autres lignes pour cohérence visuelle
   (le M et P initiaux ont aussi des bearings asymétriques de TheBoldFont) */
.tribune-line:not(:first-child) {
    transform: translateX(-0.04em);
}
.tribune-title em {
    font-family: var(--f-italic);
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent);
    text-transform: none;
    letter-spacing: -0.025em;
}

.tribune-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--c-blue);
    font-size: 0.9rem;
    margin: var(--sp-4) auto;
    max-width: 320px;
}
.tribune-rule span {
    flex: 1;
    height: 1px;
    background: var(--c-blue-soft);
}

.tribune-incipit {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.45;
    text-align: center;
    color: var(--c-ink);
    max-width: 38ch;
    margin: 0 auto var(--sp-5);
}

/* V1.5 (mai 2026) — variantes du titre/sous-titre de la tribune selon copy client.
   - Titre compact : typo réduite d'environ 30 % par rapport au titre standard
   - Sous-titre : 2 lignes, plus grosse typo, gras pour "obsolète" */
.tribune-title.tribune-title-compact {
    font-size: clamp(2rem, 7vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
}
.tribune-subtitle {
    /* V1.6 (mai 2026) — retour client : passer la police du sous-titre dans la
       même typo que "Découvrez le planisphère carré" (Fraunces italic),
       au lieu du display gras. */
    font-family: var(--f-italic);
    font-style: italic;
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    line-height: 1.25;
    text-align: center;
    color: var(--c-ink);
    margin: 0 auto var(--sp-3);
    max-width: 28ch;
    font-weight: 500;
}
.tribune-subtitle strong {
    font-weight: 700;
    color: var(--c-accent);
}

/* Bloc déplant — résumé visible, expansion révèle le corps */
.tribune-fold {
    max-width: var(--max-w-tribune);
    margin: var(--sp-5) auto 0;
}

/* Tribune-preview : 3 premiers paragraphes toujours visibles (V1.1)
   Taille augmentée en V1.2 (mai 2026) : 1.0625rem → 1.16rem pour gagner en lisibilité */
.tribune-preview {
    font-size: 1.16rem;
    line-height: 1.78;
    color: var(--c-ink);
    margin: var(--sp-4) 0 0;
}
.tribune-preview p {
    margin: 0 0 var(--sp-3);
    text-align: justify;
    hyphens: auto;
}
.tribune-preview p + p { text-indent: 1.5em; }
.tribune-preview p.no-indent { text-indent: 0; }
/* Fade out doux du dernier paragraphe quand le bloc est replié */
.tribune-preview::after {
    content: "";
    display: none;
}

.tribune-fold-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: var(--sp-4) auto;
    padding: 0.9rem 1.4rem;
    background: var(--c-ink);
    color: var(--c-paper);
    border: none;
    font-family: var(--f-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.tribune-fold-toggle:hover { background: var(--c-accent); }
.tribune-fold-toggle .icon {
    width: 14px;
    height: 14px;
    transition: transform var(--t-med) var(--ease-out);
}
.tribune-fold-toggle[aria-expanded="true"] .icon {
    transform: rotate(45deg);
}

.tribune-fold-toggle-wrapper {
    display: flex;
    justify-content: center;
}

.tribune-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow) var(--ease-out);
}
.tribune-body.is-open {
    max-height: 15000px;
}

.tribune-article {
    font-size: 1.16rem;
    line-height: 1.78;
    color: var(--c-ink);
}
.tribune-article p {
    margin: 0 0 var(--sp-3);
    text-align: justify;
    hyphens: auto;
}
.tribune-article p + p { text-indent: 1.5em; }
.tribune-article p.no-indent,
.tribune-article h3 + p,
.tribune-article blockquote + p {
    text-indent: 0;
}

/* Premier paragraphe en gras (V1.2 — mai 2026) pour donner du poids à l'attaque */
.tribune-lead {
    text-indent: 0 !important;
    font-weight: 700;
}
.drop-cap {
    font-family: var(--f-display);
    font-size: 4.6rem;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.15em -0.05em 0;
    color: var(--c-blue);
    padding-right: 6px;
}

.tribune-sub {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--c-blue);
    margin: var(--sp-5) 0 var(--sp-2);
    text-align: left;
}

.tribune-pull {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1.35;
    color: var(--c-blue);
    margin: var(--sp-5) 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--c-blue-soft);
    border-bottom: 1px solid var(--c-blue-soft);
    text-align: center;
    text-indent: 0;
}

/* V1.5 (mai 2026) — images de la tribune : affichées EN ENTIER (sans rognage).
   On reste dans la largeur du container-tribune (780px) car la tribune-body utilise
   overflow:hidden pour son animation de dépliage, ce qui clip tout débordement.
   width:100% + height:auto garantit l'aspect ratio naturel (pas de crop). */
.tribune-figure {
    margin: var(--sp-5) 0;
    background: var(--c-ink);
}
.tribune-figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.tribune-figure-caption {
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--f-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-blue-soft);
    background: var(--c-ink);
    text-align: center;
}

.tribune-demands {
    list-style: none;
    padding: 0;
    counter-reset: demand;
    margin: var(--sp-4) 0;
}
.tribune-demands li {
    counter-increment: demand;
    position: relative;
    padding: var(--sp-3) 0 var(--sp-3) 4rem;
    border-bottom: 1px solid var(--c-border);
    text-indent: 0 !important;
}
.tribune-demands li:last-child { border-bottom: none; }
.tribune-demands li::before {
    content: counter(demand, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--sp-3);
    font-family: var(--f-display);
    font-size: 1.6rem;
    color: var(--c-accent);
    line-height: 1;
}

.tribune-closing {
    margin-top: var(--sp-5) !important;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    text-align: center !important;
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 1.15rem;
}

/* CTA tribune + signature form */
.tribune-cta {
    max-width: 540px;
    margin: var(--sp-6) auto 0;
    text-align: center;
}
.signature-form {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: var(--sp-4);
    display: grid;
    gap: var(--sp-2);
    text-align: left;
    /* V1.5 (mai 2026) — décalage du scroll pour ne pas masquer le haut du formulaire
       sous le header fixe (~80px) quand on clique sur "Signer la tribune" (#signer). */
    scroll-margin-top: 110px;
}
.signature-form label {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
/* V1.6.2 (mai 2026) — petit suffixe « (facultatif) » discret sur certains labels. */
.signature-form .label-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-ink-soft);
    opacity: 0.65;
    font-size: 0.72rem;
    margin-left: 0.4em;
}
.signature-form input[type="text"],
.signature-form input[type="email"] {
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    font-family: var(--f-sans);
    font-size: 1rem;
    background: var(--c-paper);
    color: var(--c-ink);
    transition: border-color var(--t-fast) var(--ease-out);
}
.signature-form input:focus {
    outline: none;
    border-color: var(--c-blue);
}
.checkbox-line {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--c-ink-soft);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}
.checkbox-line input { margin-top: 0.3rem; accent-color: var(--c-blue); }

.tribune-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
    margin-top: var(--sp-3);
}

/* ──────────────────────────────────────────────────────────────────────
   PRODUITS
   ────────────────────────────────────────────────────────────────────── */
.section-shop { padding-top: clamp(3rem, 8vw, 6rem); }

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
@media (min-width: 760px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}

/* Bloc "Obtenir la carte" sur la home (V1.1) — 2 articles */
.get-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
@media (min-width: 760px) {
    .get-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
.get-grid .product-card {
    text-decoration: none;
    color: var(--c-ink);
}
.get-grid .product-card:hover { color: var(--c-ink); }
.get-grid .res-action {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--sp-2);
    display: inline-block;
}
.get-grid .res-action::after {
    content: " →";
    transition: transform var(--t-fast) var(--ease-out);
    display: inline-block;
}
.get-grid .product-card:hover .res-action { color: var(--c-accent); }
.get-grid .product-card:hover .res-action::after { transform: translateX(4px); }

.product-card {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out),
                border-color var(--t-med) var(--ease-out);
    /* V1.5 (mai 2026) — la carte est cliquable (<a>), on retire le soulignement
       par défaut sur tout le contenu. Seul le .res-action (« Télécharger le PDF »)
       reste souligné, signal visuel du lien. */
    text-decoration: none;
    color: var(--c-ink);
}
.product-card .res-action {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-blue);
    box-shadow: 0 16px 40px rgba(26, 35, 126, 0.08);
}

.product-visual {
    aspect-ratio: 4 / 3;
    background: var(--c-bg-2);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-image) var(--ease-image),
                filter var(--t-image) var(--ease-image);
    will-change: transform;
}
.product-card:hover .product-visual img {
    transform: scale(1.05);
}

.product-body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card h3 {
    font-family: var(--f-display);
    font-size: 1.4rem;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 var(--sp-1);
    color: var(--c-ink);
}
.product-format {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 var(--sp-2);
}
.product-desc {
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-3);
    line-height: 1.5;
    flex: 1;
}
.product-price {
    font-family: var(--f-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--c-blue);
    margin: 0 0 var(--sp-3);
}
.product-price small {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-left: 0.5rem;
}

/* V1.3 — Tailles augmentées sur la page Ressources pour la lisibilité
   (demande client : "nos amis les presbytes"). On garde la hiérarchie
   visuelle : 4 champs majorés du titre aux descriptions. */
/* V1.7 (juin 2026) — encore un cran au-dessus sur les cards Ressources */
#telecharger .product-card h3,
#commander .product-card h3 { font-size: 1.85rem; }
#telecharger .product-format,
#commander .product-format { font-size: 1rem; }
#telecharger .product-desc,
#commander .product-desc { font-size: 1.2rem; line-height: 1.55; color: var(--c-ink); }
#telecharger .res-action,
#commander .res-action { font-size: 1.1rem; }

/* ──────────────────────────────────────────────────────────────────────
   COUNTERS
   ────────────────────────────────────────────────────────────────────── */
.counter-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) 0;
}
@media (min-width: 760px) {
    .counter-block {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    .counter-item + .counter-item {
        border-left: 1px solid var(--c-border);
    }
}
.counter-item { padding: var(--sp-2) var(--sp-3); }
.counter-num {
    font-family: var(--f-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.9;
    color: var(--c-blue);
    margin: 0;
    letter-spacing: -0.02em;
}
.counter-label {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-ink-soft);
    margin: var(--sp-2) 0 0;
}

/* ──────────────────────────────────────────────────────────────────────
   SIGNATAIRES
   ────────────────────────────────────────────────────────────────────── */
.signatories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
}
@media (min-width: 760px) {
    .signatories-grid { grid-template-columns: repeat(4, 1fr); }
}
.signatory {
    background: var(--c-paper);
    padding: var(--sp-3);
    transition: background var(--t-fast) var(--ease-out);
}
.signatory:hover { background: var(--c-bg-2); }
.signatory-name {
    font-family: var(--f-display);
    font-size: 1.05rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    margin: 0 0 0.3rem;
}
.signatory-role {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.3;
}
.signatory-more {
    background: var(--c-blue);
    color: var(--c-paper);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 1.1rem;
}
.signatory-more:hover { background: var(--c-blue-deep); }

/* ──────────────────────────────────────────────────────────────────────
   PRESS / MEDIAS — sélection sur l'accueil
   ────────────────────────────────────────────────────────────────────── */
.press-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
@media (min-width: 760px) {
    .press-strip { grid-template-columns: repeat(3, 1fr); }
}
.press-card {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    padding: var(--sp-3);
    text-decoration: none;
    color: var(--c-ink);
    transition: border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.press-card:hover {
    border-color: var(--c-blue);
    transform: translateY(-2px);
    color: var(--c-ink);
}
.press-outlet {
    font-family: var(--f-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-blue);
    margin: 0;
}
.press-quote {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--c-ink);
    margin: 0;
}
.press-meta {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   APPROFONDIR — projections gallery
   ────────────────────────────────────────────────────────────────────── */
.section-letter {
    font-family: var(--f-display);
    /* V1.7.16 (juin 2026) — finalement en fuchsia (--c-magenta).
       Taille inchangée par rapport à V1.7.15. */
    font-size: clamp(6rem, 13vw, 11rem);
    line-height: 1;
    color: var(--c-magenta);
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.03em;
}

/* V1.7 (juin 2026) — utilitaires pour réduire l'espace entre 2 sections
   sans toucher aux paddings globaux. Utilisé sur Approfondir pour resserrer
   « L'angle mort des cartes » → diaporama, et Vidéo → A. Mandarine. */
.section.section-tight-bottom { padding-bottom: clamp(0.5rem, 2vw, 1.5rem); }
.section.section-tight-top    { padding-top:    clamp(1rem, 3vw, 2.5rem); }

/* V1.7.9 (juin 2026) — séparateur HR pleine largeur (page Approfondir).
   Trait fin discret, sans marge verticale, occupe toute la largeur. */
/* V1.7.12 (juin 2026) — séparateur HR avec FOND BEIGE pour combler le vide
   blanc entre deux sections .section-alt (retour client : on voyait le fond
   du body apparaître). Le trait fin est dessiné par le border-top du HR ;
   le padding-top fournit l'espace coloré entre carrousel et trait. */
hr.section-divider {
    border: 0;
    border-top: 1px solid var(--c-border, rgba(26, 35, 126, 0.18));
    height: 0;
    margin: 0;
    width: 100%;
    background: var(--c-bg-2);
}

/* V1.7.10 (juin 2026) — neutraliser les marges fantômes qui contournent
   les paddings tight des sections. */
.section.section-tight-bottom .section-head { margin-bottom: 0; }
.section.section-tight-top .slider          { margin-top: 0; }

/* V1.7.11 (juin 2026) — variante "pushed" : on espace via padding-top
   plutôt que margin-top pour que la zone d'espacement soit ELLE AUSSI
   beige (sinon on voyait le fond du body entre les 2 sections). */
hr.section-divider.section-divider-pushed {
    padding-top: clamp(2rem, 5vw, 4rem);
    box-sizing: content-box;
}

/* V1.7.13 (juin 2026) — sur-titres « 1. », « 2. », etc. agrandis sur
   Approfondir (retour client). 0.72rem → 1.1rem, letter-spacing un peu
   moins serré pour rester lisible à cette taille.
   V1.7.17 — étendu à .page-ressources (« A · Télécharger », etc.). */
.page-approfondir .eyebrow,
.page-ressources .eyebrow {
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    letter-spacing: 0.14em;
}

/* V1.7 (juin 2026) — paragraphe « intro bleu » de la page Approfondir.
   Retour client : « colonne large + bleue » pour les 1ers § de A·B·C·D.
   - libère le max-width 56ch de .lead
   - couleur bleu cobalt
   - légère emphase
   Spécifique .page-approfondir pour ne rien casser ailleurs. */
.page-approfondir .intro-blue,
.page-approfondir p.lead.intro-blue,
.page-approfondir .container-narrow .intro-blue,
.page-approfondir .container-narrow p.lead.intro-blue {
    color: var(--c-blue);
    font-size: clamp(1.15rem, 1.65vw, 1.35rem);
    line-height: 1.5;
    font-weight: 500;
    max-width: none;
    margin: 0 0 var(--sp-4);
}
.page-approfondir .intro-blue strong { color: var(--c-blue); }

.projection-row {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--sp-3));
    padding: var(--sp-3) var(--sp-3) var(--sp-4); /* place pour la scrollbar épaisse */
    /* Firefox */
    scrollbar-width: auto;
    scrollbar-color: var(--c-blue) var(--c-bg-2);
}
.projection-row::-webkit-scrollbar {
    height: 14px;
}
.projection-row::-webkit-scrollbar-track {
    background: var(--c-bg-2);
    border-radius: 7px;
    margin: 0 var(--sp-3);
}
.projection-row::-webkit-scrollbar-thumb {
    background: var(--c-blue);
    border-radius: 7px;
    border: 3px solid var(--c-bg-2);
    background-clip: padding-box;
}
.projection-row::-webkit-scrollbar-thumb:hover {
    background: var(--c-accent);
    background-clip: padding-box;
    border: 3px solid var(--c-bg-2);
}
.projection-card {
    flex: 0 0 220px;
    text-align: center;
    scroll-snap-align: center;
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    padding: var(--sp-3);
    transition: border-color var(--t-fast) var(--ease-out);
}
.projection-card:hover { border-color: var(--c-blue); }
.projection-card.is-highlighted {
    background: var(--c-blue);
    color: var(--c-paper);
    border-color: var(--c-blue);
}
.projection-card.is-highlighted .projection-name { color: var(--c-paper); }
.projection-card.is-highlighted .projection-meta { color: var(--c-blue-soft); }
.projection-card.is-highlighted svg { color: var(--c-paper); }

.projection-card svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    color: var(--c-blue);
}
.projection-name {
    font-family: var(--f-display);
    font-size: 1.05rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-ink);
    margin: var(--sp-2) 0 0.3rem;
}
.projection-meta {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-ink-soft);
    margin: 0;
}

.scroll-hint {
    text-align: center;
    font-family: var(--f-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-ink-soft);
    margin-top: var(--sp-2);
}

/* POV grid */
.pov-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
@media (min-width: 760px) {
    .pov-grid { grid-template-columns: repeat(4, 1fr); }
}
.pov-item {
    text-align: center;
    padding: var(--sp-3);
    background: var(--c-paper);
    border: 1px solid var(--c-border);
}
.pov-item svg {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--sp-2);
    color: var(--c-blue);
}
.pov-item h3 {
    font-family: var(--f-display);
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0 0 var(--sp-1);
}
.pov-item p { font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* Timeline */
.timeline {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0;
}
.timeline li {
    position: relative;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
    border-left: 2px solid var(--c-blue-soft);
    margin-left: 1rem;
}
.timeline li::before {
    content: "";
    position: absolute;
    left: -8px;
    top: var(--sp-4);
    width: 14px;
    height: 14px;
    background: var(--c-blue);
    border: 3px solid var(--c-bg-2);
    border-radius: 50%;
}
.timeline-year {
    font-family: var(--f-display);
    font-size: 1.4rem;
    color: var(--c-accent);
    margin: 0 0 0.3rem;
    line-height: 1;
}
.timeline-event { margin: 0; line-height: 1.5; }

/* Testimonials profs */
.testi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
@media (min-width: 760px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
.testi-card {
    background: var(--c-paper);
    border-left: 3px solid var(--c-accent);
    padding: var(--sp-3);
}
.testi-quote {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--c-ink);
    margin: 0 0 var(--sp-2);
}
.testi-author {
    font-family: var(--f-sans);
    font-size: 0.82rem;
    color: var(--c-ink-soft);
    margin: 0;
}
.testi-author strong { color: var(--c-ink); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────
   RESSOURCES — cards
   ────────────────────────────────────────────────────────────────────── */
.res-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
@media (min-width: 760px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .res-grid.three-up { grid-template-columns: repeat(3, 1fr); } }

.res-card {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    padding: var(--sp-4);
    text-decoration: none;
    color: var(--c-ink);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    position: relative;
}
.res-card:hover {
    border-color: var(--c-blue);
    transform: translateY(-2px);
    color: var(--c-ink);
}
.res-card .tag {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-accent);
    margin: 0;
}
.res-card h3 {
    font-family: var(--f-display);
    font-size: 1.2rem;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
}
.res-card p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    margin: 0;
    flex: 1;
}
.res-card .res-action {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--sp-2);
}
.res-card .res-action::after {
    content: " →";
    transition: transform var(--t-fast) var(--ease-out);
    display: inline-block;
}
.res-card:hover .res-action { color: var(--c-accent); }
.res-card:hover .res-action::after { transform: translateX(4px); }

.code-block {
    background: var(--c-ink);
    color: var(--c-blue-soft);
    padding: var(--sp-3);
    margin: var(--sp-3) 0;
    overflow-x: auto;
    font-family: var(--f-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    border-radius: var(--radius);
}

/* ──────────────────────────────────────────────────────────────────────
   MEDIAS PAGE — table éditoriale
   ────────────────────────────────────────────────────────────────────── */
.media-section + .media-section {
    margin-top: var(--sp-5);
}
.media-section h2 {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    text-transform: uppercase;
    line-height: 1;
    margin: 0 auto var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--c-ink);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 480px;
}
.media-section h2 .count {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--c-ink-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.media-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.media-list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
@media (min-width: 760px) {
    .media-list li {
        grid-template-columns: 200px 1fr 120px;
        gap: var(--sp-3);
        align-items: baseline;
    }
}
.media-outlet {
    font-family: var(--f-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    color: var(--c-blue);
    margin: 0;
    line-height: 1;
}
.media-quote {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-ink);
    margin: 0;
}
.media-date {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.media-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--c-accent);
}
.media-link:hover { color: var(--c-ink); }

/* ──────────────────────────────────────────────────────────────────────
   ACTUS PAGE — chronologie cards
   ────────────────────────────────────────────────────────────────────── */
.actu-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: var(--sp-3) 0 var(--sp-4);
}
.actu-filter {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-ink-soft);
    font-family: var(--f-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    border-radius: 999px;
}
.actu-filter.is-active,
.actu-filter:hover {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

.actu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
@media (min-width: 760px) {
    .actu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .actu-grid { grid-template-columns: repeat(3, 1fr); }
}

.actu-card {
    background: var(--c-paper);
    border: 1px solid var(--c-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-med) var(--ease-out),
                border-color var(--t-med) var(--ease-out);
}
.actu-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-blue);
}
.actu-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-bg-2);
}
.actu-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-image) var(--ease-image),
                filter var(--t-image) var(--ease-image);
    will-change: transform;
}
.actu-card:hover .actu-card-img img {
    transform: scale(1.05);
}
.actu-card-body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1;
}
.actu-card-cat {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
}
.actu-card h3 {
    font-family: var(--f-display);
    font-size: 1.3rem;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}
.actu-card-meta {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-ink-soft);
    margin: 0;
}
.actu-card-desc {
    /* V1.2 (mai 2026) — taille augmentée à la demande client */
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--c-ink);
    margin: var(--sp-1) 0 0;
    flex: 1;
}

/* Card cliquable : c'est un bouton, pas un <a> */
.actu-card { cursor: pointer; border: 1px solid var(--c-border); }
.actu-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* ────── ACTU MODAL ────── */
.actu-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem) clamp(0.5rem, 2vw, 1.5rem);
    overflow-y: auto;
    background: rgba(26, 35, 126, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-out);
}
.actu-modal.is-open {
    display: flex;
    opacity: 1;
}
.actu-modal[aria-hidden="false"] { display: flex; }

.actu-modal-content {
    background: var(--c-paper);
    width: 100%;
    max-width: 760px;
    margin: auto;
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: transform var(--t-med) var(--ease-out);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--c-ink);
}
.actu-modal.is-open .actu-modal-content {
    transform: translateY(0) scale(1);
}

.actu-modal-close {
    position: absolute;
    top: clamp(0.6rem, 1.5vw, 1rem);
    right: clamp(0.6rem, 1.5vw, 1rem);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(26, 35, 126, 0.85);
    color: var(--c-paper);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
.actu-modal-close:hover {
    background: var(--c-accent);
    transform: rotate(90deg);
}
.actu-modal-close svg { width: 18px; height: 18px; }

.actu-modal-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-bg-2);
}
.actu-modal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.actu-modal-img.no-image {
    background: var(--c-blue);
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 1;
}
.actu-modal-img.no-image::after {
    content: "";
    width: 60px; height: 60px;
    border: 2px solid var(--c-paper);
    transform: rotate(45deg);
}

.actu-modal-body {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}
.actu-modal-cat {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 var(--sp-2);
}
.actu-modal-title {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--c-ink);
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.02em;
}
.actu-modal-meta {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.actu-modal-content-body p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 var(--sp-3);
    color: var(--c-ink);
}
.actu-modal-content-body p:first-of-type {
    font-size: 1.1rem;
    color: var(--c-ink);
    font-family: var(--f-italic);
    font-style: italic;
}
.actu-modal-content-body a {
    color: var(--c-blue);
    font-weight: 600;
}

body.actu-modal-open {
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   SHARE BUTTONS
   ────────────────────────────────────────────────────────────────────── */
.share-block {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    flex-wrap: wrap;
}

/* Variante tribune : centré, sous le bouton "Signer la tribune" */
.share-block-tribune {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    margin-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.share-block-tribune .share-label {
    margin: 0 0 var(--sp-1);
    color: var(--c-ink-soft);
}
.share-block-tribune .share-actions {
    justify-content: center;
}
.share-label {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-ink-soft);
    margin: 0;
}
.share-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.share-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-ink);
    text-decoration: none;
    border-radius: 50%;
    transition: all var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.share-btn:hover {
    background: var(--c-blue);
    color: var(--c-paper);
    border-color: var(--c-blue);
    transform: translateY(-2px);
}
.share-btn svg { width: 16px; height: 16px; }

/* V1.5 (mai 2026) — variante agrandie demandée client pour le partage de la tribune */
.share-block-lg {
    margin-top: var(--sp-4);
}
.share-block-lg .share-actions {
    gap: var(--sp-3);
}
.share-block-lg .share-btn {
    width: 52px;
    height: 52px;
}
.share-block-lg .share-btn svg { width: 24px; height: 24px; }
.share-sublabel {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    margin-top: 0.2em;
}

/* V1.5 (mai 2026) — variante "texte" de la lightbox (liste signataires).
   Réutilise .lightbox (overlay, fermeture, transitions) mais affiche un
   contenu type article (pas de slider d'images). */
.lightbox.lightbox-text .lightbox-text-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 5vw, 4rem) var(--sp-3);
    overflow-y: auto;
}
.lightbox.lightbox-text .lightbox-text-content {
    background: var(--c-paper);
    color: var(--c-ink);
    max-width: 720px;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-height: 80vh;
    overflow-y: auto;
}
.signatures-count {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-3);
}
.signatures-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3);
}
@media (max-width: 600px) {
    .signatures-list { grid-template-columns: 1fr; }
}
.signature-item {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-border);
}
.signature-item-name {
    /* V1.7.20 (juin 2026) — retour client : pas la typo de titre,
       on passe sur la sans (Barlow) comme le rôle. */
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0;
    line-height: 1.3;
}
.signature-item-role {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    margin: 0.2em 0 0;
}

/* Variante claire — pour fonds sombres (carte, footer, sections-blue) */
.section-map .share-btn,
.section-dark .share-btn,
.section-blue .share-btn {
    color: var(--c-paper);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
}
.section-map .share-btn:hover,
.section-dark .share-btn:hover,
.section-blue .share-btn:hover {
    background: var(--c-paper);
    color: var(--c-ink);
    border-color: var(--c-paper);
}

/* Toast feedback (copy link) */
.toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--c-ink);
    color: var(--c-paper);
    padding: 0.8rem 1.4rem;
    font-family: var(--f-sans);
    font-size: 0.85rem;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(26, 35, 126, 0.2);
}
.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────────────────────────────────────
   LIGHTBOX "Trouver mes repères" (V1.2 — mai 2026)
   Slider plein écran avec navigation clavier, swipe et compteur.
   ────────────────────────────────────────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(26, 35, 126, 0.96);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out),
                visibility 0s linear var(--t-med);
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--t-med) var(--ease-out),
                visibility 0s linear 0s;
}

.lightbox-close {
    position: absolute;
    top: clamp(1rem, 2.5vw, 2rem);
    right: clamp(1rem, 2.5vw, 2rem);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(251, 249, 244, 0.35);
    background: rgba(0, 0, 0, 0.2);
    color: var(--c-paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    z-index: 2;
}
.lightbox-close:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: rotate(90deg);
}
.lightbox-close svg { width: 22px; height: 22px; }

.lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    min-height: 0;
    position: relative;
}

.lightbox-slider {
    flex: 1;
    position: relative;
    height: 100%;
    max-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out);
}
.lightbox-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
.lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.lightbox-nav {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(251, 249, 244, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: var(--c-paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    z-index: 2;
}
.lightbox-nav:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.lightbox-prev:hover { transform: translateX(-3px); }
.lightbox-next:hover { transform: translateX(3px); }
.lightbox-nav svg { width: 26px; height: 26px; }

.lightbox-footer {
    text-align: center;
    color: var(--c-paper);
    padding: var(--sp-2) 0 var(--sp-1);
    flex-shrink: 0;
}
.lightbox-counter {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-blue-soft);
    margin: 0 0 0.4rem;
}
.lightbox-caption {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: var(--c-paper);
    margin: 0;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* body lock quand lightbox ouverte */
body.has-lightbox-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .lightbox-nav {
        width: 44px;
        height: 44px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .lightbox-prev { left: 0.4rem; }
    .lightbox-next { right: 0.4rem; }
    .lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
    .lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
    .lightbox-slider {
        max-height: calc(100vh - 160px);
    }
}

/* ──────────────────────────────────────────────────────────────────────
   FOOTER simplifié — RS en logos
   ────────────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--c-ink);
    color: var(--c-blue-soft);
    padding: clamp(3rem, 6vw, 5rem) 0 var(--sp-3);
    margin-top: var(--sp-7);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 140px);
    height: 2px;
    background: var(--c-accent);
}
.site-footer a { color: var(--c-blue-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-paper); }

.footer-tagline {
    text-align: center;
    margin: 0 auto var(--sp-5);
    max-width: 24ch;
}
.footer-tagline-text {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--c-paper);
    margin: 0 0 var(--sp-2);
}
.footer-tagline-text em {
    font-family: var(--f-italic);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--c-blue-soft);
}
.footer-tagline-sub {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: var(--c-blue-soft);
    margin: 0;
    line-height: 1.5;
}

/* Footer scindé en 2 colonnes (V1.1) — gauche 1/3 (punchline + RS),
   droite 2/3 (Qui sommes-nous ?). Mobile : empilé. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-bottom: var(--sp-4);
    align-items: start;
}
@media (min-width: 760px) {
    .footer-grid {
        grid-template-columns: 1fr 2fr;
        gap: clamp(2rem, 6vw, 5rem);
    }
}
.footer-col-left .footer-tagline-text {
    text-align: left;
    margin-bottom: var(--sp-3);
    max-width: none;
}
.footer-col-left .footer-social {
    justify-content: flex-start;
    margin: 0;
}
@media (max-width: 759px) {
    .footer-col-left {
        text-align: center;
    }
    .footer-col-left .footer-tagline-text { text-align: center; }
    .footer-col-left .footer-social { justify-content: center; }
}

.footer-col-right {
    color: var(--c-blue-soft);
}
.footer-about-eyebrow {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-paper);
    margin: 0 0 var(--sp-2);
}
.footer-about-eyebrow::before {
    content: "▣";
    color: var(--c-accent);
    margin-right: 0.5em;
    font-size: 0.85em;
}
.footer-about-text {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-blue-soft);
    margin: 0 0 var(--sp-3);
    max-width: 60ch;
}
.footer-about-meta {
    font-family: var(--f-sans);
    font-size: 0.82rem;
    color: var(--c-blue-soft);
    margin: 0;
    line-height: 1.5;
    opacity: 0.85;
}
.footer-about-meta em {
    font-family: var(--f-italic);
    font-style: italic;
    color: var(--c-paper);
}
.footer-about-contact {
    margin: var(--sp-3) 0 0;
    font-family: var(--f-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--c-blue-soft);
}
.footer-about-contact a {
    color: var(--c-paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-about-contact a:hover {
    color: var(--c-accent);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0;
}
.footer-social a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: all var(--t-fast) var(--ease-out);
}
.footer-social a:hover {
    background: var(--c-paper);
    border-color: var(--c-paper);
    color: var(--c-ink);
    transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }

/* V1.2 (mai 2026) — variante agrandie des icônes RS, utilisée dans la colonne gauche du footer */
.footer-social-lg { gap: var(--sp-3); }
.footer-social-lg a {
    width: 54px;
    height: 54px;
}
.footer-social-lg svg { width: 24px; height: 24px; }

/* Logo CNRS officiel dans la colonne "Qui sommes-nous ?" — le PNG est déjà
   en blanc sur fond bleu CNRS, donc pas de filtre. */
.footer-cnrs {
    margin: var(--sp-3) 0 var(--sp-4);
}
.footer-cnrs-logo {
    display: block;
    width: auto;
    height: 64px;
    max-width: 64px;
    border-radius: 8px;
}

/* Sous-titre "Contact" : même style que le eyebrow "Qui sommes-nous ?" mais
   avec un peu plus d'air au-dessus pour bien séparer les deux blocs. */
.footer-about-eyebrow-contact {
    margin-top: var(--sp-4);
}

.footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: var(--sp-3) 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-family: var(--f-sans);
    font-size: 0.78rem;
    color: rgba(184, 199, 223, 0.7);
}
.footer-bottom p { margin: 0; }
.footer-credits {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--c-blue);
    color: var(--c-paper);
    text-decoration: none;
    border: none;
    cursor: pointer;
    z-index: 80;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all var(--t-med) var(--ease-out);
    box-shadow: 0 8px 24px rgba(26, 35, 126, 0.18);
    border-radius: 50%;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--c-accent);
    transform: translateY(-3px);
}
.back-to-top svg { width: 18px; height: 18px; }

/* ──────────────────────────────────────────────────────────────────────
   REVEAL ANIMATIONS — JS toggle .is-visible
   ────────────────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

.reveal-clip {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease-out);
}
.reveal-clip.is-visible {
    clip-path: inset(0 0 0 0);
}

/* Page loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--c-ink);
    display: grid;
    place-items: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.page-loader-mark {
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--c-paper);
    position: relative;
    animation: loader-rotate 1.4s var(--ease-in-out) infinite;
}
.page-loader-mark::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--c-paper);
}
@keyframes loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

/* ──────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
   ────────────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    .reveal-clip { clip-path: none; }
    .hero-bg-img { transform: none; }
    /* Exception : l'animation pédagogique "Ni centre, ni périphérie" reste
       animée — c'est un élément central du message du site, pas un effet
       de décoration. */
    .ni-centre-tile {
        transition-duration: 1.8s !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   FOLDABLES (V1.6.2, mai 2026)
   <details> / <summary> stylés — utilisés pour les 4 sous-blocs techniques
   de la page Ressources (SIG, D3, Magrit, graphistes). Permet d'éviter
   d'encombrer la page quand les textes longs arriveront.
   ────────────────────────────────────────────────────────────────────── */
.foldable-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.foldable {
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-paper);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.foldable[open] {
    border-color: var(--c-blue);
    box-shadow: 0 1px 0 var(--c-blue-soft);
}
.foldable > summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--sp-2);
    padding: clamp(0.9rem, 2vw, 1.3rem) clamp(1rem, 3vw, 1.6rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--t-fast) var(--ease-out);
}
.foldable > summary::-webkit-details-marker { display: none; }
.foldable > summary:hover { background: var(--c-bg-2); }
.foldable > summary:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: -2px;
}
.foldable-title {
    font-family: var(--f-display);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--c-ink);
}
.foldable-hint {
    font-family: var(--f-sans);
    font-size: 0.92rem;
    color: var(--c-ink-soft);
    font-style: italic;
}
.foldable-chevron {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--c-blue);
    line-height: 1;
    transition: transform var(--t-fast) var(--ease-out);
    width: 1.2em;
    text-align: center;
}
.foldable[open] .foldable-chevron {
    transform: rotate(45deg); /* le « + » devient « × » */
}
.foldable-body {
    padding: 0 clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem);
    border-top: 1px dashed var(--c-border);
    padding-top: clamp(0.8rem, 2vw, 1.2rem);
}
.foldable-body > p:first-child { margin-top: 0; }
.foldable-body > *:last-child  { margin-bottom: 0; }

/* Sur très petit écran : on bascule le hint sous le titre pour gagner en lisibilité. */
@media (max-width: 600px) {
    .foldable > summary {
        grid-template-columns: 1fr auto;
        row-gap: 0.3rem;
    }
    .foldable-hint {
        grid-column: 1 / 2;
    }
    .foldable-chevron {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   UTILITAIRES
   ────────────────────────────────────────────────────────────────────── */
.sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-4) auto;
    max-width: 280px;
    color: var(--c-blue);
    font-size: 0.85rem;
}
.sep::before, .sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-blue-soft);
}

.placeholder-note {
    background: var(--c-bg-2);
    border-left: 3px solid var(--c-blue-soft);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-ink-soft);
    font-style: italic;
    font-size: 0.88rem;
    margin: var(--sp-3) 0;
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION-HEAD — centrage VRAI sur la page (flex column align-items)
   ────────────────────────────────────────────────────────────────────── */
.section-head {
    margin-bottom: var(--sp-4);
}
.section-head.center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-head.center > * {
    max-width: 100%;
}
.section-head:not(.center) .lead {
    margin-left: 0;
    margin-right: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   FIX MOBILE — hero-scroll superposé aux CTA sur petits écrans
   ────────────────────────────�

/* ──────────────────────────────────────────────────────────────────────
   DIAPORAMA PROJECTIONS — section comparaison visuelle (approfondir.html)
   ────────────────────────────────────────────────────────────────────── */
.slider {
    --slider-radius: var(--radius-lg, 6px);
    --slider-btn-size: 44px;
    position: relative;
    max-width: 880px;
    margin: var(--sp-4) auto 0;
    outline: none;
}
.slider:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 8px;
    border-radius: 4px;
}

.slider-stage {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.slider-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--slider-radius);
    /* V1.1 : fond blanc pur — les images du diaporama sont sur fond blanc */
    background: #ffffff;
    box-shadow: 0 1px 0 var(--c-border), 0 18px 40px -28px rgba(26, 35, 126, 0.35);
}

.slider-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* V1.3 — Variante "instant" : cut sec, aucune transition entre images.
   Demandé pour le diaporama "La carte infinie" : on veut la sensation
   qu'on tourne les pages d'un PDF (zéro effet, seul le cadre semble bouger). */
.slider-instant .slider-track {
    transition: none;
}

.slider-slide {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: var(--sp-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}
.slider-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 560px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Flèches prev / next — pastilles bleu marine, hover magenta */
.slider-btn {
    flex: 0 0 var(--slider-btn-size);
    width: var(--slider-btn-size);
    height: var(--slider-btn-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1.5px solid var(--c-blue-deep);
    background: var(--c-paper);
    color: var(--c-blue-deep);
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.slider-btn:hover,
.slider-btn:focus-visible {
    background: var(--c-blue-deep);
    color: var(--c-paper);
    border-color: var(--c-blue-deep);
    outline: none;
}
.slider-btn:active {
    transform: scale(0.94);
}
.slider-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.slider-btn svg {
    width: 22px;
    height: 22px;
}

/* Légende active sous l'image */
.slider-caption {
    margin: var(--sp-3) auto 0;
    max-width: 720px;
    text-align: center;
    color: var(--c-ink-soft);
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    line-height: 1.5;
    font-style: italic;
    min-height: 3em;
}

/* Bandeau de contrôles : compteur + dots */
.slider-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.slider-counter {
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-prune);
}
.slider-counter [data-slider-current] {
    color: var(--c-magenta);
    font-weight: 700;
}

.slider-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1.5px solid var(--c-blue-deep);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.slider-dot:hover,
.slider-dot:focus-visible {
    background: var(--c-blue-mid);
    border-color: var(--c-blue-mid);
    outline: none;
}
.slider-dot.is-active {
    background: var(--c-magenta);
    border-color: var(--c-magenta);
    transform: scale(1.2);
}

/* Mobile : flèches plus petites, image plus haute, légende collée */
@media (max-width: 640px) {
    .slider {
        --slider-btn-size: 38px;
    }
    .slider-stage {
        gap: 6px;
    }
    .slider-slide {
        padding: 6px;
    }
    .slider-slide img {
        max-height: 70vh;
    }
    .slider-btn svg {
        width: 18px;
        height: 18px;
    }
    .slider-caption {
        font-size: 0.95rem;
        margin-top: var(--sp-2);
        min-height: 4.5em;
    }
    .slider-dot {
        width: 9px;
        height: 9px;
    }
}

/* Préfère les animations réduites — bascule de transform plutôt qu'une transition douce */
@media (prefers-reduced-motion: reduce) {
    .slider-track {
        transition: none;
    }
    .slider-btn,
    .slider-dot {
        transition: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   APPROFONDIR — composants ajoutés en V1.1 (mai 2026)
   ────────────────────────────────────────────────────────────────────── */

/* Vidéo YouTube — large, centrée, ratio 16:9 préservé, pas de crop. */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: var(--sp-4) auto 0;
    aspect-ratio: 16 / 9;
    background: var(--c-ink);
    box-shadow: 0 24px 60px -28px rgba(26, 35, 126, 0.5);
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Image "mandarine" sous la section A — grand format, centrée, sur fond doux */
.orange-figure {
    margin: var(--sp-5) auto 0;
    max-width: 1100px;
    background: #ffffff;
    padding: clamp(1rem, 3vw, 2.5rem);
    box-shadow: 0 24px 60px -32px rgba(26, 35, 126, 0.35);
}
.orange-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Section D — "1ère carte du monde en VO sous-titrée" (V1.3, mai 2026) */
.vo-figure {
    margin: var(--sp-4) auto 0;
    max-width: 1100px;
    background: #ffffff;
    padding: clamp(1rem, 3vw, 2.5rem);
    box-shadow: 0 24px 60px -32px rgba(26, 35, 126, 0.35);
}
.vo-figure img {
    display: block;
    width: 100%;
    height: auto;
}
/* Mise en exergue fuchsia pour "Bonjour + phonétique + Nom de la langue" */
.vo-pink {
    color: var(--c-magenta-100);
    font-weight: 600;
}

/* Carte interactive Observable — Section B
   - cadre carré strict (aspect-ratio 1/1)
   - les contrôles de l'embed Observable apparaissent en BAS de la cellule "map"
     dans l'iframe ; on veut centrer sur la map et masquer la barre de contrôles
     verticale. On scrolle l'iframe pour montrer la zone "carte" et on ajoute
     une bande haute négative + clip pour cadrer juste la carte.
   - shield anti scroll-trap : la molette scrolle TOUJOURS la page, un clic
     active l'interaction. */
.pierce-explorer {
    max-width: 720px;
    margin: var(--sp-4) auto 0;
}
.pierce-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--c-ink);
    box-shadow: 0 24px 60px -28px rgba(26, 35, 126, 0.5);
}
.pierce-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.pierce-iframe {
    /* L'iframe Observable contient successivement : sliders, boutons, map.
       En agrandissant la hauteur de l'iframe et en la décalant vers le haut,
       on isole visuellement la zone "map" dans le cadre carré. */
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: calc(100% + 240px);
    border: 0;
    display: block;
    background: var(--c-ink);
}
.pierce-help {
    margin-top: var(--sp-3);
    text-align: center;
    font-family: var(--f-sans);
    font-size: 0.88rem;
    color: var(--c-ink-soft);
    line-height: 1.6;
}
.pierce-help strong {
    color: var(--c-blue);
    font-weight: 600;
}

/* Démo "cadre glissant" embarquée en iframe (Section C) */
.cadre-glissant-frame {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: var(--sp-4) auto 0;
    aspect-ratio: 16 / 10;
    background: #0a0e1f;
    box-shadow: 0 24px 60px -28px rgba(26, 35, 126, 0.5);
    overflow: hidden;
}
.cadre-glissant-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 700px) {
    .cadre-glissant-frame { aspect-ratio: 4 / 5; }
    .pierce-explorer { max-width: 100%; }
}