/*
 * site.css : la feuille de style unique du prototype (réunie le 06/10/2026).
 *
 * Jusqu'au 06/10, chaque page chargeait ses feuilles (tokens, base, composants, 39 feuilles de blocs,
 * une par page, des <style> dans trois pages). Elles sont ici, dans cet ordre, qui est celui de la cascade :
 * à spécificité égale, la règle écrite plus bas l'emporte.
 *
 *   1. VARIABLES ET POLICES
 *   2. SOCLE : RESET, NAVIGATION, MECANIQUE DE LA FRISE
 *   3. FRISE : COMPOSANTS COMMUNS (titres, dates, cartes, images, ouvertures, pied)
 *   4. FRISE : LES 39 BLOCS, DANS L'ORDRE
 *   5. ACCUEIL : EN-TETE (vidéo, titre, banderole des actualités)
 *   6. ACCUEIL : SECTIONS
 *   7. VISION ALTERNATIVE : LA CONSTELLATION
 *   8. VISION ALTERNATIVE : FICHE D'UN THEME
 *   9. ALLIANCE
 *   10. PRESSE
 *   11. RESSOURCES
 *   12. CONTACT
 *   13. CREDITS
 *   14. FICHE D'UN MOMENT CLE
 *   15. PIED DE PAGE DES PAGES (sauf la frise)
 *   16. INTRO 3D (essai, page non livrée)
 *   17. ÉCHELLE DE TEXTE SUR TÉLÉPHONE (pages, hors frise)
 *
 * Règles de la feuille :
 * - Chaque page a ses propres noms de classes. Quand un nom sert sur plusieurs pages (titre surligné,
 *   en-tête, bouton de fermeture), la règle commence par la racine de sa page : voir « Portée » en tête
 *   de chaque section. Chargée partout, une règle de page ne touche donc pas les autres pages.
 * - Une règle nouvelle va dans la section de sa page, ou dans la section 2 si elle sert partout.
 * - Frise, sur ordinateur : UNE seule échelle, --px-h (1 px de la maquette à l'échelle de la hauteur de
 *   l'écran), pour toutes les mesures, en largeur comme en hauteur. Mélanger deux échelles faisait bouger
 *   titres, cartes et photos les uns par rapport aux autres selon la forme de l'écran (06/10).
 * - Les url() sont relatives à ce fichier (../fonts/, ../img/) : il reste dans assets/css/.
 * - Aucun @import, aucune police externe : Bugrino et Geist sont servies par le site (section 1).
 * - Dans WordPress, cette feuille sera servie minifiée.
 */

/* ==========================================================================
   1. VARIABLES ET POLICES
   Source : tokens.css
   ========================================================================== */

/* Section 1 (ancienne feuille tokens.css, réunie dans site.css le 06/10) : les valeurs de la maquette Figma "FINALE - Marais de Biestebroeck"
   (fichier yB52NWcICD9T4yR0vkROEU, relevees le 28/09/2026 par le connecteur Figma :
   variables du fichier, puis mesures des calques de la frame "Contexte & Histoire").
   C'est LA section a modifier pour changer une couleur, une police ou une taille.
   En tete de la feuille unique ; rien d'autre ne redefinit ces variables.
   Le nom Figma de chaque valeur est rappele en commentaire. */

/* Bugrino Bold : la police de titre, achetee par Emmanuel (licence web).
   Une seule graisse, un seul fichier woff2, servi depuis le site : aucun appel externe. */
@font-face {
    font-family: "Bugrino";
    src: url("../fonts/Bugrino-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Geist : la police de texte de la maquette (Vercel, licence libre SIL OFL, voir
   assets/fonts/LICENCE-Geist.txt). Police variable : un seul fichier pour toutes
   les graisses ; la maquette utilise Medium (500) et SemiBold (600). */
@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Couleurs (variables Figma : Cream, Brown, Brown-light, Brown-opacity, Yellow, Red, Blue) */
    --creme: #fffdeb;                       /* fond des pages et des cartes */
    --creme-survol: #ece8d6;                /* le creme assombri : fond des cartes au survol (accueil, fou-du-bus) */
    --brun: #3f2616;                        /* texte, surlignage des titres, fond du chapitre 02 */
    --brun-clair: #c6bdac;                  /* fond du chapitre 01 */
    --brun-voile: rgba(63, 38, 22, 0.5);    /* voile brun (fond de la flèche des cartes) */
    /* LA couleur des bordures et des traits sur fond clair : le brun à 25 %, celle de la page Ressources
       (choix d'Emmanuel du 06/10). Une bordure nouvelle prend var(--bordure). */
    --bordure: color-mix(in srgb, var(--brun) 25%, transparent);
    --jaune: #dffe40;                       /* dates, survol, fond du chapitre 05 */
    --taupe: #9f9281;                       /* survol des liens de la navigation (fou-du-bus) : un trait, pas un texte */
    /* Le texte secondaire (adresses, intitulés, métadonnées, types, coordonnées) : brun à 65 %, opaque, 4,57:1 sur le
       crème (décision du 08/10, point 24 : le brun à 50 % de la maquette, 2,97:1, ne sert plus qu'aux traits) */
    --texte-secondaire: #827161;
    --rouge: #d92e56;                       /* fond du chapitre 03 ; #e7315c dans la maquette, foncé de 6 % le 08/10
                                               (point 23) : le menu crème de l'ouverture 03 passe de 4,11:1 à 4,58:1 */
    --bleu: #50c4ed;                        /* fond du chapitre 04 */

    /* Polices */
    --font-display: "Bugrino", system-ui, sans-serif;
    --font-texte: "Geist", system-ui, sans-serif;
    --graisse-texte: 500;                   /* Geist Medium : corps, navigation */
    --graisse-titre: 600;                   /* Geist SemiBold : cartes, meta, H1 */

    /* Tailles et interlignages (variables Figma Display1, Display2, H1, Subheading, Body, Meta) */
    --t-display-1: 128px;  --lh-display-1: 110px;   /* titres de chapitre : "01 Contexte" */
    --t-display-2: 64px;   --lh-display-2: 60px;    /* titres et dates des blocs */
    --t-mot-symbole: 160px; --lh-mot-symbole: 112px; /* "Marais de Biestebroeck" du pied de page */
    --t-h1: 24px;          --lh-h1: 26px;           /* titre d'une page seule */
    --t-sous-titre: 18px;  --lh-sous-titre: 19px;   /* texte des cartes, menu des chapitres */
    --t-corps: 16px;       --lh-corps: 17px;        /* corps, liens de la navigation */
    --t-meta: 14px;        --lh-meta: 15px;         /* bande de position */

    /* Interlettrages (Figma : -6 %, -4 %, -3 %, -2 %) */
    --ls-display: -0.06em;
    --ls-h1: -0.04em;
    --ls-texte: -0.03em;
    --ls-meta: -0.02em;

    /* Mise en page. La maquette est dessinee sur 1512 x 982 px, en 20 colonnes de 75,6 px :
       la navigation occupe 1 colonne, le contenu 19 (1436 px). Une carte fait 5 colonnes. */
    --colonne: 75.6px;
    --nav-l: 76px;         /* largeur de la colonne de navigation, a droite : la hauteur de la barre Figma avant
                              son quart de tour. Fixe, sur conseil du prof (fou-du-bus, Elliot, 05/10) : en 5vw,
                              la colonne devenait trop etroite pour ses libelles sous 1160 px de large. */
    --nav-h: 0px;          /* hauteur de l'en-tete de navigation en haut : il n'existe que sur mobile */
    --position-h: 26px;    /* bande de position en bas : texte 10 (hauteur des capitales) + espace 4 + trait 12 */
    --marge: 48px;         /* marge haute et gauche de l'ouverture d'un chapitre */
    --marge-l: 96px;       /* marge droite et basse de l'ouverture d'un chapitre */
    --carte: 378px;        /* carte de texte : 5 colonnes, carree */
    --carte-marge: 32px;   /* marge interieure d'une carte */
    --surlignage-y: 8px;   /* fond colore derriere une ligne de titre ou de date */
    --surlignage-x: 4px;
    --gap-diapo: 160px;    /* espace entre deux blocs d'un chapitre */

    /* Les changements d'état (survol, focus, menu qui s'ouvre) : une durée et une courbe pour tout le site,
       celles de la page Presse (audit de Ryan, D-10, 07/10). Une transition s'écrit toujours avec elles,
       jamais avec une valeur en dur, par exemple : transition: background-color var(--duree) var(--courbe);
       Mouvement réduit (réglage du système) : --duree passe à 0s (bloc juste après :root), tout change sans animation. */
    --duree: 250ms;
    --courbe: ease;

    /* ------------------------------------------------------------------
       La frise (histoire-contexte.php) suit la taille de l'ecran.
       Elle occupe toute la largeur moins la navigation, et toute la hauteur de l'ecran :
       comme dans la maquette, la bande du bas (calque "timeline", 26 px a y = 956 sur 982)
       se pose PAR-DESSUS le bas des blocs, elle ne prend pas de place a elle (section 2, .position).
       La maquette fait 982 px de haut : chaque mesure Figma, en largeur comme en hauteur, est multipliee
       par --px-h, 1 px de la maquette a l'echelle de la HAUTEUR de l'ecran.
       Exemple : un titre a 239 px du bord gauche et 48 px du haut dans Figma s'ecrit
         left: calc(239 * var(--px-h));  top: calc(48 * var(--px-h));
       Une seule echelle (06/10/2026) : chaque bloc est la maquette agrandie ou reduite, sans deformation,
       sur tout ecran ; un ecran plus large que la maquette montre simplement plus de frise.
       Jusqu'au 06/10, les mesures en largeur suivaient la largeur de l'ecran (--px-l) : hors des
       proportions de la maquette (1512 x 982), titres, cartes et photos ne tombaient plus les uns sur les autres.
       Sur un ecran de 982 px de haut, --px-h vaut 1 px : on retrouve exactement la maquette.
       ------------------------------------------------------------------ */
    --hauteur-utile: 100vh;
    --px-h: calc(var(--hauteur-utile) / 982); /* plafonnée par la largeur sur ordinateur : voir juste après ce bloc */

    /* Tailles de texte de la frise (ordinateur ; le mobile a les siennes, en --px-m) : la taille Figma suit
       la hauteur de l'ecran (--px-h), exactement comme les boites, positions et marges qui l'entourent.
       Pas de clamp() : jusqu'au 07/10, le texte s'arretait de grandir (80 px pour les titres au-dela de 1 227 px
       de haut, par exemple) alors que les boites continuaient. Sur un grand ecran, la date ne finissait plus au bord
       du titre, des vides apparaissaient entre les lignes et la carte mordait sur le titre. Une seule echelle pour tout.
       Interlignages : le rapport Figma, sans unite. */
    --f-display-1: calc(128 * var(--px-h));   /* Figma 128 / 110 */
    --f-display-2: calc(64 * var(--px-h));    /* Figma 64 / 60 */
    --f-mot-symbole: calc(160 * var(--px-h)); /* Figma 160 / 135,12 */
    --f-sous-titre: calc(18 * var(--px-h));   /* Figma 18 / 19 */
    --f-corps: calc(16 * var(--px-h));        /* Figma 16 / 17 */
    --il-display-1: calc(110 / 128);
    --il-display-2: calc(60 / 64);
    --il-mot-symbole: calc(135.12 / 160);
    --il-sous-titre: calc(19 / 18);
    --il-corps: calc(17 / 16);
}

/* LA BASCULE DU SITE ENTRE TÉLÉPHONE ET ORDINATEUR (08/10, décision d'Emmanuel, point 22 du plan WordPress)
   La mise en page du téléphone vaut pour un écran de 768 px de large ou moins, OU tenu en portrait (une tablette
   debout), OU de moins de 520 px de haut (un téléphone tourné) :
       @media (max-width: 768px), (orientation: portrait), (max-height: 519px) { }
   celle de l'ordinateur pour tout le reste, c'est-à-dire un écran en paysage, d'au moins 769 px de large et 520 de haut :
       @media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) { }
   Jusqu'au 08/10, seule la largeur comptait (768 px) : en portrait, la frise de l'ordinateur sortait de l'écran
   (27 blocs sur 39 à 820 x 1180), et sur un téléphone tourné son texte tombait à 7 px.
   La même condition est écrite dans assets/js/frise.js, assets/js/hero-video.js et index.php (<source media>).
   Dans la mise en page du téléphone, la colonne de navigation devient un en-tête de 48px, fixe en haut de l'écran
   (section 2, template-parts/nav.php). Une page dont le contenu ne doit pas passer sous l'en-tête ajoute
   padding-top: var(--nav-h). */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    :root {
        --nav-l: 0px;
        --nav-h: 48px;
    }
}

/* Ordinateur : --px-h plafonnée par la largeur (08/10, point 22). Sur un écran presque carré (4:3, fenêtre réduite),
   l'échelle de la hauteur rendait le pied de la frise plus large que l'écran (coupé de 65 px à 1024 x 768).
   1300 px de maquette tiennent dans la largeur utile : c'est l'élément le plus large (le pied, 1227 px) avec sa marge.
   Sans effet à 1280 x 800, 1512 x 982 et au-delà, où la hauteur reste la plus petite. */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    :root {
        --px-h: min(calc(var(--hauteur-utile) / 982), calc((100vw - var(--nav-l)) / 1300));
    }
}

/* Mouvement réduit (réglage du système) : toutes les transitions du site durent 0s (audit de Ryan, D-10).
   Ce qui défile tout seul (la frise, le bandeau de l'accueil) a son propre bloc, dans sa section. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duree: 0s;
    }
}

/* ------------------------------------------------------------------
   Anciens noms (tokens.css de la livraison du 27/09), branche integration seulement.
   Les pages des etudiants ont ete ecrites avec eux (accueil, Alliance, Presse, Ressources,
   Contact, Vision alternative, navigation). Le tokens.css refait sur la maquette FINALE ne
   les definit plus : sans ce bloc, ces pages perdent leurs couleurs et leurs tailles.
   Chaque ancien nom renvoie a son equivalent FINALE, ou garde son ancienne valeur s'il n'en a pas.
   A retirer quand les pages seront passees aux nouveaux noms.
   ------------------------------------------------------------------ */
:root {
    --lime: var(--jaune);             /* meme couleur, #dffe40 */
    --t-display: var(--t-display-1);  /* 128px : la valeur prise par fou-du-bus au releve du hero */
    --t-petit: var(--t-corps);        /* 16px dans les deux */
    --t-moyen: 20px;                  /* pas d'equivalent FINALE (le plus proche : --t-sous-titre, 18px) */
    --ivoire: #fffff0;                /* pas d'equivalent FINALE (le fond est --creme, #fffdeb) */
    --gris: #b6b6b6;                  /* pas d'equivalent FINALE (les traits sont --bordure) */
}


/* ==========================================================================
   2. SOCLE : RESET, NAVIGATION, MECANIQUE DE LA FRISE
   Source : base.css
   Portée : toutes les pages
   ========================================================================== */

/*
 * Section 2 (ancienne feuille base.css, réunie dans site.css le 06/10) : la mecanique de la frise.
 *
 * Ce fichier ne contient que ce qui fait fonctionner la frise.
 * Les règles communes aux blocs (titres, paragraphes, images, marges)
 * seront écrites ensemble en classe.
 *
 * Le style d'un bloc de la frise : section 4, à son numéro.
 */

/* Les variables (couleurs, polices, tailles) : section 1 */

/* ------------------------------------------------------------------
 * Reset minimal
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
h1, h2, h3, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
}

a {
    color: inherit;
}

/*
 * Focus clavier commun (décision du 08/10, point 31 f) : un contour brun de 2 px, décalé de 2 px, sur tout élément
 * atteint au clavier (Tab), au lieu de l'anneau bleu du navigateur. Sur un fond foncé (cases brunes des pieds de
 * page, ouvertures des chapitres 02 et 03, vidéo de l'accueil, carte brune d'un moment clé), il passe en crème.
 * Un composant peut préciser son contour, jamais le retirer sans en donner un autre.
 */
:focus-visible {
    outline: 2px solid var(--brun);
    outline-offset: 2px;
}

.footer-grid__box :focus-visible,
.pied__info :focus-visible,
.evt--rubrique-histoire :focus-visible,
.evt--rubrique-contestation :focus-visible,
.hero__video :focus-visible,
.milestone-card:focus-within :focus-visible {
    outline-color: var(--creme);
}

/*
 * Pas de barre de défilement de page : la bande de position sert d'indicateur.
 * Sans cela, une barre classique décolle la colonne M du bord droit.
 */
html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    background: var(--creme);
    color: var(--brun);
    font-family: var(--font-texte);
    overflow-x: hidden;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Lien d'évitement « Aller au contenu » (template-parts/nav.php ; revue du 07/10, M49) : le premier arrêt de Tab
 * de chaque page. Caché au-dessus de l'écran, il descend quand le clavier l'atteint, devant la navigation (z-index 100),
 * et mène au <main id="contenu"> de la page.
 */
.lien-evitement {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 12px 16px;
    background: var(--brun);
    color: var(--creme);
    font-size: var(--t-corps);
    font-weight: var(--graisse-texte);
    text-decoration: none;
    transform: translateY(calc(-100% - 16px));
    transition: transform var(--duree) var(--courbe);
}

.lien-evitement:focus {
    transform: none;
}

/* ------------------------------------------------------------------
 * Navigation du site : la colonne du logo (le triton) collée au bord droit
 * Maquette Figma "navbar" (node 218:1044) : une colonne de 76px, le logo carré
 * puis 6 cases de même hauteur, séparées par des traits de 1px.
 * Dans Figma, cette colonne est une barre horizontale tournée d'un quart de tour
 * (sens des aiguilles d'une montre) : ce qui est "en bas" dans la barre est à gauche à l'écran.
 *
 * writing-mode fait la même chose en CSS : toute la nav s'écrit de haut en bas.
 * Pour les boîtes de la nav, "une ligne" va donc de haut en bas, et les lignes s'empilent de droite à gauche.
 * Une flexbox en ligne (row, par défaut) pose ainsi ses cases de haut en bas,
 * et un libellé trop long pour sa case passe à la ligne tout seul, vers la gauche.
 * sideways : les lettres sont couchées, exactement comme le texte de la barre Figma une fois tournée.
 * ------------------------------------------------------------------ */
.nav-m {
    --nav-trait: var(--bordure); /* la couleur des traits du site (section 1) */
    /* Le survol des liens (desktop et mobile) : le trait s'épaissit, la bordure passe au brun.
       Durée et courbe : celles de tout le site (section 1, --duree et --courbe). */
    --nav-survol:
        box-shadow var(--duree) var(--courbe),
        border-color var(--duree) var(--courbe);

    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    display: grid;
    /*
     * Le logo, la liste et Contact se suivent de haut en bas (en writing-mode vertical,
     * les "colonnes" de la grille vont de haut en bas). Le logo garde sa taille ;
     * la liste prend 5 parts du reste et Contact 1 part : les 6 cases ont la même hauteur.
     * Une flexbox ajouterait le padding de Contact à sa part : sa case serait plus haute que les autres.
     * Une seule "rangée", de la largeur de la colonne : un libellé plus long déborde dans sa case sans l'élargir.
     */
    grid-template-columns: auto 5fr 1fr;
    grid-template-rows: 100%;
    width: var(--nav-l);
    height: 100vh;
    height: 100dvh; /* la hauteur réellement visible (barre d'un navigateur de tablette comprise) ; 100vh en repli */
    background: var(--creme);
    /* Police et couleur de la nav : les siennes, quelle que soit la page (Presse passe son texte en Arial) */
    color: var(--brun);
    font-family: var(--font-texte);
    writing-mode: vertical-rl;
    text-orientation: sideways;
}

/*
 * Le logo : carré brun et triton crème (assets/img/nav/logo-triton.svg, fait par docs/outils/icones.py).
 * Il remplace le 07/10 le « M » de la maquette (audit de Ryan, D-06). Le fichier du « M » était exporté
 * couché, dans le sens de la barre Figma, et un quart de tour le redressait ; le triton est dessiné droit.
 */
.nav-m__logo img {
    /*
     * Le carre remplit la colonne. Le fichier fait 69x69, mais la colonne
     * fait 76px (--nav-l) : sans ca, le logo garderait ses 69px
     * et laisserait un vide sur le cote.
     * Meme principe que la regle mobile plus bas, qui le cale sur --nav-h.
     */
    width: var(--nav-l);
    height: var(--nav-l);
}

/* Les 5 cases de la liste se partagent sa hauteur à parts égales */
.nav-m__liste {
    display: flex;
}

.nav-m__item {
    display: flex;
    flex: 1 1 0;
}

/*
 * Une case : toute la case est cliquable, pas seulement le texte.
 * Traits de 1px : à gauche (le bord de la colonne) et en bas (le séparateur, sur toute la largeur).
 *
 * Alignement : les libellés reposent tous sur la même ligne de base, celle de leur dernière ligne.
 * La dernière ligne est la plus à gauche : le libellé est calé à gauche (flex-end),
 * et text-box rogne son bord gauche sur la ligne de base (voir .nav-m__libelle).
 * Le padding de gauche (20px) est donc l'écart entre la ligne de base et le trait,
 * le même pour toutes les cases : c'est lui qui place le texte, pas une hauteur par libellé.
 * Un libellé de deux ou trois lignes s'étend vers la droite sans décaler les autres.
 */
.nav-m__lien {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    /*
     * Marges et texte suivent la hauteur de l'écran (audit de Ryan, D-01, 07/10) : les valeurs de la maquette
     * (20 px, 16 px) à 982 px de haut et au-delà, 8 px et 14 px vers 600 px. Sous 650 px environ, les six cases
     * ne tenaient plus et « Contact » sortait de l'écran. La marge de gauche (l'écart ligne de base / trait)
     * reste de 20 px : la colonne garde sa largeur.
     */
    padding: clamp(8px, calc(3.14vh - 10.85px), 20px) 20px;
    border-bottom: 1px solid var(--nav-trait);
    border-left: 1px solid var(--nav-trait);
    font-size: clamp(14px, calc(10.86px + 0.524vh), 16px);
    font-weight: 500;
    line-height: 1.0625; /* 17 px pour 16 px */
    letter-spacing: -0.03em; /* -0.48px pour 16px */
    text-decoration: none;

    /* Au repos, l'ombre du survol fait 0px : le survol la fait grandir en douceur */
    box-shadow: inset 0 0 0 var(--taupe);
    transition: var(--nav-survol);
}

/*
 * Survol : un trait épais de 4px à gauche, sur toute la hauteur de la case, en taupe.
 * Le trait de 1px change de couleur et une ombre intérieure ajoute les 3px restants :
 * le lien garde sa taille, rien ne bouge au survol (même principe que le trait du bas sur mobile).
 */
@media (hover: hover) and (pointer: fine) {
    .nav-m__lien:hover {
        border-left-color: var(--taupe);
        box-shadow: inset 3px 0 0 var(--taupe);
    }
}

/* La page en cours (classe active posée par nav.php) : le même trait, en brun, même au survol */
.nav-m__item.active .nav-m__lien,
.nav-m__lien--contact.active {
    border-left-color: var(--brun);
    box-shadow: inset 3px 0 0 var(--brun);
}

/*
 * Le libellé : pas de <br>, il passe à la ligne tout seul quand la case est trop courte.
 * La maquette rogne le texte entre la hauteur des capitales et la ligne de base (text-box-trim) ;
 * text-box fait la même chose en CSS, comme dans la section 9. Un navigateur qui ne le connaît
 * pas encore décale le texte de quelques pixels, mais les libellés restent alignés entre eux.
 */
.nav-m__libelle {
    text-box: trim-both cap alphabetic;
}

/* Contact : le libellé en haut de la case, la flèche en bas. Pas de trait en bas : c'est la dernière case */
.nav-m__lien--contact {
    justify-content: space-between;
    border-bottom: 0;
}

/*
 * La flèche : 23px dans la maquette ; le fichier SVG déborde un peu pour ne pas couper le trait.
 * Elle est centrée dans la largeur de la case. Comme le logo, elle est posée dans le sens
 * de la barre Figma (horizontal-tb), puis tournée d'un quart de tour :
 * la flèche du fichier, qui monte vers la droite, descend alors vers la droite, comme dans la maquette.
 */
.nav-m__fleche {
    display: block;
    align-self: flex-end; /* sur le même bord que le libellé : la flèche est dans l'axe de « Contact » */
    writing-mode: horizontal-tb;
}

/* La flèche des cartes de Presse (assets/img/Presse/icon-arrow.svg), à sa taille de Presse : 12 px,
   vers le bas à droite, sur ordinateur comme sur mobile (demande d'Emmanuel du 06/10) */
.nav-m__fleche img {
    width: 12px;
    height: 12px;
}

/* Le bouton "Menu" n'existe que sur mobile (voir plus bas) */
.nav-m__menu {
    display: none;
}

/*
 * Écran très bas (moins de 520 px) : depuis le 08/10 (point 22), c'est la mise en page du téléphone, en-tête compris.
 * La colonne qui défilait d'elle-même dans ce cas n'a plus lieu d'être.
 */

/*
 * Mise en page du téléphone (768 px et moins, portrait ou écran bas : la bascule de la section 1) : la colonne devient un en-tête de 48px,
 * fixé en haut de l'écran (maquette Figma "mobile-header" et "Menu - Mobile").
 * À gauche le carré du logo, à droite le bouton "Menu". Le bouton ouvre les 6 liens en plein écran :
 * assets/js/nav.js pose alors la classe nav-m--ouverte, et le bouton devient "Fermer".
 * Sur mobile, var(--nav-h) vaut 48px et var(--nav-l) vaut 0 (section 1).
 */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    .nav-m {
        /*
         * Les transitions des liens, rangées dans deux variables : --nav-survol (plus haut, dans .nav-m)
         * et --nav-fondu. Contact a besoin des deux à la fois (il apparaît avec le menu ET réagit au survol),
         * et un élément n'a qu'une propriété transition.
         * --nav-fondu à la fermeture : les liens s'effacent vite, visibility attend la fin pour les cacher.
         */
        --nav-fondu:
            opacity calc(var(--duree) / 2) var(--courbe),
            transform calc(var(--duree) / 2) var(--courbe),
            visibility calc(var(--duree) / 2);

        left: 0; /* toute la largeur de l'écran */
        display: grid;
        /*
         * Le logo est un carré à gauche, le bouton prend le reste à droite.
         * Le bouton est placé avant le logo dans le HTML (l'ordre du desktop,
         * où le logo ouvre la colonne) : grid-column les remet dans cet ordre
         * ici, sans toucher au HTML ni au desktop.
         */
        grid-template-columns: var(--nav-h) 1fr;
        grid-template-rows: none; /* les rangées suivent le contenu : en-tête, liste, Contact */
        align-content: start;
        width: auto;
        height: var(--nav-h);
        overflow: hidden; /* fermée, les liens sont sous l'en-tête, hors de la nav : on ne les voit pas */
        writing-mode: horizontal-tb; /* sur mobile, tout s'écrit à l'horizontale */
        transition: height var(--duree) var(--courbe);
    }

    /* Menu ouvert : la nav grandit jusqu'en bas de l'écran, comme un rideau qui descend sur la page */
    .nav-m--ouverte {
        /* À l'ouverture, les liens apparaissent en glissant, juste après le début du rideau */
        --nav-fondu:
            opacity var(--duree) var(--courbe) calc(var(--duree) / 4),
            transform var(--duree) var(--courbe) calc(var(--duree) / 4),
            visibility 0s;

        height: 100vh;
        height: 100dvh; /* la vraie hauteur visible sur mobile, barre d'adresse comprise */
        overflow-y: auto; /* écran très bas : on peut faire défiler les liens */
        scrollbar-width: none; /* pas de barre qui apparaît pendant l'animation */
    }

    /* La nav coupe ce qui dépasse : le contour du focus clavier se dessine donc à l'intérieur */
    .nav-m :focus-visible {
        outline-offset: -3px;
    }

    /* Le logo ouvre l'en-tête, à gauche */
    .nav-m__logo {
        grid-column: 1;
        grid-row: 1;
    }

    .nav-m__menu {
        /* Le menu est attendu en haut à droite : sa case, et son texte dedans */
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;

        display: flex;
        align-items: center;
        height: var(--nav-h);
        padding: 0 16px;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--nav-trait);
        color: inherit;
        font: inherit;
        font-size: var(--t-petit);
        font-weight: 500;
        line-height: 17px;
        letter-spacing: -0.03em; /* -0.48px pour 16px */
        cursor: pointer;
    }

    /* Le carré du logo : le même fichier que sur desktop, réduit au carré de 48px de la maquette mobile */
    .nav-m__logo img {
        width: var(--nav-h);
        height: var(--nav-h);
    }

    /* Menu fermé : les liens sont cachés, et visibility: hidden les retire aussi de la touche Tab */
    .nav-m__liste,
    .nav-m__lien--contact {
        grid-column: 1 / -1; /* sous l'en-tête, sur toute la largeur */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
    }

    .nav-m__liste {
        display: block;
        transition: var(--nav-fondu);
    }

    .nav-m--ouverte .nav-m__liste,
    .nav-m--ouverte .nav-m__lien--contact {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* Un lien = une ligne de 64px, texte horizontal de 20px */
    .nav-m__lien {
        align-items: center;
        justify-content: space-between; /* le libellé à gauche, la flèche de Contact à droite */
        height: 64px;
        padding: 0 16px;
        border-bottom: 1px solid var(--nav-trait);
        border-left: 0;
        font-size: var(--t-moyen);
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -0.04em; /* -0.8px pour 20px */
    }

    /* Le libellé : pas de rognage sur mobile */
    .nav-m__libelle {
        text-box: normal;
    }

    /* Survol : le trait du bas passe à 4px en taupe (la bordure change de couleur, plus 3px d'ombre) */
    @media (hover: hover) and (pointer: fine) {
        .nav-m__lien:hover {
            border-bottom-color: var(--taupe);
            box-shadow: inset 0 -3px 0 var(--taupe);
        }
    }

    /* Page en cours : couleurs inversées, fond brun et texte crème (demande d'Emmanuel du 06/10, mobile seulement) */
    .nav-m__item.active .nav-m__lien,
    .nav-m__lien--contact.active {
        border-bottom-color: var(--brun);
        box-shadow: none;
        background: var(--brun);
        color: var(--creme);
    }

    /* La flèche de Contact est un fichier brun : passée en clair pour rester visible sur le fond brun */
    .nav-m__lien--contact.active .nav-m__fleche img {
        filter: brightness(0) invert(1);
    }

    /* Sur une ligne horizontale, la flèche est centrée en hauteur, comme le libellé */
    .nav-m__fleche {
        align-self: center;
    }

    /* Contact : une ligne comme les autres, qui apparaît avec le menu et réagit au survol */
    .nav-m__lien--contact {
        transition: var(--nav-fondu), var(--nav-survol);
    }

}

/* Mouvement réduit : la nav s'ouvre et réagit au survol sans animation, par --duree (section 1) */

/* ------------------------------------------------------------------
 * La frise : une piste horizontale déplacée par frise.js
 * ------------------------------------------------------------------ */
.frise {
    width: calc(100% - var(--nav-l));
    height: 100vh;
    overflow: hidden;
}

.frise__piste {
    position: relative; /* frise.js mesure la position de chaque bloc à partir de ce conteneur */
    display: flex;
    align-items: stretch;
    height: 100%;
    will-change: transform; /* prévient le navigateur que la piste va bouger : animation plus fluide */
}

/*
 * Un élément de la piste (bloc ou pied de page) : toute la hauteur de l'écran (section 1,
 * --hauteur-utile). La bande de position se pose par-dessus son bas. Dans la CSS d'un bloc, chaque mesure Figma
 * est multipliée par --px-h, en largeur comme en hauteur : voir la section 1.
 */
.frise__piste > * {
    flex: 0 0 auto;
    height: var(--hauteur-utile);
}

/* Les éléments d'un bloc se placent par rapport à lui (position: absolute dans la CSS du bloc) */
.evt {
    position: relative;
}

/*
 * Repli : sans JavaScript, ou si GSAP manque, la frise défile à la main
 * (barre de défilement horizontale en bas de l'écran, sous la bande de position).
 */
.no-js .frise,
.frise--sans-gsap {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Mouvement réduit : pas d'animation, la frise défile à la main */
@media (prefers-reduced-motion: reduce) {
    .frise {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ------------------------------------------------------------------
 * Bande de position, fixée en bas de l'écran (calque "timeline" de la maquette)
 * Comme dans la maquette, elle se pose PAR-DESSUS le bas des blocs (26 px, --position-h, à y = 956
 * sur 982) : les blocs occupent toute la hauteur de l'écran, images comprises, sous la bande.
 * Cinq repères de même largeur : le nom du chapitre, puis un petit trait vertical.
 *
 * Lisible sur toutes les images : chaque nom est brun sur un fond clair, crème sur un fond foncé
 * (frise.js, colorerBande, qui mesure ce qui passe derrière lui). Du 05 au 06/10, la bande se mélangeait
 * à l'image (mix-blend-mode: difference) : lisible, mais vert sur le rouge et orange sur le bleu.
 * La barre de progression est à côté de la bande (histoire-contexte.php), au même endroit, par-dessus.
 * ------------------------------------------------------------------ */
.position {
    position: fixed;
    right: var(--nav-l);
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    height: var(--position-h);
    /* Les noms : bruns sur un fond clair, crèmes sur un fond foncé (classe sur-fonce, posée par frise.js
       selon ce qui passe derrière chaque nom). Jusqu'au 06/10 : mix-blend-mode difference, qui donnait
       du vert sur le rouge et de l'orange sur le bleu. */
    color: var(--brun);
    font-size: var(--t-meta);
    font-weight: var(--graisse-titre);
    line-height: var(--lh-meta);
    letter-spacing: var(--ls-meta);
}

/* La barre de progression : à côté de la bande (histoire-contexte.php), au même endroit, par-dessus */
.position__curseur {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 91;
    width: calc(100% - var(--nav-l));
    height: 4px; /* doublée le 30/09 (2 px) : on la voyait mal */
    background: var(--jaune); /* barre de progression : absente de la maquette FINALE, ajoutée par le prototype (24/09) ; jaune du site, essai du 30/09 */
    transform: scaleX(0); /* trait vide au départ, frise.js l'allonge de 0 à 100 % pendant le défilement */
    transform-origin: left center;
}

/* Un repère : le nom (rogné à la hauteur des capitales, 10 px), 4 px d'espace, un trait de 12 px */
/*
 * Le soulignement du chapitre actif et du survol est toujours là, transparent : l'état ne fait que
 * lui donner sa couleur, qui arrive en fondu (un soulignement qui apparaît ne s'anime pas, sa couleur oui).
 */
.position a {
    position: relative;
    transition:
        color var(--duree) var(--courbe),
        background-color var(--duree) var(--courbe),
        text-decoration-color var(--duree) var(--courbe);
    flex: 1 1 0;
    padding-bottom: 16px;
    text-align: center;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    text-box: trim-both cap alphabetic;
}

.position a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 12px;
    background: currentColor;
}

.position a.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .position a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.position a.sur-fonce {
    color: var(--creme);
}

/* Le numéro du chapitre ne sert que sur mobile (barre des chapitres, plus bas) */
.position__numero {
    display: none;
}

/* ------------------------------------------------------------------
 * MOBILE (768 px et moins, portrait ou écran bas : section 1) : la frise devient verticale (maquette Figma « Mobile », 487:1095)
 *
 * Plus d'animation horizontale (frise.js ne lance pas GSAP sur mobile) : les blocs s'empilent
 * et la page défile normalement, sous l'en-tête de navigation (48 px, --nav-h) et au-dessus
 * de la barre des chapitres fixée en bas (--tabbar-h).
 * La mise en forme des pièces (titres, dates, images, cartes, ouvertures, pied) : section 3,
 * section MOBILE. Les écarts propres à un bloc : sa CSS, dans le @media du téléphone (la bascule de la section 1).
 * ------------------------------------------------------------------ */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    :root {
        --tabbar-h: 66px; /* barre des chapitres : trait 4 + 6 + numéro 19 + 6 + nom 13 + 10 + 8 */

        /*
         * 1 px de la maquette mobile (402 px de large), à l'échelle de l'écran : comme --px-h sur ordinateur
         * sur ordinateur. À 390 px, tout est réduit de 3 % : mêmes coupures de lignes, mêmes escaliers
         * que la maquette. Plafonné à 1,2 (tablette) : au-delà de 482 px de large, la colonne reste centrée.
         * Dans la CSS mobile : calc(26 * var(--px-m)) pour 26 px de la maquette.
         */
        --px-m: min(calc(100vw / 402), 1.2px);
    }

    /* Lettres lissées en gris, comme le rendu de Figma : sans cela, Chrome et Safari sur Mac épaississent
       un peu le texte (sur un vrai téléphone, le rendu est déjà celui-ci) */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Tablette (plus de 482 px de large) : la colonne de la maquette mobile, centrée */
    .frise__piste {
        max-width: calc(402 * var(--px-m));
        margin-inline: auto;
    }

    .frise,
    .no-js .frise,
    .frise--sans-gsap {
        width: auto;
        height: auto;
        overflow: visible;
        padding-top: var(--nav-h);
        padding-bottom: var(--tabbar-h);
    }

    .frise__piste {
        display: block;
        height: auto;
        will-change: auto;
    }

    .frise__piste > * {
        height: auto;
    }

    /*
     * Seulement sur la page de la frise (html:has(.frise)) : écrite pour la barre des chapitres, la règle
     * adoucissait aussi le défilement de toutes les autres pages sur mobile (revue du 07/10, N9).
     */
    @media (prefers-reduced-motion: no-preference) {
        html:has(.frise) {
            scroll-behavior: smooth;
        }
    }

    /*
     * Ce que le navigateur amène à l'écran (un lien de la barre des chapitres, un lien qui reçoit le focus au clavier)
     * se pose sous l'en-tête (48 px) et au-dessus de la barre des chapitres (70 px, plus 10 de marge).
     * Jusqu'au 07/10, seule l'ouverture visée par la barre était décalée (scroll-margin-top sur .evt) :
     * un lien atteint au clavier pouvait finir caché sous la barre (revue, M45).
     */
    html:has(.frise) {
        scroll-padding-top: var(--nav-h);
        scroll-padding-bottom: 80px;
    }

    /*
     * La barre des chapitres (Figma « chapter-tabbar », un variant par chapitre actif) :
     * cinq onglets égaux, chacun avec un trait de 4 px de la couleur de son chapitre, son numéro
     * (Geist SemiBold 16) et son nom (Geist Medium 11, voilé). L'onglet du chapitre en cours
     * (classe is-active, posée par frise.js) prend la couleur du chapitre en fond.
     */
    .position {
        right: 0;
        height: auto;
        align-items: stretch;
        background: var(--creme);
        border-top: 1px solid var(--bordure);
        color: var(--brun);
    }

    .position__curseur,
    .position a::after {
        display: none; /* ni barre de progression ni petits traits : la maquette mobile n'en a pas */
    }

    .position a {
        --couleur-chapitre: var(--brun);
        --texte-actif: var(--creme);

        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 0;
        /* 10 px sous le nom, plus les 8 px du bas de la barre (ou la zone du geste d'accueil de l'iPhone) :
           dans l'onglet et non sous la barre, pour que la couleur du chapitre en cours aille jusqu'au bas
           de l'écran (demande d'Emmanuel du 06/10) */
        padding: 0 0 calc(10px + max(8px, env(safe-area-inset-bottom)));
        border-top: 4px solid var(--couleur-chapitre);
        font-size: 11px;
        font-weight: var(--graisse-texte);
        line-height: normal;
        letter-spacing: 0;
        text-box: normal;
        white-space: nowrap;
    }

    .position a[data-rubrique="contexte"] { --couleur-chapitre: var(--brun-clair); --texte-actif: var(--brun); }
    .position a[data-rubrique="contestation"] { --couleur-chapitre: var(--rouge); }
    .position a[data-rubrique="quartier"] { --couleur-chapitre: var(--bleu); --texte-actif: var(--brun); }
    .position a[data-rubrique="aujourdhui"] { --couleur-chapitre: var(--jaune); --texte-actif: var(--brun); }

    .position__numero {
        display: block;
        margin-top: 6px;
        font-size: 16px;
        font-weight: var(--graisse-titre);
        opacity: 1;
    }

    /* Le nom est voilé (opacité 0,7 dans la maquette), sauf pour le chapitre en cours */
    .position a {
        color: rgb(63 38 22 / 0.7);
    }

    .position a .position__numero {
        color: var(--brun);
    }

    .position a.is-active {
        text-decoration: none;
    }

@media (hover: hover) and (pointer: fine) {
    .position a:hover {
        text-decoration: none;
    }
}

    .position a.is-active,
    .position a.is-active .position__numero {
        background: var(--couleur-chapitre);
        color: var(--texte-actif);
    }
}

/* Bande proportionnelle (classe position--proportionnelle dans histoire-contexte.php), sur ordinateur
   seulement : chaque chapitre a une part proportionnelle à sa longueur, au moins la largeur de son nom
   (frise.js, proportionnerBande), et la barre y arrive sur le trait du nom quand le chapitre commence
   (frise.js, positionBarre). Retirer la classe annule aussi ces règles. */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Chaque nom au début de sa part, sur son trait : la barre y arrive quand le chapitre commence (frise.js) */
    .position--proportionnelle a {
        min-width: 0;
        text-align: left;
    }

    .position--proportionnelle a::after {
        left: 0;
    }

    /* « Contexte » : à 12 px du bord de l'écran, pour ne pas y coller. Un retrait du texte et pas une marge
       intérieure : une marge s'ajouterait à sa part et décalerait tous les noms suivants par rapport à la barre */
    .position--proportionnelle a:first-child {
        text-indent: 12px;
    }

    .position--proportionnelle a:first-child::after {
        left: 12px;
    }
}

/* ------------------------------------------------------------------
 * Boîte grise "à faire" : un bloc dont le fichier n'existe pas encore
 * (template-parts/timeline/a-faire.php)
 * ------------------------------------------------------------------ */
.evt--a-faire {
    width: 668px;
    padding: 48px 24px calc(var(--position-h) + 48px);
}

.evt--a-faire .boite {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 32px;
    background: rgba(217, 217, 217, 0.4);
    border: 2px dashed var(--brun);
}

.evt--a-faire .boite__numero,
.evt--a-faire .boite__date {
    font-size: var(--t-sous-titre);
}

.evt--a-faire .boite__titre {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
}

.evt--a-faire .boite__consigne {
    margin-top: auto;
    font-size: var(--t-corps);
}

.evt--a-faire code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * Titres surlignes (composant Figma "highlight-title")
 *
 * Chaque ligne est un bloc a fond vert anis, pose sous la precedente.
 * Composant partage : la page Alliance et l'accueil l'utilisent tous les deux.
 * Les decalages horizontaux de chaque ligne changent d'un titre a l'autre :
 * ils restent dans la CSS de la page (sections 9 et 6).
 * ------------------------------------------------------------------ */

.highlight-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* chaque ligne s'arrete a la fin de son texte */
    color: var(--brun);
    font-family: var(--font-display);
    font-size: 64px; /* style "Display2" de la maquette */
    font-weight: 700;
    letter-spacing: -0.06em; /* -3.84 px pour 64 px */
}

.highlight-title__line {
    /*
     * 61 px de haut comme dans la maquette : 8 + 45 + 8.
     * La maquette rogne le texte a la hauteur des capitales (45 px) : on met donc
     * line-height a 45px, comme la section 5 le fait pour le titre de l'accueil.
     * A droite, 0.06em de plus : le letter-spacing negatif s'applique aussi apres
     * la derniere lettre (voir la section 5), on le rend au padding.
     */
    padding: 8px calc(4px + 0.06em) 8px 4px;
    background: var(--lime);
    line-height: 45px;
    white-space: nowrap;
}


/* ------------------------------------------------------------------
 * Cartes et boutons dont le fond change au survol : le fond s'arrête à l'intérieur de la bordure.
 * Leurs bordures sont semi-transparentes (--bordure, brun à 25 %) : sans cela, le fond du survol passait
 * dessous et la bordure prenait sa couleur (contour brun sur les cartes « moments clés » : audit de Ryan, D-05).
 * ------------------------------------------------------------------ */
.contact__btn,
.content-card,
.event-card,
.milestone-card,
.milestone-detail__close,
.presse-card > div,
.theme-detail__close {
    background-clip: padding-box;
}

/* ==========================================================================
   3. FRISE : COMPOSANTS COMMUNS (titres, dates, cartes, images, ouvertures, pied)
   Source : composants.css
   Portée : classes de histoire-contexte.php et de template-parts/timeline/
   ========================================================================== */

/*
 * Section 3 (ancienne feuille composants.css, réunie dans site.css le 06/10) : les pièces communes aux blocs de la frise, relevées dans la maquette
 * Figma « FINALE » (frame « Contexte & Histoire », 111:1397).
 *
 *   .ouverture        l'ouverture d'un chapitre (calque chapter__intro) : menu et grand titre
 *   .titre            le titre d'un bloc, une ligne surlignée par <span> (highlight-title)
 *   .date             la date, une ligne surlignée en jaune par <span> (date-tag)
 *   .carte            la carte de texte avec sa flèche (content-card)
 *   .image            une photo ou une carte ancienne
 *   .pied             le pied de page, à la fin de la frise (footer)
 *
 * Ce fichier dit à quoi ressemblent ces pièces (police, couleurs, marges intérieures).
 * La CSS de chaque bloc (assets/css/timeline/NN-slug.css) dit où elles se posent :
 * largeur du bloc, position (left, top) et taille de chaque élément, en pixels de la maquette.
 *
 * Fichier partagé : on ne le modifie pas pour son bloc.
 */

/* ------------------------------------------------------------------
 * Couleurs par chapitre : fond des lignes de titre et couleur de leur texte
 * (chaque bloc porte data-rubrique="..." dans son HTML)
 * ------------------------------------------------------------------ */
.evt {
    --fond-titre: var(--brun);
    --texte-titre: var(--creme);
}

.evt[data-rubrique="contestation"] {
    --fond-titre: var(--rouge);
}

.evt[data-rubrique="quartier"] {
    --fond-titre: var(--bleu);
    --texte-titre: var(--brun);
}

.evt[data-rubrique="aujourdhui"] {
    --fond-titre: var(--jaune);
    --texte-titre: var(--brun);
}

/* ------------------------------------------------------------------
 * Ouverture d'un chapitre (blocs 01, 03, 14, 27, 34)
 * Le menu des chapitres en haut, le grand titre « 01 Contexte » en bas.
 * La largeur et la couleur de fond sont dans la CSS du bloc.
 * ------------------------------------------------------------------ */
.ouverture {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 48 px en haut et à gauche, 96 px à droite et en bas dans la maquette */
    padding: calc(48 * var(--px-h)) calc(96 * var(--px-h)) calc(96 * var(--px-h)) calc(48 * var(--px-h));
    color: var(--creme);
}

.ouverture__menu ol {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--px-h));
}

.ouverture__menu a {
    display: flex;
    gap: calc(12 * var(--px-h));
    align-items: center;
    font-size: var(--f-sous-titre);
    font-weight: var(--graisse-titre);
    line-height: var(--il-sous-titre);
    letter-spacing: var(--ls-texte);
    text-decoration: underline transparent; /* le survol lui donne sa couleur, en fondu (comme .position a) */
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: text-decoration-color var(--duree) var(--courbe);
}

/* La flèche vers le bas à droite, devant chaque chapitre (assets/img/fleche-menu.svg).
   Le dessin sert de masque : la flèche prend la couleur du texte (currentColor). */
.ouverture__menu a::before {
    content: "";
    flex: 0 0 auto;
    width: calc(11 * var(--px-h));
    height: calc(12 * var(--px-h));
    background: currentColor;
    -webkit-mask: url("../img/fleche-menu.svg") no-repeat center / contain;
    mask: url("../img/fleche-menu.svg") no-repeat center / contain;
}

@media (hover: hover) and (pointer: fine) {
    .ouverture__menu a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/*
 * Sous-menu : les dates clés d'un chapitre, suivies des titres (template-parts/menu-chapitres.php), essai du 30/09.
 * Elles s'affichent à droite du chapitre survolé, ou quand son lien a le focus (clavier),
 * dans la même typographie, sans flèche, sans fond ni bordure (une flèche sans date laissait un vide).
 *
 * Le menu est une grille de deux colonnes : les chapitres, puis les sous-menus. Chaque <li> reprend
 * ces colonnes (subgrid) : le sous-menu commence juste après le plus long chapitre et s'arrête à la
 * marge droite de l'ouverture, les titres longs passent à la ligne au lieu de déborder sur le bloc suivant.
 * Le sous-menu a une hauteur nulle : il ne pousse pas les chapitres suivants, ses lignes
 * descendent par-dessus (position: relative et z-index : c'est lui que la souris survole).
 */
.ouverture__menu > ol {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
}

.ouverture__menu > ol > li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.ouverture__dates {
    position: relative;
    z-index: 1;
    height: 0;
    /* L'espace avant les dates fait partie du sous-menu : la souris ne le perd pas en chemin */
    padding-left: calc(48 * var(--px-h));
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duree) var(--courbe), visibility var(--duree);
}

.ouverture__menu li:focus-within > .ouverture__dates {
    visibility: visible;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .ouverture__menu li:hover > .ouverture__dates {
        visibility: visible;
        opacity: 1;
    }
}

/* Deux colonnes alignées d'une ligne à l'autre : la date, le titre (un bloc sans date n'a que son titre) */
.ouverture__menu .ouverture__dates {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: start;
    column-gap: calc(12 * var(--px-h));
    row-gap: calc(4 * var(--px-h));
}

.ouverture__menu .ouverture__dates li,
.ouverture__menu .ouverture__dates a {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start; /* un titre sur deux lignes : la date reste sur la première */
}

.ouverture__menu .ouverture__dates a::before {
    content: none; /* pas de flèche au second niveau */
}

.ouverture__date {
    grid-column: 1;
}

/* Le titre : graisse normale, il passe à la ligne s'il est long */
.ouverture__evt {
    grid-column: 2;
    font-weight: var(--graisse-texte);
    white-space: normal;
}

.ouverture__titre {
    font-family: var(--font-display);
    font-size: var(--f-display-1);
    font-weight: 700;
    line-height: var(--il-display-1);
    letter-spacing: var(--ls-display);
    white-space: nowrap;
    text-box: trim-both cap alphabetic; /* le bloc de texte s'arrête au haut des capitales et à la ligne de base, comme dans Figma */
}

/* ------------------------------------------------------------------
 * Titre d'un bloc : une ligne = un <span class="titre__ligne">, surlignée.
 * Les lignes s'empilent ; la CSS du bloc décale chacune avec margin-left.
 * ------------------------------------------------------------------ */
.titre {
    position: absolute;
    font-weight: 700;
}

.titre__ligne,
.date__ligne {
    position: relative; /* chaque ligne (fond et texte) est peinte par-dessus la précédente, comme les calques Figma :
                           sinon les jambages (p, g, j) d'une ligne débordent sur le fond de la suivante */
    display: block;
    width: fit-content;
    padding: calc(8.1 * var(--px-h)) calc(4 * var(--px-h)); /* 8 px et 4 px dans Figma ; 0,1 px de plus en haut et en bas,
                                                              car les capitales font 44,8 px dans le navigateur (45 dans Figma) */
    background: var(--fond-titre);
    color: var(--texte-titre);
    font-family: var(--font-display);
    font-size: var(--f-display-2);
    font-weight: 700;
    line-height: var(--il-display-2);
    letter-spacing: var(--ls-display);
    white-space: nowrap;
    text-box: trim-both cap alphabetic; /* 45 px de texte + 2 x 8 px = une ligne de 61 px (Figma), mis à l'échelle */
}

/*
 * CSS ajoute l'interlettrage (négatif ici) aussi après la dernière lettre, Figma non :
 * sans correction, chaque boîte surlignée serait 0,06 em plus étroite que dans la maquette
 * (3,84 px pour un titre de 64 px). Un espace vide de 0,06 em en fin de ligne rétablit la largeur.
 */
.titre__ligne::after,
.date__ligne::after,
.pied__ligne::after {
    content: "";
    display: inline-block;
    width: 0.06em;
}

/* Une ligne de titre sans surlignage (blocs 32 et 33). La ligne de date glissée dans un titre (.titre__ligne--date)
   n'était plus utilisée par aucun bloc : retirée le 07/10 (revue, M32). */
.titre__ligne--sans-fond {
    background: none;
    color: var(--brun);
}

/* ------------------------------------------------------------------
 * Date : toujours surlignée en jaune, une ligne par <span class="date__ligne">
 * ------------------------------------------------------------------ */
.date {
    position: absolute;
}

.date__ligne {
    background: var(--jaune);
    color: var(--brun);
}

/* Navigateur sans text-box (Firefox en 2026) : même hauteur de ligne, texte à peu près centré */
@supports not (text-box: trim-both cap alphabetic) {
    .titre__ligne,
    .date__ligne {
        line-height: calc(45 / 64); /* 45 px pour un texte de 64 px */
    }

    .ouverture__titre {
        line-height: calc(96 / 128);
    }
}

/* ------------------------------------------------------------------
 * Carte de texte : fond crème, bord brun voilé, flèche vers la page de l'événement.
 * Composant Figma « content-card » : « marge intérieure de 32 px, flèche toujours ancrée en bas à droite ».
 * Par défaut 5 colonnes (378 x 378 px) ; la CSS du bloc donne la taille des cartes de 8 ou 12 colonnes.
 * ------------------------------------------------------------------ */
.carte {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: calc(378 * var(--px-h));
    height: calc(378 * var(--px-h));
    /* Figma dessine le bord à l'intérieur de la carte, sans décaler le contenu :
       31 px de marge + 1 px de bord = les 32 px de la maquette.
       --carte-marge et --carte-px placent aussi la flèche (.carte__lien::before) ; le mobile les redéfinit. */
    --carte-px: var(--px-h);
    --carte-marge: calc(31 * var(--carte-px));
    padding: var(--carte-marge);
    background: var(--creme);
    border: 1px solid var(--bordure);
    color: var(--brun);
}

.carte p {
    align-self: stretch;
    font-size: var(--f-sous-titre);
    font-weight: var(--graisse-titre);
    line-height: var(--il-sous-titre);
    letter-spacing: var(--ls-texte);
}

/* Le lien « Lire la suite » couvre toute la carte (décision du 08/10, point 31 c : comme les cartes de l'accueil
   et d'Alliance ; jusque-là, seule la flèche de 21 x 19 px était cliquable). À l'écran, seule la flèche se voit ;
   le texte du lien est pour les lecteurs d'écran.
   La flèche garde sa place de la maquette, dans le coin bas droit, à la marge de la carte : son cadre Figma fait
   21 x 19 px, et son dessin (22 x 20,7 px) en déborde de 1 px à droite et en bas, et de 0,7 px en haut. */
.carte__lien {
    position: absolute;
    inset: 0;
}

.carte__lien::before {
    content: "";
    position: absolute;
    right: calc(var(--carte-marge) - 1 * var(--carte-px));
    bottom: calc(var(--carte-marge) - 1 * var(--carte-px));
    width: calc(22 * var(--carte-px));
    height: calc(20.7 * var(--carte-px));
    background: var(--brun-voile);
    -webkit-mask: url("../img/fleche-bas-droite.svg") no-repeat center / 100% 100%;
    mask: url("../img/fleche-bas-droite.svg") no-repeat center / 100% 100%;
    transition: background-color var(--duree) var(--courbe);
}

.carte__lien:focus-visible::before {
    background: var(--brun);
}

@media (hover: hover) and (pointer: fine) {
    .carte__lien:hover::before {
        background: var(--brun);
    }
}

/* ------------------------------------------------------------------
 * Image : posée en absolu, recadrée sans déformation (object-fit)
 * ------------------------------------------------------------------ */
.image {
    position: absolute;
    display: block;
    object-fit: cover;
}

/* ------------------------------------------------------------------
 * Pied de page (template-parts/pied-frise.php), dernier élément de la piste.
 * Le grand titre « Marais de Biestebroeck » en escalier et trois blocs d'infos.
 * ------------------------------------------------------------------ */
.pied {
    position: relative;
    width: calc(1505 * var(--px-h));
    margin-left: calc(160 * var(--px-h)); /* 160 px après le dernier bloc */
}

.pied__contenu {
    position: absolute;
    top: calc(342 * var(--px-h));
    left: calc(209 * var(--px-h));
    width: calc(1227 * var(--px-h));
    height: calc(640 * var(--px-h));
}

.pied__info,
.pied__ligne {
    position: absolute;
    background: var(--brun);
    color: var(--jaune);
}

.pied__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(230 * var(--px-h));
    height: calc(160 * var(--px-h));
    padding: calc(24 * var(--px-h)) calc(24 * var(--px-h));
    font-size: var(--f-corps);
    font-weight: var(--graisse-texte);
    line-height: var(--il-corps);
    letter-spacing: var(--ls-texte);
}

.pied__info h2 {
    font: inherit;
}

.pied__info ul {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--px-h));
}

.pied__info a {
    text-decoration: underline transparent; /* le survol lui donne sa couleur, en fondu */
    transition: text-decoration-color var(--duree) var(--courbe);
}

@media (hover: hover) and (pointer: fine) {
    .pied__info a:hover {
        text-decoration: underline;
    }
}

.pied__info h2,
.pied__info li {
    text-box: trim-both cap alphabetic;
}

.pied__info--contact {
    top: 0;
    left: 0;
}

.pied__info--reseaux {
    top: 0;
    left: calc(740 * var(--px-h));
}

.pied__info--infos {
    top: calc(320 * var(--px-h));
    left: 0;
}

.pied__titre {
    font-weight: 700;
}

.pied__ligne {
    padding: calc(24 * var(--px-h)) calc(16 * var(--px-h));
    font-family: var(--font-display);
    font-size: var(--f-mot-symbole);
    font-weight: 700;
    line-height: var(--il-mot-symbole);
    letter-spacing: var(--ls-display);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

.pied__ligne--1 {
    top: calc(160 * var(--px-h));
    left: calc(230 * var(--px-h));
}

.pied__ligne--2 {
    top: calc(320 * var(--px-h));
    left: calc(740 * var(--px-h));
}

.pied__ligne--3 {
    top: calc(480 * var(--px-h));
    right: 0;
}

/* ------------------------------------------------------------------
 * MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095), largeur 402 px
 *
 * Un bloc devient une colonne (grille d'une colonne) : 40 px en haut, 16 px sur les côtés,
 * 20 px entre les éléments. Par défaut : le titre (rangée 1), l'image avec sa date posée
 * dessus (rangée 2), la carte (rangée 3). Ce qui sort de ce cas courant (plusieurs images,
 * date au-dessus du titre, place de la date sur l'image, escalier du titre...) est dans la CSS
 * du bloc, dans le @media du téléphone (la bascule de la section 1), avec des sélecteurs qui commencent par .frise :
 *     .frise .evt--prairies-1550 .date { justify-self: start; }
 * Les sélecteurs ci-dessous commencent aussi par .frise .evt : ils l'emportent sur les positions
 * du bureau (.evt--NN-slug .titre), et la CSS du bloc, chargée après, l'emporte sur eux.
 * ------------------------------------------------------------------ */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    .frise .evt {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        row-gap: calc(20 * var(--px-m));
        width: auto;
        margin: 0;
        padding: calc(40 * var(--px-m)) calc(16 * var(--px-m)) calc(16 * var(--px-m));
    }

    /* Plus de positions absolues : chaque élément prend sa place dans la colonne */
    .frise .evt .titre,
    .frise .evt .date,
    .frise .evt .image,
    .frise .evt .carte {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        margin: 0;
        transform: none;
    }

    /* Une seule colonne : sans grid-column, une 2e image de la même rangée ouvrirait une colonne de plus
       (débordement à droite). Les blocs à plusieurs images leur donnent leurs propres rangées. */
    .frise .evt .titre { grid-row: 1; grid-column: 1; justify-self: start; }
    .frise .evt .image { grid-row: 2; grid-column: 1; }
    .frise .evt .carte { grid-row: 3; grid-column: 1; }

    /* La date se pose sur l'image (même case de la grille), en bas à gauche par défaut */
    .frise .evt .date {
        grid-row: 2;
        grid-column: 1;
        z-index: 1;
        align-self: end;
        justify-self: start;
        margin: 0 0 calc(16 * var(--px-m)) calc(16 * var(--px-m));
    }

    /* Un bloc sans image : la date est une ligne sous le titre, sans marge */
    .frise .evt:not(:has(.image)) .date {
        margin: 0;
    }

    /* Un bloc sans image ni date : la carte monte en rangée 2 (sinon 20 px d'écart en trop) */
    .frise .evt:not(:has(.image)):not(:has(.date)) .carte {
        grid-row: 2;
    }

    /* Un titre caché aux yeux (lu par les lecteurs d'écran) ne prend pas de rangée */
    .frise .evt .titre.visuellement-cache {
        position: absolute;
        width: 1px;
        height: 1px;
    }

    /* Dernier bloc d'un chapitre : 48 px en bas, comme dans la maquette. Pas avant le pied de page :
       il colle au dernier bloc (Emmanuel, 07/10 ; la maquette laissait 48 px) */
    .frise .evt:has(+ .ouverture) {
        padding-bottom: calc(48 * var(--px-m));
    }

    /* Titres et dates : Bugrino 26 px, lignes de 24,8 px (Figma « highlight-title », version mobile) */
    .frise .evt .titre .titre__ligne,
    .frise .evt .date .date__ligne {
        width: fit-content;
        margin-left: 0;
        padding: calc(3.25 * var(--px-m)) calc(1.625 * var(--px-m));
        font-size: calc(26 * var(--px-m));
        line-height: calc(24.375 * var(--px-m));
        letter-spacing: -0.06em;
    }

    /* Image : toute la largeur, 370 x 277 dans la maquette ; le bloc donne une autre proportion au besoin */
    .frise .evt .image {
        width: 100%;
        aspect-ratio: 370 / 277;
        object-fit: cover;
    }

    /* Carte : toute la largeur, texte Geist SemiBold 16 / 20. Figma dessine le bord de 1 px à l'intérieur
       de la carte : 23 px de marge + 1 px de bord = les 24 px de la maquette (même principe que le bureau) */
    .frise .evt .carte {
        --carte-px: var(--px-m);
        --carte-marge: calc(23 * var(--carte-px));
        /* la carte prend sa hauteur de son texte : la place de la flèche (19 px), et l'écart qui la sépare du texte
           dans certains blocs (--carte-ecart, 16 px), s'ajoutent sous le texte, comme quand la flèche était dans
           le flux (jusqu'au 08/10) */
        padding-bottom: calc(var(--carte-marge) + var(--carte-ecart, 0px) + 19 * var(--carte-px));
    }

    .frise .evt .carte p {
        font-size: calc(16 * var(--px-m));
        line-height: calc(20 * var(--px-m));
        letter-spacing: -0.03em;
    }

    /* Ouverture d'un chapitre : 340 px de haut, sans menu, « 01 Contexte » en bas à gauche */
    .frise .evt.ouverture {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: calc(340 * var(--px-m));
        padding: 0 calc(16 * var(--px-m)) calc(24 * var(--px-m));
    }

    .frise .ouverture__menu {
        display: none;
    }

    .frise .ouverture__titre {
        font-size: calc(64 * var(--px-m));
        line-height: calc(55 / 64);
        letter-spacing: -0.06em;
    }

    /* Pied de page de la frise (Figma « footer », Breakpoint=Mobile, 320:937) :
       une colonne sur fond brun, trois groupes séparés d'un trait jaune, le grand titre en bas */
    .frise .pied {
        width: auto;
        margin: 0;
        padding: calc(48 * var(--px-m)) calc(16 * var(--px-m));
        background: var(--brun);
    }

    .frise .pied__contenu {
        position: static;
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
    }

    .frise .pied__info {
        position: static;
        width: auto;
        height: auto;
        gap: calc(24 * var(--px-m));
        padding: calc(32 * var(--px-m)) 0;
        border-top: 1px solid var(--jaune);
        font-size: calc(16 * var(--px-m));
        line-height: calc(17 * var(--px-m));
    }

    .frise .pied__info--contact {
        order: 1;
        padding-top: 0;
        border-top: 0;
    }

    .frise .pied__info--reseaux { order: 2; }
    .frise .pied__info--infos { order: 3; padding-bottom: 0; }

    .frise .pied__info ul {
        gap: calc(8 * var(--px-m));
    }

    .frise .pied__titre {
        order: 4;
        display: flex;
        flex-direction: column;
        gap: calc(18 * var(--px-m));
        margin-top: calc(48 * var(--px-m));
    }

    .frise .pied__ligne {
        position: static;
        padding: 0;
        background: none;
        font-size: calc(60 * var(--px-m));
        line-height: calc(52 * var(--px-m));
    }
}


/* ==========================================================================
   4. FRISE : LES 39 BLOCS, DANS L'ORDRE
   Source : assets/css/timeline/NN-slug.css (un fichier par bloc jusqu'au 06/10)
   Portée : chaque règle commence par .evt--NN-slug ; cette section doit rester après la section 3
   ========================================================================== */

/* ---- Bloc 01 : rubrique-contexte ---------------------------------------------- */
/*
 * Bloc 01 : Contexte
 * Rubrique Contexte, ouverture de chapitre (Figma : chapter__intro 157:3857)
 *
 * Toutes les règles de ce bloc commencent par .evt--rubrique-contexte
 * Le menu, le grand titre et les marges intérieures viennent de la section 3 (.ouverture) :
 * ici, seulement la largeur et les couleurs du chapitre.
 */

/* TOUS LES ÉCRANS */
.evt--rubrique-contexte {
    background: var(--brun-clair);
    color: var(--brun); /* brun et non crème comme la maquette (1,82:1) : 7,52:1, comme les chapitres 04 et 05 (08/10, point 23) */
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--rubrique-contexte {
        width: calc(700 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
}

/* ---- Bloc 02 : ilot-shell ----------------------------------------------------- */
/*
 * Bloc 02 : Marais de Biestebroeck
 * Rubrique Contexte (Figma : story-slide 162:4032)
 *
 * Toutes les règles de ce bloc commencent par .evt--ilot-shell
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--ilot-shell {
        width: calc(1309 * var(--px-h));
    }

    /* La photo couvre tout le bloc */
    .evt--ilot-shell .image {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--ilot-shell .titre {
        top: calc(80 * var(--px-h));
        left: calc(136 * var(--px-h));
    }

    .evt--ilot-shell .titre__ligne:nth-child(2) {
        margin-left: calc(200 * var(--px-h));
    }

    .evt--ilot-shell .titre__ligne:nth-child(3) {
        margin-left: calc(39 * var(--px-h));
    }

    /*
     * Date sur trois lignes, en escalier elle aussi.
     * Écart volontaire à la maquette (essai du 30/09, Emmanuel) : dans Figma, la ligne « 08. » va de x 1432
     * à 1532 de la frise, à cheval sur le bord du premier écran (1436) : coupée par la colonne de navigation
     * au départ. La date est calée par la droite, 110 px plus à gauche que la maquette : son bord droit
     * tombe à x 1422 (1309 - 587 = 722 dans le bloc, qui commence à 700), sur tous les formats d'écran.
     */
    /* 08/10 (point 31 b) : 26 px plus haut (773 au lieu de 799), pour que « 1994 » ne cache plus le nom
       « Aujourd'hui » de la bande au premier écran. */
    .evt--ilot-shell .date {
        top: calc(773 * var(--px-h));
        right: calc(587 * var(--px-h));
    }

    .evt--ilot-shell .date__ligne:nth-child(1) {
        margin-left: calc(60 * var(--px-h));
    }

    .evt--ilot-shell .date__ligne:nth-child(2) {
        margin-left: calc(140 * var(--px-h));
    }

    .evt--ilot-shell .carte {
        top: calc(80 * var(--px-h));
        left: calc(820 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1121 : le cadre du titre fait 73,125 px de haut, la 3e ligne déborde de 1,2 px sur l'écart de 20 px
       (sans cela, l'image et la carte descendent de 1,2 px) */
    .frise .evt--ilot-shell .titre {
        height: calc(73.125 * var(--px-m));
    }

    /* Titre en escalier (Figma 487:1122) : « de » sous la fin de « Marais », « Biestebroeck » rentré de 16 px */
    .frise .evt--ilot-shell .titre__ligne:nth-child(2) {
        margin-left: calc(81.25 * var(--px-m));
    }

    .frise .evt--ilot-shell .titre__ligne:nth-child(3) {
        margin-left: calc(15.84 * var(--px-m));
    }

    /* Date sur trois lignes posée au milieu de l'image (Figma 487:1131) : à 167 px du bord gauche de l'image
       (45,2 % de ses 370 px, pour suivre la largeur de l'écran), 16,9 px au-dessus de son bord bas */
    .frise .evt--ilot-shell .date {
        margin: 0 0 calc(16.875 * var(--px-m)) 45.21%;
    }

    /* Escalier de la date (Figma 487:1132) : « 19. » à 24 px, « 08. » à 57 px, « 1994 » contre le bord gauche */
    .frise .evt--ilot-shell .date__ligne:nth-child(1) {
        margin-left: calc(24.375 * var(--px-m));
    }

    .frise .evt--ilot-shell .date__ligne:nth-child(2) {
        margin-left: calc(56.875 * var(--px-m));
    }
}

/* ---- Bloc 03 : rubrique-histoire ---------------------------------------------- */
/*
 * Bloc 03 : Histoire
 * Rubrique Histoire, ouverture de chapitre (Figma : chapter__intro 157:3895)
 *
 * Toutes les règles de ce bloc commencent par .evt--rubrique-histoire
 * Le menu, le grand titre et les marges intérieures viennent de la section 3 (.ouverture) :
 * ici, seulement la largeur et les couleurs du chapitre.
 */

/* TOUS LES ÉCRANS */
.evt--rubrique-histoire {
    background: var(--brun);
    color: var(--creme);
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--rubrique-histoire {
        width: calc(700 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
}

/* ---- Bloc 04 : prairies-1550 -------------------------------------------------- */
/*
 * Bloc 04 : Prairies et cours d’eau naturels
 * Rubrique Histoire (Figma : story-slide 158:970)
 *
 * Toutes les règles de ce bloc commencent par .evt--prairies-1550
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--prairies-1550 {
        width: calc(1516 * var(--px-h));
    }

    /* La carte de 1550 couvre tout le bloc */
    .evt--prairies-1550 .image {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--prairies-1550 .titre {
        top: calc(48 * var(--px-h));
        left: calc(239 * var(--px-h));
    }

    .evt--prairies-1550 .titre__ligne:nth-child(2) {
        margin-left: calc(208 * var(--px-h));
    }

    .evt--prairies-1550 .titre__ligne:nth-child(3) {
        margin-left: calc(428 * var(--px-h));
    }

    .evt--prairies-1550 .date {
        top: calc(856 * var(--px-h));
        left: calc(108 * var(--px-h));
    }

    /* La date fait 60 px de haut dans la maquette (45 + 2 x 7,5), pas 61 */
    .evt--prairies-1550 .date__ligne {
        padding-top: calc(7.6 * var(--px-h));
        padding-bottom: calc(7.6 * var(--px-h));
    }

    /* La carte déborde de 60 px sur l'espace qui suit le bloc, comme dans la maquette */
    .evt--prairies-1550 .carte {
        top: calc(604 * var(--px-h));
        left: calc(1198 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1153 : le cadre du titre fait 73,94 px de haut (la 3e ligne déborde de 0,4 px sur l'écart) */
    .frise .evt--prairies-1550 .titre {
        height: calc(73.94 * var(--px-m));
    }

    /* Titre en escalier (Figma 487:1154) : chaque ligne repart sous la fin de la précédente */
    .frise .evt--prairies-1550 .titre__ligne:nth-child(2) {
        margin-left: calc(84.5 * var(--px-m));
    }

    .frise .evt--prairies-1550 .titre__ligne:nth-child(3) {
        margin-left: calc(173.88 * var(--px-m));
    }

    /* Image moins haute que le cas courant : 370 x 240 (Figma 487:1161) */
    .frise .evt--prairies-1550 .image {
        aspect-ratio: 370 / 240;
    }

    /* Date en bas à gauche de l'image, à 26 px du bord gauche et 6,7 px du bord bas (Figma 487:1163) */
    .frise .evt--prairies-1550 .date {
        margin: 0 0 calc(6.7 * var(--px-m)) calc(26.28 * var(--px-m));
    }

    /* Étiquette de 24,4 px de haut, 2,4 px de marge sur les côtés (Figma 487:1164) */
    .frise .evt--prairies-1550 .date .date__ligne {
        padding: calc(3.047 * var(--px-m)) calc(2.4375 * var(--px-m));
    }
}

/* ---- Bloc 05 : territoire-agricole-1777 --------------------------------------- */
/*
 * Bloc 05 : Un territoire encore agricole
 * Rubrique Histoire (Figma : story-slide 158:1007)
 *
 * Toutes les règles de ce bloc commencent par .evt--territoire-agricole-1777
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--territoire-agricole-1777 {
        width: calc(1540 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le bloc précédent */
    }

    /* La carte de 1777 occupe le haut du bloc sur 686 px : le bas reste vide, fond crème */
    .evt--territoire-agricole-1777 .image {
        top: 0;
        left: 0;
        width: calc(1540 * var(--px-h));
        height: calc(686 * var(--px-h));
    }

    /*
     * Titre sur deux rangées : « Un territoire », puis « encore » et « agricole »
     * dans deux boîtes séparées sur la même rangée. Ce n'est pas une simple pile :
     * chaque ligne est posée en absolu dans le titre.
     * Dans la maquette, chaque boîte a une largeur fixe et 60 px de haut, le texte centré
     * (7,5 px au-dessus et en dessous du texte, au lieu des 8 px de la section 3).
     */
    .evt--territoire-agricole-1777 .titre {
        top: calc(42 * var(--px-h));
        left: calc(223 * var(--px-h));
        width: calc(622 * var(--px-h));
        height: calc(120 * var(--px-h));
    }

    .evt--territoire-agricole-1777 .titre__ligne {
        position: absolute;
        padding: calc(7.6 * var(--px-h)) 0 calc(7.6 * var(--px-h)) 0;
        text-align: center;
    }

    .evt--territoire-agricole-1777 .titre__ligne:nth-child(1) {
        top: 0;
        left: 0;
        width: calc(331 * var(--px-h));
    }

    .evt--territoire-agricole-1777 .titre__ligne:nth-child(2) {
        top: calc(60 * var(--px-h));
        left: calc(166 * var(--px-h));
        width: calc(208 * var(--px-h));
    }

    .evt--territoire-agricole-1777 .titre__ligne:nth-child(3) {
        top: calc(60 * var(--px-h));
        left: calc(374 * var(--px-h));
        width: calc(248 * var(--px-h));
    }

    /* Date contre le bord gauche, posée sur le bas de la carte de 1777 */
    .evt--territoire-agricole-1777 .date {
        top: calc(626 * var(--px-h));
        left: 0;
    }

    /* Boîte de 133 x 60 px dans la maquette : 6 px à gauche du texte, 7,5 px au-dessus et en dessous */
    .evt--territoire-agricole-1777 .date__ligne {
        width: calc(133 * var(--px-h));
        padding: calc(7.6 * var(--px-h)) calc(6 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* La carte déborde de 73 px sur l'espace qui suit le bloc, comme dans la maquette */
    .evt--territoire-agricole-1777 .carte {
        top: calc(378 * var(--px-h));
        left: calc(1235 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /*
     * Titre sur deux rangées (Figma 487:1178), comme sur ordinateur : « Un territoire », puis « encore » et
     * « agricole » dans deux boîtes côte à côte. Chaque boîte a une largeur fixe et 24,4 px de haut, le texte
     * centré : les lignes sont posées en absolu dans le titre (252,7 x 48,75 px).
     */
    .frise .evt--territoire-agricole-1777 .titre {
        width: calc(252.69 * var(--px-m));
        height: calc(48.75 * var(--px-m));
    }

    .frise .evt--territoire-agricole-1777 .titre .titre__ligne {
        position: absolute;
        padding: calc(3.047 * var(--px-m)) 0;
        text-align: center;
    }

    .frise .evt--territoire-agricole-1777 .titre__ligne:nth-child(1) {
        top: 0;
        left: 0;
        width: calc(134.47 * var(--px-m));
    }

    .frise .evt--territoire-agricole-1777 .titre__ligne:nth-child(2) {
        top: calc(24.375 * var(--px-m));
        left: calc(67.44 * var(--px-m));
        width: calc(84.5 * var(--px-m));
    }

    .frise .evt--territoire-agricole-1777 .titre__ligne:nth-child(3) {
        top: calc(24.375 * var(--px-m));
        left: calc(151.94 * var(--px-m));
        width: calc(100.75 * var(--px-m));
    }

    /* Image en bandeau : 370 x 165 (Figma 487:1185) */
    .frise .evt--territoire-agricole-1777 .image {
        aspect-ratio: 370 / 165;
    }

    /* Date contre le bord gauche de l'image, 5,6 px au-dessus de son bord bas (Figma 487:1187) */
    .frise .evt--territoire-agricole-1777 .date {
        margin: 0 0 calc(5.625 * var(--px-m)) 0;
    }

    /* Étiquette de 24,4 px de haut, 2,4 px de marge sur les côtés (Figma 487:1189) */
    .frise .evt--territoire-agricole-1777 .date .date__ligne {
        padding: calc(3.047 * var(--px-m)) calc(2.4375 * var(--px-m));
    }
}

/* ---- Bloc 06 : petit-moulin-1858 ---------------------------------------------- */
/*
 * Bloc 06 : Le Petit Moulin et les premières industries
 * Rubrique Histoire (Figma : story-slide 158:1024)
 *
 * Toutes les règles de ce bloc commencent par .evt--petit-moulin-1858
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--petit-moulin-1858 {
        width: calc(2662 * var(--px-h));
        margin-left: calc(160 * var(--px-h));
    }

    /* La carte postale de l'étang : à droite, sur toute la hauteur. La maquette la remontait de 1 px : un filet crème
       restait au bas, à côté de la carte (07/10) */
    .evt--petit-moulin-1858 .image:nth-of-type(1) {
        top: 0;
        left: calc(1122 * var(--px-h));
        width: calc(1540 * var(--px-h));
        height: calc(982 * var(--px-h));
    }

    /* La carte Huvenne : en bas à gauche, posée sur la carte postale (elle vient après dans le HTML) */
    .evt--petit-moulin-1858 .image:nth-of-type(2) {
        top: calc(491 * var(--px-h));
        left: calc(247 * var(--px-h));
        width: calc(1100 * var(--px-h));
        height: calc(490 * var(--px-h));
    }

    /*
     * Titre sur deux lignes, la deuxième décalée vers la droite par margin-left.
     * Dans la maquette, les lignes de ce bloc font 60 px de haut (45 px de texte + 2 x 7,5 px)
     * avec 6 px de marge à gauche et à droite.
     */
    .evt--petit-moulin-1858 .titre {
        top: calc(371 * var(--px-h));
        left: calc(650 * var(--px-h));
    }

    .evt--petit-moulin-1858 .titre__ligne,
    .evt--petit-moulin-1858 .date__ligne {
        padding: calc(7.6 * var(--px-h)) calc(6 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* La maquette laisse deux espaces après « et » : le surlignage de la première ligne fait 472 px */
    .evt--petit-moulin-1858 .titre__ligne:nth-child(1) {
        width: calc(472 * var(--px-h));
    }

    .evt--petit-moulin-1858 .titre__ligne:nth-child(2) {
        margin-left: calc(219 * var(--px-h));
    }

    /* La date : une étiquette de 152 px de large, le texte centré */
    .evt--petit-moulin-1858 .date {
        top: calc(169 * var(--px-h));
        left: calc(2411 * var(--px-h));
    }

    .evt--petit-moulin-1858 .date__ligne {
        width: calc(152 * var(--px-h));
        text-align: center;
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--petit-moulin-1858 .carte {
        top: calc(724 * var(--px-h));
        left: calc(2057 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(258 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Lignes de 24,4 px de haut et 2,4 px de marge sur les côtés (Figma 487:1203), comme les 60 px du bureau */
    .frise .evt--petit-moulin-1858 .titre .titre__ligne,
    .frise .evt--petit-moulin-1858 .date .date__ligne {
        padding: calc(3.047 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* La maquette laisse deux espaces après « et » : le surlignage de la première ligne fait 191,75 px */
    .frise .evt--petit-moulin-1858 .titre__ligne:nth-child(1) {
        width: calc(191.75 * var(--px-m));
    }

    /*
     * Deuxième ligne décalée de 89 px vers la droite (Figma 487:1206) : le titre fait 353 px de large et la ligne
     * est calée contre son bord droit. Sur un écran de 360 px, le titre est réduit à la largeur du bloc
     * et le décalage diminue d'autant : « industries » n'est pas coupé.
     */
    .frise .evt--petit-moulin-1858 .titre {
        width: calc(353.03 * var(--px-m));
        max-width: 100%;
    }

    .frise .evt--petit-moulin-1858 .titre__ligne:nth-child(2) {
        margin-left: auto;
    }

    /*
     * Deux images l'une sous l'autre, dans l'ordre inverse du HTML (Figma 487:1208 et 487:1210) :
     * d'abord la carte Huvenne en bandeau (370 x 165), puis la carte postale de l'étang (370 x 236)
     * avec la date ; la carte de texte descend d'une rangée.
     */
    .frise .evt--petit-moulin-1858 .image:nth-of-type(2) {
        grid-row: 2;
        aspect-ratio: 370 / 165;
    }

    .frise .evt--petit-moulin-1858 .image:nth-of-type(1) {
        grid-row: 3;
        aspect-ratio: 370 / 236;
    }

    .frise .evt--petit-moulin-1858 .carte {
        grid-row: 4;
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1221 : 16 px entre le texte et la flèche */
    }

    /* Date en haut à droite de la carte postale : 40,8 px sous son bord haut, 14,25 px de son bord droit (Figma 487:1212) */
    .frise .evt--petit-moulin-1858 .date {
        grid-row: 3;
        align-self: start;
        justify-self: end;
        margin: calc(40.84 * var(--px-m)) calc(14.25 * var(--px-m)) 0 0;
    }

    /* Étiquette de 61,75 px de large, le texte centré (Figma 487:1213) */
    .frise .evt--petit-moulin-1858 .date .date__ligne {
        width: calc(61.75 * var(--px-m));
        text-align: center;
    }
}

/* ---- Bloc 07 : industrialisation-1882 ----------------------------------------- */
/*
 * Bloc 07 : Anderlecht s’industrialise
 * Rubrique Histoire (Figma : story-slide 158:1074)
 *
 * Toutes les règles de ce bloc commencent par .evt--industrialisation-1882
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--industrialisation-1882 {
        width: calc(1325 * var(--px-h));
        margin-left: calc(160 * var(--px-h)); /* 160 px après le bloc 06 */
    }

    /* La carte postale occupe toute la largeur du bloc, sur 845 px de haut */
    .evt--industrialisation-1882 .image {
        top: 0;
        left: 0;
        width: calc(1325 * var(--px-h));
        height: calc(845 * var(--px-h));
    }

    /* Titre d'une seule ligne, qui déborde de 46 px à gauche dans l'espace entre les blocs */
    .evt--industrialisation-1882 .titre {
        top: calc(126 * var(--px-h));
        left: calc(-46 * var(--px-h));
    }

    /* Boîte de 699 x 60 px : 45 px de texte + 2 x 7,5 px, 6 px de marge à gauche
       (5 px à droite : l'apostrophe typographique ’ rend le texte un peu plus large que l'apostrophe droite de Figma) */
    .evt--industrialisation-1882 .titre__ligne {
        padding: calc(7.6 * var(--px-h)) calc(5 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* La date touche le coin haut gauche de la carte */
    .evt--industrialisation-1882 .date {
        top: calc(609 * var(--px-h));
        left: calc(881 * var(--px-h));
    }

    /* Boîte de 152 x 60 px : 9 px de marge à gauche, 11 px à droite
       (le texte rendu par le navigateur est 1 px plus étroit que dans Figma) */
    .evt--industrialisation-1882 .date__ligne {
        padding: calc(7.6 * var(--px-h)) calc(11 * var(--px-h)) calc(7.6 * var(--px-h)) calc(9 * var(--px-h));
    }

    /* Carte de 8 colonnes (605 px) : elle déborde de 313 px sur l'espace qui suit le bloc, comme dans la maquette */
    .evt--industrialisation-1882 .carte {
        top: calc(669 * var(--px-h));
        left: calc(1033 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(239 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Ligne de titre de 24,4 px de haut, 2,4 px de marge sur les côtés (Figma 487:1227) */
    .frise .evt--industrialisation-1882 .titre .titre__ligne {
        padding: calc(3.047 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* Image de 370 x 236 (Figma 487:1229) */
    .frise .evt--industrialisation-1882 .image {
        aspect-ratio: 370 / 236;
    }

    /* Date dans le tiers droit de l'image (Figma 487:1231) : à 246 px de son bord gauche (66,5 % de ses 370 px,
       pour suivre la largeur de l'écran), 41,6 px au-dessus de son bord bas */
    .frise .evt--industrialisation-1882 .date {
        margin: 0 0 calc(41.56 * var(--px-m)) 66.47%;
    }

    /* Étiquette de 61,75 x 24,4 px, le texte à 3,7 px du bord gauche (Figma 487:1233) */
    .frise .evt--industrialisation-1882 .date .date__ligne {
        width: calc(61.75 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0 calc(3.047 * var(--px-m)) calc(3.656 * var(--px-m));
    }

    /* Figma 487:1241 : 16 px entre le texte et la flèche */
    .frise .evt--industrialisation-1882 .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }
}

/* ---- Bloc 08 : site-industriel-1924 ------------------------------------------- */
/*
 * Bloc 08 : Le site pleinement industriel
 * Rubrique Histoire (Figma : story-slide 158:1113)
 *
 * Toutes les règles de ce bloc commencent par .evt--site-industriel-1924
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--site-industriel-1924 {
        width: calc(1524 * var(--px-h));
        margin-left: calc(160 * var(--px-h));
    }

    /* La carte de 1924 occupe un cadre de 770 x 489 px, sous le titre */
    .evt--site-industriel-1924 .image {
        top: calc(249 * var(--px-h));
        left: calc(305 * var(--px-h));
        width: calc(770 * var(--px-h));
        height: calc(489 * var(--px-h));
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    /* 129 et non 132 (maquette) : la 2e ligne finit sur le haut de la photo et de la carte (249), sans les mordre de 3 px (07/10) */
    .evt--site-industriel-1924 .titre {
        top: calc(129 * var(--px-h));
        left: calc(231 * var(--px-h));
    }

    /* Ici les lignes font 60 px de haut et 6 px de marge sur les côtés (44,8 + 2 x 7,6 px).
       Lettres 1 px plus bas que le centrage exact, comme la date : elles tombent sur celles de la maquette. */
    .evt--site-industriel-1924 .titre__ligne {
        padding: calc(8.6 * var(--px-h)) calc(6 * var(--px-h)) calc(6.6 * var(--px-h)) calc(6 * var(--px-h)); /* 44,8 + 8,6 + 6,6 = 60 px */
    }

    /* « Le site » : 181 px de large dans la maquette, le navigateur le dessine 4 px plus large */
    .evt--site-industriel-1924 .titre__ligne:nth-child(1) {
        margin-left: calc(92 * var(--px-h));
        padding-right: calc(2 * var(--px-h));
    }

    .evt--site-industriel-1924 .titre__ligne:nth-child(3) {
        margin-left: calc(230 * var(--px-h));
    }

    /* La date est calée sous le coin bas droit de l'image, sur une étiquette de 152 x 60 px */
    .evt--site-industriel-1924 .date {
        top: calc(738 * var(--px-h));
        left: calc(923 * var(--px-h));
    }

    .evt--site-industriel-1924 .date__ligne {
        width: calc(152 * var(--px-h));
        padding: calc(8.6 * var(--px-h)) calc(9 * var(--px-h)) calc(6.6 * var(--px-h)) calc(9 * var(--px-h)); /* chiffres 1 px plus bas que le défaut : ils tombent sur ceux de la maquette */
    }

    /* La carte de 5 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--site-industriel-1924 .carte {
        top: calc(249 * var(--px-h));
        left: calc(1075 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Lignes de 24,4 px de haut, 2,4 px de marge sur les côtés (Figma 487:1247) */
    .frise .evt--site-industriel-1924 .titre .titre__ligne {
        padding: calc(3.047 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* Titre en escalier (Figma 487:1247) : « Le site » rentré de 37 px (73,5 px de large avec l'espace qui suit
       dans la maquette), « pleinement » contre le bord, « industriel » à 93 px */
    .frise .evt--site-industriel-1924 .titre__ligne:nth-child(1) {
        width: calc(73.53 * var(--px-m));
        margin-left: calc(37.37 * var(--px-m));
    }

    .frise .evt--site-industriel-1924 .titre__ligne:nth-child(3) {
        margin-left: calc(93.44 * var(--px-m));
    }

    /* Image de 370 x 235 (Figma 487:1254) */
    .frise .evt--site-industriel-1924 .image {
        aspect-ratio: 370 / 235;
    }

    /* Date en bas à droite de l'image : 14,25 px de son bord droit, 5,6 px de son bord bas (Figma 487:1256) */
    .frise .evt--site-industriel-1924 .date {
        justify-self: end;
        margin: 0 calc(14.25 * var(--px-m)) calc(5.625 * var(--px-m)) 0;
    }

    /* Étiquette de 61,75 x 24,4 px, le texte à 3,7 px du bord gauche (Figma 487:1257) */
    .frise .evt--site-industriel-1924 .date .date__ligne {
        width: calc(61.75 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0 calc(3.047 * var(--px-m)) calc(3.656 * var(--px-m));
    }
}

/* ---- Bloc 09 : arrivee-de-shell ----------------------------------------------- */
/*
 * Bloc 09 : L’arrivée de Shell et l’Îlot Shell
 * Rubrique Histoire (Figma : story-slide 158:1177, partagée avec le bloc 10 : ce bloc en est la partie gauche, de 0 à 1166 px)
 *
 * Toutes les règles de ce bloc commencent par .evt--arrivee-de-shell
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Le bloc 10 suit sans espace : les deux blocs forment une seule diapositive de 3258 px */
    .evt--arrivee-de-shell {
        width: calc(1166 * var(--px-h));
        margin-left: calc(160 * var(--px-h));
    }

    /* La vue aérienne de 1930-1935 occupe le coin bas droit du bloc, jusqu'à son bord droit.
       Figma cale la photo sur son bord gauche (la bande rognée est à droite) : object-position fait de même. */
    .evt--arrivee-de-shell .image {
        top: calc(388 * var(--px-h));
        left: calc(430 * var(--px-h));
        width: calc(736 * var(--px-h));
        height: calc(594 * var(--px-h));
        object-position: left center;
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--arrivee-de-shell .titre {
        top: 0;
        left: calc(51 * var(--px-h));
    }

    /* Ici les lignes font 60 px de haut et 6 px de marge sur les côtés (45 + 2 x 7,5 px) */
    .evt--arrivee-de-shell .titre__ligne {
        padding: calc(7.6 * var(--px-h)) calc(6 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    .evt--arrivee-de-shell .titre__ligne:nth-child(2) {
        margin-left: calc(156 * var(--px-h));
    }

    .evt--arrivee-de-shell .titre__ligne:nth-child(3) {
        margin-left: calc(355 * var(--px-h));
    }

    /* La carte de texte, centrée en hauteur, touche le bord gauche de l'image */
    .evt--arrivee-de-shell .carte {
        top: calc(302 * var(--px-h));
        left: calc(52 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Section 487:1269, partagée avec le bloc 10 : ce bloc en garde le titre, la photo 1930-1935 et la carte.
       Pas de marge en bas : les 20 px avant la photo de 1944 (l'écart de la maquette) sont en haut du bloc 10. */
    .frise .evt--arrivee-de-shell {
        padding-bottom: 0;
    }

    /* Lignes de 24,375 px de haut et 2,4375 px sur les côtés (60 et 6 px au bureau, x 0,40625) */
    .frise .evt--arrivee-de-shell .titre .titre__ligne {
        padding: calc(3.046875 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* Escalier du titre (487:1271) : 63,375 px puis 144,22 px */
    .frise .evt--arrivee-de-shell .titre__ligne:nth-child(2) {
        margin-left: calc(63.375 * var(--px-m));
    }

    .frise .evt--arrivee-de-shell .titre__ligne:nth-child(3) {
        margin-left: calc(144.21875 * var(--px-m));
    }

    /* La vue aérienne de 1930-1935 (487:1278) : 370 x 299, calée à gauche comme au bureau */
    .frise .evt--arrivee-de-shell .image {
        aspect-ratio: 370 / 299;
        object-position: left center;
    }
}

/* ---- Bloc 10 : vues-aeriennes-1944-1960 --------------------------------------- */
/*
 * Bloc 10 : Vues aériennes
 * Rubrique Histoire (Figma : story-slide 158:1177, partagée avec le bloc 09 : ce bloc en est la partie droite, de 1166 à 3258 px)
 *
 * Toutes les règles de ce bloc commencent par .evt--vues-aeriennes-1944-1960
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Collé au bloc 09, sans espace : les deux blocs forment une seule diapositive dans la maquette */
    .evt--vues-aeriennes-1944-1960 {
        width: calc(2092 * var(--px-h));
        margin-left: 0;
    }

    /* Trois photos en damier : 1944 en haut, 1953 en bas, 1960 en haut, chacune touchant la suivante */
    .evt--vues-aeriennes-1944-1960 .image--1944 {
        top: 0;
        left: 0;
        width: calc(736 * var(--px-h));
        height: calc(588 * var(--px-h));
    }

    .evt--vues-aeriennes-1944-1960 .image--1953 {
        top: calc(392 * var(--px-h));
        left: calc(736 * var(--px-h));
        width: calc(739 * var(--px-h));
        height: calc(590 * var(--px-h));
    }

    .evt--vues-aeriennes-1944-1960 .image--1960 {
        top: 0;
        left: calc(1475 * var(--px-h));
        width: calc(569 * var(--px-h));
        height: calc(784 * var(--px-h));
    }

    /* Chaque date est une étiquette de 152 x 60 px, 9 px de marge à gauche, collée à un coin de sa photo */
    .evt--vues-aeriennes-1944-1960 .date__ligne {
        width: calc(152 * var(--px-h));
        padding: calc(7.6 * var(--px-h)) calc(9 * var(--px-h)) calc(7.6 * var(--px-h)) calc(9 * var(--px-h));
    }

    /* 1944 : sous la photo, à gauche ; ici l'étiquette fait 151 x 61 px (45 + 2 x 8 px) */
    .evt--vues-aeriennes-1944-1960 .date--1944 {
        top: calc(588 * var(--px-h));
        left: 0;
    }

    .evt--vues-aeriennes-1944-1960 .date--1944 .date__ligne {
        width: calc(151 * var(--px-h));
        padding: calc(8.1 * var(--px-h)) calc(9 * var(--px-h)) calc(8.1 * var(--px-h)) calc(9 * var(--px-h));
    }

    /* 1953 : au-dessus de la photo, à gauche */
    .evt--vues-aeriennes-1944-1960 .date--1953 {
        top: calc(332 * var(--px-h));
        left: calc(736 * var(--px-h));
    }

    /* 1960 : sous la photo, à gauche */
    .evt--vues-aeriennes-1944-1960 .date--1960 {
        top: calc(784 * var(--px-h));
        left: calc(1475 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Suite de la section 487:1269 (bloc 09) : 20 px entre la carte du bloc 09 et la photo de 1944 */
    .frise .evt--vues-aeriennes-1944-1960 {
        padding-top: calc(20 * var(--px-m));
    }

    /* Le titre reste caché (lecteurs d'écran) : hors de la grille, il n'ouvre pas de rangée */
    .frise .evt--vues-aeriennes-1944-1960 .titre {
        position: absolute;
        width: 1px;
        height: 1px;
    }

    /* Trois photos l'une sous l'autre (487:1280, 487:1285, 487:1291), chacune avec sa date */
    .frise .evt--vues-aeriennes-1944-1960 .image--1944 {
        grid-row: 1;
        aspect-ratio: 370 / 296;
    }

    .frise .evt--vues-aeriennes-1944-1960 .image--1953 {
        grid-row: 2;
        aspect-ratio: 370 / 295;
    }

    .frise .evt--vues-aeriennes-1944-1960 .image--1960 {
        grid-row: 3;
        aspect-ratio: 370 / 510;
    }

    /* Étiquettes de 61,75 x 24,375 px, texte à 3,66 px du bord (152 x 60 px et 9 px au bureau, x 0,40625) */
    .frise .evt--vues-aeriennes-1944-1960 .date .date__ligne {
        width: calc(61.75 * var(--px-m));
        padding: calc(3.046875 * var(--px-m)) calc(3.65625 * var(--px-m));
    }

    /* 1944 : en bas à gauche, à 5,7 px du bas de la photo ; étiquette de 61,34 x 24,78 px (151 x 61 au bureau) */
    .frise .evt--vues-aeriennes-1944-1960 .date--1944 {
        grid-row: 1;
        margin: 0 0 calc(5.71875 * var(--px-m)) 0;
    }

    .frise .evt--vues-aeriennes-1944-1960 .date--1944 .date__ligne {
        width: calc(61.34375 * var(--px-m));
        padding: calc(3.25 * var(--px-m)) calc(3.65625 * var(--px-m));
    }

    /* 1953 : collée au coin haut gauche de la photo */
    .frise .evt--vues-aeriennes-1944-1960 .date--1953 {
        grid-row: 2;
        align-self: start;
        margin: 0;
    }

    /* 1960 : en bas à gauche, à 5,6 px du bas de la photo */
    .frise .evt--vues-aeriennes-1944-1960 .date--1960 {
        grid-row: 3;
        margin: 0 0 calc(5.625 * var(--px-m)) 0;
    }
}

/* ---- Bloc 11 : apogee-de-shell ------------------------------------------------ */
/*
 * Bloc 11 : L’apogée de Shell
 * Rubrique Histoire (Figma : story-slide 158:1199)
 *
 * Toutes les règles de ce bloc commencent par .evt--apogee-de-shell
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--apogee-de-shell {
        width: calc(1142 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le bloc précédent */
    }

    /* La vue aérienne de 1971 couvre tout le bloc */
    .evt--apogee-de-shell .image {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Titre d'une seule ligne, en bas : il déborde de 82 px à gauche du bloc, comme dans la maquette */
    .evt--apogee-de-shell .titre {
        top: calc(857 * var(--px-h));
        left: calc(-82 * var(--px-h));
    }

    /* Ligne de 60 px de haut (45 px de texte centré) et 6 px de marge sur les côtés, au lieu de 61 px et 4 px */
    .evt--apogee-de-shell .titre__ligne {
        padding: calc(7.6 * var(--px-h)) calc(6 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* La carte déborde de 144 px sur l'espace qui suit le bloc, comme dans la maquette */
    .evt--apogee-de-shell .carte {
        top: calc(122 * var(--px-h));
        left: calc(908 * var(--px-h));
    }

    /* 1 px de plus pour le texte : avec l'apostrophe typographique (’), la 4e ligne
       « aérien. Le site occupe l’intégralité de la » mesure 312,2 px pour 312 px de place
       et « la » passait à la ligne ; la maquette (apostrophe droite) le garde sur la ligne */
    .evt--apogee-de-shell .carte p {
        margin-right: calc(-1 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Section 487:1307. Ligne de 24,375 px de haut et 2,4375 px sur les côtés (60 et 6 px au bureau, x 0,40625) */
    .frise .evt--apogee-de-shell .titre .titre__ligne {
        padding: calc(3.046875 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* La vue aérienne de 1971 (487:1311) : 370 x 318 */
    .frise .evt--apogee-de-shell .image {
        aspect-ratio: 370 / 318;
    }
}

/* ---- Bloc 12 : depart-de-shell ------------------------------------------------ */
/*
 * Bloc 12 : Le départ de Shell & la naissance du marais
 * Rubrique Histoire (Figma : story-slide 158:1232)
 *
 * Toutes les règles de ce bloc commencent par .evt--depart-de-shell
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Un bloc large : quatre vues aériennes en frise, de 1996 à 2024 */
    .evt--depart-de-shell {
        width: calc(3374 * var(--px-h));
        margin-left: calc(160 * var(--px-h)); /* 160 px après le bloc précédent */
    }

    /* Titre sur trois lignes : « & » seul, en retrait à gauche des deux autres */
    .evt--depart-de-shell .titre {
        top: calc(96 * var(--px-h));
        left: calc(230 * var(--px-h));
    }

    /* Dans cette maquette, les lignes font 60 px de haut (et non 61) et ont 6 px de marge sur les côtés */
    .evt--depart-de-shell .titre__ligne {
        padding: calc(7.6 * var(--px-h)) calc(6 * var(--px-h)) calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    .evt--depart-de-shell .titre__ligne:nth-child(1),
    .evt--depart-de-shell .titre__ligne:nth-child(3) {
        margin-left: calc(57 * var(--px-h));
    }

    /* Les quatre vues aériennes, bord à bord, en quinconce (haut, bas, haut, bas) */
    .evt--depart-de-shell .image--1996 {
        top: calc(276 * var(--px-h));
        left: calc(439 * var(--px-h));
        width: calc(578 * var(--px-h));
        height: calc(393 * var(--px-h));
        object-position: 50% 0%; /* calée en haut : le menu de l'outil affiche « 1996 », preuve de la date (docs/photos-frise.json, cadre 13) */
    }

    .evt--depart-de-shell .image--2004 {
        top: calc(401 * var(--px-h));
        left: calc(1017 * var(--px-h));
        width: calc(594 * var(--px-h));
        height: calc(464 * var(--px-h));
    }

    .evt--depart-de-shell .image--2012 {
        top: calc(276 * var(--px-h));
        left: calc(1611 * var(--px-h));
        width: calc(588 * var(--px-h));
        height: calc(393 * var(--px-h));
    }

    .evt--depart-de-shell .image--2024 {
        top: calc(401 * var(--px-h));
        left: calc(2199 * var(--px-h));
        width: calc(637 * var(--px-h));
        height: calc(464 * var(--px-h));
        object-position: 50% 50%; /* le fichier est déjà recadré sur la zone que montre la maquette, sans l'interface de l'outil (docs/photos-frise.json, cadre 16) */
    }

    /*
     * Les quatre dates, chacune calée contre le bord droit de sa photo
     * (en bas pour 1996, 2012 et 2024, en haut pour 2004).
     * Chaque étiquette a la largeur de la maquette, le texte à 9 px du bord gauche, 60 px de haut.
     * Elles sont placées par right (3374 moins le bord droit de la photo), pas par left :
     * leur largeur suit --px-h, un left en --px-l ne tombait juste qu'en 1512 x 982.
     */
    .evt--depart-de-shell .date__ligne {
        padding: calc(7.6 * var(--px-h)) calc(9 * var(--px-h)) calc(7.6 * var(--px-h)) calc(9 * var(--px-h));
    }

    .evt--depart-de-shell .date--1996 {
        top: calc(609 * var(--px-h));
        right: calc(2357 * var(--px-h));
    }

    .evt--depart-de-shell .date--1996 .date__ligne {
        width: calc(152 * var(--px-h));
    }

    .evt--depart-de-shell .date--2004 {
        top: calc(401 * var(--px-h));
        right: calc(1763 * var(--px-h));
    }

    .evt--depart-de-shell .date--2004 .date__ligne {
        width: calc(172 * var(--px-h));
    }

    .evt--depart-de-shell .date--2012 {
        top: calc(609 * var(--px-h));
        right: calc(1175 * var(--px-h));
    }

    .evt--depart-de-shell .date--2012 .date__ligne {
        width: calc(150 * var(--px-h));
    }

    .evt--depart-de-shell .date--2024 {
        top: calc(805 * var(--px-h));
        right: calc(538 * var(--px-h));
    }

    .evt--depart-de-shell .date--2024 .date__ligne {
        width: calc(163 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--depart-de-shell .carte {
        top: calc(276 * var(--px-h));
        left: calc(2720 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(239 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Section 487:1323. Lignes de 24,375 px de haut et 2,4375 px sur les côtés (60 et 6 px au bureau, x 0,40625) */
    .frise .evt--depart-de-shell .titre .titre__ligne {
        padding: calc(3.046875 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* « & » seul à gauche, les deux autres lignes décalées de sa largeur (487:1325) */
    .frise .evt--depart-de-shell .titre__ligne:nth-child(1),
    .frise .evt--depart-de-shell .titre__ligne:nth-child(3) {
        margin-left: calc(23.15625 * var(--px-m));
    }

    /* Les quatre vues aériennes l'une sous l'autre (487:1332, 1338, 1345, 1351), la carte en dessous */
    .frise .evt--depart-de-shell .image--1996 {
        grid-row: 2;
        aspect-ratio: 370 / 252;
        object-position: 50% 0%; /* calée en haut comme au bureau : le menu de l'outil affiche « 1996 » */
    }

    .frise .evt--depart-de-shell .image--2004 {
        grid-row: 3;
        aspect-ratio: 370 / 289;
    }

    .frise .evt--depart-de-shell .image--2012 {
        grid-row: 4;
        aspect-ratio: 370 / 247;
    }

    .frise .evt--depart-de-shell .image--2024 {
        grid-row: 5;
        aspect-ratio: 370 / 270;
    }

    .frise .evt--depart-de-shell .carte {
        grid-row: 6;
        --carte-ecart: calc(16 * var(--px-m)); /* 16 px entre le texte et la flèche (487:1362) */
    }

    /* Chaque date en bas à droite de sa photo, collée aux deux bords (demande d'Emmanuel du 06/10 :
       la maquette les posait à 28-37 px du bord droit, et 2004 en haut). Largeurs : celles de la maquette. */
    .frise .evt--depart-de-shell .date {
        align-self: end;
        justify-self: end;
        margin: 0;
    }

    .frise .evt--depart-de-shell .date .date__ligne {
        padding: calc(3.046875 * var(--px-m)) calc(3.65625 * var(--px-m));
    }

    .frise .evt--depart-de-shell .date--1996 {
        grid-row: 2;
    }

    .frise .evt--depart-de-shell .date--1996 .date__ligne {
        width: calc(61.75 * var(--px-m));
    }

    .frise .evt--depart-de-shell .date--2004 {
        grid-row: 3;
    }

    .frise .evt--depart-de-shell .date--2004 .date__ligne {
        width: calc(69.875 * var(--px-m));
    }

    .frise .evt--depart-de-shell .date--2012 {
        grid-row: 4;
    }

    .frise .evt--depart-de-shell .date--2012 .date__ligne {
        width: calc(60.9375 * var(--px-m));
    }

    .frise .evt--depart-de-shell .date--2024 {
        grid-row: 5;
    }

    .frise .evt--depart-de-shell .date--2024 .date__ligne {
        width: calc(66.21875 * var(--px-m));
    }
}

/* ---- Bloc 13 : ecosysteme-precieux -------------------------------------------- */
/*
 * Bloc 13 : Aujourd’hui : un écosystème précieux au cœur de la ville
 * Rubrique Histoire (Figma : story-slide 176:1314)
 *
 * Toutes les règles de ce bloc commencent par .evt--ecosysteme-precieux
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--ecosysteme-precieux {
        width: calc(3064 * var(--px-h));
        margin-left: calc(160 * var(--px-h));
    }

    /* Première photo : la moitié gauche du bloc (vue estivale du marais) */
    .evt--ecosysteme-precieux .image:nth-of-type(1) {
        top: 0;
        left: 0;
        width: calc(1484 * var(--px-h));
        height: calc(982 * var(--px-h));
    }

    /* Seconde photo, collée à la première : le jonc en fleur.
       La maquette cale la photo en haut et coupe le surplus en bas. */
    .evt--ecosysteme-precieux .image:nth-of-type(2) {
        top: 0;
        left: calc(1484 * var(--px-h));
        width: calc(1580 * var(--px-h));
        height: calc(982 * var(--px-h));
        object-position: center top;
    }

    /* Titre sur trois lignes empilées, la deuxième décalée vers la droite */
    .evt--ecosysteme-precieux .titre {
        top: calc(123 * var(--px-h));
        left: calc(174 * var(--px-h));
    }

    /* Ici les lignes font 69 px de haut : 12 px au-dessus et au-dessous du texte, 6 px sur les côtés.
       Comme dans la maquette, le fond de « au cœur de la ville » cache le bas du y et du p de la ligne du dessus
       (chaque ligne est peinte par-dessus la précédente, voir la section 3). */
    .evt--ecosysteme-precieux .titre__ligne {
        padding: calc(12.1 * var(--px-h)) calc(6 * var(--px-h)) calc(12.1 * var(--px-h)) calc(6 * var(--px-h));
    }

    .evt--ecosysteme-precieux .titre__ligne:nth-child(2) {
        margin-left: calc(92 * var(--px-h));
    }

    /* La dernière ligne (« Aujourd’hui ») est une étiquette fixe de 331 x 60 px, texte centré */
    .evt--ecosysteme-precieux .titre__ligne:nth-child(3) {
        width: calc(331 * var(--px-h));
        height: calc(60 * var(--px-h));
        padding: calc(7.5 * var(--px-h)) calc(8.5 * var(--px-h));
    }

    /* La carte de texte touche le bord droit de la première photo */
    .evt--ecosysteme-precieux .carte {
        top: calc(604 * var(--px-h));
        left: calc(1106 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Section 487:1366. Lignes de 28,03 px de haut : 4,875 px au-dessus et au-dessous du texte,
       2,4375 px sur les côtés (12 et 6 px au bureau, x 0,40625) */
    .frise .evt--ecosysteme-precieux .titre .titre__ligne {
        padding: calc(4.875 * var(--px-m)) calc(2.4375 * var(--px-m));
    }

    /* « au cœur de la ville » décalée de 37,375 px (487:1375) */
    .frise .evt--ecosysteme-precieux .titre__ligne:nth-child(2) {
        margin-left: calc(37.375 * var(--px-m));
    }

    /* « Aujourd’hui » : étiquette fixe de 134,47 x 24,375 px (331 x 60 au bureau, 487:1369) */
    .frise .evt--ecosysteme-precieux .titre__ligne:nth-child(3) {
        width: calc(134.46875 * var(--px-m));
        padding: calc(3.046875 * var(--px-m)) calc(3.453125 * var(--px-m));
    }

    /* Deux photos l'une sous l'autre : 370 x 245 (487:1378), puis 370 x 230 (487:1380), la carte en dessous */
    .frise .evt--ecosysteme-precieux .image:nth-of-type(1) {
        grid-row: 2;
        aspect-ratio: 370 / 245;
    }

    .frise .evt--ecosysteme-precieux .image:nth-of-type(2) {
        grid-row: 3;
        aspect-ratio: 370 / 230;
        object-position: center top; /* le jonc calé en haut, comme au bureau et dans la maquette */
    }

    .frise .evt--ecosysteme-precieux .carte {
        grid-row: 4;
    }
}

/* ---- Bloc 14 : rubrique-contestation ------------------------------------------ */
/*
 * Bloc 14 : Contestation
 * Rubrique Contestation, ouverture de chapitre (Figma : chapter__intro 219:1189)
 *
 * Toutes les règles de ce bloc commencent par .evt--rubrique-contestation
 * Le menu, le grand titre et les marges intérieures viennent de la section 3 (.ouverture) :
 * ici, seulement la largeur et les couleurs du chapitre.
 */

/* TOUS LES ÉCRANS */
.evt--rubrique-contestation {
    background: var(--rouge);
    color: var(--creme);
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--rubrique-contestation {
        width: calc(836 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Rien de propre au bloc (Figma 487:1392) : 340 px de haut, « 03 Contestation » en bas à gauche,
       tout vient de la section 3 (.ouverture) ; le fond rouge, de la règle « tous les écrans » */
}

/* ---- Bloc 15 : premiers-projets-immobiliers ----------------------------------- */
/*
 * Bloc 15 : Premiers projets immobiliers
 * Rubrique Contestation (Figma : story-slide 219:1331)
 *
 * Toutes les règles de ce bloc commencent par .evt--premiers-projets-immobiliers
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Tout le contenu est en haut du bloc : le titre, et la carte juste en dessous à gauche.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--premiers-projets-immobiliers {
        width: calc(1142 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après l'ouverture du chapitre */
    }

    /* Titre en escalier : la deuxième ligne commence là où finit la première */
    .evt--premiers-projets-immobiliers .titre {
        top: 0;
        left: calc(345 * var(--px-h));
    }

    /* Dans la maquette, chaque ligne a une largeur fixe et son texte y est centré */
    .evt--premiers-projets-immobiliers .titre__ligne {
        text-align: center;
    }

    .evt--premiers-projets-immobiliers .titre__ligne:nth-child(1) {
        width: calc(260 * var(--px-h));
    }

    .evt--premiers-projets-immobiliers .titre__ligne:nth-child(2) {
        width: calc(537 * var(--px-h));
        margin-left: calc(260 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--premiers-projets-immobiliers .carte {
        top: calc(61 * var(--px-h));
        left: 0;
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Ni date ni image : la carte monte en rangée 2, sinon la rangée vide de l'image
       ajoute 20 px d'écart sous le titre (Figma 487:1395 : carte 20 px sous le titre) */
    .frise .evt--premiers-projets-immobiliers .carte {
        grid-row: 2;
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1408 : 16 px entre le texte et la flèche */
    }

    /* Titre en escalier (Figma 487:1397) : chaque ligne a une largeur fixe, texte centré,
       la deuxième commence là où finit la première */
    .frise .evt--premiers-projets-immobiliers .titre__ligne {
        text-align: center;
    }

    .frise .evt--premiers-projets-immobiliers .titre__ligne:nth-child(1) {
        width: calc(105.63 * var(--px-m));
    }

    .frise .evt--premiers-projets-immobiliers .titre__ligne:nth-child(2) {
        width: calc(218.16 * var(--px-m));
        margin-left: calc(105.63 * var(--px-m));
    }
}

/* ---- Bloc 16 : enquete-publique-the-dock -------------------------------------- */
/*
 * Bloc 16 : Mise à l’enquête publique du projet “The Dock”
 * Rubrique Contestation (Figma : story-slide 219:1334)
 *
 * Toutes les règles de ce bloc commencent par .evt--enquete-publique-the-dock
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Le contenu est centré en hauteur (Figma : story-slide__inner, 508 px de haut, top 237).
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--enquete-publique-the-dock {
        width: calc(827 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent */
    }

    /* Titre en escalier sur trois lignes, collé au bord gauche du bloc */
    .evt--enquete-publique-the-dock .titre {
        top: calc(237 * var(--px-h));
        left: 0;
    }

    /* Les deux premières lignes : 508 px de large, 65 px de haut, texte à 10 px du bord.
       La hauteur est fixée : le texte rogné fait 44,8 px dans le navigateur (45 dans Figma),
       sans elle chaque ligne ferait 64,8 px et la ligne “The Dock” finirait 1 px trop haut. */
    .evt--enquete-publique-the-dock .titre__ligne:nth-child(1),
    .evt--enquete-publique-the-dock .titre__ligne:nth-child(2) {
        width: calc(508 * var(--px-h));
        height: calc(65 * var(--px-h));
        padding: calc(10 * var(--px-h));
    }

    .evt--enquete-publique-the-dock .titre__ligne:nth-child(1) {
        margin-left: calc(159 * var(--px-h));
    }

    /* “The Dock” : à droite de la carte, le long de son bord haut (ligne de 319 px dans Figma) */
    .evt--enquete-publique-the-dock .titre__ligne:nth-child(3) {
        margin-left: calc(508 * var(--px-h));
    }

    /* La carte de 5 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--enquete-publique-the-dock .carte {
        top: calc(367 * var(--px-h));
        left: calc(130 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Ni date ni image : la carte monte en rangée 2, sinon la rangée vide de l'image
       ajoute 20 px d'écart sous le titre (Figma 487:1412 : carte 20 px sous le titre) */
    .frise .evt--enquete-publique-the-dock .carte {
        grid-row: 2;
    }

    /* Titre en escalier (Figma 487:1414). Les deux premières lignes : 206 x 26,4 px,
       texte à 4 px du bord gauche et du haut (pas centré) */
    .frise .evt--enquete-publique-the-dock .titre__ligne:nth-child(1),
    .frise .evt--enquete-publique-the-dock .titre__ligne:nth-child(2) {
        width: calc(206.38 * var(--px-m));
        height: calc(26.41 * var(--px-m));
        padding: calc(4.06 * var(--px-m));
    }

    /* « Mise à l'enquête » décalée de 65 px, « publique du projet » au bord gauche.
       La première ligne s'arrête à son texte (4 px de marge à droite) : dans Figma, elle a la largeur
       de la deuxième et laisse 24 px vides après « enquête » (retiré à la demande d'Emmanuel, 06/10). */
    .frise .evt--enquete-publique-the-dock .titre__ligne:nth-child(1) {
        width: fit-content;
        margin-left: calc(64.59 * var(--px-m));
    }

    /* Le titre prend toute la largeur : la marge de “The Dock” se compte depuis son bord gauche */
    .frise .evt--enquete-publique-the-dock .titre {
        justify-self: stretch;
    }

    /* “The Dock” commence là où finit la ligne du dessus : 129,6 px de large à 206,4 px du bord,
       texte centré (Figma 487:1415) */
    .frise .evt--enquete-publique-the-dock .titre__ligne:nth-child(3) {
        width: calc(129.594 * var(--px-m));
        margin-left: calc(206.38 * var(--px-m));
        padding-inline: 0;
        text-align: center;
    }
}

/* ---- Bloc 17 : mobilisation-2018 ---------------------------------------------- */
/*
 * Bloc 17 : Mobilisation citoyenne
 * Rubrique Contestation (Figma : story-slide 219:1352)
 *
 * Toutes les règles de ce bloc commencent par .evt--mobilisation-2018
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Tout le contenu est calé en bas du bloc (Figma : story-slide__inner, 399 px de haut, top 583).
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--mobilisation-2018 {
        width: calc(1235 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent */
    }

    /* Le titre, une ligne, collée au bord gauche du bloc */
    .evt--mobilisation-2018 .titre {
        top: calc(705 * var(--px-h));
        left: 0;
    }

    /* Date sur deux lignes, en escalier, posée juste au-dessus du titre */
    .evt--mobilisation-2018 .date {
        top: calc(583 * var(--px-h));
        left: calc(219 * var(--px-h));
    }

    .evt--mobilisation-2018 .date__ligne:nth-child(2) {
        margin-left: calc(118 * var(--px-h));
    }

    /* Carte de 8 colonnes, de hauteur fixe : elle descend jusqu'au bas du bloc */
    .evt--mobilisation-2018 .carte {
        top: calc(705 * var(--px-h));
        left: calc(630 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1434 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--mobilisation-2018 .date {
        grid-row: 1;
        z-index: auto; /* le titre passe par-dessus la date, comme dans Figma */
    }

    .frise .evt--mobilisation-2018 .titre {
        grid-row: 2;
        margin-top: -20px;
    }

    /* Les deux lignes de la date en escalier, au-dessus du titre (Figma 487:1435, 487:1437) */
    .frise .evt--mobilisation-2018 .date__ligne:nth-child(1) {
        margin-left: calc(88.97 * var(--px-m));
    }

    .frise .evt--mobilisation-2018 .date__ligne:nth-child(2) {
        margin-left: calc(136.91 * var(--px-m));
    }

    .frise .evt--mobilisation-2018 .carte {
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1447 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 18 : permis-environnement ------------------------------------------- */
/*
 * Bloc 18 : Permis d’environnement accordé
 * Rubrique Contestation (Figma : story-slide 219:1362)
 *
 * Toutes les règles de ce bloc commencent par .evt--permis-environnement
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Tout le contenu est calé en haut du bloc.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--permis-environnement {
        width: calc(899 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent */
    }

    /* La date en haut à gauche, le titre juste en dessous */
    .evt--permis-environnement .date {
        top: 0;
        left: 0;
    }

    .evt--permis-environnement .titre {
        top: calc(61 * var(--px-h));
        left: 0;
    }

    /* Carte de 8 colonnes, de hauteur fixe, calée sous le titre et contre le bord droit du bloc */
    .evt--permis-environnement .carte {
        top: calc(122 * var(--px-h));
        left: calc(294 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1453 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--permis-environnement .date {
        grid-row: 1;
        z-index: auto; /* le titre passe par-dessus le jambage du « j » de janvier, comme dans Figma */
    }

    .frise .evt--permis-environnement .titre {
        grid-row: 2;
        margin-top: -20px;
    }

    .frise .evt--permis-environnement .carte {
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1464 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 19 : the-dock-abandonne --------------------------------------------- */
/*
 * Bloc 19 : The Dock abandonné
 * Rubrique Contestation (Figma : story-slide 221:1418)
 *
 * Toutes les règles de ce bloc commencent par .evt--the-dock-abandonne
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--the-dock-abandonne {
        width: calc(1181 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent, comme dans la maquette */
    }

    /* Titre sur deux lignes : la seconde, « le terrain est revendu », commence au bord droit de la carte */
    .evt--the-dock-abandonne .titre {
        top: calc(353 * var(--px-h));
        left: calc(142 * var(--px-h));
    }

    .evt--the-dock-abandonne .titre__ligne:nth-child(2) {
        margin-left: calc(463 * var(--px-h));
    }

    /* Dans la maquette, ces deux lignes finissent par une espace, que Figma ne compte pas :
       leur boîte est 0,06 em plus étroite que celle de la date. On retire donc ici l'espace
       de correction ajouté par la section 3 (sinon chaque ligne rouge serait 4 px trop large). */
    .evt--the-dock-abandonne .titre__ligne::after {
        width: 0;
    }

    /* La date est posée juste au-dessus du titre */
    .evt--the-dock-abandonne .date {
        top: calc(292 * var(--px-h));
        left: calc(142 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--the-dock-abandonne .carte {
        top: calc(414 * var(--px-h));
        left: 0;
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1470 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--the-dock-abandonne .date {
        grid-row: 1;
    }

    /* Le titre prend toute la largeur : sa deuxième ligne se cale à droite */
    .frise .evt--the-dock-abandonne .titre {
        grid-row: 2;
        justify-self: stretch;
        margin-top: -20px;
    }

    /* Figma 487:1471 : « le terrain est revendu » finit au bord droit de la carte
       (x 139,66 px sur un écran de 402) : marge automatique, pour tous les écrans */
    .frise .evt--the-dock-abandonne .titre__ligne:nth-child(2) {
        margin-left: auto;
    }

    /* Ces deux lignes finissent par une espace, que Figma ne compte pas : sans l'espace
       de correction de la section 3, leurs largeurs tombent sur celles de la maquette */
    .frise .evt--the-dock-abandonne .titre__ligne::after {
        width: 0;
    }

    .frise .evt--the-dock-abandonne .carte {
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1483 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 20 : terrain-revendu ------------------------------------------------ */
/*
 * Bloc 20 : Le terrain est revendu : 343 logements privés
 * Rubrique Contestation (Figma : story-slide 221:1420)
 *
 * Toutes les règles de ce bloc commencent par .evt--terrain-revendu
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--terrain-revendu {
        width: calc(901 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent, comme dans la maquette */
    }

    /* Une seule ligne de titre visible, qui finit au bord droit du bloc */
    .evt--terrain-revendu .titre {
        top: calc(645 * var(--px-h));
        left: calc(303 * var(--px-h));
    }

    /* Dans la maquette, cette ligne a une taille fixe : 598 px de large (texte centré, elle finit
       au bord du bloc) et 60 px de haut au lieu de 61 (la carte commence juste dessous).
       Lettres 1 px plus bas que le centrage exact (8,5 px au-dessus, 6,5 px dessous) :
       elles tombent sur celles de la maquette. */
    .evt--terrain-revendu .titre__ligne {
        width: calc(598 * var(--px-h));
        padding: calc(8.6 * var(--px-h)) calc(4 * var(--px-h)) calc(6.6 * var(--px-h)) calc(4 * var(--px-h));
        text-align: center;
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--terrain-revendu .carte {
        top: calc(705 * var(--px-h));
        left: 0;
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Ni date ni image : la carte monte en rangée 2, sinon la rangée vide de l'image
       ajoute 20 px d'écart sous le titre (Figma 487:1487 : carte 20 px sous le titre) */
    .frise .evt--terrain-revendu .carte {
        grid-row: 2;
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1497 : 16 px entre le texte et la flèche */
    }

    /* Figma 487:1489 : la ligne a une taille fixe, 243 x 24,4 px, texte centré */
    .frise .evt--terrain-revendu .titre .titre__ligne {
        width: calc(242.94 * var(--px-m));
        padding: calc(3.05 * var(--px-m)) calc(2.84 * var(--px-m));
        text-align: center;
    }
}

/* ---- Bloc 21 : naissance-de-l-alliance ---------------------------------------- */
/*
 * Bloc 21 : Naissance de l’Alliance
 * Rubrique Contestation (Figma : story-slide 221:1422)
 *
 * Toutes les règles de ce bloc commencent par .evt--naissance-de-l-alliance
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--naissance-de-l-alliance {
        width: calc(931 * var(--px-h));
        margin-left: calc(80 * var(--px-h));
    }

    /* Titre sur une ligne, sous la date */
    .evt--naissance-de-l-alliance .titre {
        top: calc(61 * var(--px-h));
        left: 0;
    }

    /* Date au-dessus du titre, décalée vers la droite */
    .evt--naissance-de-l-alliance .date {
        top: 0;
        left: calc(364 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    /* 122 et non 120 (maquette) : la carte commence au bas du titre au lieu de recouvrir ses 2 derniers px (07/10) */
    .evt--naissance-de-l-alliance .carte {
        top: calc(122 * var(--px-h));
        left: calc(326 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1503 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--naissance-de-l-alliance .date {
        grid-row: 1;
    }

    .frise .evt--naissance-de-l-alliance .titre {
        grid-row: 2;
        margin-top: -20px;
    }

    /* « Mai 2024 » finit au bord droit du titre (Figma 487:1506, x 147,88) */
    .frise .evt--naissance-de-l-alliance .date .date__ligne {
        margin-left: calc(147.88 * var(--px-m));
    }

    .frise .evt--naissance-de-l-alliance .carte {
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1514 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 22 : jumelage-marais-wiels ------------------------------------------ */
/*
 * Bloc 22 : Jumelage avec le Marais Wiels
 * Rubrique Contestation (Figma : story-slide 221:1439)
 *
 * Toutes les règles de ce bloc commencent par .evt--jumelage-marais-wiels
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * La date, le titre et la carte forment un groupe de 912 x 291 px centré en hauteur (top 346 px).
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--jumelage-marais-wiels {
        width: calc(912 * var(--px-h));
        margin-left: calc(80 * var(--px-h));
    }

    .evt--jumelage-marais-wiels .date {
        top: calc(346 * var(--px-h));
        left: 0;
    }

    /* Titre sous la date : la ligne fait 848 px de large, texte centré dedans */
    .evt--jumelage-marais-wiels .titre {
        top: calc(407 * var(--px-h));
        left: 0;
    }

    .evt--jumelage-marais-wiels .titre__ligne {
        width: calc(848 * var(--px-h));
        text-align: center;
    }

    /* La carte de 12 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--jumelage-marais-wiels .carte {
        top: calc(468 * var(--px-h));
        left: 0;
        width: calc(912 * var(--px-h));
        height: calc(169 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1520 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--jumelage-marais-wiels .date {
        grid-row: 1;
        z-index: auto; /* le titre cache le bas du « p » de Septembre, comme dans Figma */
    }

    .frise .evt--jumelage-marais-wiels .titre {
        grid-row: 2;
        margin-top: -20px;
    }

    /* Figma 487:1523 : la ligne fait 344,5 px de large, texte centré */
    .frise .evt--jumelage-marais-wiels .titre .titre__ligne {
        width: calc(344.5 * var(--px-m));
        text-align: center;
    }

    .frise .evt--jumelage-marais-wiels .carte {
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1531 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 23 : mobilisation-2025 ---------------------------------------------- */
/*
 * Bloc 23 : Mobilisation citoyenne
 * Rubrique Contestation (Figma : story-slide 221:1440)
 *
 * Toutes les règles de ce bloc commencent par .evt--mobilisation-2025
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--mobilisation-2025 {
        width: calc(1008 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc 22 */
    }

    /* Le titre sur une ligne, en bas à gauche, contre la carte ; 665 et non 667 (maquette) : il touche la date,
       sans les 2 px de vide de la maquette (07/10) */
    .evt--mobilisation-2025 .titre {
        top: calc(665 * var(--px-h));
        left: 0;
    }

    /* La date au-dessus du titre, alignée sur son bord droit */
    .evt--mobilisation-2025 .date {
        top: calc(604 * var(--px-h));
        left: calc(269 * var(--px-h));
    }

    /* La carte de 5 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--mobilisation-2025 .carte {
        top: calc(604 * var(--px-h));
        left: calc(630 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre (Figma 487:1537 : un seul groupe date + titre, 0,8 px entre les deux) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de la grille moins 0,8 px */
    .frise .evt--mobilisation-2025 .date {
        grid-row: 1;
        z-index: auto;
    }

    .frise .evt--mobilisation-2025 .titre {
        grid-row: 2;
        margin-top: -19.19px;
    }

    /* « Janvier 2025 » finit au bord droit du titre (Figma 487:1538, x 109,28) */
    .frise .evt--mobilisation-2025 .date .date__ligne {
        margin-left: calc(109.28 * var(--px-m));
    }
}

/* ---- Bloc 24 : destruction-illegale ------------------------------------------- */
/*
 * Bloc 24 : Destruction illégale du marais
 * Rubrique Contestation (Figma : story-slide 221:1502)
 *
 * Toutes les règles de ce bloc commencent par .evt--destruction-illegale
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--destruction-illegale {
        width: calc(1320 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc 23 */
    }

    /* La photo occupe le bas du bloc sur toute sa largeur, sous le titre */
    .evt--destruction-illegale .image {
        top: calc(294 * var(--px-h));
        left: 0;
        width: calc(1320 * var(--px-h));
        height: calc(688 * var(--px-h));
    }

    /* Le titre sur une ligne, posé juste au-dessus de la photo */
    .evt--destruction-illegale .titre {
        top: calc(233 * var(--px-h));
        left: 0;
    }

    /* La date, collée au-dessus du titre */
    .evt--destruction-illegale .date {
        top: calc(172 * var(--px-h));
        left: 0;
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--destruction-illegale .carte {
        top: calc(627 * var(--px-h));
        left: calc(715 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(355 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1553 : la date et le titre forment l'en-tête, au-dessus de la photo (pas posés dessus).
       Date en rangée 1, titre en rangée 2 remonté de l'écart de 20 px, photo en 3, carte en 4 */
    .frise .evt--destruction-illegale .date {
        grid-row: 1;
        z-index: auto; /* le titre passe par-dessus le jambage du « j » de janvier, comme dans Figma */
        align-self: start;
        margin: 0;
    }

    .frise .evt--destruction-illegale .titre {
        grid-row: 2;
        margin-top: -20px;
    }

    /* Photo de 370 x 193 (Figma 487:1559) */
    .frise .evt--destruction-illegale .image {
        grid-row: 3;
        aspect-ratio: 370 / 193;
    }

    .frise .evt--destruction-illegale .carte {
        grid-row: 4;
        --carte-ecart: calc(16 * var(--px-m)); /* Figma 487:1567 : 16 px entre le texte et la flèche */
    }
}

/* ---- Bloc 25 : demande-de-classement ------------------------------------------ */
/*
 * Bloc 25 : Demande de classement
 * Rubrique Contestation (Figma : story-slide 221:1503)
 *
 * Toutes les règles de ce bloc commencent par .evt--demande-de-classement
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Tout le contenu est en haut du bloc (Figma : story-slide__inner, 798 x 311 px, en 0, 0).
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--demande-de-classement {
        width: calc(798 * var(--px-h));
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent */
    }

    /* La date en haut à gauche, le titre juste dessous, collés au bord gauche du bloc */
    .evt--demande-de-classement .date {
        top: 0;
        left: 0;
    }

    .evt--demande-de-classement .titre {
        top: calc(61 * var(--px-h));
        left: 0;
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--demande-de-classement .carte {
        top: calc(122 * var(--px-h));
        left: calc(193 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(189 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* La date au-dessus du titre, sans écart (Figma 487:1573 : un seul groupe date + titre) :
       date en rangée 1, titre en rangée 2, remonté de l'écart de 20 px de la grille */
    .frise .evt--demande-de-classement .date {
        grid-row: 1;
        z-index: auto; /* le titre passe par-dessus le jambage du « p » de Printemps, comme dans Figma */
    }

    .frise .evt--demande-de-classement .titre {
        grid-row: 2;
        margin-top: -20px;
    }
}

/* ---- Bloc 26 : avis-crms ------------------------------------------------------ */
/*
 * Bloc 26 : Avis de la CRMS
 * Rubrique Contestation (Figma : story-slide 221:1504, puis galerie story-slide 221:1534)
 *
 * Toutes les règles de ce bloc commencent par .evt--avis-crms
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 * Le bloc couvre deux diapositives Figma : le texte (x 0 à 1083, contenu centré en hauteur :
 * story-slide__inner, 296 px de haut, top 343), puis 80 px d'espace et la galerie de quatre
 * photos (x 1163 à 3004).
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--avis-crms {
        width: calc(1163 * var(--px-h) + 1841 * var(--px-h)); /* texte (1163) puis galerie (1841), une seule echelle depuis le 06/10 */
        margin-left: calc(80 * var(--px-h));      /* espace laissé après le bloc précédent */
    }

    /* La date collée au bord gauche du bloc, le titre dessous, décalé de 171 px */
    .evt--avis-crms .date {
        top: calc(343 * var(--px-h));
        left: 0;
    }

    .evt--avis-crms .titre {
        top: calc(404 * var(--px-h));
        left: calc(171 * var(--px-h));
    }

    /* La carte de 12 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--avis-crms .carte {
        top: calc(465 * var(--px-h));
        left: calc(171 * var(--px-h));
        width: calc(912 * var(--px-h));
        height: calc(174 * var(--px-h));
    }

    /*
     * La galerie : quatre photos de 736,5 x 491 px (Figma), arrondies ici à 737 puis 736 px
     * de large pour rester bord à bord, en quinconce : bas, haut, bas, haut.
     * Les photos se lisent donc dans l'ordre chronologique en faisant défiler la frise
     * (24 janvier, 24 janvier, 2 février, mai 2025), et dans le même ordre que le HTML.
     * La maquette a les mêmes quatre cases, avec quatre fois la même photo provisoire :
     * l'ordre est un choix, noté dans docs/PHOTOS-FRISE-FINALE.md.
     *
     * Largeurs et décalages de la galerie en --px-h, comme les hauteurs : les photos gardent
     * le rapport 1,5 de la maquette sur tous les écrans. En --px-l, un écran 4:3 ou 5:4
     * rognait les deux banderoles. Depuis le 06/10, le départ de la galerie (x 1163) suit lui aussi --px-h.
     */
    .evt--avis-crms .image--1 {
        top: calc(491 * var(--px-h));
        left: calc(1163 * var(--px-h));
        width: calc(737 * var(--px-h));
        height: calc(491 * var(--px-h));
    }

    .evt--avis-crms .image--2 {
        top: 0;
        left: calc(1163 * var(--px-h) + 368 * var(--px-h));
        width: calc(737 * var(--px-h));
        height: calc(491 * var(--px-h));
    }

    .evt--avis-crms .image--3 {
        top: calc(491 * var(--px-h));
        left: calc(1163 * var(--px-h) + 737 * var(--px-h));
        width: calc(736 * var(--px-h));
        height: calc(491 * var(--px-h));
    }

    .evt--avis-crms .image--4 {
        top: 0;
        left: calc(1163 * var(--px-h) + 1105 * var(--px-h));
        width: calc(736 * var(--px-h));
        height: calc(491 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Deux sections Figma pour un seul bloc : le texte (487:1588) puis la galerie (487:1605),
       qui finit par 48 px de marge en bas */
    .frise .evt--avis-crms {
        padding-bottom: calc(48 * var(--px-m));
    }

    /* Figma 487:1592 : la date est une ligne à part, 20 px sous le titre (pas posée sur une photo) */
    .frise .evt--avis-crms .date {
        z-index: auto;
        align-self: start;
        margin: 0;
    }

    /* Les quatre photos l'une sous l'autre, sous la carte, 370 x 247 (Figma 487:1606 à 487:1612) */
    .frise .evt--avis-crms .image {
        aspect-ratio: 370 / 247;
    }

    /* Entre la carte et la première photo : 16 px en bas de la première section
       et 40 px en haut de la galerie, soit 56 px (20 de la grille + 36) */
    .frise .evt--avis-crms .image--1 {
        grid-row: 4;
        margin-top: calc(36 * var(--px-m));
    }

    .frise .evt--avis-crms .image--2 { grid-row: 5; }
    .frise .evt--avis-crms .image--3 { grid-row: 6; }
    .frise .evt--avis-crms .image--4 { grid-row: 7; }
}

/* ---- Bloc 27 : rubrique-quartier ---------------------------------------------- */
/*
 * Bloc 27 : Le Quartier
 * Rubrique Le Quartier, ouverture de chapitre (Figma : chapter__intro 211:1302)
 *
 * Toutes les règles de ce bloc commencent par .evt--rubrique-quartier
 * Le menu, le grand titre et les marges intérieures viennent de la section 3 (.ouverture) :
 * ici, seulement la largeur et les couleurs du chapitre.
 */

/* TOUS LES ÉCRANS */
.evt--rubrique-quartier {
    background: var(--bleu);
    color: var(--brun);
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--rubrique-quartier {
        width: calc(760 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le chapitre précédent */
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Rien de propre au bloc : l'ouverture du socle (340 px de haut, « 04 Le Quartier » à 16 px du bord
       gauche et 24 px du bas) correspond à la maquette (Figma 487:1614) */
}

/* ---- Bloc 28 : quartier-biestebroeck ------------------------------------------ */
/*
 * Bloc 28 : Le Quartier Biestebroeck
 * Rubrique Le Quartier (Figma : story-slide 226:1160)
 *
 * Toutes les règles de ce bloc commencent par .evt--quartier-biestebroeck
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--quartier-biestebroeck {
        width: calc(1540 * var(--px-h));
        margin-left: 0; /* collé à l'ouverture du chapitre (bloc 27), comme dans la maquette */
    }

    /* La vue sur les toits couvre tout le bloc ; Figma la cale sur son bord haut */
    .evt--quartier-biestebroeck .image {
        inset: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 0;
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--quartier-biestebroeck .titre {
        top: calc(30 * var(--px-h));
        left: calc(156 * var(--px-h));
    }

    /* Dans Figma, « Le » et « Quartier » gardent une espace en fin de ligne :
       leurs boîtes sont plus larges que le mot seul (70 et 234 px) */
    .evt--quartier-biestebroeck .titre__ligne:nth-child(1) {
        width: calc(70 * var(--px-h));
    }

    .evt--quartier-biestebroeck .titre__ligne:nth-child(2) {
        width: calc(234 * var(--px-h));
        margin-left: calc(70 * var(--px-h));
    }

    /* Boîte de 373 x 60 px : 45 px de texte + 2 x 7,5 px, 6 px de marge à gauche.
       Hauteur fixée : le texte rogné mesure 44,8 px dans le navigateur, la boîte ferait 59,8 px */
    .evt--quartier-biestebroeck .titre__ligne:nth-child(3) {
        width: calc(373 * var(--px-h));
        height: calc(60 * var(--px-h));
        margin-left: calc(187 * var(--px-h));
        padding: calc(7.5 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* La carte touche le bord droit et le bas du bloc */
    .evt--quartier-biestebroeck .carte {
        top: calc(604 * var(--px-h));
        left: calc(1162 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Lignes de 24,78 px comme dans la maquette (sans hauteur fixée : 24,7 px, le texte rogné fait 18,2 px) */
    .frise .evt--quartier-biestebroeck .titre .titre__ligne {
        height: calc(24.78 * var(--px-m));
    }

    /* Titre en escalier (Figma 487:1619) : « Quartier » décalé de 28,4 px, « Biestebroeck » de 76 px */
    .frise .evt--quartier-biestebroeck .titre__ligne:nth-child(2) {
        margin-left: calc(28.44 * var(--px-m));
    }

    /* « Biestebroeck » : boîte de 24,4 px de haut (et non 24,8), texte à 3 px du haut et 2,4 px des côtés */
    .frise .evt--quartier-biestebroeck .titre__ligne:nth-child(3) {
        height: calc(24.375 * var(--px-m));
        margin-left: calc(75.97 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) calc(2.438 * var(--px-m));
    }

    /* Image de 370 x 236 px (Figma 487:1626), calée sur son bord haut comme dans la maquette */
    .frise .evt--quartier-biestebroeck .image {
        aspect-ratio: 370 / 236;
        object-position: 50% 0;
    }
}

/* ---- Bloc 29 : densite-hors-norme --------------------------------------------- */
/*
 * Bloc 29 : Une densité hors norme
 * Rubrique Le Quartier (Figma : story-slide 226:1178)
 *
 * Toutes les règles de ce bloc commencent par .evt--densite-hors-norme
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--densite-hors-norme {
        width: calc(1320 * var(--px-h));
        margin-left: calc(160 * var(--px-h)); /* 160 px après le bloc 28 */
    }

    /* La photo occupe toute la largeur du bloc, sur 784 px de haut ; Figma la cale sur son bord haut */
    .evt--densite-hors-norme .image {
        top: 0;
        left: 0;
        width: calc(1320 * var(--px-h));
        height: calc(784 * var(--px-h));
        object-position: 50% 0;
    }

    /* Titre en escalier collé au haut du bloc : chaque ligne est décalée vers la droite par margin-left */
    .evt--densite-hors-norme .titre {
        top: 0;
        left: calc(72 * var(--px-h));
    }

    /* Boîtes de 60 x 130, 210 et 322 px (45 px de texte + 2 x 7,5 px), le mot centré.
       Hauteur fixée : le texte rogné mesure 44,8 px dans le navigateur, sans elle chaque ligne perdrait 0,2 px */
    .evt--densite-hors-norme .titre__ligne {
        height: calc(60 * var(--px-h));
        padding: calc(7.5 * var(--px-h)) 0;
        text-align: center;
    }

    .evt--densite-hors-norme .titre__ligne:nth-child(1) {
        width: calc(130 * var(--px-h));
    }

    .evt--densite-hors-norme .titre__ligne:nth-child(2) {
        width: calc(210 * var(--px-h));
        margin-left: calc(130 * var(--px-h));
    }

    .evt--densite-hors-norme .titre__ligne:nth-child(3) {
        width: calc(322 * var(--px-h));
        margin-left: calc(340 * var(--px-h));
    }

    /* La carte touche le bord droit et le bas du bloc, à cheval sur le bas de la photo */
    .evt--densite-hors-norme .carte {
        top: calc(604 * var(--px-h));
        left: calc(942 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Titre en escalier (Figma 487:1640) : boîtes de largeur fixe et de 24,4 px de haut (et non 24,8),
       le mot centré, 3 px au-dessus et en dessous */
    .frise .evt--densite-hors-norme .titre .titre__ligne {
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0;
        text-align: center;
    }

    .frise .evt--densite-hors-norme .titre__ligne:nth-child(1) {
        width: calc(52.81 * var(--px-m));
    }

    .frise .evt--densite-hors-norme .titre__ligne:nth-child(2) {
        width: calc(85.31 * var(--px-m));
        margin-left: calc(52.81 * var(--px-m));
    }

    .frise .evt--densite-hors-norme .titre__ligne:nth-child(3) {
        width: calc(130.81 * var(--px-m));
        margin-left: calc(138.13 * var(--px-m));
    }

    /* Image de 370 x 220 px (Figma 487:1647), calée sur son bord haut comme dans la maquette.
       La date « 1550 » de la maquette est un reste de copie : ce bloc n'a pas de date */
    .frise .evt--densite-hors-norme .image {
        aspect-ratio: 370 / 220;
        object-position: 50% 0;
    }
}

/* ---- Bloc 30 : manque-de-creches ---------------------------------------------- */
/*
 * Bloc 30 : Un manque criant de crèches
 * Rubrique Le Quartier (Figma : story-slide 228:1213)
 *
 * Toutes les règles de ce bloc commencent par .evt--manque-de-creches
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--manque-de-creches {
        width: calc(1665 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le bloc précédent */
    }

    /* La vue sur les toits occupe toute la hauteur du bloc, sur 1471 px de large :
       les 194 px de droite restent vides, fond crème */
    .evt--manque-de-creches .image {
        top: 0;
        left: 0;
        width: calc(1471 * var(--px-h));
        height: calc(982 * var(--px-h));
    }

    /*
     * Titre sur deux rangées, qui déborde de 92 px à gauche du bloc (sur l'espace laissé
     * après le bloc précédent), comme dans la maquette.
     * Dans la maquette, chaque boîte a une largeur fixe et 60 px de haut : le texte y est posé
     * à 10,5 px du bord gauche (première ligne) et à 2,5 px (deuxième ligne),
     * 7,5 px au-dessus et en dessous du texte au lieu des 8 px de la section 3.
     */
    .evt--manque-de-creches .titre {
        top: calc(306 * var(--px-h));
        left: calc(-92 * var(--px-h));
        width: calc(654 * var(--px-h));
        height: calc(120 * var(--px-h));
    }

    .evt--manque-de-creches .titre__ligne {
        position: absolute;
    }

    .evt--manque-de-creches .titre__ligne:nth-child(1) {
        top: 0;
        left: 0;
        width: calc(330 * var(--px-h));
        padding: calc(7.6 * var(--px-h)) 0 calc(7.6 * var(--px-h)) calc(10.5 * var(--px-h));
    }

    .evt--manque-de-creches .titre__ligne:nth-child(2) {
        top: calc(60 * var(--px-h));
        left: calc(185 * var(--px-h));
        width: calc(469 * var(--px-h));
        padding: calc(7.6 * var(--px-h)) 0 calc(7.6 * var(--px-h)) calc(2.5 * var(--px-h));
    }

    /* Boîte de 163 x 60 px dans la maquette : 6 px à gauche du texte, 7,5 px au-dessus et en dessous */
    .evt--manque-de-creches .date {
        top: calc(132 * var(--px-h));
        left: calc(1242 * var(--px-h));
    }

    .evt--manque-de-creches .date__ligne {
        width: calc(163 * var(--px-h));
        padding: calc(7.6 * var(--px-h)) 0 calc(7.6 * var(--px-h)) calc(6 * var(--px-h));
    }

    /* Carte de 8 colonnes (605 px), posée sur le bas du bloc : elle déborde de 4 px à droite, comme dans la maquette */
    .evt--manque-de-creches .carte {
        top: calc(686 * var(--px-h));
        left: calc(1064 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(296 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Titre sur deux lignes (Figma 487:1664) : boîtes de largeur fixe et de 24,4 px de haut (et non 24,8),
       3 px au-dessus et en dessous du texte */
    .frise .evt--manque-de-creches .titre .titre__ligne {
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0;
    }

    /* « Un manque » : 134 px de large, texte à 4,3 px du bord gauche */
    .frise .evt--manque-de-creches .titre__ligne:nth-child(1) {
        width: calc(134.06 * var(--px-m));
        padding-left: calc(4.27 * var(--px-m));
    }

    /* « criant de crèches » : décalé de 75 px, 190,5 px de large, texte à 1 px du bord gauche */
    .frise .evt--manque-de-creches .titre__ligne:nth-child(2) {
        width: calc(190.53 * var(--px-m));
        margin-left: calc(75.16 * var(--px-m));
        padding-left: calc(1.02 * var(--px-m));
    }

    /* Image de 370 x 247 px (Figma 487:1669) */
    .frise .evt--manque-de-creches .image {
        aspect-ratio: 370 / 247;
    }

    /* Date en haut à droite de l'image : 33 px sous son bord haut, 15 px avant son bord droit (Figma 487:1671) */
    .frise .evt--manque-de-creches .date {
        align-self: start;
        justify-self: end;
        margin: calc(33.2 * var(--px-m)) calc(15.28 * var(--px-m)) 0 0;
    }

    /* Étiquette de 66 x 24,4 px, le texte centré */
    .frise .evt--manque-de-creches .date .date__ligne {
        width: calc(66.22 * var(--px-m));
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0;
        text-align: center;
    }

    /* 16 px entre le texte de la carte et la flèche (Figma 487:1680) */
    .frise .evt--manque-de-creches .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }
}

/* ---- Bloc 31 : precarite-persistante ------------------------------------------ */
/*
 * Bloc 31 : Une précarité persistante
 * Rubrique Le Quartier (Figma : story-slide 228:1795, partagée avec les blocs 32 et 33 : ce bloc en est la partie gauche, de 0 à 660 px)
 *
 * Toutes les règles de ce bloc commencent par .evt--precarite-persistante
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--precarite-persistante {
        width: calc(660 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le bloc précédent */
    }

    /* Titre sur une seule ligne, en haut à gauche */
    .evt--precarite-persistante .titre {
        top: calc(99 * var(--px-h));
        left: calc(51 * var(--px-h));
    }

    /*
     * Dans la maquette, la ligne a une taille fixe : 691 x 60 px, texte à 6 px du bord gauche.
     * Hauteur fixée : sans elle, le texte rogné (44,8 px dans le navigateur, 45 dans Figma) donne 59,8 px.
     * 8 px de marge en haut (et non 7,5) : le texte tombe sur celui de la maquette, au pixel près.
     */
    .evt--precarite-persistante .titre__ligne {
        width: calc(691 * var(--px-h));
        height: calc(60 * var(--px-h));
        padding: calc(8 * var(--px-h)) calc(6 * var(--px-h)) calc(7 * var(--px-h));
    }

    /* Date sur deux lignes en escalier, collée au coin bas gauche de la carte */
    .evt--precarite-persistante .date {
        top: calc(431 * var(--px-h));
        left: calc(179 * var(--px-h));
    }

    /*
     * Chaque ligne de date a une taille fixe (60 px de haut), comme dans la maquette.
     * Hauteur fixée : sans elle, le texte rogné (44,8 px) donne 59,8 px et « 2021 » remonte.
     * Le texte est placé là où Figma le pose (6,5 et 8 px du bord gauche) plutôt que centré :
     * le navigateur le dessine 2 px plus étroit que Figma, centré il glisserait de 1 px.
     */
    .evt--precarite-persistante .date__ligne {
        height: calc(60 * var(--px-h));
        padding: calc(8 * var(--px-h)) calc(4 * var(--px-h)) calc(7 * var(--px-h));
    }

    .evt--precarite-persistante .date__ligne:nth-child(1) {
        width: calc(216 * var(--px-h));
        padding-left: calc(6.5 * var(--px-h));
    }

    .evt--precarite-persistante .date__ligne:nth-child(2) {
        width: calc(148 * var(--px-h));
        margin-left: calc(99 * var(--px-h));
        padding-left: calc(8 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--precarite-persistante .carte {
        top: calc(214 * var(--px-h));
        left: calc(395 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Titre sur une ligne (Figma 487:1687) : boîte de 280,7 x 24,4 px, texte à 2,4 px du bord gauche
       et 3 px au-dessus et en dessous */
    .frise .evt--precarite-persistante .titre .titre__ligne {
        width: calc(280.72 * var(--px-m));
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) calc(2.44 * var(--px-m));
    }

    /* Date en escalier, sous le titre (Figma 487:1690) : boîtes de largeur fixe et de 24,4 px de haut,
       le texte centré ; « 2021 » décalé de 40 px */
    .frise .evt--precarite-persistante .date .date__ligne {
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0;
        text-align: center;
    }

    .frise .evt--precarite-persistante .date__ligne:nth-child(1) {
        width: calc(87.75 * var(--px-m));
    }

    .frise .evt--precarite-persistante .date__ligne:nth-child(2) {
        width: calc(60.13 * var(--px-m));
        margin-left: calc(40.22 * var(--px-m));
    }

    /* 16 px entre le texte de la carte et la flèche (Figma 487:1701) */
    .frise .evt--precarite-persistante .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }
}

/* ---- Bloc 32 : logements-sociaux ---------------------------------------------- */
/*
 * Bloc 32 : Un parc de logements sociaux insuffisant
 * Rubrique Le Quartier (Figma : story-slide 228:1795, partagée avec les blocs 31 et 33 : ce bloc en est la partie centrale, de 660 à 1650 px)
 *
 * Toutes les règles de ce bloc commencent par .evt--logements-sociaux
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Collé au bloc 31, sans espace : les trois blocs forment une seule diapositive dans la maquette */
    .evt--logements-sociaux {
        width: calc(990 * var(--px-h));
        margin-left: 0;
    }

    /* Titre posé juste au-dessus de la carte, en bas du bloc */
    .evt--logements-sociaux .titre {
        top: calc(653 * var(--px-h));
        left: calc(76 * var(--px-h));
    }

    /* Lignes de 61 px comme dans la maquette (sans hauteur fixée : 60,8 px, le texte rogné fait 44,8 px) */
    .evt--logements-sociaux .titre__ligne {
        height: calc(61 * var(--px-h));
    }

    /*
     * La deuxième rangée du titre porte deux boîtes côte à côte : « sociaux » (sans fond)
     * puis « insuffisant » (fond bleu), qui commence là où finit « sociaux ».
     * Ces deux lignes sont donc posées en absolu dans le titre.
     */
    .evt--logements-sociaux .titre__ligne:nth-child(2),
    .evt--logements-sociaux .titre__ligne:nth-child(3) {
        position: absolute;
        top: calc(61 * var(--px-h));
    }

    .evt--logements-sociaux .titre__ligne:nth-child(2) {
        left: calc(234 * var(--px-h));
    }

    /* Dans la maquette, le fond bleu de « insuffisant » est un rectangle de 306 x 61 px */
    .evt--logements-sociaux .titre__ligne:nth-child(3) {
        left: calc(459 * var(--px-h));
        width: calc(306 * var(--px-h));
    }

    /* La carte de 12 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--logements-sociaux .carte {
        top: calc(775 * var(--px-h));
        left: 0;
        width: calc(912 * var(--px-h));
        height: calc(207 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /*
     * Titre (Figma 487:1717) : « Un parc de logements » sur la première rangée ; sur la deuxième,
     * « sociaux » décalé de 95 px, puis « insuffisant » (fond bleu) collé à sa droite.
     * Le titre devient une grille de deux colonnes pour poser ces deux lignes côte à côte.
     */
    .frise .evt--logements-sociaux .titre {
        display: grid;
        grid-template-columns: auto auto;
    }

    /* Lignes de 24,78 px comme dans la maquette (sans hauteur fixée : 24,7 px, le texte rogné fait 18,2 px) */
    .frise .evt--logements-sociaux .titre .titre__ligne {
        height: calc(24.78 * var(--px-m));
    }

    .frise .evt--logements-sociaux .titre__ligne:nth-child(1) {
        grid-column: 1 / -1;
    }

    .frise .evt--logements-sociaux .titre__ligne:nth-child(2) {
        grid-row: 2;
        grid-column: 1;
        margin-left: calc(95.06 * var(--px-m));
    }

    .frise .evt--logements-sociaux .titre__ligne:nth-child(3) {
        grid-row: 2;
        grid-column: 2;
    }

    /* Ni image ni date : la carte monte en rangée 2, sinon la rangée 2 vide ajoute 20 px d'écart.
       16 px entre le texte de la carte et la flèche (Figma 487:1734) */
    .frise .evt--logements-sociaux .carte {
        grid-row: 2;
        --carte-ecart: calc(16 * var(--px-m));
    }
}

/* ---- Bloc 33 : mesures-securitaires ------------------------------------------- */
/*
 * Bloc 33 : Des mesures sécuritaires vécues comme des violences
 * Rubrique Le Quartier (Figma : story-slide 228:1795, partagée avec les blocs 31 et 32 : ce bloc en est la partie droite, de 1650 à 3125 px)
 *
 * Toutes les règles de ce bloc commencent par .evt--mesures-securitaires
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* TOUS LES ÉCRANS */
.evt--mesures-securitaires .titre__ligne:nth-child(3) {
    background: var(--jaune);
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Collé au bloc 32, sans espace : les trois blocs forment une seule diapositive dans la maquette */
    .evt--mesures-securitaires {
        width: calc(1475 * var(--px-h));
        margin-left: 0;
    }

    /* La photo occupe la droite du bloc, jusqu'à son bord ; la carte la recouvre en partie */
    .evt--mesures-securitaires .image {
        top: calc(248 * var(--px-h));
        left: calc(453 * var(--px-h));
        width: calc(1022 * var(--px-h));
        height: calc(682 * var(--px-h));
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--mesures-securitaires .titre {
        top: calc(65 * var(--px-h));
        left: calc(129 * var(--px-h));
    }

    /* Lignes de 61 px comme dans la maquette (sans hauteur fixée : 60,8 px, le texte rogné fait 44,8 px,
       et la troisième ligne finirait 0,6 px trop haut) */
    .evt--mesures-securitaires .titre__ligne {
        height: calc(61 * var(--px-h));
    }

    .evt--mesures-securitaires .titre__ligne:nth-child(1) {
        margin-left: calc(259 * var(--px-h));
    }

    /* Dans la maquette, la deuxième ligne a une largeur fixe de 767 px, texte à 12 px du bord gauche */
    .evt--mesures-securitaires .titre__ligne:nth-child(2) {
        width: calc(767 * var(--px-h));
        padding-left: calc(12 * var(--px-h));
    }

    /* « des violences » : surlignée en jaune dans la maquette (ce n'est pas une date) */
    .evt--mesures-securitaires .titre__ligne:nth-child(3) {
        margin-left: calc(476 * var(--px-h));
    }

    /* La date déborde de 78 px sur le bloc 32 : elle touche le bord droit de sa carte, en bas */
    .evt--mesures-securitaires .date {
        top: calc(922 * var(--px-h));
        left: calc(-78 * var(--px-h));
    }

    /* Dans la maquette, l'étiquette a une taille fixe : 163 x 60 px, texte à 9 px du bord gauche.
       Hauteur fixée (sans elle : 59,8 px) et 8 px en haut : le texte tombe sur celui de la maquette */
    .evt--mesures-securitaires .date__ligne {
        width: calc(163 * var(--px-h));
        height: calc(60 * var(--px-h));
        padding: calc(8 * var(--px-h)) calc(4 * var(--px-h)) calc(7 * var(--px-h)) calc(9 * var(--px-h));
    }

    /* La carte de 8 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--mesures-securitaires .carte {
        top: calc(248 * var(--px-h));
        left: 0;
        width: calc(605 * var(--px-h));
        height: calc(277 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Dernier bloc du chapitre : 48 px sous le dernier élément, avant l'ouverture du chapitre 05 (Figma 487:1738) */
    .frise .evt--mesures-securitaires {
        padding-bottom: calc(48 * var(--px-m));
    }

    /* Lignes de 24,78 px comme dans la maquette (sans hauteur fixée : 24,7 px, le texte rogné fait 18,2 px) */
    .frise .evt--mesures-securitaires .titre .titre__ligne {
        height: calc(24.78 * var(--px-m));
    }

    /* Titre en escalier (Figma 487:1740) : « Des mesures » décalé de 105 px, « des violences » de 193 px */
    .frise .evt--mesures-securitaires .titre__ligne:nth-child(1) {
        margin-left: calc(105.22 * var(--px-m));
    }

    /* « sécuritaires vécues comme » : boîte de 311,6 px, le texte centré */
    .frise .evt--mesures-securitaires .titre__ligne:nth-child(2) {
        width: calc(311.59 * var(--px-m));
        text-align: center;
    }

    /* Sur un écran de moins de 380 px, le décalage diminue pour que la ligne (154 px) reste dans la marge
       de 16 px : 100vw moins 2 x 16 px de marge et la largeur de la ligne */
    .frise .evt--mesures-securitaires .titre__ligne:nth-child(3) {
        margin-left: min(calc(193.38 * var(--px-m)), calc(100vw - calc(186 * var(--px-m))));
    }

    /* Image de 370 x 247 px (Figma 487:1747) */
    .frise .evt--mesures-securitaires .image {
        aspect-ratio: 370 / 247;
    }

    /* Date posée sur l'image (cas courant du socle) : étiquette « 2024 » de 66 x 24,4 px, texte centré,
       comme dans la maquette (Figma 487:1726) */
    .frise .evt--mesures-securitaires .date .date__ligne {
        width: calc(66.22 * var(--px-m));
        height: calc(24.375 * var(--px-m));
        padding: calc(3.047 * var(--px-m)) 0;
        text-align: center;
    }

    /* 16 px entre le texte de la carte et la flèche (Figma 487:1734) */
    .frise .evt--mesures-securitaires .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }
}

/* ---- Bloc 34 : rubrique-aujourdhui -------------------------------------------- */
/*
 * Bloc 34 : Aujourd’hui
 * Rubrique Aujourd’hui, ouverture de chapitre (Figma : chapter__intro 228:1974)
 *
 * Toutes les règles de ce bloc commencent par .evt--rubrique-aujourdhui
 * Le menu, le grand titre et les marges intérieures viennent de la section 3 (.ouverture) :
 * ici, seulement la largeur et les couleurs du chapitre.
 */

/* TOUS LES ÉCRANS */
.evt--rubrique-aujourdhui {
    background: var(--jaune);
    color: var(--brun);
}

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--rubrique-aujourdhui {
        width: calc(760 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le chapitre précédent */
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Rien de propre au bloc : l'ouverture du socle (340 px de haut, « 05 Aujourd’hui » en 64 px,
       en bas à gauche, 24 px au-dessus du bas) correspond à la maquette (Figma 487:1749) */
}

/* ---- Bloc 35 : terrain-de-foot ------------------------------------------------ */
/*
 * Bloc 35 : Un terrain de foot improvisé
 * Rubrique Aujourd’hui (Figma : story-slide 228:2054)
 *
 * Toutes les règles de ce bloc commencent par .evt--terrain-de-foot
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    /* Collé à l'ouverture du chapitre (bloc 34), sans espace, comme dans la maquette */
    .evt--terrain-de-foot {
        width: calc(1317 * var(--px-h));
        margin-left: 0;
    }

    /* La photo couvre tout le bloc */
    .evt--terrain-de-foot .image {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Titre en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--terrain-de-foot .titre {
        top: calc(105 * var(--px-h));
        left: calc(41 * var(--px-h));
    }

    /*
     * Dans la maquette, chaque ligne a 10 px de marge tout autour : 45 + 2 x 10 = 65 px de haut.
     * Dans le navigateur, les capitales de Bugrino ne font que 44,8 px : la hauteur est fixée
     * à 65 px, sinon les lignes empilées remontent de 0,2 px à chaque rangée.
     */
    .evt--terrain-de-foot .titre__ligne {
        height: calc(65 * var(--px-h));
        padding: calc(10 * var(--px-h));
    }

    .evt--terrain-de-foot .titre__ligne:nth-child(2) {
        margin-left: calc(96 * var(--px-h));
    }

    .evt--terrain-de-foot .titre__ligne:nth-child(3) {
        margin-left: calc(73 * var(--px-h));
    }

    /* La carte occupe le coin bas droit du bloc */
    .evt--terrain-de-foot .carte {
        top: calc(604 * var(--px-h));
        left: calc(939 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1752. Le cadre du titre fait 117 px de haut dans la maquette (les trois lignes
       n'en occupent que 79) : l'image commence 40 + 117 + 20 = 177 px sous le haut du bloc */
    .frise .evt--terrain-de-foot .titre {
        height: calc(117 * var(--px-m));
    }

    /* Lignes de 26,4 px : 4,06 px de marge tout autour (3,25 et 1,6 px dans le socle) */
    .frise .evt--terrain-de-foot .titre .titre__ligne {
        padding: calc(4.0625 * var(--px-m));
    }

    /* Escalier du titre : « de foot » à 39 px, « improvisé » à 29,7 px du bord du titre */
    .frise .evt--terrain-de-foot .titre__ligne:nth-child(2) {
        margin-left: calc(39 * var(--px-m));
    }

    .frise .evt--terrain-de-foot .titre__ligne:nth-child(3) {
        margin-left: calc(29.66 * var(--px-m));
    }

    /* Image de 370 x 276 dans la maquette */
    .frise .evt--terrain-de-foot .image {
        aspect-ratio: 370 / 276;
    }
}

/* ---- Bloc 36 : crade-parties -------------------------------------------------- */
/*
 * Bloc 36 : Crade parties & soin du lieu
 * Rubrique Aujourd’hui (Figma : story-slides 228:2100 puis 228:2129, 1440 px plus loin)
 *
 * Toutes les règles de ce bloc commencent par .evt--crade-parties
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--crade-parties {
        width: calc(2699 * var(--px-h));
        margin-left: calc(160 * var(--px-h));     /* espace laissé après le bloc précédent */
    }

    /*
     * Deux photos en haut du bloc, 160 px d'écart entre elles.
     * Dans la maquette, chaque photo est recadrée par le haut : on en garde le bas (object-position).
     */
    .evt--crade-parties .image--1 {
        top: 0;
        left: 0;
        width: calc(1280 * var(--px-h));
        height: calc(796 * var(--px-h));
        object-position: 50% 100%;
    }

    .evt--crade-parties .image--2 {
        top: 0;
        left: calc(1440 * var(--px-h));
        width: calc(1259 * var(--px-h));
        height: calc(783 * var(--px-h));
        object-position: 50% 100%;
    }

    /*
     * Titre en escalier : chaque ligne est décalée vers la droite par margin-left.
     * La première ligne déborde de 242 px à gauche du bloc, sur la photo du bloc 35, comme dans la maquette.
     */
    .evt--crade-parties .titre {
        top: calc(409 * var(--px-h));
        left: calc(-242 * var(--px-h));
    }

    /*
     * Dans la maquette, chaque ligne a 10 px de marge tout autour : 45 + 2 x 10 = 65 px de haut.
     * Dans le navigateur, les capitales de Bugrino ne font que 44,8 px : la hauteur est fixée
     * à 65 px, sinon les lignes empilées remontent de 0,2 px à chaque rangée.
     */
    .evt--crade-parties .titre__ligne,
    .evt--crade-parties .date__ligne {
        height: calc(65 * var(--px-h));
        padding: calc(10 * var(--px-h));
    }

    .evt--crade-parties .titre__ligne:nth-child(2) {
        margin-left: calc(351 * var(--px-h));
    }

    /* 242 : la ligne commence au bord gauche de la photo (-242 + 242 = 0 ; la maquette la décalait de 0,7 px) */
    .evt--crade-parties .titre__ligne:nth-child(3) {
        margin-left: calc(242 * var(--px-h));
    }

    /* Date en haut, contre le bord supérieur de la première photo */
    .evt--crade-parties .date {
        top: 0;
        left: calc(997 * var(--px-h));
    }

    /* La carte de 12 colonnes : position et taille de la maquette (marges et flèche : section 3) */
    .evt--crade-parties .carte {
        top: calc(735 * var(--px-h));
        left: calc(685 * var(--px-h));
        width: calc(912 * var(--px-h));
        height: calc(188 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1773 (titre, première photo, date, carte) puis 487:1797 (seconde photo seule).
       Le cadre du titre fait 117 px de haut : la photo commence 40 + 117 + 20 = 177 px sous le haut du bloc */
    .frise .evt--crade-parties .titre {
        height: calc(117 * var(--px-m));
    }

    /* Lignes de titre et de date de 26,4 px : 4,06 px de marge tout autour */
    .frise .evt--crade-parties .titre .titre__ligne,
    .frise .evt--crade-parties .date .date__ligne {
        padding: calc(4.0625 * var(--px-m));
    }

    /* Escalier du titre : « Crade parties » déborde de 14,8 px dans la marge gauche du bloc,
       « & » est à 127,8 px et « soin du lieu » à 84 px du bord du titre */
    .frise .evt--crade-parties .titre__ligne:nth-child(1) {
        margin-left: -14.76px;
    }

    .frise .evt--crade-parties .titre__ligne:nth-child(2) {
        margin-left: calc(127.83 * var(--px-m));
    }

    .frise .evt--crade-parties .titre__ligne:nth-child(3) {
        margin-left: calc(83.96 * var(--px-m));
    }

    /* Les deux photos font 370 x 230 dans la maquette */
    .frise .evt--crade-parties .image {
        aspect-ratio: 370 / 230;
    }

    /* La date touche le haut de la première photo, à 24,5 px de son bord droit */
    .frise .evt--crade-parties .date {
        align-self: start;
        justify-self: end;
        margin: 0 calc(24.5 * var(--px-m)) 0 0;
    }

    /* Carte : 16 px entre le texte et la flèche dans cette section de la maquette */
    .frise .evt--crade-parties .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }

    /* Seconde photo sous la carte (Figma 487:1797) : 16 px de bas de section + 40 px de haut
       de la section suivante, soit 56 px (20 px d'écart de la grille + 36 px) */
    .frise .evt--crade-parties .image--2 {
        grid-row: 4;
        margin-top: calc(36 * var(--px-m));
    }
}

/* ---- Bloc 37 : dragon-papier-mache -------------------------------------------- */
/*
 * Bloc 37 : Un dragon en papier mâché pour défendre le marais
 * Rubrique Aujourd’hui (Figma : story-slide 228:2172)
 *
 * Toutes les règles de ce bloc commencent par .evt--dragon-papier-mache
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--dragon-papier-mache {
        width: calc(1119 * var(--px-h));
        margin-left: calc(160 * var(--px-h)); /* 160 px après le bloc 36 */
    }

    /* La photo occupe toute la largeur du bloc, sous une bande crème de 148 px.
       Calée à droite : la femme du premier plan sort de sous la date */
    .evt--dragon-papier-mache .image {
        top: calc(148 * var(--px-h));
        left: 0;
        width: calc(1119 * var(--px-h));
        height: calc(834 * var(--px-h));
        object-position: 100% 50%;
    }

    /* Titre en escalier, qui déborde de 210 px à gauche dans l'espace entre les blocs */
    .evt--dragon-papier-mache .titre {
        top: calc(148 * var(--px-h));
        left: calc(-210 * var(--px-h));
    }

    /* Ici les lignes ont 10 px de marge tout autour et font 65 px de haut dans la maquette
       (45 + 2 x 10 ; le navigateur donne 44,8 px au texte : 0,1 px de plus en haut et en bas) */
    .evt--dragon-papier-mache .titre__ligne,
    .evt--dragon-papier-mache .date__ligne {
        padding: calc(10.1 * var(--px-h)) calc(10 * var(--px-h)) calc(10.1 * var(--px-h)) calc(10 * var(--px-h));
    }

    /* « Un dragon » : 300 px de large dans la maquette, le navigateur le dessine 4 px plus large */
    .evt--dragon-papier-mache .titre__ligne:nth-child(1) {
        margin-left: calc(210 * var(--px-h));
        padding-right: calc(6.5 * var(--px-h));
    }

    .evt--dragon-papier-mache .titre__ligne:nth-child(3) {
        margin-left: calc(352 * var(--px-h));
    }

    /* La date touche le coin haut gauche de la carte */
    .evt--dragon-papier-mache .date {
        top: calc(539 * var(--px-h));
        left: calc(479 * var(--px-h)); /* 479 + 262 = 741 : le coin de la carte */
    }

    /* La carte est posée dans le coin bas droit de la photo */
    /* 741 + 378 = 1119 : le bord droit de la carte est celui de la photo (la maquette laissait 0,3 px) */
    .evt--dragon-papier-mache .carte {
        top: calc(604 * var(--px-h));
        left: calc(741 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1800. Le cadre du titre fait 117 px de haut : la photo commence 40 + 117 + 20 = 177 px
       sous le haut du bloc. Le titre prend toute la largeur pour que la 3e ligne se cale sur le bord droit */
    .frise .evt--dragon-papier-mache .titre {
        justify-self: stretch;
        height: calc(117 * var(--px-m));
    }

    /* Lignes de titre et de date de 26,4 px : 4,06 px de marge tout autour */
    .frise .evt--dragon-papier-mache .titre .titre__ligne,
    .frise .evt--dragon-papier-mache .date .date__ligne {
        padding: calc(4.0625 * var(--px-m));
    }

    /* Escalier du titre : « Un dragon » à 85,3 px du bord, « en papier mâché » contre le bord */
    .frise .evt--dragon-papier-mache .titre__ligne:nth-child(1) {
        margin-left: calc(85.31 * var(--px-m));
    }

    /* 3e ligne à 143 px dans la maquette, qui n'y écrit que « le marais » (108 px de large).
       « pour défendre le marais » fait 265 px : à 143 px, elle sortirait de l'écran.
       Elle se cale donc sur le bord droit du titre, sans jamais dépasser 143 px de décalage */
    .frise .evt--dragon-papier-mache .titre__ligne:nth-child(3) {
        margin-left: clamp(0px, calc(100% - calc(265 * var(--px-m))), calc(143 * var(--px-m)));
    }

    /* Photo de 370 x 276 dans la maquette */
    .frise .evt--dragon-papier-mache .image {
        aspect-ratio: 370 / 276;
    }

    /* La date est posée au milieu de la photo : à 158,3 px du bord gauche et 129,3 px du haut
       pour une photo de 370 px. En % de la largeur (une marge en % suit la largeur, même en haut),
       elle garde sa place sur la photo quel que soit l'écran */
    .frise .evt--dragon-papier-mache .date {
        align-self: start;
        justify-self: start;
        margin: 34.94% 0 0 42.78%;
    }
}

/* ---- Bloc 38 : portrait-du-defenseur ------------------------------------------ */
/*
 * Bloc 38 : Portrait du défenseur
 * Rubrique Aujourd’hui (Figma : story-slide 235:2192)
 *
 * Toutes les règles de ce bloc commencent par .evt--portrait-du-defenseur
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--portrait-du-defenseur {
        width: calc(1579 * var(--px-h));
        margin-left: calc(160 * var(--px-h)); /* 160 px après le bloc 37 */
    }

    /* La photo couvre tout le bloc (983 px de haut dans la maquette : 1 px sous le bas du bloc) */
    .evt--portrait-du-defenseur .image {
        top: 0;
        left: 0;
        width: calc(1579 * var(--px-h));
        height: calc(983 * var(--px-h));
    }

    /* Titre seul, en escalier : chaque ligne est décalée vers la droite par margin-left */
    .evt--portrait-du-defenseur .titre {
        top: calc(395 * var(--px-h));
        left: calc(40 * var(--px-h));
    }

    /* Lignes de 61 px dans la maquette (45 + 2 x 8 ; le navigateur donne 44,8 px au texte : 0,1 px de plus en haut et en bas) */
    .evt--portrait-du-defenseur .titre__ligne {
        padding: calc(8.1 * var(--px-h)) calc(4 * var(--px-h)) calc(8.1 * var(--px-h)) calc(4 * var(--px-h));
    }

    /* « Portrait » : 214 px de large dans la maquette, le navigateur le dessine 4 px plus large */
    .evt--portrait-du-defenseur .titre__ligne:nth-child(1) {
        margin-left: calc(48 * var(--px-h));
        padding-right: 0;
    }

    /* « du » a 10 px de marge tout autour : 65 px de haut */
    .evt--portrait-du-defenseur .titre__ligne:nth-child(2) {
        padding: calc(10.1 * var(--px-h)) calc(10 * var(--px-h)) calc(10.1 * var(--px-h)) calc(10 * var(--px-h));
    }

    .evt--portrait-du-defenseur .titre__ligne:nth-child(3) {
        margin-left: calc(95 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1824 : titre seul (pas de carte), puis la photo. « du » a 4,06 px de marge
       tout autour (ligne de 26,4 px) ; les deux autres lignes gardent celles du socle (24,8 px) */
    .frise .evt--portrait-du-defenseur .titre .titre__ligne:nth-child(2) {
        padding: calc(4.0625 * var(--px-m));
    }

    /* Escalier du titre : « Portrait » à 19,5 px, « défenseur » à 38,6 px du bord du titre */
    .frise .evt--portrait-du-defenseur .titre__ligne:nth-child(1) {
        margin-left: calc(19.5 * var(--px-m));
    }

    .frise .evt--portrait-du-defenseur .titre__ligne:nth-child(3) {
        margin-left: calc(38.59 * var(--px-m));
    }

    /* Photo de 370 x 230 dans la maquette */
    .frise .evt--portrait-du-defenseur .image {
        aspect-ratio: 370 / 230;
    }
}

/* ---- Bloc 39 : la-lutte-continue ---------------------------------------------- */
/*
 * Bloc 39 : Aujourd’hui : la lutte continue
 * Rubrique Aujourd’hui (Figma : story-slides 235:2235 et 235:2217)
 *
 * Toutes les règles de ce bloc commencent par .evt--la-lutte-continue
 * Les nombres sont les mesures de la maquette Figma, en px, depuis le coin haut gauche du bloc.
 * Chacun est multiplié par --px-h (une seule échelle, celle de la hauteur de l'écran) :
 * voir la section 1.
 *
 * Le bloc couvre deux diapositives de la maquette : la première (1579 px de large)
 * porte la photo de la crade party, le titre et la carte ; la seconde (une photo seule,
 * 1119 x 834 px) commence 160 px après la fin de la première, à 1739 px du bord gauche.
 */

/* ORDINATEUR (769 px et plus, en paysage : section 1) : positions de la maquette FINALE, en pixels de la maquette (--px-h) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    .evt--la-lutte-continue {
        width: calc(2858 * var(--px-h));
        margin-left: calc(160 * var(--px-h));
    }

    /* Première photo : toute la première diapositive (atelier de juin 2025, docs/photos-frise.json, cadre 33).
       Calée au quart de sa hauteur : les têtes, en haut, et la table de plans, en bas, restent visibles. */
    .evt--la-lutte-continue .image:nth-of-type(1) {
        top: 0;
        left: 0;
        width: calc(1579 * var(--px-h));
        height: calc(982 * var(--px-h));
        object-position: 50% 25%;
    }

    /* Seconde photo : la seconde diapositive, calée en haut, 834 px de haut (le bas du bloc reste vide).
       Elle est posée par-dessus la carte : comme dans la maquette, elle en cache les 13 derniers pixels à droite. */
    .evt--la-lutte-continue .image:nth-of-type(2) {
        top: 0;
        left: calc(1739 * var(--px-h));
        width: calc(1119 * var(--px-h));
        height: calc(834 * var(--px-h));
    }

    /* Titre sur deux lignes empilées, collé en haut du bloc, la seconde décalée vers la droite */
    .evt--la-lutte-continue .titre {
        top: 0;
        left: calc(149 * var(--px-h));
    }

    /* Ici les lignes font 65 px de haut : 10 px de marge autour du texte (8 px et 4 px par défaut) */
    .evt--la-lutte-continue .titre__ligne {
        padding: calc(10.1 * var(--px-h)) calc(10 * var(--px-h)) calc(10.1 * var(--px-h)) calc(10 * var(--px-h));
    }

    .evt--la-lutte-continue .titre__ligne:nth-child(2) {
        margin-left: calc(236 * var(--px-h));
    }

    /* Carte de 8 colonnes (605 x 296 px) : elle franchit l'espace entre les deux photos et s'arrête au bord de la
       seconde (1134 + 605 = 1739). La maquette la posait à 1147 : elle mordait de 13 px sur la seconde photo (07/10) */
    .evt--la-lutte-continue .carte {
        top: calc(635 * var(--px-h));
        left: calc(1134 * var(--px-h));
        width: calc(605 * var(--px-h));
        height: calc(296 * var(--px-h));
    }
}

/* MOBILE (768 px et moins, portrait ou écran bas : section 1) : maquette Figma « Mobile » (487:1095). Le cas courant (titre, image et date,
   carte, en colonne) vient de la section 3, partie MOBILE ; ici, seulement ce qui est propre au bloc. */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Figma 487:1835 (titre, première photo, carte) puis 487:1855 (seconde photo seule ; la maquette laissait
       48 px avant le pied de page, retirés le 07/10 : le pied colle au bloc) */
    .frise .evt--la-lutte-continue {
        padding-bottom: 0;
    }

    /* Lignes de titre de 26,4 px : 4,06 px de marge tout autour */
    .frise .evt--la-lutte-continue .titre .titre__ligne {
        padding: calc(4.0625 * var(--px-m));
    }

    /* « La lutte continue » décalée de 95,9 px vers la droite */
    .frise .evt--la-lutte-continue .titre__ligne:nth-child(2) {
        margin-left: calc(95.88 * var(--px-m));
    }

    /* Première photo de 370 x 230, seconde de 370 x 276 dans la maquette */
    .frise .evt--la-lutte-continue .image:nth-of-type(1) {
        aspect-ratio: 370 / 230;
    }

    /* Seconde photo sous la carte (Figma 487:1855) : 16 px de bas de section + 40 px de haut
       de la section suivante, soit 56 px (20 px d'écart de la grille + 36 px) */
    .frise .evt--la-lutte-continue .image:nth-of-type(2) {
        grid-row: 4;
        margin-top: calc(36 * var(--px-m));
        aspect-ratio: 370 / 276;
    }

    /* Carte : 16 px entre le texte et la flèche dans cette section de la maquette */
    .frise .evt--la-lutte-continue .carte {
        --carte-ecart: calc(16 * var(--px-m));
    }
}


/* ==========================================================================
   5. ACCUEIL : EN-TETE (vidéo, titre, banderole des actualités)
   Source : hero.css
   Portée : index.php, section.hero
   ========================================================================== */

/*
 * Section 5 (ancienne feuille hero.css, réunie dans site.css le 06/10) : la section d'accueil (maquette FINALE, cadre « hero », 3:129).
 *
 * Les noms de classes reprennent exactement les noms des calques Figma
 * (hero, hero__video, hero__news, news-card...) : un calque de la maquette
 * = une classe ici, pour retrouver facilement l'un depuis l'autre.
 *
 * Les couleurs et les polices viennent de la section 1 : on n'ecrit jamais
 * un #code couleur en dur, on utilise var(--nom).
 *
 * Releve de la maquette (cadre 1512 x 982) :
 *   hero__video  1436 x 830
 *   hero__news    150 de haut, 3 cartes de 623 (elles debordent : c'est voulu)
 *   hero__title   3 lignes decalees, posees a 208 px du haut
 */

/* ------------------------------------------------------------------
 * Le cadre du hero
 * ------------------------------------------------------------------ */

.hero {
    /* position: relative -> c'est le repere des 3 lignes du titre, placees en absolute */
    position: relative;
    display: flex;
    flex-direction: column;

    /* On laisse la place a la colonne de navigation fixee a droite (voir .nav-m dans la section 2) */
    width: calc(100% - var(--nav-l));
    /* Le premier écran entier, bandeau compris. L'en-tête mobile se pose par-dessus le haut de la vidéo :
       on ne le retranche pas. svh : la hauteur visible quand la barre de Safari est affichée ; avec 100vh,
       le bandeau passait dessous sur iPhone (audit de Ryan, M-05, 07/10). 100vh en repli. */
    height: 100vh;
    height: 100svh;
    overflow: hidden;

    background: var(--creme);

    /*
     * Le trait des cartes du bandeau (la couleur des bordures du site, section 1).
     * Plus de cadre autour du hero depuis le 08/10 (demande d'Emmanuel) : le trait clair de 1 px qui entourait
     * la vidéo, en haut et contre la colonne de navigation, est retiré ; la vidéo va jusqu'aux bords.
     */
    --hero-trait: var(--bordure);
}

/* ------------------------------------------------------------------
 * La video de fond
 * ------------------------------------------------------------------ */

/*
 * Dans la maquette ce bloc fait 830 px de haut pour un ecran de 982 px.
 * Ici il prend toute la hauteur restante (flex: 1) une fois la bande
 * d'actualites retiree : sur un ecran de 982 px on retombe exactement
 * sur les 830 px de la maquette, et sur un autre ecran le hero reste plein.
 */
.hero__video {
    position: relative;
    flex: 1 1 auto;
    min-height: 0; /* sans ca, un enfant trop grand empeche le bloc de retrecir */
    overflow: hidden;
}

/* <picture> est en ligne par defaut : on en fait une boite pleine comme son image */
.hero__video picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__video-media {
    width: 100%;
    height: 100%;
    object-fit: cover; /* l'image remplit le cadre sans se deformer */
}

/*
 * La video, posee exactement sur l'image (meme cadre, meme object-fit).
 * Invisible tant qu'elle ne joue pas : hero-video.js ajoute is-visible quand
 * la lecture a vraiment commence, et elle apparait en fondu. L'image reste dessous.
 * Le titre et le bouton viennent apres dans le HTML : ils passent par-dessus.
 */
.hero__film {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* 0,8 s, pas --duree : ce n'est pas un changement d'état (survol, focus) mais la vidéo qui arrive
       sur l'image, un fondu lent voulu (audit de Ryan, D-10 : seule exception, 07/10) */
    transition: opacity 0.8s ease;
}

.hero__film.is-visible {
    opacity: 1;
}

/* Le bouton Pause / Lecture, discret, en bas a droite de la video */
.hero__pause {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 6px 12px;
    border: 0;
    background: var(--brun);
    color: var(--creme);
    font: inherit;
    font-size: var(--t-meta);
    cursor: pointer;
    transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.hero__pause:focus-visible {
    background: var(--jaune);
    color: var(--brun);
    outline: 2px solid var(--brun);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .hero__pause:hover {
        background: var(--jaune);
        color: var(--brun);
    }
}

/* ------------------------------------------------------------------
 * Le titre : 3 lignes decalees posees sur la video
 * ------------------------------------------------------------------ */

/*
 * Dans la maquette les 3 lignes sont a (76, 208), (491, 346) et (151, 484).
 * L'ecart vertical est de 138 px, soit exactement la hauteur d'une ligne :
 * elles s'empilent donc sans espace. On les met en colonne et on ne gere
 * que le decalage horizontal, ligne par ligne.
 *
 * En hauteur, le titre est centre sur la video (son parent), pas pose a une
 * distance fixe du haut. Dans la maquette il reste 207px au-dessus et 209px
 * en dessous : c'est bien un centrage. Et comme la video est le repere,
 * le titre suit sa hauteur au lieu de descendre sur les cartes
 * quand l'ecran est moins haut.
 */
.hero__title {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* chaque ligne s'arrete a la fin de son texte */
    font-weight: 700;
}

.hero__title-line {
    /*
     * Marges interieures en em : elles suivent la taille du texte quand le
     * clamp ci-dessous le reduit. A 128 px on retombe sur les 24 et 16 px
     * de la maquette (0.1875 x 128 = 24, 0.125 x 128 = 16).
     */
    padding: 0.1875em 0.125em;

    /*
     * Le letter-spacing negatif s'applique aussi APRES la derniere lettre
     * (Figma, lui, ne le compte pas). Sans correction, le fond brun serre
     * la derniere lettre de 0.06em de trop a droite. On les rend au padding.
     */
    padding-right: 0.185em; /* 0.125em + 0.06em */

    background: var(--brun);
    color: var(--lime);
    font-family: var(--font-display);

    /*
     * La maquette donne 128 px (--t-display) pour un ecran de 1512 px.
     * clamp() reduit le titre sur les ecrans plus etroits, sans jamais
     * depasser les 128 px de la maquette :
     *     1512 px -> 128 px    1200 px -> 108 px    1000 px -> 96 px    800 px -> 83 px
     * Sous 769 px, en portrait ou sur écran bas, c'est la version mobile qui prend le relais (bascule, section 1).
     * Le plancher de 80 px n'est la qu'en filet de securite : il n'entre
     * jamais en jeu au-dessus de la bascule mobile.
     */
    font-size: clamp(80px, 33.5px + 6.25vw, var(--t-display));
    /*
     * Ecran bas (telephone en paysage, fenetre reduite) : le titre doit aussi tenir dans la hauteur de la video,
     * celle de l'ecran moins le bandeau (150 px) et 24 px de marge ; il fait 3,25 fois sa taille de police.
     * A 844 x 390, il depassait de 19 px en haut et de 20 px en bas (audit du 07/10, I12). Sans effet au-dessus
     * d'environ 520 px de haut : le clamp reste plus petit. svh inconnu : la ligne est ignoree, le clamp reste.
     */
    font-size: min(clamp(80px, 33.5px + 6.25vw, var(--t-display)), calc((100svh - 174px) / 3.25));

    /*
     * Interligne en proportion et non en pixels, pour qu'il suive le clamp :
     * 0.703125 x 128 = 90 px, la hauteur des capitales dans la maquette.
     */
    line-height: 0.703125;
    letter-spacing: -0.06em; /* -7.68 px pour 128 px */
    white-space: nowrap;
}

/*
 * Le decalage horizontal de chaque ligne, releve dans la maquette.
 * En em la aussi : le decrochement garde ses proportions quand le titre
 * retrecit. A 128 px : 76, 491 et 151 px.
 */
.hero__title-line:nth-child(1) {
    margin-left: 0.59375em;
}

.hero__title-line:nth-child(2) {
    margin-left: 3.8359375em;
}

.hero__title-line:nth-child(3) {
    margin-left: 1.1796875em;
}

/* ------------------------------------------------------------------
 * La bande d'actualites, en bas du hero
 * ------------------------------------------------------------------ */

/*
 * 3 cartes de 623 px = 1869 px, pour un hero de 1512 px : la troisieme
 * est coupee par le bord droit. C'est bien ce que montre la maquette.
 */
.hero__news {
    display: flex;
    flex: 0 0 150px;
    align-items: stretch;
    overflow: hidden; /* ce qui sort du cadre pendant le defilement est masque */
}

/*
 * La piste qui defile.
 *
 * Elle contient deux fois les memes cartes (boucle PHP dans index.php) et
 * glisse vers la gauche de 50 % de sa largeur, c'est-a-dire exactement une
 * serie. A la fin de l'animation, la deuxieme serie se trouve la ou etait la
 * premiere : le retour a zero ne se voit pas, le bandeau parait infini.
 *
 * La duree n'est pas donnee par la maquette : --defilement est le temps que met
 * une serie a defiler. C'est la seule valeur a changer pour accelerer ou
 * ralentir le bandeau (elle est reglee plus bas pour le mobile, ou une
 * serie est deux fois moins large).
 */
.hero__news-piste {
    --defilement: 17.5s; /* pas --duree : ce nom est celui des transitions du site (section 1), et les cartes sont dans la piste */

    display: flex;
    flex: 0 0 auto; /* la piste garde sa largeur reelle, elle ne se comprime pas */
    align-items: center;
    height: 100%;
    animation: hero-news-defilement var(--defilement) linear infinite;
}

/*
 * Le bandeau s'arrete quand on le survole, et aussi quand le clavier entre
 * dedans (:focus-within) : les cartes sont des liens, on doit pouvoir lire
 * une actualite et viser son lien sans courir apres. C'est la recommandation
 * d'accessibilite pour tout contenu qui bouge tout seul.
 */
.hero__news:focus-within .hero__news-piste {
    animation-play-state: paused;
}

/*
 * Au clavier (:focus-visible, pas un clic de souris), la pause ne suffit pas : la piste s'arretait
 * la ou elle etait, et la carte qui a le focus pouvait etre hors du cadre (audit du 07/10, I6).
 * Sans animation, la piste revient a sa place : le navigateur fait alors defiler le bandeau
 * (overflow: hidden le permet) jusqu'a la carte qui a le focus. Le clic de souris garde la simple pause :
 * la carte ne doit pas bouger sous le pointeur entre l'appui et le relachement.
 */
.hero__news:has(:focus-visible) .hero__news-piste {
    animation: none;
}

@media (hover: hover) and (pointer: fine) {
    .hero__news:hover .hero__news-piste {
        animation-play-state: paused;
    }
}

/* Le bouton Pause de la video arrete aussi le bandeau (08/10, point 29 : WCAG 2.2.2, rien ne l'arretait au toucher).
   hero-video.js pose la classe hero--pause sur le hero. */
.hero--pause .hero__news-piste {
    animation-play-state: paused;
}

@keyframes hero-news-defilement {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Mouvement reduit : le bandeau s'arrete, comme la frise dans la section 2 */
@media (prefers-reduced-motion: reduce) {
    .hero__news-piste {
        animation: none;
    }
}

.news-card {
    position: relative; /* repere du lien etire, voir .news-card__link */
    display: flex;
    flex: 0 0 auto; /* la carte ne se comprime pas : elle deborde plutot */
    align-items: center;
    height: 100%;
}

/*
 * Toute la carte mene a l'article, mais le lien reste porte par le titre :
 * c'est lui que les lecteurs d'ecran annoncent. Le ::after, etire sur la carte,
 * rend le reste cliquable. Meme motif que .event-card__link dans la section 9.
 */
.news-card__link {
    text-decoration: none;
}

.news-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.news-card__image {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 240 / 180; /* 200 x 150 dans la maquette, soit 4/3 */
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__body {
    display: flex;
    flex: 0 0 423px;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 24px 24px 72px;
    background: var(--creme);
    border-right: 1px solid var(--hero-trait);
    transition: background-color var(--duree) var(--courbe);
}

/*
 * Au survol : fond vert anis, le meme etat que les cartes de la page Alliance
 * (.event-card dans la section 9). Le focus clavier donne le meme resultat,
 * pour le jour ou les cartes deviendront des liens.
 */
.news-card:focus-within .news-card__body {
    background: var(--lime);
}

@media (hover: hover) and (pointer: fine) {
    .news-card:hover .news-card__body {
        background: var(--lime);
    }
}

/* Titre et date sur la meme ligne de base (premiere ligne du titre) : la maquette les aligne par le haut de leur boite,
   la date (18 px) paraissait alors 6 px plus haute que le titre (24 px). Decision d'Emmanuel du 08/10. */
.news-card__content {
    display: flex;
    align-items: baseline;
    color: var(--brun);
    font-family: var(--font-texte);
    font-weight: 600;
    word-break: break-word;
}

.news-card__title {
    width: 300px;
    /* Le navigateur met les <h2> en 700 par defaut : la maquette demande du 600 */
    font-weight: 600;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.04em; /* -0.96 px pour 24 px */
}

.news-card__date {
    width: 75px;
    font-size: 18px;
    line-height: 19px;
    letter-spacing: -0.03em; /* -0.54 px pour 18 px */
    text-align: right;
    white-space: nowrap;
}

/* ==================================================================
 * Version mobile
 * Maquette FINALE, « hero » mobile (315:901), cadre 390 x 679 :
 *   hero__video  388 x 560
 *   hero__news   117 de haut, cartes de 312, defilables au doigt
 *   hero__title  3 lignes de 48px, posees a 16px du bord et 140px du haut
 * Bascule : la meme condition que la navigation (sections 1 et 2 ; 768 px, portrait ou ecran bas),
 * pour que la colonne de navigation devienne un bandeau en haut au moment exact ou le
 * hero passe en mobile. Un seuil different des deux cotes laisserait une bande
 * ou la nav recouvre le hero.

 * ================================================================== */

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {

    .hero {
        /* La maquette mobile n'a pas de colonne de navigation : le hero prend tout */
        width: 100%;
    }

    /* ----- Le titre ----- */

    /*
     * Sur mobile la maquette ne centre PAS le titre sur la video :
     * elle le pose a 140px du haut (139px au-dessus, 265px en dessous).
     * On annule donc le centrage du desktop.
     */
    .hero__title {
        top: 140px;
        left: 16px;
        transform: none;
    }

    /*
     * Telephone en paysage (moins de 520 px de haut) : a 140 px du haut, le titre descendait sur le bandeau
     * (audit du 07/10, I12). Il se centre entre l'en-tete (48 px, pose par-dessus la video) et le bandeau.
     */
    @media (max-height: 519px) {
        .hero__title {
            top: calc(var(--nav-h) + (100% - var(--nav-h)) / 2);
            transform: translateY(-50%);
        }
    }

    .hero__title-line {
        padding: 9px 6px;
        /* meme correction du tracking de fin de ligne que sur desktop : 0.06em */
        padding-right: calc(6px + 0.06em);
        font-size: 48px;
        line-height: 34px; /* hauteur du texte : 52 - 9 - 9 */
    }

    /* Les decalages de la maquette mobile remplacent ceux du desktop */
    .hero__title-line:nth-child(1) {
        margin-left: 0;
    }

    .hero__title-line:nth-child(2) {
        margin-left: 156px;
    }

    .hero__title-line:nth-child(3) {
        margin-left: 28px;
    }

    /* ----- La bande d'actualites ----- */

    .hero__news {
        flex-basis: 117px;
        align-items: stretch;
    }

    /*
     * Une serie ne fait plus que 936 px sur mobile (3 cartes de 312).
     * Sans changer la duree, le bandeau avancerait deux fois moins vite :
     * 20 s rendent la meme sensation de vitesse que les 40 s du desktop.
     */
    .hero__news-piste {
        --defilement: 20s;
        align-items: stretch;
    }

    .news-card {
        flex: 0 0 312px;
        align-items: stretch;
    }

    /*
     * Sur mobile la vignette est carree (le desktop est en 4/3) :
     * elle prend toute la hauteur de la bande et autant en largeur.
     */
    .news-card__image {
        flex: 0 0 auto;
        aspect-ratio: 1;
        height: 100%;
    }

    .news-card__body {
        flex: 1 1 auto;
        min-width: 0; /* autorise le corps a retrecir dans la carte */
        padding: 12px 12px 36px;
    }

    .news-card__content {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .news-card__title {
        width: 100%;
        font-size: var(--t-moyen); /* 20px */
        line-height: 22px;
        letter-spacing: -0.04em;   /* -0.8px pour 20px */
    }

    /*
     * Sur desktop le titre est coupe par un <br> impose par la maquette.
     * Sur mobile la maquette laisse le texte revenir a la ligne tout seul :
     * on neutralise donc le <br> plutot que de le retirer du HTML.
     */
    .news-card__title br {
        display: none;
    }

    .news-card__date {
        width: auto;
        font-size: var(--t-petit); /* 16px */
        line-height: 17px;
        letter-spacing: -0.03em;   /* -0.48px pour 16px */
        text-align: left;
    }
}


/* ==========================================================================
   6. ACCUEIL : SECTIONS
   Source : home.css
   Portée : index.php, div.accueil
   ========================================================================== */

/*
 * Section 6 (ancienne feuille home.css, réunie dans site.css le 06/10) : les sections de la page d'accueil qui suivent le hero
 * (maquette FINALE, cadre « Homepage », 28:304 : about, alliance, ecologies).
 *
 * Le hero a sa propre section : la section 5.
 * Les titres surlignes (.highlight-title) sont dans la section 2 : composant partage
 * avec la page Alliance. Ici on ne regle que leurs decalages.
 *
 * ---------------------------------------------------------------------------
 * LA GRILLE DE 19 COLONNES
 *
 * Toute la maquette repose dessus : la zone de contenu fait 1436 px
 * (1512 moins la colonne de navigation), divises en 19 colonnes de 75,58 px.
 * Toutes les largeurs de la maquette en sont des multiples :
 *     378 px  =  5 colonnes  (une carte carree)
 *     605 px  =  8 colonnes  (la grande carte)
 *     982 px  = 13 colonnes  (une grande image)
 *    1134 px  = 15 colonnes  (la rangee de 3 cartes)
 *
 * On pose donc grid-template-columns: repeat(19, 1fr) sur chaque section et on
 * place chaque element avec grid-column. Aucun positionnement absolu n'est
 * necessaire : les chevauchements se font en mettant deux elements sur la meme
 * ligne de grille, et z-index decide lequel passe devant.
 *
 * Les images sont toutes au format 3:2 dans la maquette : aspect-ratio suffit,
 * pas besoin de hauteurs en dur.
 * ---------------------------------------------------------------------------
 */

/* ------------------------------------------------------------------
 * Le conteneur des trois sections
 * .accueil et non .home (07/10, avant le passage a WordPress) : WordPress pose la classe home
 * sur le <body> de la page d'accueil, et cette regle (flex, ecart et marge de 256 px) l'aurait touche.
 * Les sections gardent leurs noms (home-about, home-alliance...) : WordPress n'utilise pas ceux-la.
 * ------------------------------------------------------------------ */

.accueil {
    display: flex;
    flex-direction: column;
    gap: 256px; /* l'ecart entre sections dans la maquette */

    /* On laisse la place a la colonne de navigation fixee a droite (section 2) */
    width: calc(100% - var(--nav-l));

    /* meme ecart de 256 px entre le bas du hero et la premiere section */
    margin-top: 256px;

    /*
     * Le trait de la maquette est le brun a 50 % d'opacite, comme dans la section 5.
     * Raccourci local, ce n'est pas un nouveau token.
     */
    --trait: color-mix(in srgb, var(--brun) 50%, transparent);
}

/* Les trois sections partagent la meme grille */
.home-about,
.home-alliance,
.home-ecologies {
    display: grid;
    grid-template-columns: repeat(19, 1fr);
}

/* ------------------------------------------------------------------
 * Les images des sections
 * ------------------------------------------------------------------ */

.home-about__image,
.home-alliance__image,
.home-ecologies__image {
    aspect-ratio: 3 / 2; /* le format de toutes les images de la maquette */
    overflow: hidden;
}

.home-about__image img,
.home-alliance__image img,
.home-ecologies__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
 * La carte de texte (composant Figma "content-card")
 * ------------------------------------------------------------------ */

.content-card {
    /*
     * position + z-index : la carte passe devant l'image qu'elle chevauche.
     * Sans ca, l'image qui vient apres dans le HTML la recouvrirait.
     */
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* texte en haut, fleche en bas */
    align-items: flex-end;          /* la fleche se cale a droite */
    padding: 32px;

    /* 5 colonnes de large pour 5 de haut : la carte est carree */
    aspect-ratio: 1;

    background: var(--creme);
    border: 1px solid var(--bordure);

    /* La carte entiere est un lien (vers l article) : pas de soulignement */
    color: var(--brun);
    text-decoration: none;

    font-family: var(--font-texte);
    font-size: 18px;      /* style "Subheading" de la maquette */
    font-weight: 600;
    line-height: 19px;
    letter-spacing: -0.03em; /* -0.54 px pour 18 px */
}

/*
 * Au survol, seul le fond change : le creme s'assombrit (--creme-survol).
 * La transition n'est pas dans la maquette, elle evite juste un changement sec.
 */
.content-card {
    transition: background-color var(--duree) var(--courbe);
}

@media (hover: hover) and (pointer: fine) {
    .content-card:hover {
        background: var(--creme-survol);
    }
}

/* La grande carte de la section alliance : 8 colonnes de large, 5 de haut */
.content-card--large {
    aspect-ratio: 8 / 5;
}

.content-card__text {
    display: flex;
    flex-direction: column;
    gap: 24px; /* entre le petit titre et le paragraphe */
    width: 100%;
    word-break: break-word;
}

/* Variante "Label + Body" : le paragraphe est en brun a 50 % */
.content-card__body {
    color: var(--trait);
}

/*
 * La fleche. Le SVG garde ses dimensions propres (22 x 20,7) ; c'est sa case
 * qui fait 21 x 19 comme dans la maquette, le trait deborde d'un pixel.
 */
.content-card__icon {
    flex: 0 0 auto;
    display: block;
    width: 21px;
    height: 19px;
}

/* ------------------------------------------------------------------
 * Section "Le Marais c'est quoi ?"
 * ------------------------------------------------------------------ */

/*
 * Deux rangees. Dans chacune, l'image et la carte se chevauchent :
 * elles sont posees sur la meme ligne de grille, sur des colonnes qui
 * se recouvrent partiellement.
 */

.home-about__titre {
    grid-column: 2 / span 7;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 2; /* le titre passe devant l'image et la carte */
    /* la maquette le pose 122 px au-dessus du haut de la section */
    margin-top: -122px;
}

.home-about__titre .highlight-title__line:nth-child(3) {
    /* 1 colonne de la grille : le titre en couvre 7, et un % de marge se compte sur sa largeur.
       En px fixes (75 px), la ligne ne tombait juste qu'a 1512 px d'ecran (colonnes de 75,6 px). */
    margin-left: calc(100% / 7);
}

.home-about__image--1 {
    grid-column: 1 / span 13;
    grid-row: 1;
}

.home-about__card--1 {
    grid-column: 12 / span 5;
    grid-row: 1;
    align-self: start;
}

.home-about__card--2 {
    grid-column: 6 / span 5;
    grid-row: 2;
    align-self: start;
}

.home-about__image--2 {
    grid-column: 9 / span 10;
    grid-row: 2;
}

/* ------------------------------------------------------------------
 * Section "Une alliance pour preserver le marais"
 * ------------------------------------------------------------------ */

.home-alliance__titre {
    grid-column: 2 / span 9;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 2;
    margin-top: -61px; /* le titre chevauche le haut de la section */
}

.home-alliance__titre .highlight-title__line:nth-child(2) {
    margin-left: calc(200% / 9); /* 2 colonnes de la grille (le titre en couvre 9), a toutes les largeurs */
}

.home-alliance__titre .highlight-title__line:nth-child(3) {
    margin-left: calc(500% / 9); /* 5 colonnes de la grille */
}

.home-alliance__image {
    grid-column: 1 / span 13;
    grid-row: 1;
    /*
     * La rangee de cartes remonte de 128 px sur l'image : la marge negative
     * raccourcit la ligne de grille d'autant, l'image deborde dessous.
     */
    margin-bottom: -128px;
}

.home-alliance__card {
    grid-column: 11 / span 8;
    grid-row: 2;
}

/* ------------------------------------------------------------------
 * Section "La source des trois ecologies"
 * ------------------------------------------------------------------ */

.home-ecologies__titre {
    grid-column: 6 / span 9;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 2;
    margin-top: -61px;
}

.home-ecologies__titre .highlight-title__line:nth-child(2) {
    /* 1 colonne de la grille (le titre en couvre 9) : la ligne commence au bord gauche de la photo
       (colonne 7) a toutes les largeurs d'ecran ; en px fixes, elle ne tombait juste qu'a 1512 px */
    margin-left: calc(100% / 9);
}

.home-ecologies__image {
    /* calee a droite : colonnes 7 a 19 */
    grid-column: 7 / span 13;
    grid-row: 1;
    margin-bottom: -128px;
}

.home-ecologies__cards {
    grid-column: 2 / span 15;
    grid-row: 2;
    display: flex;
}

/*
 * Les 3 cartes se partagent les 15 colonnes, soit 5 colonnes chacune.
 * min-width: 0 : une carte carree (aspect-ratio) ne descend pas, sinon, sous la largeur que lui donne
 * la hauteur de son texte ; entre 769 et 935 px de large, la troisieme sortait de l'ecran (audit du 07/10, I10).
 * La carte peut alors etre plus haute que large : son texte reste entier.
 */
.home-ecologies__cards .content-card {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * Les cartes se touchent : on retire le bord droit de toutes sauf la derniere,
 * sinon deux traits se superposeraient entre chaque carte.
 */
.home-ecologies__cards .content-card:not(:last-child) {
    border-right: none;
}

/* ==================================================================
 * Version mobile
 * Maquette Figma "Homepage - Mobile" (node 1:1591), cadre 390 px.
 *
 * Tout passe en une seule colonne : la grille de 19 colonnes ne sert plus.
 * Chaque section devient une pile ; l'image occupe 284,5 px sur 390 et se cale
 * a gauche ou a droite selon la maquette ; la carte remonte de 64 px dessus
 * (contre 128 px en desktop) et prend toute la largeur moins 16 px de chaque cote.
 *
 * Meme bascule que la navigation et le hero : 768 px, portrait ou ecran bas (voir la section 1).
 * ================================================================== */

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {

    .accueil {
        gap: 128px; /* 256 px en desktop */
        margin-top: 128px;
    }

    /* Les sections passent en pile */
    .home-about,
    .home-alliance,
    .home-ecologies {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* ----- Les images ----- */

    .home-about__image,
    .home-alliance__image,
    .home-ecologies__image {
        width: 72.95%;        /* 284,5 px sur les 390 de la maquette */
        margin-bottom: -64px; /* la carte remonte dessus */
    }

    /* Ces deux-la sont calees a droite dans la maquette */
    .home-about__image--2,
    .home-ecologies__image {
        align-self: flex-end;
    }

    /*
     * La maquette met l'image AVANT sa carte dans les deux rangees.
     * Dans le HTML, la carte 2 vient avant l'image 2 (ordre du desktop) :
     * order les remet dans le bon sens, sans toucher au HTML.
     * Les 64 px du haut sont l'ecart entre les deux rangees de "about".
     */
    .home-about__image--2 {
        order: 1;
        margin-top: 64px;
    }

    .home-about__card--2 {
        order: 2;
    }

    /* ----- Les titres surlignes ----- */

    .accueil .highlight-title {
        font-size: 32px; /* style "Mobile/Display2" de la maquette */
    }

    .accueil .highlight-title__line {
        padding: 4px calc(2px + 0.06em) 4px 2px; /* 30 px de haut : 4 + 22 + 4 */
        line-height: 22px;
    }

    /*
     * Le titre deborde vers le haut sans pousser le reste : la marge du bas
     * annule ce qui depasserait en bas. Pour "about" : il commence 61 px plus
     * haut, fait 90 px (3 lignes de 30), il reste donc 29 px a rattraper.
     */
    .home-about__titre {
        margin: -61px 0 -29px 16px;
    }

    .home-alliance__titre {
        margin: -31px 0 -59px 16px;
    }

    .home-ecologies__titre {
        margin: -30px 0 -30px 16px;
    }

    /* Les decalages de lignes, releves dans la maquette mobile */
    .home-about__titre .highlight-title__line:nth-child(3) {
        margin-left: 38px;
    }

    .home-alliance__titre .highlight-title__line:nth-child(2) {
        margin-left: 76px;
    }

    .home-alliance__titre .highlight-title__line:nth-child(3) {
        margin-left: 189px;
    }

    .home-ecologies__titre .highlight-title__line:nth-child(2) {
        margin-left: 38px;
    }

    /* ----- Les cartes ----- */

    .content-card,
    .content-card--large {
        align-self: stretch;
        /*
         * 15 px et non 16 : dans Figma le trait de la carte est dessine EN DEHORS
         * du cadre de 358 px. En CSS la bordure est comprise dedans et mange
         * 2 px au texte, ce qui lui faisait gagner une ligne. En reculant les
         * gouttieres d'1 px, le trait retombe exactement ou Figma le place et
         * le texte retrouve ses 326 px.
         */
        margin: 0 15px;
        padding: 16px;
        aspect-ratio: auto;      /* la hauteur suit le texte, plus de carre */
        justify-content: flex-start;
        gap: 32px;               /* entre le texte et la fleche */
        font-size: 16px;         /* style "Mobile/Subheading" */
        line-height: 17px;
        letter-spacing: -0.03em; /* -0.48 px pour 16 px */
    }

    /* La case de la fleche passe a 12 x 12, comme dans la maquette mobile */
    .content-card__icon {
        width: 12px;
        height: 12px;
    }

    /* ----- Les 3 cartes des ecologies, empilees ----- */

    .home-ecologies__cards {
        align-self: stretch;
        flex-direction: column;
        margin: 0 15px; /* meme raison que les cartes ci-dessus */
    }

    .home-ecologies__cards .content-card {
        flex: 0 0 auto; /* en colonne, chaque carte garde sa propre hauteur */
        margin: 0;      /* le conteneur porte deja les gouttieres */
    }

    /*
     * Empilees, les cartes se touchent en haut et en bas : on retire le bord
     * du bas de toutes sauf la derniere, et on remet celui de droite que le
     * desktop enlevait.
     */
    .home-ecologies__cards .content-card:not(:last-child) {
        border-right: 1px solid var(--bordure);
        border-bottom: none;
    }
}


/* ==========================================================================
   7. VISION ALTERNATIVE : LA CONSTELLATION
   Source : vision-alternative.css
   Portée : vision-alternative.php, body.page-vision et main.constellation
   ========================================================================== */

/*
 * Section 7 (ancienne feuille vision-alternative.css, réunie dans site.css le 06/10) : la constellation des themes (vision-alternative.php).
 *
 * Tailles : la maquette Figma fait 1436 px de contenu (1512 px moins la colonne M).
 * .constellation occupe tout l'ecran (sans la colonne M), sans defilement.
 * --u vaut "1 px de la maquette" : la plus petite des deux echelles, largeur (100cqw) ou hauteur (100cqh) ;
 * cartes et titre grandissent et retrecissent avec l'ecran.
 * Positions des cartes : --cx / --cy, en % de la constellation (maquette FINALE, 409:1206).
 */

body.page-vision {
    background: var(--creme);
    overflow: hidden; 
}

.constellation {
    position: relative;
    margin-right: var(--nav-l);
    height: 100vh;
    height: 100dvh; /* tout l'ecran, sans defilement */
    container-type: size;
    overflow: hidden;
}


.constellation > *,
.constellation__cartes > * {
    --u: min(100cqw / 1436, 100cqh / 982);
}


.constellation .highlight-title {
    font: inherit;
}

.constellation .highlight-title__line {
    position: absolute;
    z-index: 3;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    padding: calc(8 * var(--u)) calc(4 * var(--u));
    background: var(--lime);
    color: var(--brun);
    font-family: var(--font-display);
    font-size: calc(64 * var(--u));
    font-weight: 700;
    line-height: calc(60 * var(--u));
    letter-spacing: -0.06em;
    white-space: nowrap;
    text-box: trim-both cap alphabetic; /* le fond jaune colle aux lettres, comme dans Figma */
}

/* Navigateurs sans text-box : on resserre la ligne pour garder la meme hauteur de bande */
@supports not (text-box: trim-both cap alphabetic) {
    .constellation .highlight-title__line {
        line-height: calc(44 * var(--u));
    }
}

/* Le plan des cartes et des traits : toute la scene sur desktop */
.constellation__plan {
    position: absolute;
    inset: 0;
}

/* ------------------------------------------------------------------
 * Traits entre les cartes (SVG en %, epaisseur fixe de 1 px)
 * ------------------------------------------------------------------ */
.constellation__traits--mobile {
    display: none;
}

.constellation__traits {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.constellation__trait {
    stroke: var(--bordure);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------------
 * Cartes des themes : centrees sur (--cx, --cy) par le milieu de la photo
 * ------------------------------------------------------------------ */
.theme-card {
    position: absolute;
    z-index: 2;
    left: calc(var(--cx) * 1%);
    top: calc(var(--cy) * 1%);
    width: calc(226 * var(--u));
    margin-left: calc(-113 * var(--u));
    margin-top: calc(-71.6 * var(--u)); /* moitie de la hauteur de la photo (226 x 142/224 / 2) */
}

.theme-card__lien {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-decoration: none;
}

.theme-card__image {
    width: 100%;
    height: auto; /* la hauteur suit aspect-ratio, et non l'attribut height de l'image (vision-alternative.php, 07/10) */
    aspect-ratio: 224 / 142;
    object-fit: cover;
    border: 1px solid var(--bordure);
}

.theme-card__nom {
    color: var(--brun); /* plus lisible que le brun clair de la maquette */
    font-family: "Geist", var(--font-texte);
    font-size: var(--t-petit);
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.03em;
}

/* Clavier : on voit quelle carte a le focus */
.theme-card__lien:focus-visible {
    outline: 2px solid var(--brun);
    outline-offset: 4px;
}

/* ------------------------------------------------------------------
 * Ecran en hauteur (telephone, tablette en portrait) ou etroit (800px et moins) :
 * une constellation verticale (maquette FINALE, 409:1287, 375 x 812), toujours plein ecran.
 * La compo desktop est en largeur : en portrait, ses cartes deviendraient minuscules.
 * Meme requete dans constellation.js (variable mobile).
 * Le titre en haut, le plan prend toute la hauteur restante.
 * Positions : --mx / --my, en % du cadre. En largeur, --mx suit la largeur du plan, comme sur desktop.
 * En hauteur, le cadre garde l'echelle --u (pas de compo ecrasee) : on n'en montre que la bande utile,
 * de y = 52 a 780 (728 de haut), centree dans le plan.
 * --u = 1 px du cadre, la plus petite des deux echelles : largeur (375) ou hauteur de la bande (728).
 * ------------------------------------------------------------------ */
@media (max-width: 800px), (orientation: portrait) {
    .constellation {
        display: flex;
        flex-direction: column;
        /* Sous l'en-tete de navigation mobile (--nav-h : 48px dans la mise en page du telephone, section 1) : 32px sur telephone, plus sur tablette */
        padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 64px));
    }

    /*
     * Le titre grandit avec l'ecran, d'un bloc : 32px sur telephone, jusqu'a 56px sur tablette.
     * Tout le reste est en em (fond jaune, decalage de la 2e ligne) : les proportions ne bougent pas.
     * La marge de gauche suit la largeur, pour rester a peu pres alignee sur le bord de la photo la plus a gauche.
     */
    .constellation .highlight-title {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: clamp(8px, 2vw, 24px); /* un peu d'air avant la premiere photo */
        padding: 0 clamp(16px, 4.5vw, 48px);
        font-size: clamp(32px, 5vw, 56px);
    }

    .constellation .highlight-title__line {
        position: static;
        padding: 0.25em 0.125em; /* 8px 4px a 32px */
        font-size: 1em;
        line-height: 1;
    }

    .constellation .highlight-title__line + .highlight-title__line {
        margin-left: 1em; /* 32px a 32px */
    }

    .constellation__plan {
        position: relative;
        inset: auto;
        flex: 1 1 auto;
        min-height: 0;
        container-type: size;
    }

    .constellation__cartes > *,
    .constellation__traits--mobile {
        --u: min(100cqw / 375, 100cqh / 728);
    }

    .constellation__traits--desktop {
        display: none;
    }

    /* Les traits : toute la largeur du plan, et la hauteur du cadre (812), centree comme les cartes */
    .constellation__traits--mobile {
        display: block;
        top: calc(50% - 416 * var(--u)); /* 416 : le milieu de la bande 52-780 */
        bottom: auto;
        height: calc(812 * var(--u));
    }

    /*
     * Largeur d'une carte (112 dans la maquette) : la plus petite des deux limites.
     * - 30cqw : en largeur, les cartes voisines (Ecosysteme / Sanctuaire) et les bords restent a distance ;
     * - 185 * --u - 48px : en hauteur, Droit a l'habitat et Terre (les plus proches) gardent ~16px entre elles.
     * Telephone : ~110px ; iPad en portrait : 170 a 260px. Meme calcul dans constellation.js (unite).
     */
    .theme-card {
        --carte: min(30cqw, 185 * var(--u) - 48px);
        left: calc(var(--mx) * 1%);                            /* en % de la largeur du plan, comme sur desktop */
        top: calc(50% + (var(--my) * 8.12 - 416) * var(--u)); /* --my % de 812, milieu de la bande au milieu du plan */
        width: var(--carte);
        margin-left: calc(var(--carte) / -2);
        margin-top: calc(var(--carte) * -71 / 224); /* moitie de la hauteur de la photo (largeur x 142/224 / 2) */
    }

    .theme-card__lien {
        gap: 4px;
    }

    .theme-card__nom {
        font-size: clamp(10px, var(--carte) * 0.08, 16px); /* suit la carte : 10px sur telephone, 16px comme le desktop sur grande tablette */
        line-height: 1;
        letter-spacing: -0.03em;
    }
}

/* Telephone (600px et moins) : photos et noms 30 % plus grands (demande d'Emmanuel du 06/10).
   La largeur de carte de Veronika, x 1,3, avec deux limites pour qu'aucune carte n'en touche une autre :
   195 * --u - 30px (en hauteur : Droit a l'habitat, nom compris, et Terre) et 34cqw (en largeur :
   Ecosysteme et Sanctuaire). Meme calcul dans constellation.js (unite). */
@media (max-width: 600px) {
    .theme-card {
        --carte: min(1.3 * min(30cqw, 185 * var(--u) - 48px), 195 * var(--u) - 30px, 34cqw);
    }

    .theme-card__nom {
        font-size: 13px; /* 10px x 1,3 */
    }
}

/*
 * Telephone en paysage (800 px de large au plus, moins de 520 px de haut) : la constellation verticale
 * n'avait plus que 200 px de haut, et ses cartes tombaient a 2 ou 3 px (audit du 07/10, I8).
 * On lui rend la hauteur d'un telephone en portrait : le cadre de la maquette mobile (375 x 728),
 * a la largeur de l'ecran. La page defile ; les cartes ont la taille qu'elles auraient en portrait.
 * container-type: normal : avec size, une hauteur automatique vaudrait zero. Le plan reste le repere
 * des cartes et des traits (container-type: size, plus haut) ; constellation.js lit sa taille, il suit.
 */
@media (max-width: 800px) and (max-height: 519px) and (orientation: landscape) {
    .constellation {
        height: auto;
        container-type: normal;
        overflow: visible;
    }

    .constellation__plan {
        flex: none;
        height: calc(100vw * 728 / 375);
    }
}

/* ==========================================================================
   8. VISION ALTERNATIVE : FICHE D'UN THEME
   Source : le <style> de single-page-alternative.php (jusqu'au 06/10)
   Portée : body.single-page-alternative
   ========================================================================== */

/* =========================================================
   single-page-alternative : fiche thème (maquette FINALE, 188:1534)
   ========================================================= */

body.single-page-alternative {
    --color-brown: #3f2616;
    --color-cream: #fffdeb;
    --color-beige: #f1ead0; /* fond du bouton ✕ au survol */

    --font-main: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

    --border: 1px solid var(--bordure);
    --panel-width: 908px;

    margin: 0;
    background-color: var(--color-cream);
    color: var(--color-brown);
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
    letter-spacing: -0.03em; /* -0.48px */
    -webkit-font-smoothing: antialiased;
}

.theme-detail img {
    max-width: 100%; /* box-sizing, display: block et la marge des figure : section 2 */
}

/* ---------- Layout ---------- */
.theme-detail {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.theme-detail__panel {
    display: flex;
    flex-direction: column;
    width: var(--panel-width);
    max-width: 100%;
    border-left: var(--border);
    border-right: var(--border);
}

/* ---------- Header de la fiche (titre) ---------- */
.theme-detail__header {
    display: flex;
    padding: 128px 24px 32px;
    border-bottom: var(--border);
}

.theme-detail__title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.04em; /* -0.96px */
    overflow-wrap: break-word;
}

/* ---------- Images ---------- */
.theme-detail__cover,
.theme-detail__section-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.theme-detail__cover img,
.theme-detail__section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Sections ---------- */
.theme-detail__section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 32px 32px;
    border-bottom: var(--border);
}

.theme-detail__section-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    overflow-wrap: break-word;
}

.theme-detail__label {
    margin: 0;
    font: inherit;
    color: var(--texte-secondaire); /* 65 % (08/10, point 24) */
}

.theme-detail__text p {
    margin: 0 0 16px;
}

.theme-detail__text p:last-child {
    margin-bottom: 0;
}

/* Rognage typographique comme dans Figma (cap → baseline) */
.theme-detail__label,
.theme-detail__text p {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.theme-detail__text a {
    color: inherit;
    text-decoration: underline transparent; /* le survol et le focus lui donnent sa couleur, en fondu */
    word-break: break-all;
    transition: text-decoration-color var(--duree) var(--courbe);
}

.theme-detail__text a:focus-visible {
    text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
    .theme-detail__text a:hover {
        text-decoration: underline;
    }
}

/* ---------- Bouton fermer ---------- */
.theme-detail__close {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    /* Le cadre de la maquette (composant close-button) : traits droit et bas, le gauche est celui du panneau */
    border-right: var(--border);
    border-bottom: var(--border);
    transition: background-color var(--duree) var(--courbe);
}

.theme-detail__close:focus-visible {
    background-color: var(--color-beige);
}

@media (hover: hover) and (pointer: fine) {
    .theme-detail__close:hover {
        background-color: var(--color-beige);
    }
}

.theme-detail__close svg {
    width: 49px;
    height: 49px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .theme-detail {
        position: relative;
    }

    .theme-detail__panel {
        width: 100%;
        border-left: 0;
        border-right: 0;
    }

    .theme-detail__close {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        width: 50px; /* 49 px de la croix + le trait gauche */
        border-left: var(--border); /* le bouton flotte au-dessus de la fiche : cadre sur trois côtés */
        background-color: var(--color-cream);
    }
}

/* Navigation : seulement sur mobile ; sur ordinateur, la fiche s'affiche sans la colonne de navigation (version de Veronika, 05/10) */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 520px) {
    body.single-page-alternative .nav-m {
        display: none;
    }
}

/* Mobile : le ✕ passe sous l'en-tete de navigation de 48px (var(--nav-h), section 1) */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    .theme-detail__close {
        top: var(--nav-h);
    }
}

@media (max-width: 600px) {
    .theme-detail__header {
        padding: 96px 16px 24px;
    }

    .theme-detail__section {
        padding: 48px 16px 24px;
        gap: 24px;
    }
}


/* ==========================================================================
   9. ALLIANCE
   Source : alliance.css
   Portée : alliance.php, main.alliance
   ========================================================================== */

/*
 * Section 9 (ancienne feuille alliance.css, réunie dans site.css le 06/10) : la page Alliance (maquette FINALE, cadre « Alliance », 82:962).
 *
 * Comme la section 5, les noms de classes reprennent les noms des calques Figma
 * (events, events__item, event-card, milestones, milestone-card, highlight-title...).
 * Seule exception : le hero de cette page s'appelle "alliance-hero", pour ne pas
 * se melanger avec le .hero de l'accueil (section 5).
 *
 * Les couleurs et les polices viennent de la section 1 : on n'ecrit jamais
 * un #code couleur en dur, on utilise var(--nom).
 *
 * Releve de la maquette (cadre 1512 de large, dont 76 pour la navigation) :
 *   alliance-hero   photo 1436 x 600, titres surlignes en Bugrino 64 px
 *   events          3 cartes de 148 px de haut, en 3 colonnes egales
 *   milestones      grille de 3 colonnes, cartes de 495 px de haut
 *   160 px d'espace entre les sections
 */

/* ------------------------------------------------------------------
 * La page
 * ------------------------------------------------------------------ */

.alliance {
    display: flex;
    flex-direction: column;
    gap: 160px; /* l'espace entre les sections dans la maquette */

    /* On laisse la place a la colonne de navigation fixee a droite (voir .nav-m dans la section 2) */
    width: calc(100% - var(--nav-l));
    padding-bottom: 0; /* le pied de page colle à la dernière section (Emmanuel, 07/10 ; la maquette laissait 160 px) */

    background: var(--creme);
    color: var(--brun);

    /*
     * Le trait de la maquette est le brun a 50 % d'opacite, comme dans la section 5.
     * color-mix() le fabrique a partir du token : si --brun change, le trait suit.
     */
    --alliance-trait: var(--bordure);
}

/* ------------------------------------------------------------------
 * Le hero : la photo et deux titres surlignes
 * ------------------------------------------------------------------ */

.alliance-hero {
    position: relative; /* le repere de "Nos actions", place en absolute */
}

.alliance-hero__image {
    height: 600px;
    overflow: hidden;
}

/*
 * Dans Figma, la photo est etiree en largeur (deformee) pour remplir le cadre.
 * Ici object-fit: cover la recadre sans la deformer ; object-position garde
 * le bas de la photo visible : le groupe d'habitant·es et les pneus.
 */
.alliance-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 75%;
}

/* ------------------------------------------------------------------
 * Les titres surlignes (composant Figma "highlight-title")
 *
 * Le composant lui-meme (.highlight-title et .highlight-title__line) a
 * demenage dans la section 2 : la maquette l'emploie aussi sur l'accueil,
 * il est donc partage par plusieurs pages.
 * Ne restent ici que les placements propres a la page Alliance.
 * ------------------------------------------------------------------ */

/*
 * "Agir sur le territoire" : sous la photo, a 76 px du bord gauche.
 * Le margin-top negatif fait chevaucher la premiere ligne (61 px) sur le bas de la photo.
 * Decalage de chaque ligne, releve dans la maquette : 0, 126 et 75 px.
 */
.alliance-hero__title {
    position: relative; /* passe devant la photo */
    margin-top: -61px;
    margin-left: 76px;
}

.alliance-hero__title .highlight-title__line:nth-child(2) {
    margin-left: 126px;
}

.alliance-hero__title .highlight-title__line:nth-child(3) {
    margin-left: 75px;
}

/*
 * "Nos actions" : sur la photo, a 239 px du haut. Place depuis la droite
 * (88 px du bord, comme dans la maquette) pour rester sur la photo quel que soit l'ecran.
 */
.alliance-hero__tagline {
    position: absolute;
    top: 239px;
    right: 88px;
}

.alliance-hero__tagline .highlight-title__line:nth-child(2) {
    margin-left: 76px;
}

/* ------------------------------------------------------------------
 * Les titres des sections et les textes communs aux deux cartes
 * ------------------------------------------------------------------ */

.events,
.milestones {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.events__header,
.milestones__header {
    padding: 0 24px;
}

/* "Rejoignez nos prochaines actions", "Moments cles de la mobilisation" et les titres des cartes */
.events__title,
.milestones__title,
.event-card__title,
.milestone-card__title {
    font-size: 24px;
    /* Le navigateur met les <h2> et <h3> en 700 : la maquette demande du 600 */
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.04em; /* -0.96 px pour 24 px */
}

/* Le titre de la carte a gauche, la date a droite */
.event-card__heading,
.milestone-card__heading {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
}

.event-card__title,
.milestone-card__title,
.event-card__date,
.milestone-card__date {
    flex: 1 1 0; /* moitie-moitie, comme dans la maquette */
    min-width: 0;
}

.event-card__date,
.milestone-card__date {
    font-size: 18px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: -0.03em; /* -0.54 px pour 18 px */
    text-align: right;
}

/*
 * Le lien du titre couvre toute la carte (le ::after se pose par-dessus) :
 * un clic n'importe ou sur la carte ouvre sa fiche.
 * On ne fait pas de toute la carte un <a> : la carte d'action contient deja
 * le lien "Itineraire", et un lien dans un lien est interdit en HTML.
 */
.event-card__link,
.milestone-card__link {
    text-decoration: none;
}

.event-card__link::after,
.milestone-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/*
 * La maquette rogne ces textes a la hauteur des capitales (text-box-trim) :
 * c'est ce qui donne leur hauteur aux cartes. text-box fait la meme chose en CSS ;
 * un navigateur qui ne le connait pas encore affiche juste quelques pixels de plus.
 */
.event-card__address,
.event-card__route-link,
.milestone-card__text {
    text-box: trim-both cap alphabetic;
}

/*
 * La fleche : un carre de 12 px dans la maquette. Le fichier SVG est un peu plus grand
 * (12.75 x 13.25) pour que le trait ne soit pas coupe : on le remonte de 0.5 px,
 * comme dans la maquette, sans toucher a sa taille.
 * Pas de position: relative ici : la fleche passerait au-dessus du lien de la carte,
 * et un clic sur la fleche n'ouvrirait plus rien.
 */
.event-card__arrow,
.milestone-card__arrow {
    display: block;
    width: 12px;
    height: 12px;
}

.event-card__arrow img,
.milestone-card__arrow img {
    margin-top: -0.5px;
}

/* ------------------------------------------------------------------
 * Les prochaines actions (calque "events", carte "event-card")
 * ------------------------------------------------------------------ */

.events__list {
    border-bottom: 1px solid var(--alliance-trait);
}

/* Une carte en 3 colonnes egales : la photo, le titre et la date, puis le lieu et la fleche */
.event-card {
    position: relative; /* le repere du lien qui couvre la carte */
    display: flex;
    background: var(--creme);
    border-top: 1px solid var(--alliance-trait);
    transition: background-color var(--duree) var(--courbe);
}

/* Survol (et focus au clavier) : fond vert anis, l'etat "Hover" de la maquette */
.event-card:focus-within {
    background: var(--lime);
}

@media (hover: hover) and (pointer: fine) {
    .event-card:hover {
        background: var(--lime);
    }
}

/*
 * Trois colonnes egales (479 px a 1512, comme la maquette 221:1907). flex-basis 0 ne suffisait pas :
 * les marges interieures du titre et du lieu s'ajoutaient a leur part, et la photo n'avait que 446 px (revue du 07/10, M5).
 * Un tiers de la largeur chacune, marges comprises (box-sizing: border-box, section 2).
 */
.event-card__image,
.event-card__header,
.event-card__body {
    flex: 0 0 calc(100% / 3);
    min-width: 0;
}

/* La photo remplit sa colonne, quelle que soit la hauteur de la carte */
.event-card__image {
    position: relative;
}

.event-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card__header {
    display: flex;
    padding: 24px;
    border-left: 1px solid var(--alliance-trait);
}

.event-card__body {
    display: flex;
    padding: 24px;
}

/* Le lieu en haut, la fleche en bas a droite, 60 px entre les deux */
.event-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 60px;
}

/* L'adresse a gauche, "Itineraire" a droite, en brun a 50 % (comme le texte des moments clés). Jusqu'au 07/10, la couleur
   des traits (--alliance-trait), passée à 25 % avec la couleur de bordure unique du 06/10 : trop clair (audit de Ryan, D-04) */
.event-card__place {
    display: flex;
    align-items: flex-start;
    width: 100%;
    color: var(--texte-secondaire); /* 65 % (08/10, point 24) ; « Itinéraire » en hérite */
    font-size: var(--t-petit);
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.03em; /* -0.48 px pour 16 px */
}

.event-card__address {
    flex: 1 1 0;
}

/* "Itineraire" passe au-dessus du lien de la carte (z-index) : il reste cliquable */
.event-card__route-link {
    position: relative;
    z-index: 1;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

/* ------------------------------------------------------------------
 * Les moments cles (calque "milestones", carte "milestone-card")
 * ------------------------------------------------------------------ */

/* 3 colonnes egales ; comme dans la maquette, le trait du haut s'ajoute a celui des cartes */
.milestones__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--alliance-trait);
    border-bottom: 1px solid var(--alliance-trait);
}

/* Une carte : la photo (165 px), le titre et la date (165 px), puis le texte et la fleche */
.milestone-card {
    position: relative; /* le repere du lien qui couvre la carte */
    display: flex;
    flex-direction: column;
    background: var(--creme);
    border-top: 1px solid var(--alliance-trait);
    border-right: 1px solid var(--alliance-trait);
    transition:
        background-color var(--duree) var(--courbe),
        color var(--duree) var(--courbe),
        box-shadow var(--duree) var(--courbe);
}

/*
 * Survol (et focus au clavier) : fond brun et textes creme, l'etat "Hover" de la maquette,
 * avec un cadre brun sur les quatre cotes (Emmanuel, 07/10 : il n'y en avait qu'en haut et a droite).
 * - Haut et droite : les traits de la carte elle-meme. background (le raccourci) remet background-clip
 *   a border-box : le fond brun passe sous ces traits semi-transparents et les fonce.
 * - Gauche et bas : ces traits-la appartiennent aux voisines (trait de droite de la carte d'avant,
 *   trait du haut de la carte du dessous). Trois ombres sans flou de 1 px les recouvrent :
 *   a gauche, en bas, et le coin entre les deux.
 * - z-index: 1 : la carte du dessous est dessinee apres celle-ci et recouvrirait l'ombre du bas.
 */
.milestone-card:focus-within {
    z-index: 1;
    background: var(--brun);
    color: var(--creme);
    box-shadow: -1px 0 var(--brun), 0 1px var(--brun), -1px 1px var(--brun);
}

@media (hover: hover) and (pointer: fine) {
    .milestone-card:hover {
        z-index: 1;
        background: var(--brun);
        color: var(--creme);
        box-shadow: -1px 0 var(--brun), 0 1px var(--brun), -1px 1px var(--brun);
    }
}

.milestone-card__image {
    height: 165px;
}

.milestone-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.milestone-card__header {
    display: flex;
    height: 165px;
    padding: 24px;
}

.milestone-card__body {
    display: flex;
    flex: 1 1 auto; /* la carte s'etire a la hauteur de sa rangee : le corps prend la place restante */
    padding: 24px;
}

/* Le texte en haut, la fleche en bas a droite, 60 px entre les deux */
.milestone-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 60px;
}

/*
 * La description : la couleur du texte (brun, ou creme au survol) a 50 %.
 * La maquette met le texte en opacite 50 % ; une couleur a 50 % donne le meme rendu
 * sans faire passer le texte au-dessus du lien de la carte (avec opacity,
 * un clic sur le texte n'ouvrait pas la carte).
 */
.milestone-card__text {
    width: 100%;
    /* 65 % de la couleur du texte (08/10, point 24) : sur le crème, exactement --texte-secondaire ; sur le brun du
       survol, 65 % du crème, 6,6:1 */
    color: color-mix(in srgb, currentColor 65%, transparent);
    font-size: var(--t-petit);
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.03em; /* -0.48 px pour 16 px */
}

/* La fleche en bas a droite de chaque carte : alignee d'une carte a l'autre dans une rangee,
   quelle que soit la longueur du texte */
.milestone-card__icon {
    margin-top: auto;
}

/*
 * La fleche : brune par defaut, creme au survol (les deux fichiers de la maquette).
 * Les deux sont l'une sur l'autre (meme case de grille) et se croisent en fondu, au rythme du fond de la carte
 * (audit de Ryan, D-10 : avant, display: none les echangeait d'un coup).
 * pointer-events: none : une image a moitie transparente passe au-dessus du lien de la carte,
 * un clic sur la fleche n'ouvrirait plus rien (meme piege que .milestone-card__text).
 */
.milestone-card__arrow {
    display: grid;
}

.milestone-card__arrow img {
    grid-area: 1 / 1;
    pointer-events: none;
    transition: opacity var(--duree) var(--courbe);
}

.milestone-card__arrow-survol {
    opacity: 0;
}

.milestone-card:focus-within .milestone-card__arrow-defaut {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .milestone-card:hover .milestone-card__arrow-defaut {
        opacity: 0;
    }
}

.milestone-card:focus-within .milestone-card__arrow-survol {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .milestone-card:hover .milestone-card__arrow-survol {
        opacity: 1;
    }
}

/* ==================================================================
 * Version mobile
 * Pas de maquette mobile pour cette page : on reprend les regles de
 * l'accueil mobile (section 6) : titres surlignes en 32 px, gouttieres de 16 px,
 * et tout passe en une seule colonne.
 *
 * Meme bascule que la navigation et l'accueil : 768 px, portrait ou ecran bas (voir la section 1).
 * ================================================================== */

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {

    .alliance {
        gap: 128px; /* 160 px en desktop, 128 comme sur l'accueil mobile */
    }

    /* ----- Le hero ----- */

    .alliance-hero__image {
        height: 400px; /* 600 px en desktop : les titres restent dans le premier ecran */
    }

    /* Les titres surlignes a la taille de l'accueil mobile (style "Mobile/Display2") */
    .alliance .highlight-title {
        font-size: 32px;
    }

    .alliance .highlight-title__line {
        padding: 4px calc(2px + 0.06em) 4px 2px; /* 30 px de haut : 4 + 22 + 4 */
        line-height: 22px;
    }

    /* "Agir sur le territoire" : la premiere ligne (30 px) chevauche toujours le bas de la photo */
    .alliance-hero__title {
        margin-top: -30px;
        margin-left: 16px;
    }

    /* Les decalages du desktop divises par deux, pour tenir dans 390 px */
    .alliance-hero__title .highlight-title__line:nth-child(2) {
        margin-left: 63px;
    }

    .alliance-hero__title .highlight-title__line:nth-child(3) {
        margin-left: 38px;
    }

    .alliance-hero__tagline {
        top: 160px;
        right: 16px;
    }

    .alliance-hero__tagline .highlight-title__line:nth-child(2) {
        margin-left: 38px;
    }

    /* ----- Les titres des sections ----- */

    .events__header,
    .milestones__header {
        padding: 0 16px;
    }

    /* ----- Les prochaines actions : la carte passe en pile ----- */

    /* La photo en haut, puis le titre et la date, puis le lieu et la fleche */
    .event-card {
        flex-direction: column;
    }

    .event-card__image,
    .event-card__header,
    .event-card__body {
        flex: 0 0 auto;
    }

    /* La photo n'a plus de colonne a remplir : elle prend la hauteur de celle des moments cles */
    .event-card__image {
        height: 165px;
    }

    /* Le trait qui separait la photo du texte passe de gauche a en haut */
    .event-card__header {
        padding: 16px;
        border-top: 1px solid var(--alliance-trait);
        border-left: 0;
    }

    .event-card__body {
        padding: 0 16px 16px;
    }

    .event-card__content,
    .milestone-card__content {
        gap: 32px; /* 60 px en desktop, 32 comme les cartes de l'accueil mobile */
    }

    /* ----- Les moments cles : une colonne ----- */

    .milestones__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Seule dans sa rangee, la carte n'a plus de voisine a separer : pas de trait contre le bord de l'ecran */
    .milestone-card {
        border-right: 0;
    }

    /* La hauteur fixe de 165 px alignait les 3 cartes d'une rangee : seule, la carte suit son titre */
    .milestone-card__header {
        height: auto;
        padding: 16px;
    }

    .milestone-card__body {
        padding: 0 16px 16px;
    }
}


/* ==========================================================================
   10. PRESSE
   Source : le <style> de presse.php (jusqu'au 06/10), refait d'apres la maquette le 07/10
   Portée : main.presse
   ========================================================================== */

/*
 * La page Presse, d'apres la maquette FINALE (cadre « Presse », 110:522), refaite le 07/10 (revue du prototype,
 * I1, M1, M2, M6). Jusque-la, l'en-tete suivait la hauteur de l'ecran (737 px de photo a 1512 x 982, 576 a 1024 x 768)
 * et la liste commencait 200 px trop bas ; les cartes etaient plus grasses que la maquette, en Arial par endroits,
 * avec des variables et un filtre a eux (--paper, --ink, filter: multiply, qui n'existe pas).
 * La page prend maintenant les couleurs et la police du site (body, section 2) : la classe page-presse du body
 * ne sert plus a rien ici, on la garde pour WordPress (plan, section 6).
 */
.presse {
    display: flex;
    flex-direction: column;
    gap: 160px; /* de l'en-tete a la liste, comme Alliance */
    /* On laisse la place a la colonne de navigation fixee a droite (section 2) */
    width: calc(100% - var(--nav-l));
}

/* ------------------------------------------------------------------
 * L'en-tete (110:523) : la mecanique de celui d'Alliance (section 9)
 * 722 px : la photo (600), le titre (183) dont les deux premieres lignes passent sur la photo (-122),
 * et 61 px sous le titre, comme le cadre de la maquette.
 * ------------------------------------------------------------------ */
.presse-hero {
    padding-bottom: 61px;
}

.presse-hero__image {
    height: 600px;
    overflow: hidden;
}

.presse-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* « Dans L'espace Public » : a 76 px du bord ; decalages des lignes releves dans la maquette, 0, 126 et 75 px */
.presse-hero__titre {
    position: relative; /* passe devant la photo */
    margin-top: -122px;
    margin-left: 76px;
}

.presse-hero__titre .highlight-title__line:nth-child(2) {
    margin-left: 126px;
}

.presse-hero__titre .highlight-title__line:nth-child(3) {
    margin-left: 75px;
}

/* ------------------------------------------------------------------
 * La liste (122:2055) et ses cartes (composant « press-card », 221:2237)
 * Deux colonnes ; chaque carte a ses traits a gauche et en haut, la liste ferme le bas.
 * Une carte : 48 px de marge, la source encadree, puis titre, mention, date et fleche, 24 px entre eux
 * (32 px apres la source) ; 370 px de haut dans la maquette.
 * Les classes sont celles du gabarit en reserve (docs/en-reserve/wordpress-gabarits/page-presse.php).
 * ------------------------------------------------------------------ */
.presse-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--bordure);
}

.presse-card > div {
    position: relative;
    min-height: 370px;
    padding: 48px;
    border-top: 1px solid var(--bordure);
    border-left: 1px solid var(--bordure);
    background: var(--creme);
    transition: background-color var(--duree) var(--courbe); /* 250 ms, ease : le modele de tout le site (section 1) */
}

@media (hover: hover) and (pointer: fine) {
    .presse-card > div:hover {
        background-color: var(--bleu); /* l'etat « Hover » de la maquette (221:2238) */
    }
}

.presse-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* La source : encadree, sur fond creme (il reste creme quand la carte passe au bleu) */
.presse-badge {
    margin-bottom: 8px; /* 24 + 8 : les 32 px de la maquette apres la source */
    padding: 8px;
    border: 1px solid var(--brun);
    background: var(--creme);
    font-size: 24px;
    font-weight: var(--graisse-titre);
    line-height: 26px;
    letter-spacing: -0.04em; /* -0.96 px pour 24 px */
}

.presse-headline {
    margin: 0;
    font-size: 24px;
    font-weight: var(--graisse-titre);
    line-height: 26px;
    letter-spacing: -0.04em;
}

/* La mention et la date : en taupe opaque, comme la maquette, au repos et au survol
   (jusqu'au 07/10, une opacite de 50 % les rendait bleu-gris sur le fond bleu : revue, M6) */
.presse-meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--texte-secondaire);
    font-size: 18px;
    font-weight: var(--graisse-titre);
    line-height: 19px;
    letter-spacing: -0.03em; /* -0.54 px pour 18 px */
}

/* La fleche, en bas a droite de la carte */
.presse-arrow {
    display: block;
    align-self: flex-end;
    margin-top: auto;
    width: 12px;
    height: 12px;
}

/* ------------------------------------------------------------------
 * Mobile (768 px et moins, portrait ou ecran bas : section 1) : la mecanique de l'en-tete d'Alliance mobile, une colonne de cartes
 * ------------------------------------------------------------------ */
@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    .presse {
        gap: 128px; /* comme Alliance et l'accueil mobile */
    }

    .presse-hero {
        padding-bottom: 30px;
    }

    .presse-hero__image {
        height: 400px; /* 600 px en desktop : le titre reste dans le premier ecran */
    }

    /* Le titre a la taille des titres en escalier sur telephone (style « Mobile/Display2 », 32 px, option A du 07/10) */
    .presse .highlight-title {
        font-size: 32px;
    }

    .presse .highlight-title__line {
        padding: 4px calc(2px + 0.06em) 4px 2px; /* 30 px de haut : 4 + 22 + 4 */
        line-height: 22px;
    }

    /* Deux lignes de 30 px sur la photo, decalages du desktop divises par deux */
    .presse-hero__titre {
        margin-top: -60px;
        margin-left: 16px;
    }

    .presse-hero__titre .highlight-title__line:nth-child(2) {
        margin-left: 63px;
    }

    .presse-hero__titre .highlight-title__line:nth-child(3) {
        margin-left: 38px;
    }

    .presse-card {
        grid-template-columns: 1fr;
    }

    .presse-card > div {
        min-height: 0;
        padding: 32px 16px;
        border-left: 0;
    }
}


/* ==========================================================================
   11. RESSOURCES
   Source : le <style> de ressources.php (jusqu'au 06/10)
   Portée : main.ressources
   ========================================================================== */

       main.ressources {
     padding-top: 320px;
    padding-bottom: 0; /* le pied de page colle à la liste (Emmanuel, 07/10) */
    padding-right: var(--nav-l);
}

        /*Titre */
        .ressources__titre {
            width: fit-content;
            background-color: var(--lime);
            /* 40 px jusqu'à la liste, comme la maquette (122:2320 : titre de 320 à 381, liste à 421) ; 16 jusqu'au 07/10 (audit de Ryan, D-07) */
            margin: 0 0 40px 24px;
            /* Une ligne surlignée comme celles de la frise : 61 px de haut (45 de capitales + 2 x 8), découpée aux capitales */
            padding: 8.1px 4px;
            text-box: trim-both cap alphabetic;
            font-family: var(--font-display);
            /* 64 px (maquette), réduit sur un écran étroit pour que le mot tienne entre les marges de 24 px :
               il fait environ 5 fois sa taille de large, padding compris (07/10, Emmanuel : la page débordait) */
            font-size: min(64px, calc((100vw - 56px) / 5.2));
            font-weight: 700;
            line-height: 0.9375; /* 60 px pour 64 px */
            letter-spacing: -0.06em;
        }

        /* L'interlettrage négatif s'ajoute aussi après la dernière lettre en CSS, pas dans Figma (même correction que la frise) */
        .ressources__titre::after {
            content: "";
            display: inline-block;
            width: 0.06em;
        }


        /*Liste : trait fin au-dessus de la première ligne */
        .ressources__liste {
            margin: 0;
            padding: 0;
            list-style: none;
            border-top: 1px solid var(--bordure);
        }


        /*Une ligne : trait fin en dessous*/
        .ressources__item {
            border-bottom: 1px solid var(--bordure);
        }


        /*Titre | Type | Année | Format | Flèche */
        .ressources__lien {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 2fr auto;
            gap: 16px;
            align-items: center;
            /* 52 px de haut, trait compris, comme la maquette (221:2260) ; 61 px avec 20 px de marge (revue du 07/10, M4) */
            padding: 16px 24px;
            color: inherit;
            text-decoration: none;
            font-family: var(--font-texte);
            font-size: var(--t-petit);
            line-height: 1.23;
            transition: background-color var(--duree) var(--courbe);
        }

        /* Survol et navigation au clavier : léger fond teinté */
        .ressources__lien:focus-visible {
            background-color: var(--rouge);
            outline: 2px solid currentColor;
            outline-offset: -2px;
        }

@media (hover: hover) and (pointer: fine) {
    .ressources__lien:hover {
        background-color: var(--rouge);
    }
}


        /*
           Bloc d'informations
           Sur grand écran, ses 3 éléments deviennent des colonnes
           de la grille du lien (display: contents).
           */
        .ressources__infos {
            display: contents;
        }

        /* Type, année, format : texte plus discret, en taupe opaque comme la maquette (#9f9281), au repos et au survol.
           Jusqu'au 07/10, une opacité de 55 % : sur le fond rouge du survol, le texte devenait rouge sombre (revue, M6). */
        .ressources__type,
        .ressources__annee,
        .ressources__format {
            color: var(--texte-secondaire);
        }


        /*Flèche à droite de la ligne*/
        .ressources__fleche {
            display: block;
            width: 14px;
            height: 13px;
        }


        /*
           Petits écrans (768 px et moins, le seuil du site ; 700 px jusqu'au 07/10 : entre 701 et 768 px,
           le titre restait à 320 px du haut sous l'en-tête mobile, revue M19)
           Le titre prend toute la largeur, les infos passent
           en dessous sur une seule ligne, la flèche reste à droite.
           */
        @media (max-width: 768px), (orientation: portrait), (max-height: 519px) {

            main.ressources {
                padding-top: 80px;
            }

            .ressources__lien {
                grid-template-columns: 1fr auto;
                gap: 4px 16px;
                padding-block: 16px;
            }

            .ressources__infos {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                grid-column: 1;
            }

            .ressources__fleche {
                grid-column: 2;
                grid-row: 1 / span 2;
            }
        }


/* ==========================================================================
   12. CONTACT
   Source : contact.css
   Portée : contact.php, main.contact
   ========================================================================== */

/*
 * Section 12 (ancienne feuille contact.css, réunie dans site.css le 06/10) : styles de la page "Entrer en contact".
 * Reproduit la maquette Figma : fond ivoire, titre lime sur fond brun en escalier,
 * infos en bas a gauche, formulaire a droite, les deux colonnes alignees en bas.
 * Le tout tient sur 100vh sans scroll.
 */

/* ----------------------------------------------------------------
 * Conteneur principal : pleine hauteur viewport
 * Flex row : colonne gauche (titre + infos) + colonne droite (formulaire)
 * ---------------------------------------------------------------- */
.contact {
    display: flex;
    justify-content: center;
    align-items: last baseline;
    gap: 5rem;
    width: calc(100% - var(--nav-l));
    margin: 0;
    padding: 4rem 5rem;
    background: var(--ivoire);
    color: var(--brun);
    font-family: var(--font-texte);
    overflow: hidden;
}

/* ----------------------------------------------------------------
 * Colonne gauche : titre en haut, infos en bas
 * ---------------------------------------------------------------- */
.contact__gauche {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 128px;
    flex: 0 1 480px;

}

/* ----------------------------------------------------------------
 * Titre "Entrer En Contact"
 * Texte lime sur blocs brun, disposition en escalier
 * ---------------------------------------------------------------- */

.contact__titre {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.8;
}

/* Chaque mot : texte lime sur fond brun, padding minimal = bloc serre */
.contact__titre-mot {
    display: inline-block;
    background: var(--brun);
    color: var(--lime);
    padding: 0.02em 0.08em;
    line-height: 1;
}

/* Chaque ligne : flex item, pas de marge, les blocs se touchent verticalement */
.contact__titre-ligne {
    display: block;
}

/*
 * Escalier en em (proportionnel a la font-size, independant de l'ecran) :
 * - "En" demarre au bout de "Entrer" (margin-left = largeur du bloc Entrer)
 * - "Contact" est centre sous "En"
 * Ajuster ces 2 valeurs si le positionnement est decale.
 */
.contact__titre-ligne:nth-child(2) {
    margin-left: 2.9em;
}

.contact__titre-ligne:nth-child(3) {
    margin-left: 1.2em;
}

/* ----------------------------------------------------------------
 * Colonne droite : description + formulaire
 * Alignée en bas grâce à align-items: flex-end du parent
 * ---------------------------------------------------------------- */
.contact__droite {
    flex: 0 1 480px;
}

.contact__description {
    font-size: var(--t-petit);
    line-height: 1.45;
    margin-bottom: 36px;
    color: var(--brun);
}

/* ----------------------------------------------------------------
 * Formulaire
 * ---------------------------------------------------------------- */
.contact__form {
    display: flex;
    flex-direction: column;
}

.contact__champ {
    width: 100%;
    padding: 13px 16px;
    background: transparent;
    border: 1px solid var(--bordure);
    border-bottom: none;
    border-radius: 0;           /* Safari (iOS) arrondit les champs par défaut ; la maquette a des coins droits (audit de Ryan, M-02) */
    -webkit-appearance: none;
    appearance: none;
    color: var(--brun);
    font-family: var(--font-texte);
    font-size: var(--t-corps);  /* 16 px au moins : en dessous, Safari zoome sur la page quand on tape dans le champ */
    outline: none;
    transition: border-color var(--duree) var(--courbe);
}

/* Le dernier champ ferme la pile par un trait en bas. Pas :last-of-type : il vise le dernier de chaque balise,
   donc aussi « Sujet » (dernier input), dont le trait du bas doublait le trait du haut de « Message » (07/10). */
.contact__champ--message {
    border-bottom: 1px solid var(--bordure);
    min-height: 140px;
    resize: none;
}

.contact__champ::placeholder {
    color: var(--gris);
}

.contact__champ:focus {
    border-color: var(--brun);
    z-index: 1;
    position: relative;
}

.contact__btn {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    padding: 14px 18px;
    background: var(--brun);
    border: 1px solid var(--brun);
    border-top: none;
    color: var(--ivoire);
    font-family: var(--font-texte);
    font-size: var(--t-petit);
    cursor: pointer;
    transition:
        background-color var(--duree) var(--courbe),
        color var(--duree) var(--courbe),
        border-color var(--duree) var(--courbe);
}

@media (hover: hover) and (pointer: fine) {
    .contact__btn:hover {
        background: var(--lime);
        color: var(--brun);
        border-color: var(--brun);
    }
}

/* Flèche dans le bouton */
.contact__btn-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.contact__btn-fleche svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5; /* le trait de la maquette */
}

/* ----------------------------------------------------------------
 * Infos de contact : bas de la colonne gauche
 * Poussé en bas par le justify-content: space-between du parent
 * ---------------------------------------------------------------- */


.contact__bloc {
    margin-bottom: 24px;
}

.contact__bloc:last-child {
    margin-bottom: 0;
}

/* Les coordonnees, a toutes les largeurs ou elles s'affichent (au-dessus de 768 px) : 16 px, intitules en brun,
   texte en taupe, comme la maquette et la regle d'ordinateur plus bas. Jusqu'au 07/10, entre 769 et 900 px :
   14 px et gris neutre (#b6b6b6, contraste 1,98:1), une autre couleur qu'au-dessus de 900 px (revue, M20). */
.contact__bloc-titre {
    font-family: var(--font-texte);
    font-size: var(--t-corps);
    font-weight: var(--graisse-texte);
    margin-bottom: 2px;
    color: var(--brun);
}

.contact__bloc p,
.contact__bloc a {
    font-size: var(--t-corps);
    line-height: 1.45;
    color: var(--texte-secondaire);
    text-decoration: none;
}

.contact__bloc-titre.credits {
    color: var(--brun);
}

/* Les liens : un soulignement transparent, que le survol colore en brun en même temps que le texte */
.contact__bloc a {
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    transition: color var(--duree) var(--courbe), text-decoration-color var(--duree) var(--courbe);
}

@media (hover: hover) and (pointer: fine) {
    .contact__bloc a:hover {
        color: var(--brun);              /* un soulignement brun, lisible : le jaune ne se lisait pas sur le crème (audit de Ryan, M-01) */
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ----------------------------------------------------------------
 * ORDINATEUR (901 px et plus) : la maquette FINALE, cadre « Contact » (142:3144), refaite le 07/10
 * (audit de Ryan, D-08 : sur un écran de 1366 x 768, le formulaire passait sous l'écran et la colonne de
 * gauche était coupée). Deux colonnes égales, alignées en bas ; le bloc est centré verticalement dans la
 * hauteur visible. Sur un écran bas, seul l'espace entre le titre et les coordonnées se réduit (128 px
 * dans la maquette, 48 au moins) : tout tient jusqu'à environ 600 px de haut, en dessous la page défile.
 * Tablette et mobile (900 px et moins) : les règles plus bas, inchangées.
 * ---------------------------------------------------------------- */
@media (min-width: 901px) {
    .contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;          /* les deux colonnes finissent sur la même ligne */
        align-content: center;     /* et le bloc est centré dans la hauteur */
        gap: 0;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 48px clamp(48px, calc((100vw - var(--nav-l)) * 128 / 1436), 128px);
        overflow: visible;
    }

    .contact__gauche {
        position: relative; /* le repère du bloc « Crédits », plus bas */
        flex: none;
        justify-content: flex-start;
        align-items: flex-start;
        gap: clamp(48px, calc(100dvh - 550px), 128px);
    }

    /* Le titre : trois lignes surlignées, comme les titres de la frise (64 px, lignes de 61 px), en escalier */
    .contact__titre {
        display: block;
        position: relative;
        width: 100%;
        height: 183px;
        margin: 0;
        font-size: 64px;
        line-height: calc(60 / 64);
        letter-spacing: -0.06em;
    }

    .contact__titre-ligne {
        position: absolute;
        top: 0;
        left: 0;
    }

    .contact__titre-ligne:nth-child(2) {
        top: 61px;
        left: 178px;
        margin-left: 0;
    }

    .contact__titre-ligne:nth-child(3) {
        top: 122px;
        left: 76px;
        margin-left: 0;
    }

    .contact__titre-mot {
        display: block;
        padding: 8.1px 4px; /* 8 px dans Figma ; 0,1 px de plus, car les capitales font 44,8 px (45 dans Figma) */
        background: var(--brun);
        color: var(--jaune);
        line-height: inherit;
        white-space: nowrap;
        text-box: trim-both cap alphabetic;
    }

    /* L'interlettrage négatif s'ajoute aussi après la dernière lettre en CSS, pas dans Figma (même correction que la frise) */
    .contact__titre-mot::after {
        content: "";
        display: inline-block;
        width: 0.06em;
    }

    /* Les coordonnées : intitulé brun, valeur en brun clair, 16 px. Espaces de 8 et 32 px dans Figma, ici 7,6 et 31,6 :
       les capitales de Geist font 11,4 px dans le navigateur (11 dans Figma), la colonne garde ses 271 px */
    .contact__infos {
        display: flex;
        flex-direction: column;
        gap: 31.6px;
    }

    .contact__bloc {
        display: flex;
        flex-direction: column;
        gap: 7.6px;
        margin-bottom: 0;
    }

    .contact__bloc-titre,
    .contact__bloc p,
    .contact__bloc a {
        margin: 0;
        font-size: var(--t-corps);
        font-weight: var(--graisse-texte);
        line-height: var(--lh-corps);
        letter-spacing: var(--ls-texte);
        text-box: trim-both cap alphabetic;
    }

    .contact__bloc-titre {
        color: var(--brun);
    }

    .contact__bloc p,
    .contact__bloc a {
        color: var(--texte-secondaire);
    }

    .contact__bloc-titre.credits {
        color: var(--brun);
    }

    /* « Crédits » n'est pas dans la maquette : sous « Adresse », 32 px plus bas, mais hors du calcul de l'alignement,
       pour que le titre et les coordonnées restent à leur place (le bas de « Adresse » sur le bas du bouton).
       .contact__gauche est le repère (position: relative, plus haut). */
    .contact__bloc:has(.credits) {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 32px;
    }

    /* La description : 18 px SemiBold, en brun clair, 510 px de large au plus, 64 px au-dessus du formulaire */
    .contact__droite {
        flex: none;
        min-width: 0;
    }

    .contact__description {
        max-width: 510px;
        margin: 0 0 64px;
        color: var(--texte-secondaire);
        font-size: var(--t-sous-titre);
        font-weight: var(--graisse-titre);
        line-height: var(--lh-sous-titre);
        letter-spacing: var(--ls-texte);
    }

    /* Les champs : 51 px de haut, 24 px de marge à gauche, texte de 16 px */
    .contact__champ {
        height: 51px;
        padding: 0 24px;
        font-size: var(--t-corps);
        font-weight: var(--graisse-texte);
        letter-spacing: var(--ls-texte);
    }

    .contact__champ::placeholder {
        color: var(--texte-secondaire);
    }

    .contact__champ--message {
        height: 160px;
        min-height: 0;
        padding: 18px 24px;
        line-height: var(--lh-corps);
    }

    /* Le bouton : 220 x 51 px, flèche de 12 px */
    .contact__btn {
        width: 220px;
        height: 51px;
        padding: 0 24px;
        border: 1px solid var(--bordure);
        border-top: none;
        font-size: var(--t-corps);
        font-weight: var(--graisse-texte);
        letter-spacing: var(--ls-texte);
    }

    .contact__btn-fleche {
        width: 12px;
        height: 12px;
    }
}

/* ----------------------------------------------------------------
 * Responsive
 * Les offsets du titre sont en em, ils scalent automatiquement.
 * ---------------------------------------------------------------- */

/* Tablette / Mobile : colonnes empilees, ordre : titre → formulaire → infos */
@media (max-width: 900px) {
    .contact {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        height: auto;
        min-height: 100vh;
        padding: 2rem;
        padding-top: calc(2rem + var(--nav-h)); /* sous l'en-tête fixe de la nav mobile (48 px dans la mise en page du téléphone, 0 sinon) */
        gap: 32px;
    }

    /*
     * display: contents fait disparaître le wrapper .contact__gauche
     * du flux flex, ses enfants (titre-wrap et infos) deviennent des
     * flex items directs de .contact → on peut les réordonner avec order.
     */
    .contact__gauche {
        display: contents;
    }

    /* Ordre vertical : titre (1), formulaire (2), infos (3) */
    .contact__titre-wrap {
        order: 1;
    }

    .contact__droite {
        order: 2;
        flex: none;
        max-width: 100%;
    }

    .contact__infos {
        order: 3;
    }

    .contact__titre {
        font-size: 52px;
    }
}

/* Mobile : titre plus petit */
@media (max-width: 600px) {
    .contact {
        padding: 1.5rem;
        padding-top: calc(1.5rem + var(--nav-h)); /* sous l'en-tête fixe de la nav mobile */
        gap: 24px;
    }

    .contact__titre {
        font-size: 36px;
    }

    .contact__description {
        font-size: 14px;
    }

    .contact__btn {
        width: 100%;
    }
}

/* Le pied de page commun : sur mobile seulement (Emmanuel, 07/10). Sur ordinateur, la colonne de gauche
   donne déjà les coordonnées. Sur mobile, il remplace le bloc des coordonnées (mêmes informations) et suit
   le formulaire sans espace : plus de hauteur minimale d'un écran. */
.contact + .footer-grid {
    display: none;
}

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    .contact + .footer-grid {
        display: block;
    }

    .contact {
        min-height: 0;
    }

    .contact__infos {
        display: none;
    }
}


/* ==========================================================================
   13. CREDITS
   Source : credits.css
   Portée : credits.php, main.credits
   ========================================================================== */

/*
 * Page Crédits (credits.php), d'après la page d'Imane Shaiba (_Preparation/credit, 02/10/2026).
 *
 * Mesures de sa page (maquette Figma) : 128 px de marge autour du contenu, 40 px entre les blocs,
 * 8 px entre un rôle et ses noms, texte Geist Medium 16 px sur 17 px.
 * Couleurs et police : section 1 (son --brown-opacity est --taupe, la même valeur #9f9281).
 * La navigation est celle de toutes les pages (section 2, template-parts/nav.php) : la page ne la restyle pas.
 */

main.credits {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    /* À droite, la colonne de navigation en plus ; en haut, l'en-tête de navigation sur mobile (0 sur ordinateur) */
    /* 128 px tout autour, comme la maquette : la page n'a plus de pied de page (audit de Ryan, D-09, 07/10) */
    padding: calc(128px + var(--nav-h)) calc(128px + var(--nav-l)) 128px 128px;
    font-size: var(--t-corps);
    font-weight: var(--graisse-texte);
    line-height: var(--lh-corps);
    letter-spacing: var(--ls-texte);
    overflow-wrap: break-word;
}

/* Boîtes de texte rognées à la hauteur des capitales, comme dans Figma (même règle que les titres de la frise) */
.credits__title,
.credits__intro,
.credits__role-title,
.credits__name {
    text-box: trim-both cap alphabetic;
}

.credits__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

/* Le titre : une ligne surlignée en jaune, 64 px, comme les titres de la frise (maquette FINALE, 162:4238 : 209 x 61 px).
   Jusqu'au 07/10 il avait la taille du texte (version d'Imane) */
.credits__title {
    margin: 0;
    padding: 8.1px 4px; /* 8 px dans Figma ; 0,1 px de plus, car les capitales font 44,8 px (45 dans Figma) */
    background: var(--jaune);
    color: var(--brun);
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    line-height: calc(60 / 64);
    letter-spacing: -0.06em;
    white-space: nowrap;
}

/* L'interlettrage négatif s'ajoute aussi après la dernière lettre en CSS, pas dans Figma (même correction que la frise) */
.credits__title::after {
    content: "";
    display: inline-block;
    width: 0.06em;
}

.credits__intro {
    max-width: 363.5px;
}

.credits__intro a {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

.credits__columns {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    white-space: nowrap;
}

.credits__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

/* Largeurs des trois colonnes dans la maquette (162:4238) */
.credits__column:nth-child(1) {
    min-width: 208px;
}

.credits__column:nth-child(2) {
    min-width: 140px;
}

.credits__column:nth-child(3) {
    min-width: 226px;
}

.credits__role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.6px; /* 8 px dans Figma : les capitales de Geist font 11,4 px dans le navigateur, 11 dans Figma */
    margin: 0;
}

/* L'intitulé du rôle : le texte secondaire (brun à 50 % dans la maquette, 65 % depuis le 08/10, point 24) */
.credits__role-title {
    color: var(--texte-secondaire);
}

.credits__name {
    margin: 0; /* un <dd> a une marge à gauche par défaut */
    color: var(--brun);
}

/*
 * Écran moyen : les trois colonnes ne tiennent plus côte à côte, elles passent à la ligne.
 * Mobile (768 px et moins, la navigation devient un en-tête) : marges réduites, une colonne.
 */
@media (max-width: 1100px) {
    .credits__columns {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    main.credits {
        padding: calc(48px + var(--nav-h)) 24px 48px;
    }

    .credits__columns {
        flex-direction: column;
        white-space: normal;
    }

    .credits__column {
        min-width: 0;
    }
}

/* Navigateur sans text-box (Firefox en 2026) : la règle d'Imane, 3 px rognés en haut et en bas de chaque ligne */
@supports not (text-box: trim-both cap alphabetic) {
    .credits__title,
    .credits__intro,
    .credits__role-title,
    .credits__name {
        margin-block: -3px;
    }
}


/* ==========================================================================
   14. FICHE D'UN MOMENT CLE
   Source : single.css
   Portée : single.php, body.page-single
   ========================================================================== */

/*
 * Section 14 (ancienne feuille single.css, réunie dans site.css le 06/10) : la fiche d'un moment cle (single.php).
 *
 * Maquette FINALE : cadre « single-page-moments-clé » (188:1279).
 * Un panneau de 908 px borde de traits bruns, le bouton ✕ colle en haut a sa droite.
 * Police Geist (Medium 500 / SemiBold 600) ; couleurs de la section 1.
 */

body.page-single {
    background: var(--creme);
}

.milestone-detail {
    --beige: #f1ead0;                 /* fond du bouton ✕ au survol */
    --trait: 1px solid var(--bordure);

    display: flex;
    align-items: flex-start;
    justify-content: center; /* panneau + ✕ centres sur toute la largeur de l'ecran, comme dans la maquette */
    padding-top: var(--nav-h); /* integration : sur mobile, la navigation devient un en-tete fixe (0 sur desktop, section 1) */
    color: var(--brun);
    font-family: "Geist", var(--font-texte);
    font-size: 16px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.03em;
}

/* Le panneau : 906 px de contenu + ses deux traits */
.milestone-detail__panel {
    flex: 0 1 908px;
    min-width: 0;
    border-right: var(--trait);
    border-left: var(--trait);
}

/* Rognage typographique comme dans Figma (du haut des capitales a la ligne de base) */
.milestone-detail__label,
.milestone-detail__text p,
.milestone-detail__route-link,
.milestone-detail__footer-list li {
    text-box: trim-both cap alphabetic;
}

/* ------------------------------------------------------------------
 * En-tete : titre a gauche, date a droite
 * ------------------------------------------------------------------ */
.milestone-detail__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 128px 32px 32px;
    border-bottom: var(--trait);
    font-weight: 600;
}

.milestone-detail__title {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.04em;
}

.milestone-detail__date {
    flex: none;
    font-size: 18px;
    line-height: 19px;
    text-align: right;
}

/* ------------------------------------------------------------------
 * Photo
 * ------------------------------------------------------------------ */
.milestone-detail__cover {
    aspect-ratio: 906 / 604;
}

.milestone-detail__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
 * Lieu et itineraire
 * ------------------------------------------------------------------ */
.milestone-detail__place {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 32px 64px;
    border-top: var(--trait);
    border-bottom: var(--trait);
}

.milestone-detail__address {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
}

.milestone-detail__route-link {
    color: var(--texte-secondaire);
    text-underline-position: from-font;
    transition: color var(--duree) var(--courbe);
}

.milestone-detail__route-link:focus-visible {
    color: var(--brun);
}

@media (hover: hover) and (pointer: fine) {
    .milestone-detail__route-link:hover {
        color: var(--brun);
    }
}

/* ------------------------------------------------------------------
 * Texte
 * ------------------------------------------------------------------ */
.milestone-detail__section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 32px 64px;
    border-bottom: var(--trait);
}

.milestone-detail__label {
    color: var(--texte-secondaire);
    font: inherit;
}

.milestone-detail__text p + p {
    margin-top: 16px;
}

/* Une video dans le texte d'une fiche (bloc destruction-illegale, decision du 08/10, point 11 c2) : toute la largeur
   du texte, au format 16/9, quelle que soit la largeur ecrite dans l'iframe (560 px sur le site actuel) */
.milestone-detail__text iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.milestone-detail__text p + iframe,
.milestone-detail__text iframe + p {
    margin-top: 16px;
}

/* ------------------------------------------------------------------
 * Pied : "Restez informe" et "Contact", cote a cote
 * ------------------------------------------------------------------ */
.milestone-detail__footer {
    display: flex;
}

.milestone-detail__footer-block {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 32px 64px;
    border-bottom: var(--trait);
}

.milestone-detail__footer-block + .milestone-detail__footer-block {
    border-left: var(--trait);
}

.milestone-detail__footer-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.milestone-detail__footer-list a {
    text-decoration: underline transparent; /* le survol et le focus lui donnent sa couleur, en fondu */
    transition: text-decoration-color var(--duree) var(--courbe);
}

.milestone-detail__footer-list a:focus-visible {
    text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
    .milestone-detail__footer-list a:hover {
        text-decoration: underline;
    }
}

/* ------------------------------------------------------------------
 * Bouton ✕ : colle en haut pendant le defilement
 * ------------------------------------------------------------------ */
.milestone-detail__close {
    position: sticky;
    top: 0;
    flex: none;
    width: 49px;
    height: 49px;
    /* Le cadre de la maquette : traits droit et bas (le SVG ne dessine plus que la croix), couleur --bordure */
    border-right: var(--trait);
    border-bottom: var(--trait);
    transition: background-color var(--duree) var(--courbe);
}

.milestone-detail__close:focus-visible {
    background-color: var(--beige);
    outline: 2px solid var(--brun);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .milestone-detail__close:hover {
        background-color: var(--beige);
    }
}

/* ------------------------------------------------------------------
 * Ecran moyen : centre sur toute la largeur, le panneau passerait sous la colonne M.
 * (908 + 49 px centres ; il faut au moins 1121 px d'ecran pour qu'ils restent a gauche de la colonne)
 * On s'arrete donc avant elle.
 * ------------------------------------------------------------------ */
@media (max-width: 1120px) {
    .milestone-detail {
        margin-right: var(--nav-l);
    }
}

/* ------------------------------------------------------------------
 * Ecran etroit : le panneau prend toute la largeur,
 * le ✕ passe par-dessus, en haut a droite, contre la colonne M.
 * Il reste en haut de la page : il ne suit pas le defilement.
 * ------------------------------------------------------------------ */
@media (max-width: 1000px) {
    .milestone-detail {
        position: relative;
    }

    .milestone-detail__panel {
        flex: 1 1 auto;
        border-right: 0;
        border-left: 0;
    }

    .milestone-detail__close {
        position: absolute;
        top: var(--nav-h); /* integration : sous l'en-tete de navigation mobile (0 sur desktop) */
        right: 0; /* .milestone-detail s'arrete deja avant la colonne M */
        z-index: 10;
        width: 50px; /* 49 px du SVG + le trait gauche */
        border-left: var(--trait); /* le bouton flotte : cadre sur trois côtés */
        background-color: var(--creme);
    }
}

/* ------------------------------------------------------------------
 * Petit ecran
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .milestone-detail__header {
        flex-wrap: wrap;
        padding: 96px 16px 24px;
    }

    .milestone-detail__place,
    .milestone-detail__section,
    .milestone-detail__footer-block {
        padding: 24px 16px 48px;
    }

    .milestone-detail__footer {
        flex-direction: column;
    }

    .milestone-detail__footer-block + .milestone-detail__footer-block {
        border-left: 0;
    }
}


/* ==========================================================================
   15. PIED DE PAGE DES PAGES (sauf la frise)
   Source : footer.css
   Portée : template-parts/footer.php, footer.footer-grid
   ========================================================================== */

/*
 * Section 15 (ancienne feuille footer.css, réunie dans site.css le 06/10) : le pied de page, d'après la maquette (composant « footer » de la FINALE, 221:1654 ; mobile 320:981)
 * Dimensions desktop : 1227px × 640px (4 rangées de 160px)
 * Couleurs : Fond brun #3F2616 (var(--brun)), Texte lime #DFFE40 (var(--lime))
 */

/* Variables et polices (Bugrino, Geist) : section 1. Geist n'est plus chargée chez Google,
   et une police d'essai, déclarée ici sans être utilisée, est retirée. */

/*
 * Conteneur du footer :
 * - Largeur : 100% moins la colonne nav-m de 76px à droite
 * - margin-right: var(--nav-l) (76px) pour laisser la place exacte à nav-m sans cacher la lettre 'k'
 * - justify-content: flex-end : colle le footer en plein contre le bord gauche de nav-m
 */
.footer-grid {
    background-color: var(--creme); /* le creme du site (#fffdeb) ; --ivoire (#fffff0) jusqu'au 07/10, la maquette n'a qu'un creme (revue, M3) */
    width: calc(100% - var(--nav-l));
    margin-right: var(--nav-l);
    /* La grille se mesure sur la largeur du pied : container-type rend « 100cqw » disponible dedans */
    container-type: inline-size;
    /* 76px de la maquette Figma réservés pour la droite */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    /* Coller au bout contre la barre de navigation */
    align-items: flex-end;
    padding-top: 0; /* le pied colle à la section qui le précède (Emmanuel, 07/10) */
    padding-bottom: 0; /* pas de bande de position sous le pied des pages (elle n'existe que dans la frise) : 26 px de vide en moins (audit de Ryan, D-02) */
    padding-right: 0;
    padding-left: 0;
    /*
     * Ce qui depasse a droite reste visible (le « k » de Biestebroeck) ; ce qui depasse en bas est coupe :
     * la police de « Biestebroeck » descend 20 px sous son bloc (sa hauteur de police depasse l'interligne),
     * et la page s'allongeait d'une bande creme sous le pied (12 a 20 px, revue du 07/10, M18).
     */
    overflow-x: visible;
    overflow-y: clip;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grille interne de 1227px × 640px de la maquette Figma */
.footer-grid__wrapper {
    /*
     * --k : 1 px de la maquette, réduit quand la grille de 1227 px ne tient pas dans la largeur du pied
     * (moins de 1303 px d'écran : tablette, petite fenêtre). Toutes les mesures du pied d'ordinateur
     * s'écrivent calc(N * var(--k)) : la grille entière se réduit sans se déformer (audit de Ryan, D-02, 07/10).
     * Jusque-là, une transformation scale(calc(... / 1227)) était ignorée (une longueur là où il faut un nombre) :
     * la grille sortait de l'écran par la gauche.
     */
    --k: min(1px, 100cqw / 1227);
    position: relative;
    width: calc(1227 * var(--k));
    height: calc(640 * var(--k));
    flex-shrink: 0;
    box-sizing: border-box;
    margin-right: 0;
}

/* Style de base des 6 blocs sombres */
.footer-grid__box {
    position: absolute;
    background-color: var(--brun);
    /* #3f2616 */
    color: var(--lime);
    /* #dffe40 */
    box-sizing: border-box;
    overflow: hidden;
}

/* 1. Bloc Contact (Ligne 1, gauche) : 230px × 160px */
.footer-grid__box--contact {
    top: 0;
    left: 0;
    width: calc(230 * var(--k));
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 2. Bloc Réseaux sociaux (Ligne 1, droite) : 230px × 160px à left: 740px */
.footer-grid__box--reseaux {
    top: 0;
    left: calc(740 * var(--k));
    width: calc(230 * var(--k));
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 3. Bloc Marais (Ligne 2) : de left: 230px à 740px (largeur 510px), hauteur 160px */
.footer-grid__box--marais {
    top: calc(160 * var(--k));
    left: calc(230 * var(--k));
    width: calc(510 * var(--k));
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k)) calc(16 * var(--k));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. Bloc Informations (Ligne 3, gauche) : 230px × 160px à top: 320px */
.footer-grid__box--informations {
    top: calc(320 * var(--k));
    left: 0;
    width: calc(230 * var(--k));
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5. Bloc de (Ligne 3, droite) : 230px × 160px à top: 320px, left: 740px */
.footer-grid__box--de {
    top: calc(320 * var(--k));
    left: calc(740 * var(--k));
    width: calc(230 * var(--k));
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k)) calc(16 * var(--k));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6. Bloc Biestebroeck (Ligne 4, collé au bout à droite) : top: 480px, right: 0 */
.footer-grid__box--biestebroeck {
    top: calc(480 * var(--k));
    right: 0;
    height: calc(160 * var(--k));
    padding: calc(24 * var(--k)) calc(20 * var(--k)) calc(24 * var(--k)) calc(16 * var(--k));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Empêche le rognage de la lettre 'k' */
}

/* Titres ("Contact", "Réseaux sociaux", "Informations") : 16px Medium exact de Figma */
.footer-grid__titre {
    font-family: "Geist", sans-serif;
    font-size: calc(16 * var(--k));
    font-weight: 500;
    /* 65 Medium exact */
    line-height: calc(17 * var(--k));
    letter-spacing: calc(-0.48 * var(--k));
    color: var(--lime);
    margin: 0;
    font-synthesis: none;
}

/* Textes et listes de liens : même graisse 65 Medium que les titres, interlignage compact */
.footer-grid__texte,
.footer-grid__liste {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--k));
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-grid__texte p,
.footer-grid__texte a,
.footer-grid__liste li,
.footer-grid__liste a {
    font-family: "Geist", sans-serif;
    font-size: calc(16 * var(--k));
    font-weight: 500;
    line-height: calc(14 * var(--k));
    letter-spacing: calc(-0.48 * var(--k));
    color: var(--lime);
    margin: 0;
    font-synthesis: none;
}

.footer-grid__nowrap {
    white-space: nowrap;
}

/*
 * Liens et Hover (Node 1:1205 dans Figma) :
 * Au survol, le lien devient simplement semi-transparent (opacity: 0.5),
 * sans flèche et sans soulignement, exactement comme dans le prototype Figma.
 */
.footer-grid__texte a,
.footer-grid__liste a {
    text-decoration: none;
    color: var(--lime);
    transition: opacity var(--duree) var(--courbe);
    display: inline-block;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .footer-grid__texte a:hover,
    .footer-grid__liste a:hover {
        opacity: 0.5;
        text-decoration: none;
    }
}

/* Grands mots typographiques ("Marais", "de", "Biestebroeck") en Bugrino Bold 160px */
.footer-grid__display {
    font-family: "Bugrino", var(--font-display);
    font-size: calc(160 * var(--k));
    line-height: calc(135 * var(--k));
    letter-spacing: -0.06em;
    font-weight: 700;
    font-synthesis: none;
    color: var(--lime);
    white-space: nowrap;
    display: block;
    user-select: none;
}

/* Le pied empilé du téléphone jusqu'à 1000 px de large (08/10, point 28) : en dessous, la grille de l'ordinateur
   réduisait son texte à moins de 10 px (9,7 px à 820). --px-m est redéfinie ici, avec la formule de la section 1,
   pour les écrans de 769 à 1000 px, où la mise en page de l'ordinateur ne la définit pas. */
@media (max-width: 1000px), (orientation: portrait), (max-height: 519px) {
    .footer-grid {
        --px-m: min(calc(100vw / 402), 1.2px);
        display: block;
        width: auto;
        margin: 0;
        padding: calc(48 * var(--px-m)) calc(16 * var(--px-m));
        background-color: var(--brun);
    }

    .footer-grid__wrapper {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        transform: none;
    }

    /* Les six blocs perdent leur case brune : ils s'empilent dans la colonne */
    .footer-grid__box {
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: calc(24 * var(--px-m)); /* entre le titre et sa liste */
        width: auto;
        height: auto;
        padding: calc(32 * var(--px-m)) 0;
        border-top: 1px solid var(--jaune);
        background: none;
        overflow: visible;
    }

    .footer-grid__box--contact {
        order: 1;
        padding-top: 0;
        border-top: 0;
    }

    .footer-grid__box--reseaux { order: 2; }
    .footer-grid__box--informations { order: 3; padding-bottom: 0; }

    /* « Marais », « de », « Biestebroeck » : 48 px sous Informations, 18 px entre les mots */
    .footer-grid__box--marais,
    .footer-grid__box--de,
    .footer-grid__box--biestebroeck {
        padding: 0;
        border-top: 0;
        margin-top: calc(18 * var(--px-m));
    }

    .footer-grid__box--marais { order: 4; margin-top: calc(48 * var(--px-m)); }
    .footer-grid__box--de { order: 5; }
    .footer-grid__box--biestebroeck { order: 6; }

    /* Titres, liens et adresse : Geist Medium 16 / 17, boîtes rognées à la hauteur des capitales.
       15 px au moins (14,3 px à 360 px de large jusqu'au 07/10) : la règle « rien sous 15 px » de la section 17 (revue, M17) */
    .footer-grid__titre,
    .footer-grid__texte p,
    .footer-grid__texte a,
    .footer-grid__liste li,
    .footer-grid__liste a {
        font-size: max(15px, calc(16 * var(--px-m)));
        line-height: max(16px, calc(17 * var(--px-m)));
        letter-spacing: var(--ls-texte);
    }

    .footer-grid__titre,
    .footer-grid__texte > *,
    .footer-grid__liste li {
        text-box: trim-both cap alphabetic;
    }

    .footer-grid__texte,
    .footer-grid__liste {
        gap: calc(8 * var(--px-m));
    }

    /* Le grand titre : Bugrino 60 / 52 */
    .footer-grid__display {
        font-size: calc(60 * var(--px-m));
        line-height: calc(52 * var(--px-m));
        letter-spacing: var(--ls-display);
        text-box: trim-both cap alphabetic;
    }
}


/* ==========================================================================
   16. INTRO 3D (essai, page non livrée)
   Source : intro-3d.css
   Portée : intro-3d.php, .intro3d
   ========================================================================== */

/*
 * Page Intro 3D (intro-3d.php). S'appuie sur les variables de la section 1.
 *
 * Deux vues :
 * - le choix (intro3d--choix) : grand titre, puis deux cartes, originale et nouvelle ;
 * - la lecture (intro3d--lecture) : une barre (titre, bascule, pause), la vidéo entière, la légende.
 *   Rien n'est posé sur l'image : c'est une page de comparaison, on doit tout voir.
 */

.intro3d {
    width: calc(100% - var(--nav-l));
    min-height: 100vh;
    background: var(--creme); /* le même crème que le fond de la nouvelle version */
}

/* ------------------------------------------------------------------
 * Titre en blocs brun et jaune, décalés comme les titres de la maquette
 * ------------------------------------------------------------------ */
.intro3d__titre {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.6vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
}

.intro3d__ligne {
    display: block;
    width: fit-content;
    padding: 0.08em 0.2em 0.14em;
    background: var(--brun);
    color: var(--jaune);
}

.intro3d__ligne:nth-child(2) {
    margin-left: 1.2em;
}

.intro3d__ligne:nth-child(3) {
    margin-left: 0.4em;
}

/* ------------------------------------------------------------------
 * Vue de choix
 * ------------------------------------------------------------------ */
.intro3d--choix {
    padding: 40px 40px 64px;
}

.intro3d__consigne {
    margin-top: 40px;
    font-size: var(--t-h1);
    font-weight: 500;
}

.intro3d__note {
    margin-top: 8px;
    font-size: var(--t-corps);
}

/* Bloc : la liste des deux versions */
.intro3d-choix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 24px;
}

.intro3d-choix__carte {
    display: block;
    height: 100%;
    padding-bottom: 20px;
    border: 1px solid var(--bordure);
    background: var(--creme);
    text-decoration: none;
    /* Le cadre de 3 px du survol est toujours là, transparent : le survol ne fait que le colorer, en fondu */
    outline: 3px solid transparent;
    outline-offset: -3px;
    transition: border-color var(--duree) var(--courbe), outline-color var(--duree) var(--courbe);
}

.intro3d-choix__apercu {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.intro3d-choix__libelle {
    display: inline-block;
    margin: 20px 20px 0;
    padding: 0.08em 0.2em 0.14em;
    background: var(--brun);
    color: var(--jaune);
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.intro3d-choix__detail {
    display: block;
    margin: 12px 20px 0;
    font-size: var(--t-corps);
    font-weight: 500;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--duree) var(--courbe);
}

.intro3d-choix__carte:focus-visible {
    border-color: var(--brun);
    outline: 3px solid var(--brun);
    outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
    .intro3d-choix__carte:hover {
        border-color: var(--brun);
        outline: 3px solid var(--brun);
        outline-offset: -3px;
    }
}

.intro3d-choix__carte:focus-visible .intro3d-choix__detail {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .intro3d-choix__carte:hover .intro3d-choix__detail {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* Écran d'ordinateur : la liste est bornée par la hauteur de l'écran, pour que les deux cartes
   tiennent sans défiler (la barre de défilement est masquée par le socle).
   530 px = tout ce qui n'est pas l'aperçu : marges, titre, consigne, note, bas de carte. */
@media (min-width: 801px) {
    .intro3d-choix {
        max-width: max(640px, calc((100vh - 530px) * 32 / 9 + 34px));
        max-width: max(640px, calc((100svh - 530px) * 32 / 9 + 34px));
    }
}

@media (max-width: 800px) {
    .intro3d--choix {
        padding: 32px 16px 48px;
    }

    .intro3d-choix {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* ------------------------------------------------------------------
 * Vue de lecture : barre, vidéo entière, légende, sur la hauteur de l'écran
 * ------------------------------------------------------------------ */
.intro3d--lecture {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
}

.intro3d__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 16px 24px;
}

.intro3d__titre--compact {
    font-size: clamp(18px, 1.8vw, 28px);
}

.intro3d__versions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.intro3d__version {
    padding: 8px 12px;
    border: 1px solid var(--brun);
    background: var(--creme);
    color: var(--brun);
    font-size: var(--t-corps);
    font-weight: 500;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: background-color var(--duree) var(--courbe), text-decoration-color var(--duree) var(--courbe);
}

.intro3d__version.is-active {
    background: var(--jaune);
}

.intro3d__version--retour {
    background: var(--brun);
    color: var(--creme);
}

.intro3d__version:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .intro3d__version:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

.intro3d__bouton {
    margin-left: auto;
    padding: 9px 16px;
    border: 0;
    background: var(--jaune);
    color: var(--brun);
    font: 500 var(--t-corps) / 1.2 var(--font-texte);
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: text-decoration-color var(--duree) var(--courbe);
}

@media (hover: hover) and (pointer: fine) {
    .intro3d__bouton:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

.intro3d__bouton:focus-visible {
    outline: 3px solid var(--brun);
    outline-offset: 3px;
}

/* La vidéo prend toute la place restante, entière (contain), sans être rognée */
.intro3d__scene {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--creme);
}

.intro3d--originale .intro3d__scene {
    background: #000; /* le fond de la vidéo du client est noir : les bandes s'y confondent */
}

.intro3d__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro3d__legende {
    padding: 12px 24px 16px;
    font-size: var(--t-corps);
    font-weight: 500;
}

/* Écran vertical : la vidéo garde son format 16/9, la page s'allonge au besoin */
@media (max-aspect-ratio: 1/1) {
    .intro3d--lecture {
        height: auto;
        min-height: 100svh;
    }

    .intro3d__scene {
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
    }

    .intro3d__barre {
        padding: 16px;
    }

    .intro3d__legende {
        padding: 12px 16px 16px;
    }
}


/* ==========================================================================
   17. ÉCHELLE DE TEXTE SUR TÉLÉPHONE (pages, hors frise)
   Source : audit de Ryan, M-03 (07/10), validé par Emmanuel
   Portée : les pages, dans la mise en page du téléphone (768 px et moins, portrait ou écran bas). La frise garde ses tailles, réglées sur la maquette mobile (--px-m).
   ========================================================================== */
/*
 * Le public du site est surtout adulte, voire âgé : sur téléphone, le texte courant passe à 17 px (interligne 1,5),
 * aucun texte sous 15 px, les titres de section à 22 px. Les titres de page (Ressources, Crédits, Contact) suivent
 * une taille fluide : 40 px à 390 px de large, 48,7 px à 768 px. La formule atteindrait les 64 px de la maquette
 * vers 1440 px, mais elle ne sert qu'à 768 px et moins : au-dessus, chaque page garde ses 64 px (revue du 07/10, M36).
 * Les titres en escalier de l'accueil, d'Alliance et de Vision alternative gardent 32 px sur téléphone (style « Mobile/Display2 »
 * de la maquette) : à 40 px, ils ne tiennent pas sur un écran de 360 à 390 px (décision d'Emmanuel du 07/10, option A).
 * Section placée en fin de feuille : à sélecteur égal, elle passe après les règles des pages.
 * Sur ordinateur (769 px et plus, en paysage), rien ne change.
 */
:root {
    --t-titre-page: clamp(40px, calc(31.1px + 2.29vw), 64px);
}

@media (max-width: 768px), (orientation: portrait), (max-height: 519px) {
    /* Titres de page simples */
    .ressources__titre,
    .credits__title,
    .contact__titre {
        font-size: var(--t-titre-page);
    }

    /* Titres de section (page Alliance) */
    .events__title,
    .milestones__title {
        font-size: 22px;
        line-height: 1.1;
    }

    /* Texte courant : 17 px, interligne 1,5 */
    .content-card__text p,
    .content-card__body,
    .milestone-card__text,
    .ressources__nom,
    .contact__description,
    .credits__intro,
    .credits__role-title,
    .credits__name,
    .milestone-detail__section p,
    .theme-detail__text p {
        font-size: 17px;
        line-height: 1.5;
    }

    /* Texte secondaire (dates, adresses, intitulés, méta) : 15 px au moins */
    .news-card__date,
    .event-card__date,
    .event-card__address,
    .event-card__route-link,
    .milestone-card__date,
    .ressources__type,
    .ressources__annee,
    .ressources__format,
    .theme-card__nom,
    .milestone-detail__date,
    .milestone-detail__address,
    .milestone-detail__route-link,
    .milestone-detail__label,
    .theme-detail__label,
    .hero__pause {
        font-size: 15px;
    }
}