/* ══════════════════════════════════════════
   Accueil — contenu mis à l'honneur (Setting home.featured.subject)
   ══════════════════════════════════════════ */
.home-hero-featured {
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

/* Fond, bordure, rayon et écrêtage viennent de `ui-card ui-card--solid`
   (gabarit). Ne reste ici que ce qui lui est propre. */
.news-card__image { aspect-ratio: 16 / 7; }

.news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

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

/* Repli sans visuel : un APLAT, pas un dégradé. La maquette n'en pose aucun
   sur une surface — le plateau, le blanc et le marine sont des aplats pleins,
   et un dégradé de repli fabriquait une quatrième couleur de fond que rien
   ne justifiait. */
.news-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--surface-4);
    color: var(--color-text-light);
}

.news-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    flex: 1;
}

.news-card__title {
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--color-primary-dark);
}

.news-card__excerpt {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
}

@media (min-width: 48em) {
    .news-card__title { font-size: var(--font-size-2xl); }
    .news-card__body  { padding: var(--spacing-xl); }
}

/* ══════════════════════════════════════════
   Accueil — Actualités (maquette « Accueil », section 4)
   ══════════════════════════════════════════

   Deux colonnes : une carte blanche illustrée pour la plus récente, et les
   suivantes en LISTE séparée par un filet. `align-items: start` pour que la
   liste ne s'étire pas à la hauteur de la carte. */
.home-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.125rem), 1fr));
    gap: var(--spacing-lg);
    align-items: start;
}

/* La UNE est une carte du partiel partagé, de rang « une ». Ne reste ici que
   sa place dans la grille — la carte, sa typographie et sa pastille vivent
   dans `components/media-card.css`. */
.home-news__lead { min-width: 0; }

/* ── Les brèves ──
   Pas de carte : un filet entre chacune, et rien d'autre. La dernière n'en
   porte pas — un filet sous le dernier élément ferme une liste qui n'a rien
   après elle. */
.home-news__briefs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.home-news__brief {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.home-news__brief:first-child { padding-top: 0; }
.home-news__brief:last-child  { border-bottom: 0; padding-bottom: 0; }

.home-news__brief-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    color: inherit;
    text-decoration: none;
}

.home-news__brief-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
    text-wrap: pretty;
}

.home-news__brief-standfirst {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════
   Accueil — les enveloppes de section
   ══════════════════════════════════════════

   Composants 17, 18 et 59 : la SECTION est une carte qui porte l'en-tête, le
   chapô et le contenu. Rembourrage 28-30 px de la maquette, ramené au palier
   32 (`--spacing-xl`) ; gouttière interne 22 px ramenée à 24. */
.home-dossiers__block,
.home-resources__block,
.home-news__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Dans une enveloppe de section, l'en-tête n'a pas de marge basse : c'est le
   `gap` du bloc qui l'espace de ce qui suit. */
.home-dossiers__block .section-header,
.home-resources__block .section-header,
.home-news__block .section-header {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   Accueil — les blocs composés
   ══════════════════════════════════════════

   Forme des maquettes 17 et 18 : une RANGÉE d'en-tête (sur-titre, titre,
   trait à gauche ; lien « tout voir » à droite), la phrase d'introduction
   en dessous sur toute la largeur, puis le contenu en pleine largeur.

   Le dépôt posait jusqu'ici l'introduction en COLONNE DE GAUCHE et le
   contenu à droite — trois dispositions distinctes pour un motif unique,
   dont aucune n'était celle de la maquette. Tout l'en-tête vit désormais
   dans `components/_section_header.html.twig`. */
.home-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.home-section__see-all-label {
    display: none;
}

@media (min-width: 40em) {
    .home-section__see-all-label {
        display: inline;
    }
}


/* ══════════════════════════════════════════
   Accueil — Agenda, Dossiers, Ressources, Partenaires
   (déplacé depuis content.css : ces blocs ne servent que la home,
    inutile de charger tout content.css sur la page d'accueil)
   ══════════════════════════════════════════ */
/* `.section` vaut 32px en haut comme en bas (`shared.css`), soit 64px entre
   deux blocs — pendant que le bloc d'ouverture en posait 48. La
   page descendait donc en se resserrant apres son premier ecran.

   Les sections de l'accueil s'alignent sur la valeur du hero : une seule
   respiration du haut en bas de la page. Porte ICI et non sur `.section`, qui
   est une classe partagee (`shared.css`) egalement utilisee par la galerie du
   minisite d'evenement — un rythme d'accueil n'a pas a s'y imposer. */
/* ── Rythme entre sections ──
   La maquette « Accueil » empile ses sections dans un `<main>` en colonne avec
   un `gap: 32px` UNIQUE, et aucune section n'a de fond propre : le plateau
   court d'un bout à l'autre, les cartes sont posées dessus.

   D'où une seule règle ici, et pas un rembourrage par section : chaque bloc
   pose la moitié de l'écart en haut et l'autre en bas. Symétrique, donc l'écart
   entre deux blocs vaut toujours la même chose, quel que soit le voisinage —
   et un rembourrage haut seul laissait la première section collée à la barre.

   Aucun `background` ici : voir plus bas, c'est une règle, pas un oubli. */
.home-orientation,
.section--home-spotlight,
.section--home-dossiers,
.section--home-resources,
.section--home-partners,
.home-news,
.home-entries,
.home-figures {
    padding-block: var(--spacing-lg);
    background: none;
}

/* 24 en haut comme en bas, A TOUTES LES LARGEURS : chaque bloc pose la MOITIE
   de l'ecart, donc 48 px entre deux voisins quel que soit l'ordre, et la
   premiere section n'est pas collee a la barre.

   Pas de palier a 64 en desktop, et c'est une decision, pas un oubli. La spec
   Fondations dit « entre sections, 48 sur mobile, 64 a partir de 1024 » pour
   des sections NUES. Ici cinq sections sur six sont des cartes a 32 px de
   rembourrage : l'ecart entre deux CONTENUS valait donc 64 + 32 + 32 = 128 px,
   mesure le 2026-09-03 sur les six frontieres de la page. A 48, il retombe a
   112, ce qui est le rythme que la spec decrit reellement. La valeur s'aligne
   au passage sur `--rhythm-block` (48), le jeton qui separe deux blocs de
   premier niveau partout ailleurs sur le site. */

/* ══════════════════════════════════════════
   Dossiers — Cards thématiques
   ══════════════════════════════════════════ */
/* Pas de fond de section : la couleur est portee par le panneau. Un aplat ici
   ferait de la teinte du panneau un aplat dans un aplat. */

/* Les deux panneaux se suivent, et leurs rembourrages s'additionnaient en 96px
   — deux respirations la ou il n'en faut qu'une. Chacun en fournit desormais la
   moitie, ce qui garde un ecart symetrique (48px) sans annuler le rembourrage
   d'un des deux : a zero d'un cote, le panneau du haut se retrouvait colle a la
   limite de sa section. */
/* Deux colonnes a partir du grand ecran : l'introduction a gauche, les trois
   dossiers a droite. En dessous, l'introduction repasse au-dessus de la grille.
   `align-items: start` pour que la colonne de gauche ne s'etire pas a la
   hauteur des cartes. */
/* `auto-fit` et non `auto-fill` : à deux dossiers, `auto-fill` garderait la
   troisième piste vide et les deux cartes resteraient serrées à gauche.
   Le `min()` évite qu'une piste de 250 px déborde un téléphone plus étroit. */
.home-dossiers__grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr));
}

/* Carton en blanc TRANSLUCIDE, pas en blanc plein : un aplat opaque decoupait
   trois rectangles clairs dans le panneau et cassait le degrade qui le porte.
   A 8 %, la carte se detache juste assez pour se lire comme un contenant, et
   la couleur du panneau continue de passer au travers.

   Pas de bordure : l'ecart de valeur suffit a delimiter, un trait ferait le
   meme travail une seconde fois. */

/* ══════════════════════════════════════════
   Ressources — Cards documents
   ══════════════════════════════════════════ */
/* Meme raison que pour les dossiers : la teinte vit sur le panneau. */

/* Pendant clair du panneau des dossiers : meme rayon, meme rembourrage. Les
   deux blocs sont de meme nature — un fonds qu'on explore — et se repondent
   d'un bout a l'autre de la page. */
/* Surface 4 (incise) et non plus un bleu pâle en dur : c'est la surface
   que la charte prévoit pour un encadré dans une page, et elle suit les
   jetons au lieu de figer une teinte que rien d'autre ne porte. */

/* La grille des documents : quatre cartes de rang « petit ». La carte
   elle-même vit dans `components/media-card.css`.

   DANS LE VOILE, ELLES PERDENT LEUR SURFACE. Le composant 61 le pose comme
   règle — « un niveau 3 ne contient pas de niveau 2 » — et la mesure le
   confirme : le voile composite vaut ≈ #fafafb, une carte blanche pleine n'y
   rend que **1,04:1**. Elle n'existait plus que par son filet, et quatre
   rectangles fantômes valent moins que rien.

   Sans surface, la couverture, la pastille et le titre se posent directement
   sur le voile : c'est ce que le niveau 3 attend d'un contenu qu'il porte. */
.home-resources__block .media-card {
    background: none;
    border-color: transparent;
    padding: 0;
}

.home-docs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--spacing-md);
}

/* ══════════════════════════════════════════
   Partenaires — Logos
   ══════════════════════════════════════════ */
/* Aucune section ne porte de fond différent du plateau : le fond blanc
   pleine largeur qui vivait ici faisait une bande de plus dans une page qui
   n'en a aucune. Les logos sont portés par une incise, à l'intérieur de la
   section — c'est la carte qui a une couleur, pas la section. */

.home-partners__group {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.home-partners__group + .home-partners__group {
    border-top: 1px solid var(--color-border);
}

/* L'intitulé du groupe est un `ui-kicker` (gabarit) : il redéclarait la même
   chose à une graisse et un interlettrage près. Ne reste que son écart avec
   la rangée de logos. */
.home-partners__group .ui-kicker {
    margin-bottom: var(--spacing-lg);
}

.home-partners__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg) var(--spacing-xl);
}

/* Les logos étaient DÉSATURÉS et posés à 70 % d'opacité au repos, leur
   couleur n'apparaissant qu'au survol. Trois raisons de ne plus le faire :

   — un logo gris et pâle se lit comme un élément DÉSACTIVÉ, ce qu'il n'est
     pas ; il est le lien vers le site du partenaire ;
   — un tiers ne montre son identité qu'en couleur, et c'est la contrepartie
     de son soutien : la lui retirer par défaut n'est pas une décision de
     mise en page ;
   — sur un écran tactile, il n'y a PAS de survol. La totalité des visiteurs
     mobiles ne voyait donc jamais les vraies couleurs (règle « pas
     d'interaction hover-only », `accessibility.md`).

   Et AUCUN mouvement au survol en remplacement : la charte range « les
   icônes qui bougent au survol » parmi ce qui ne s'anime jamais. Le lien
   se signale par le curseur et, au clavier, par l'anneau de focus — qui
   lui est global et ne se supprime jamais. */
.home-partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    text-decoration: none;
}

.home-partners__logo {
    max-height: 2.5rem;
    width: auto;
}

.home-partners__name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.home-partners__item:hover .home-partners__name {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ══════════════════════════════════════════
   Prochain événement
   ══════════════════════════════════════════

   Le marine est replie sur la SEULE carte de l'evenement ; la section, elle,
   reste claire.

   C'est l'inversion de ce qui portait la couleur, et elle regle deux choses a
   la fois. Le grand panneau marine faisait un placard : un aplat sombre de la
   largeur de la page, avec sa propre marge interieure, qui pesait lourd en
   hauteur pour ce qu'il contenait. Et le visuel de l'evenement, lui, EXIGE un
   fond sombre — son titre, ses dates et son lieu sont ecrits en blanc, ils
   disparaissent sur une surface claire. En confinant le marine a la carte, le
   visuel garde son fond et la page reste legere.

   Hauteur gagnee : les deux marges interieures du panneau, plus celle de la
   carte qu'il contenait. */
/* La bande pleine largeur en gris chaud a été RETIRÉE, et c'est une mesure
   qui l'a décidé : `--color-bg-light` (var(--color-bg-light)) sur `--color-canvas`
   (var(--color-canvas)) rend **1,08:1**, quand le seuil WCAG d'une frontière non
   textuelle est de 3:1. Elle ne se voyait qu'à son arête franche, et elle
   posait le même gris que le panneau « Ressources » deux blocs plus bas,
   sous une autre forme — deux traitements pour une seule teinte.

   La section revient sur le plateau : le plateau ne porte pas de contenu,
   il porte des cartes, et l'événement en est une. */


/* Les types appartiennent au propos general de la section, pas a l'evenement
   affiche : ils vivent donc dans cette colonne. */
.spotlight__types {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: var(--spacing-lg);
}

.spotlight__type-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--motion-1) var(--easing-standard);
}

/* Le survol ÉCARTAIT le libellé de son chevron (`transition: gap`). La
   charte n'autorise à animer que `opacity` et `transform` — `gap` est une
   propriété de mise en page, recalculée à chaque image — et range les
   icônes qui bougent au survol parmi ce qui ne s'anime jamais. Le
   soulignement et l'assombrissement suffisent à répondre au curseur. */
.spotlight__type-link:hover,
.spotlight__type-link:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* ── La carte de l'evenement, seule a porter le marine ──────────────────────*/
/* Carte CLAIRE, bord discret.

   L'aplat marine ne tenait que par une contrainte : le visuel de l'evenement
   porte son titre, ses dates et son lieu ECRITS EN BLANC, il lui fallait un
   fond sombre. Ce visuel ne figure plus dans la carte, la contrainte tombe avec
   lui, et le bloc peut enfin parler la langue du reste de la page — fond a
   peine teinte, filet gris, texte sombre.

   La teinte est celle de la rubrique EVENEMENTS — le rouge ANCESU, celui de
   l'entree « Colloques » du menu principal. Elle dit de quoi parle la carte
   avant qu'on en ait lu un mot, et c'est la seule chose qu'on lui demande : un
   degrade de 6 a 0 pour cent, en diagonale, qui s'eteint avant d'arriver au
   bout. Au-dela, une carte teintee cesse d'appartenir a la page.

   Le filet reprend la meme teinte, a peine plus soutenue que le gris commun :
   il ferme la carte sans la cerner de rouge. */
/* La bande tirée de la vignette a disparu avec la carte blanche : le
   composant 08 est « sans visuel », et sur un aplat d'encre une frise
   claire redécouperait la carte en deux. */
/* ── La carte d'événement — composant 08 « événement, sans visuel » ──
   Aplat d'encre. `ui-card ui-card--navy` porte fond, rayon et couleur de
   texte ; ne reste ici que la disposition et les deux boutons. */
.spotlight__event {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.spotlight__title-link { text-decoration: none; }

.spotlight__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-wrap: pretty;
}

.spotlight__title-link:hover .spotlight__title,
.spotlight__title-link:focus-visible .spotlight__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.spotlight__facts {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--color-on-navy);
}

/* L'échéance à part, un cran plus bas en valeur : c'est une information de
   contrainte, pas d'identification. */
.spotlight__deadline {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-on-navy-muted);
}

.spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: 0.375rem;
}

/* L'inscription est la seule action décisive : elle seule prend un aplat, et
   c'est le rouge des colloques. Les autres sont des boutons bordés sur le
   marine, comme le pose le composant. */
.spotlight__cta,
.spotlight__link {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--motion-1) var(--easing-standard),
                border-color var(--motion-1) var(--easing-standard);
}

.spotlight__cta {
    background: var(--color-section-colloques);
    color: #fff;
}

.spotlight__cta:hover,
.spotlight__cta:focus-visible { background: var(--color-danger-ink); }

.spotlight__link {
    border: 1px solid rgb(255 255 255 / 0.32);
    color: #fff;
}

.spotlight__link:hover,
.spotlight__link:focus-visible {
    border-color: rgb(255 255 255 / 0.64);
    background: rgb(255 255 255 / 0.06);
}

/* ══════════════════════════════════════════
   Refonte v2 · bandeau d'orientation et portes d'entrée
   ══════════════════════════════════════════ */

/* Deux colonnes qui se valent : le texte porte la promesse, l'image la
   rend concrète. Sous 62 rem, l'image passe dessous — jamais retirée :
   c'est la seule photo de la page, et c'est elle qui dit de quoi on parle. */
.home-orientation__card {
    display: grid;
    /* `min(100%, …)` et non `18.75rem` nu : la piste minimale valait 300 px pour
       294 disponibles a 320 px, donc la carte debordait de 6 px et entrainait
       tout le `main` avec elle. Le cas SANS visuel y echappait tant qu'il etait
       en `display: block` — c'est en le faisant passer par la grille, pour lui
       donner sa colonne de preuves, que je l'y ai expose. La forme bornee est
       celle qu'emploie tout le reste du depot. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: var(--spacing-2xl);
    align-items: center;
    padding: var(--spacing-3xl);
}

/* ── SANS VISUEL : LA PREUVE PAR LES DONNEES ───────────────────────
   La regle precedente disait « on ne pose pas de trame grise a la place de la
   photo, un decor de 4/3 ne ferait que repousser le premier mot ». Elle est
   maintenue, et c'est pour cela que la moitie droite ne recoit PAS un hachure :
   elle recoit du CONTENU.

   Ce qu'il y avait avant : le titre, quatre lignes et deux boutons occupaient
   seuls une carte de 1 200 px. La moitie droite etait vide, et c'est ce vide
   qu'on lisait en arrivant sur le site.

   La maquette `Hero accueil ANCESU` nomme cette composition « Sans photo du
   tout : la preuve par les donnees », et la dit « publiable immediatement »
   precisement parce qu'elle ne depend d'aucune photo. */
.home-orientation__card--no-visual .home-orientation__title,
.home-orientation__card--no-visual .home-orientation__standfirst {
    max-width: 24ch;
}

.home-orientation__card--no-visual .home-orientation__standfirst {
    max-width: 40ch;
}

/* UNE SEULE COLONNE, a toutes les largeurs.
   `repeat(auto-fit, minmax(10rem, 1fr))` a ete essaye et MESURE : dans la
   moitie droite du bandeau, large de 507 px a 1440, il rend DEUX colonnes de
   241 px — donc deux cartes cote a cote et une TROISIEME ORPHELINE dessous.
   C'est le defaut que la charte nomme : « une rangee qui revient a la ligne
   doit remplir sa rangee ; trois puces dans un conteneur qui n'en tient que
   deux laissent une orpheline, on lit un debordement, pas une mise en page ».

   Trois colonnes ne conviennent pas davantage a cette largeur : « 388 923 » et
   sa legende ne tiennent pas dans 160 px. Empilees, les trois cartes sont
   regulieres partout, et la colonne se lit comme ce qu'elle est — une liste de
   faits posee a cote du titre. */
.home-orientation__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-gap);
    min-width: 0;
    align-content: start;
}

/* ── SUR TELEPHONE, UNE SEULE PREUVE ───────────────────────────────
   La maquette pose la regle et dit laquelle garder : « sous 900 px la colonne
   passe sous le texte et une seule carte de preuve est conservee — la
   prochaine session ». La raison tient a ce qu'on empile : sur un ecran de
   390 px, les trois cartes ajoutent 300 px de hauteur AVANT les trois portes
   d'entree, c'est-a-dire avant le premier geste que la page propose.

   La carte gardee est la premiere du DOM, celle du prochain rendez-vous : la
   seule des trois qui perime, donc la seule qui vaille d'etre vue en haut.

   `display: none` et non un retrait cote gabarit : les deux chiffres restent
   dits par la section « Les CESU en chiffres », et un rendu conditionnel au
   palier obligerait a deviner la largeur cote serveur. */
@media (width < 48em) {
    .home-orientation__proof > .home-proof:not(:first-child) {
        display: none;
    }
}

/* Cartes de MEME taille, et une seule teintee : la maquette l'impose pour ne
   pas faire damier. Le contenu de chacune est un chiffre et sa legende, jamais
   une phrase — c'est ce qui les garde lisibles a 10 rem de large. */
.home-proof {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding: var(--spacing-lg);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.home-proof__kicker {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.home-proof__value {
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-dark);
    /* Les chiffres s'alignent d'une carte a l'autre : sans cela, « 105 » et
       « 388 923 » ne partagent pas la meme avance et la rangee ondule. */
    font-variant-numeric: tabular-nums;
}

.home-proof__label {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* L'unique carte marine de la rangee. Sur cet aplat, le gris de texte
   secondaire tombe sous le seuil : l'echelle `--ink-on-dark` porte les trois
   niveaux. */
.home-proof--navy {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.home-proof--navy .home-proof__value {
    color: var(--ink-on-dark);
}

.home-proof--navy .home-proof__kicker,
.home-proof--navy .home-proof__label {
    color: var(--ink-on-dark-soft);
}

.home-orientation__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.home-orientation__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.125rem);
    font-weight: 700;
    line-height: 1.06;
    color: var(--color-primary-dark);
    text-wrap: pretty;
}

.home-orientation__standfirst {
    margin: 0;
    max-width: 52ch;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

.home-orientation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
}

.home-orientation__geo {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.home-orientation__visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* ── Portes d'entrée ──────────────────────────────────────────
   Cartes ordinaires (blanc + bordure), jamais ombrées : la seule carte
   ombrée de la page est le bandeau au-dessus. Deux cartes ombrées dans
   une même vue signalent une erreur de priorité. */


.home-entries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
    gap: var(--spacing-md);
}

.home-entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration) var(--easing), transform var(--duration) var(--easing);
}

.home-entry:hover,
.home-entry:focus-visible {
    border-color: var(--color-primary);
    color: inherit;
}

.home-entry__title {
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-dark);
}

.home-entry__text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

/* Le lien de la carte est une AFFORDANCE, pas une seconde destination :
   la carte entière est cliquable. Il est donc rendu en `span`, souligné
   comme un lien, et poussé en bas pour aligner les trois cartes. */
.home-entry__link {
    margin-top: auto;
    padding-top: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 47.9375em) {
    .home-orientation__card { padding: var(--spacing-lg); }
}

/* Le trait signature des titres de section vient de la macro `ui.rule`,
   posée dans le gabarit. Il a d'abord été écrit ici en `::after` : c'était
   une deuxième implémentation du même motif, donc exactement le doublon que
   la macro existe pour éviter. */

/* ══════════════════════════════════════════
   Refonte v2 · Les CESU en chiffres
   ══════════════════════════════════════════
   La seule section en aplat d'encre de la page. Elle affirme, là où le
   reste expose : c'est ce qui lui vaut sa couleur, et ce qui interdit
   d'en poser une seconde. */


/* LES GRANDEURS ONT QUITTÉ CETTE FEUILLE le 2026-09-02 : le même aplat marine
   ferme le mur des portraits (maquette « Portraits ANCESU »), et une feuille de
   zone ne se partage pas. Il vit dans `components/figures-card.css`, rendu par
   `components/_figures_card.html.twig`. Reste ici l'écart de section autour du
   bloc (`.home-figures`, plus haut), qui appartient à la page. */

/* ── Près de chez vous ──
   Rangée unique : ce dont il s'agit à gauche, les faits au milieu, le geste à
   droite. Sous le palier tablette elle se replie, et l'action prend la largeur
   — un bouton de 44 px coincé dans un coin est deux fois plus dur à viser. */
.home-proximity {
    padding-block: var(--spacing-lg);
}

@media (min-width: 64em) {
    .home-proximity { padding-block: var(--spacing-xl); }
}

.home-proximity[hidden] { display: none; }

.home-proximity__card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.home-proximity__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: none;
}

.home-proximity__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-dark);
}

/* `flex: 1` avec `min-width` : les faits prennent la place libre, et passent à
   la ligne d'un bloc plutôt que de comprimer le titre en colonne étroite. */
.home-proximity__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-ms) var(--spacing-md);
    flex: 1;
    min-width: 13.75rem;
}

/* La date en chasse fixe : c'est une donnée qu'on compare d'une ligne à
   l'autre, pas une phrase. */
.home-proximity__dates {
    font-family: var(--font-data);
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-primary);
}

.home-proximity__venue {
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text);
}

.home-proximity__places {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-ms);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text);
}

.home-proximity__venue[hidden],
.home-proximity__places[hidden] { display: none; }

.home-proximity__action { flex: none; }

@media (width < 48em) {
    .home-proximity__facts { flex: 1 1 100%; }
    .home-proximity__action { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════
   PREMIER ECRAN — le plateau et ses trois socles
   Composant G de la maquette `Hero accueil ANCESU`, variante « socle qui
   change ». Les valeurs viennent de la maquette, pas d'une approximation.
   ══════════════════════════════════════════ */

/* ── LE PLATEAU ───────────────────────────────────────────────────
   PAS DE CARTE BLANCHE. C'est la decision qui fait tout le composant : « le
   hero sort de sa carte blanche : le titre est pose directement sur le
   plateau, ce qui lui rend sa hauteur ». Le fond vaut celui de la page —
   le cadre ne se lit qu'a son filet et a ses angles.

   Les seules surfaces blanches de ce premier ecran sont celles que la maquette
   nomme : la carte flottante du socle A, la barre de rendez-vous du socle D, la
   pastille du medaillon. Une quatrieme serait une erreur de priorite. */
.home-hero {
    position: relative;
    overflow: hidden;
    /* 56 en haut, 40 sur les cotes, 44 en bas — les valeurs de la maquette,
       pas un multiple du pas d'espacement. Un plateau plus rembourre repousse
       le titre vers le centre et lui fait perdre la hauteur qu'on vient de lui
       rendre en retirant la carte.

       CE SONT DES VALEURS DE BUREAU. Appliquees telles quelles a 390 px, les
       80 px lateraux mangeaient UN CINQUIEME de la largeur de l'ecran : le
       titre passait a quatre lignes et le chapo a cinq. Mesure du 2026-09-04.
       Le telephone recoit donc un rembourrage a son echelle. */
    padding: 1.5rem 1.25rem 1.25rem;

    /* ── LE CADRE, ET IL DOIT SE VOIR ──────────────────────────────
       Le plateau est une CARTE : son fond vaut celui de la page, et c'est le
       filet qui le detoure. Ces trois declarations vivaient dans la requete
       media ci-dessous, mais HORS du selecteur — donc dans une position ou la
       syntaxe CSS ne les rattache a rien. Le navigateur les jetait en silence :
       mesure du 2026-09-05, `border-top-width` valait 0 a toutes les largeurs,
       de 390 a 1440. Le cadre n'a jamais existe.

       LE FOND EST BLANC, ET NON CELUI DE LA PAGE. La maquette pose le plateau
       sur le gris de fond — « le hero sort de sa carte blanche » — mais elle
       le dessine seul, sans le reste de l'accueil autour. En place, entre
       l'entete blanc et les trois portes d'entree blanches, un plateau gris se
       lit comme un trou. Le blanc le fait ressortir, au prix decrit plus bas :
       les surfaces blanches qu'il contient perdent leur fond comme
       discriminant et gagnent un filet.

       LE FILET EST CELUI DES PORTES D'ENTREE, `--color-border`, sans
       assombrissement. Il a d'abord ete fonce de moitie, puis d'un quart :
       c'etait un remede au fond gris, sur lequel un filet a #dadee2 ne se lit
       pas — quatre points de clarte d'ecart. Le fond blanc rend ce remede
       inutile, et le rendre inutile vaut mieux que le doser : les trois portes
       d'entree, juste dessous, portent exactement ce filet-la, et le premier
       ecran n'a aucune raison d'en porter un autre. */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

/* LES VALEURS VERTICALES SONT SOUS CELLES DE LA MAQUETTE, ET C'EST VOULU. Elle
   pose 56 en haut et 44 en bas ; mesure du 2026-09-05, il restait alors 57 px
   au-dessus du sur-titre et 45 sous les commandes, sur un plateau dont le
   contenu ne fait que 400 px. Le cadre venant d'apparaitre, ce vide se lit
   maintenant comme de la marge perdue plutot que comme de l'air. Les valeurs
   LATERALES, elles, ne bougent pas : ce sont elles qui alignent le plateau sur
   les cartes voisines. */
@media (min-width: 64em) {
    .home-hero {
        padding: 2.5rem 2.5rem 2rem;
    }
}

/* ── LES DEUX FORMES DE COULEUR ───────────────────────────────────
   Aplats de teinte du reseau, jamais de degrade, jamais au-dessus de 15 % :
   la maquette en fait une regle, parce qu'au-dela elles concurrencent le
   titre. Elles passent DERRIERE la photo et ne touchent jamais le texte, donc
   le contraste du titre reste celui du plateau.

   La teinte suit la vue affichee par deux proprietes personnalisees, posees
   par le serveur pour la premiere vue et mises a jour par le script ensuite —
   sans JavaScript, elles sont donc justes malgre tout. */
.home-hero__blob {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    transition: background 0.45s ease;
}

.home-hero__blob--a {
    top: -4.375rem;
    right: -5.625rem;
    width: 26.25rem;
    height: 26.25rem;
    border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%;
    background: color-mix(in srgb, var(--home-hero-accent, var(--color-primary)) 13%, transparent);
}

.home-hero__blob--b {
    right: 14.375rem;
    bottom: -3.75rem;
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    background: color-mix(in srgb, var(--home-hero-accent-2, var(--color-section-agenda)) 14%, transparent);
}

/* ── DEUX FORMES DE PLUS, A GAUCHE ────────────────────────────────
   Le plateau etait charge a droite et vide a gauche. Les deux nouvelles
   suivent la meme regle que les precedentes — aplat de teinte du reseau, sous
   15 %, jamais de degrade — et sont posees en CORNER : l'essentiel de leur
   disque sort du cadre, seul un arc rentre. C'est ce qui les empeche de passer
   sous le texte, que la maquette interdit : dans le socle institutionnel la
   colonne de texte occupe la moitie gauche, et une forme centree la traverse.

   Position mesuree le 2026-09-05 sur les quatre vues a 1024, 1280 et 1440 :
   aucun recouvrement avec la colonne de texte ni avec les commandes. */
.home-hero__blob--c {
    bottom: -6.25rem;
    left: -5rem;
    width: 18.75rem;
    height: 18.75rem;
    border-radius: 52% 48% 58% 42% / 42% 55% 45% 58%;
    background: color-mix(in srgb, var(--home-hero-accent-2, var(--color-section-agenda)) 11%, transparent);
}

/* Celle-ci ne rentre que de 24 px, moins que le rembourrage lateral du plateau
   qui en fait 40 : elle ne peut donc atteindre aucun texte, y compris dans le
   socle institutionnel ou la colonne de texte occupe toute la moitie gauche.
   C'est la seule position gauche qui tienne dans les quatre vues. */
.home-hero__blob--d {
    top: 40%;
    left: -5.5rem;
    width: 7rem;
    height: 7rem;
    border-radius: 45% 55% 50% 50% / 55% 42% 58% 45%;
    background: color-mix(in srgb, var(--home-hero-accent, var(--color-primary)) 12%, transparent);
}

/* Sous 64 rem elles disparaissent : la maquette le dit, « elles n'ont pas de
   place utile sur 390 px », et elles y passeraient sous le texte. */
@media (width < 64em) {
    .home-hero__blob { display: none; }
}

/* ── LES SOCLES ───────────────────────────────────────────────────
   Une grille a deux colonnes, la meme pour les trois, ce qui garde le titre
   au meme endroit d'une vue a l'autre. */
.home-hero__plate {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

/* Les 400 px de hauteur minimale tiennent les deux colonnes a la meme aune ;
   empilees, elles n'ont plus rien a aligner et cette hauteur devient du vide. */
@media (min-width: 64em) {
    .home-hero__plate {
        gap: 2.5rem;
        min-height: 25rem;
    }
}

/* ── LA MESURE DU TITRE, ET C'EST LE TRAIT LE PLUS VISIBLE ────────
   La maquette borne le titre a 20 caracteres de large et le chapo a 38. Sans
   ces bornes le titre court sur une seule ligne de 600 px : il ne « respire »
   plus, et c'est precisement ce que le composant cherche a lui rendre en le
   sortant de sa carte.

   Mesure du 2026-09-04 : notre titre tenait sur UNE ligne la ou la maquette en
   pose TROIS. Ce n'est pas un detail de typographie, c'est la silhouette du
   premier ecran. */
.home-hero__plate .home-orientation__title {
    max-width: 20ch;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.home-hero__plate .home-orientation__title--md {
    max-width: 22ch;
}

.home-hero__plate .home-orientation__standfirst {
    max-width: 38ch;
}

/* SUR TELEPHONE LES BOUTONS OCCUPENT LA LARGEUR. Deux boutons de 143 px cote a
   cote sur 350 px utiles laissent un ferrage bancal et deux cibles etroites ;
   empiles et pleine largeur, ils sont lisibles et atteignables au pouce. */
@media (width < 48em) {
    .home-hero__plate .home-orientation__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero__plate .home-orientation__actions > .btn {
        justify-content: center;
        width: 100%;
    }
}

/* ── LES BOUTONS SONT PLUS GRANDS QUE PARTOUT AILLEURS ────────────
   52 px dans la maquette pour les actions du plateau, 48 pour celle de la
   barre de rendez-vous, contre 44 et 38 que rendent les tailles `lg` et `md`
   de la charte. C'est voulu : ce sont les seuls boutons de la page qu'on veut
   voir avant d'avoir lu, et deux boutons de hero a la taille d'un bouton de
   liste ne se distinguent de rien. */
.home-hero__plate .home-orientation__actions > .btn {
    height: 3.25rem;
    padding-inline: 1.5rem;
}

.home-hero__meeting-cta.btn {
    height: 3rem;
    padding-inline: 1.375rem;
}

/* Le filet fait 56 x 6, et la maquette le repete a chaque composition. La
   macro de la charte rend 5 : l'ecart se voit, pose sous un titre de 50 px. */
.home-hero__plate .ui-rule {
    height: 0.375rem;
}

/* L'ecart vertical entre sur-titre, titre, filet, chapo et boutons vaut 20 px
   dans la maquette — un cran de plus que le rythme par defaut. */
.home-hero__plate .home-orientation__text {
    gap: 1.25rem;
}

/* Le socle institutionnel partage la largeur a parts EGALES — la maquette pose
   400 contre 420. Le socle evenement et le medaillon donnent moins de place a
   l'image qu'au texte : 380 contre 420. */
@media (min-width: 64em) {
    .home-hero__plate--split {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

/* ── LA COLONNE VISUELLE ──────────────────────────────────────────
   Le TEXTE est premier dans le DOM — c'est l'ordre de lecture. Le visuel
   repasse a gauche par `order` a partir de 64 rem seulement ; empilees, l'image
   revient sous le texte, comme la maquette le demande. */
.home-hero__visual {
    position: relative;
    min-width: 0;
    /* LA COLONNE EPOUSE L'IMAGE, et c'est ce qui tient les ornements. Les
       pastilles d'angle, la pastille de rubrique et les cartes flottantes sont
       en `position: absolute` DANS cette colonne : etalee sur toute la piste de
       la grille, elle les detacherait de l'image des que celle-ci ne la remplit
       plus. Reduite a l'image, elle les remet sur ses bords, ou la maquette les
       pose. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* ── L'IMAGE ENTIERE DANS LA BOITE DE LA MAQUETTE ─────────────────
   La maquette fixe une boite par vue — 420 x 340 en A, 360 de haut en D,
   380 x 300 pour le medaillon — et y pose une TRAME CLAIRE, pas une photo
   recadree. Les boites sont donc gardees telles quelles : ce sont elles qui
   ancrent les pastilles d'angle, la pastille de rubrique et les cartes
   flottantes.

   Ce qui change, c'est le remplissage. `cover` sur un cadre force en 4/3
   suppose que toutes les images sont des photos de meme format ; les notres
   sont des visuels de communication, avec du texte dedans. Mesure du
   2026-09-05 sur les trois vues en base :

     bandeau  435 x 155 (2,81)  ->  52 % de la LARGEUR coupee
     portrait 435 x 652 (0,67)  ->  50 % de la HAUTEUR coupee
     16/9     435 x 244 (1,78)  ->  25 % de la LARGEUR coupee

   Le titre du bandeau se lisait « E SUR LA PEDAGOGIE », et le webinaire
   perdait la moitie de ses ballons. `contain` montre l'image entiere ; le fond
   blanc donne a la boite la surface que la trame de la maquette occupe, faute
   de quoi l'ombre et l'arrondi detoureraient du vide. */
.home-hero__visual img {
    /* Les dimensions de la maquette deviennent un PLAFOND, pas un gabarit.
       Posees comme un gabarit — `width: 100%` plus une hauteur fixe — elles
       laissaient un bandeau de 435 x 155 flotter au milieu d'une boite de
       431 x 360 : 200 px de surface morte au-dessus et au-dessous, teintes de
       la couleur dominante que le DAM pose en style en ligne. En plafond, la
       carte epouse l'image : un bandeau donne une carte de bandeau, un portrait
       une carte de portrait, et aucune des deux ne depasse la boite dessinee. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 21.25rem;
    object-fit: contain;
    /* Meme raison que la barre de rendez-vous : nos visuels sont souvent des
       aplats a fond BLANC, et sur un plateau blanc ils n'auraient plus de bord
       du tout — seule l'ombre les tiendrait. */
    border: 1px solid var(--color-border);
    border-radius: 1.125rem;
    /* L'ombre de la maquette est PROFONDE et tres etalee — c'est elle qui fait
       flotter la photo au-dessus du plateau. `--shadow-lg` de la charte est
       trois fois plus discrete : sur un plateau gris, la photo restait posee a
       plat et l'inclinaison ne se lisait pas. Valeur reprise telle quelle,
       teintee du bleu de la marque comme toutes les ombres de la maquette. */
    box-shadow: 0 1.875rem 3.75rem -1.75rem color-mix(in srgb, var(--color-primary-dark) 50%, transparent);
}

@media (min-width: 64em) {
    .home-hero__plate--split .home-hero__visual { order: -1; }
}

/* La photo est BORNEE a 420 px et centree dans sa colonne, comme la maquette.
   Sans la borne elle s'etirait jusqu'au bord du plateau : les cartes flottantes
   sortaient du cadre et l'inclinaison n'avait plus de marge pour se voir. */
/* `min()` et non la valeur nue : une largeur maximale posee apres celle de la
   regle de base la REMPLACE, elle ne s'y ajoute pas. Mesure du 2026-09-05 :
   le medaillon prenait 380 px dans une colonne de 326 sur telephone. */
.home-hero__visual--tilted img {
    max-width: min(100%, 26.25rem);
}

/* Socle evenement : 360 px de haut dans la maquette, sur une colonne de 380. */
.home-hero__visual--framed img {
    max-height: 22.5rem;
}

/* Medaillon d'actualite : 380 x 300, la plus basse des trois boites. */
.home-hero__visual--medallion img {
    max-width: min(100%, 23.75rem);
    max-height: 18.75rem;
}

/* L'inclinaison reste SOUS 3 DEGRES. « Au-dela on lit presentation
   commerciale ; deux a trois degres suffisent a sortir la photo de la grille
   sans la faire basculer. » */
.home-hero__visual--tilted img {
    transform: rotate(-2.5deg);
}

/* Empilee, la photo se redresse : inclinee sur 390 px elle mord les bords.

   ET LA BOITE SUIT L'IMAGE. Les hauteurs de la maquette alignent deux colonnes
   cote a cote ; empilees, elles n'ont plus rien a aligner et ne produiraient
   que des bandes blanches. La boite prend donc la forme de l'image, bornee en
   hauteur — un bandeau tres large y devient plus COURT que la boite d'avant,
   ce qui rend au telephone la place que le recadrage lui prenait.

   La borne ne mord que sur les images HAUTES, les seules a la toucher : elle
   evite qu'un portrait de 652 px impose sa hauteur aux trois autres vues, la
   grille etant commune. Mesure du 2026-09-04 : 196 px de vide sous la vue
   institutionnelle a 390 px, avant cette borne. */
@media (width < 64em) {
    .home-hero__visual img {
        height: auto;
        max-height: 14rem;
        transform: none;
    }
}

/* ── LE PREMIER ECRAN DOIT TENIR DANS UN ECRAN ────────────────────
   Mesure du 2026-09-05 a 390 px, la vue la plus haute des quatre : 870 px de
   plateau pour 844 px de fenetre. Le carrousel poussait donc ses propres
   commandes sous la ligne de flottaison — les bulles, la position et le bouton
   de pause n'etaient atteignables qu'apres avoir fait defiler, ce qui revient a
   ne pas les avoir.

   Trois coupes, la ou elles se payent le moins :

     · le chapo passe a TROIS lignes. Il annonce, il ne raconte pas : le texte
       entier reste dans le document, donc a la disposition des lecteurs
       d'ecran, et le bouton mene a la page qui le porte ;
     · la boite d'image prend la forme de l'image et se borne a 224 px. Les
       bandeaux, larges, y tombent bien en dessous, et la vue la plus haute
       cesse d'imposer son vide aux trois autres ;
     · les commandes se rapprochent du plateau.

   Mesure apres coupe, sur les quatre vues : la plus haute passe de 870 a
   763 px, et l'ecart entre la plus haute et la plus courte de 179 a 81 px. Le
   plateau tient donc dans la fenetre, commandes comprises, et il reste de quoi
   voir qu'une section suit. */
/* LA COUPE DU CHAPO NE VAUT QUE POUR LE TELEPHONE, ET LE SEUIL EST A 30 REM,
   pas a 48. Mesure du 2026-09-05 : a 600 px la coupe tombait encore, alors que
   le plateau n'y fait que 626 px de haut sur une fenetre de tablette — on
   perdait une phrase sans rien gagner. Les telephones vont de 360 a 430 px de
   large ; 480 les couvre tous et n'attrape aucune tablette. */
@media (width < 30em) {
    .home-hero__plate .home-orientation__standfirst {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

/* ── LES TROIS CARTES FLOTTANTES (socle institutionnel) ───────────
   « Trois cartes au maximum, une par nature : une date, un chiffre de reseau,
   un contenu. Au-dela, la composition devient un tableau de bord et le titre
   cesse d'etre lu. »

   Chacune est inclinee A CONTRESENS de la photo : c'est ce qui les detache au
   lieu de les faire glisser avec elle. Elles sont en `position: absolute` sur
   la colonne visuelle, donc elles ne poussent rien.

   Sous 64 rem elles quittent le flottement et s'empilent sous la photo : a
   390 px, trois cartes posees sur une image la rendent illisible. */
.home-hero__float {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 10.75rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0.75rem;
    /* Meme raison que la barre de rendez-vous : ces cartes flottent au-dessus
       de la PHOTO, mais elles depassent sur le plateau, desormais blanc. */
    border: 1px solid var(--color-border);
    background: var(--surface-1);
    box-shadow: 0 0.875rem 2.125rem -1.125rem color-mix(in srgb, var(--color-primary-dark) 45%, transparent);
}

.home-hero__float--tl {
    top: 1.5rem;
    left: 0;
    transform: rotate(-3deg);
}

.home-hero__float--br {
    right: 0;
    bottom: 3.5rem;
    transform: rotate(2.5deg);
}

.home-hero__float-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
}

.home-hero__float-kicker {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.home-hero__float-value {
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

/* La META est en mono, la NOTE en texte courant : la maquette distingue une
   donnee machine (une reference, une date) d'une phrase. */
.home-hero__float-meta {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-primary);
}

.home-hero__float-note {
    font-size: var(--font-size-xs);
    line-height: 1.35;
    color: var(--color-text-light);
}

/* La troisieme carte est une PASTILLE et non un rectangle : la maquette
   distingue ainsi le fait de contenu des deux faits chiffres. */
.home-hero__pill {
    position: absolute;
    bottom: 0;
    left: 2.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.625rem 1rem 0.625rem 0.75rem;
    transform: rotate(-1.5deg);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    box-shadow: 0 0.875rem 2.125rem -1.125rem color-mix(in srgb, var(--color-primary-dark) 45%, transparent);
}

.home-hero__pill-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.home-hero__pill-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.home-hero__pill-note {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--color-text-light);
}

/* ── SUR TELEPHONE, UNE SEULE CARTE ───────────────────────────────
   La maquette pose la regle pour la colonne de preuves — « sous 900 px, une
   seule carte est conservee, la prochaine session » — et elle vaut tout autant
   pour les cartes flottantes, qui s'empilent alors sous la photo.

   Sans cela, la vue la plus haute atteignait 799 px a 390, imposait sa hauteur
   aux trois autres, et laissait jusqu'a 216 px de vide sous la plus courte.
   Comme la grille est commune, une seule vue trop haute coute a toutes. */
@media (width < 64em) {
    .home-hero__visual--tilted {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .home-hero__float {
        position: static;
        transform: none;
    }

    .home-hero__float--br,
    .home-hero__pill {
        display: none;
    }
}

/* ── LES PASTILLES D'ANGLE (socle evenement) ──────────────────────
   Ornement pur : cachees aux lecteurs d'ecran par le gabarit, retirees sous
   64 rem ou elles n'ont pas de place. */
.home-hero__spot {
    position: absolute;
    display: block;
    border-radius: var(--radius-pill);
}

.home-hero__spot--tl {
    top: 2rem;
    left: -0.875rem;
    width: 2.125rem;
    height: 2.125rem;
    background: color-mix(in srgb, var(--home-hero-accent, var(--color-primary)) 18%, transparent);
}

.home-hero__spot--br {
    right: -1.125rem;
    bottom: 4rem;
    width: 3.5rem;
    height: 3.5rem;
    background: color-mix(in srgb, var(--home-hero-accent-2, var(--color-section-agenda)) 18%, transparent);
}

@media (width < 64em) {
    .home-hero__spot { display: none; }
}

/* ── LE CARROUSEL ─────────────────────────────────────────────────
   Sans le modificateur, il n'y a RIEN de plus : une seule vue, aucune
   commande, aucune superposition. C'est l'etat nominal du site. */
.home-hero--carousel .home-hero__scene {
    display: grid;
    align-items: stretch;
    /* Le script pose une hauteur explicite sur telephone ; elle GLISSE d'une
       vue a l'autre au lieu de sauter. Sans script, la grille garde la hauteur
       de la vue la plus haute et rien ne bouge — le repli est le comportement
       d'origine, pas une degradation. */
    transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);

    /* L'AXE HORIZONTAL EST RESERVE AU CARROUSEL, LE VERTICAL RESTE A LA PAGE.
       Sans cela le navigateur s'empare du geste horizontal : il n'emet plus de
       `pointerup` mais un `pointercancel`, donc le balayage ne se declenche
       jamais — et sur Chrome mobile, un glissement vers la droite depuis le
       bord declenche un RETOUR ARRIERE. Mesure du 2026-09-05 : deux gestes
       ont suffi a quitter la page pour `about:blank`.

       `pan-y` et non `none` : le doigt doit continuer de faire defiler la
       page verticalement depuis le premier ecran, qui l'occupe presque en
       entier. */
    touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero--carousel .home-hero__scene { transition: none; }
}

/* UNE SEULE CELLULE POUR TOUTES LES VUES.
   « Les trois vues occupent la meme boite, dont la hauteur est celle de la plus
   haute a chaque largeur — aucun saut de page au changement de vue. » C'est
   aussi la raison pour laquelle les vues inactives sont en `visibility` et non
   en `hidden` : `display: none` les retirerait de la grille, et la boite
   reprendrait la hauteur de la seule vue affichee. */
.home-hero--carousel .home-hero__view {
    grid-area: 1 / 1;
    min-width: 0;
    /* `visibility` retire le sous-arbre de l'arbre d'accessibilite ET du
       parcours clavier, ce qu'une classe ne fait pas. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.home-hero--carousel .home-hero__view.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: home-hero-slide-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes home-hero-slide-in {
    from { opacity: 0; transform: translateX(2.5rem); }
    to   { opacity: 1; transform: none; }
}

/* Le mouvement lateral est un ornement ; la bascule d'opacite, elle, dit qu'il
   s'est passe quelque chose. On retire le premier, jamais la seconde. */
@media (prefers-reduced-motion: reduce) {
    .home-hero--carousel .home-hero__view.is-active { animation: none; }
}

/* LES FLECHES NE DOIVENT PAS MANGER LE TEXTE. Elles occupent 44 px a partir du
   bord ; le rembourrage du plateau en vaut 40. Le compte ne tombe pas juste, et
   la premiere lettre du chapo passait dessous — la maquette a le meme defaut,
   ce qui ne le rend pas acceptable. Le socle recule donc de la largeur d'une
   fleche, mais SEULEMENT quand elles existent. */
@media (min-width: 64em) {
    .home-hero--carousel .home-hero__plate {
        padding-inline: 1.75rem;
    }
}

/* ── Fleches ──────────────────────────────────────────────────────
   A L'INTERIEUR du plateau, sur ses bords, comme la maquette les pose.
   Retirees sous 64 rem, ou elles masqueraient du texte : les bulles restent, et
   elles sont focalisables. */
.home-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    color: var(--color-primary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.home-hero__nav:hover,
.home-hero__nav:focus-visible {
    background: var(--surface-1);
    border-color: var(--color-primary);
}

.home-hero__nav--prev { left: 0.625rem; }
.home-hero__nav--next { right: 0.625rem; }

@media (min-width: 64em) {
    .home-hero--carousel .home-hero__nav { display: flex; }
}

/* ── Commandes ────────────────────────────────────────────────────
   Bulles, bouton de pause, et la position — visible a droite, et repetee dans
   une region vivante pour qui ne la voit pas. */
.home-hero__controls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-2xl);
}

/* Sur telephone les commandes reviennent contre le plateau : elles y gagnent
   16 px, et surtout elles cessent de flotter au milieu du cadre. */
@media (width < 48em) {
    .home-hero__controls {
        gap: var(--spacing-sm);
        margin-top: var(--spacing-lg);
    }
}

.home-hero__dots {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
}

/* La CIBLE fait 44 px de haut, la marque 10. C'est le minimum de la charte
   d'accessibilite, et une bulle de 10 px n'est pas cliquable au doigt. */
.home-hero__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-width: 1.5rem;
    padding: 0 0.4375rem;
    border: none;
    background: none;
    cursor: pointer;
}

.home-hero__dot::before {
    content: '';
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: width 0.25s ease, background 0.25s ease;
}

.home-hero__dot.is-active::before {
    width: 2.375rem;
    background: var(--home-hero-accent, var(--color-primary));
}

/* ── LE BOUTON DE LECTURE ─────────────────────────────────────────
   Les valeurs sont celles de la maquette : 36 de haut, 14 de rembourrage
   lateral, 8 d'ecart, filet de 1,5 px. Trois s'en ecartaient — le rembourrage
   valait 8, l'ecart ne separait rien faute de pictogramme, et le filet etait
   celui des cartes blanches, trop pale sur le plateau.

   `justify-content: center` et le rognage du rembourrage DROIT : une
   capitalisation espacee de 0,06 em laisse ce blanc apres la DERNIERE lettre,
   et rien apres lui pour l'equilibrer. Le libelle se lit alors decale vers la
   gauche dans sa pilule, ce qui est exactement ce qu'on voit sans savoir le
   nommer. Le retrancher a droite recentre le texte optiquement.

   Cible de 44 px sous 48 rem : la maquette ne fixe ce plancher que pour les
   bulles, mais c'est au doigt que celui-ci se presse. */
.home-hero__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 8 px, la valeur de la maquette, et posee en dur : le pas `2xs` en vaut
       6,3, dont les marges negatives du pictogramme retranchent encore le
       blanc du trace. Mesure a l'encre, au grossissement 4 : l'ecart tombait a
       2,8 px et les deux formes se touchaient presque. */
    gap: 0.5rem;
    height: 2.25rem;
    padding-inline: 0.875rem calc(0.875rem - 0.06em);
    border: 1.5px solid color-mix(in srgb, var(--color-border) 75%, var(--color-text-light));
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--color-primary);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Le pictogramme et la capitale sont alignes par `ui.glyph` et
   `ui-caps-optical` — deux briques, leurs mesures et l'outil qui les refait
   vivent dans `components/optical.css`. Elles etaient ecrites en dur ici, et
   c'est ici qu'elles ont ete mesurees ; elles servent maintenant partout ou un
   glyphe cotoie une capitale. */

@media (width < 48em) {
    .home-hero__toggle {
        height: 2.75rem;
    }
}

.home-hero__toggle:hover,
.home-hero__toggle:focus-visible {
    border-color: var(--color-primary);
}

/* La position, en mono comme toutes les metadonnees de la maquette, poussee a
   droite. Sous 64 rem elle passe a la ligne plutot que de comprimer les
   bulles. */
.home-hero__position {
    margin: 0 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

@media (width < 64em) {
    .home-hero__position { margin-left: 0; }
}

/* ── Titre des socles evenement et actualite ──────────────────────
   Un cran plus court que celui de la vue institutionnelle : il porte un nom
   propre, pas une promesse, et la maquette lui donne 46 px contre 50. */
.home-orientation__title--md {
    font-size: clamp(1.75rem, 3.6vw, 2.875rem);
}

/* ── Barre de rendez-vous (socle evenement) ───────────────────────
   BLANCHE, jamais un aplat colore : « deux appels concurrents » dit la
   maquette, et c'est le bouton qui doit gagner. */
.home-hero__meeting {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    /* SUR UN PLATEAU BLANC, UNE CARTE BLANCHE N'EXISTE QUE PAR SON BORD. Son
       ombre valait `--shadow-sm`, pensee contre le gris de la page ; le filet
       reprend celui du plateau, un ton plus clair pour rester en dessous de
       lui. La maquette exige que cette barre reste blanche — « jamais un aplat
       colore, qui ferait deux appels concurrents » — donc c'est le bord qui
       porte la separation, pas le fond. */
    border: 1px solid var(--color-border);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
}

.home-hero__meeting-body {
    display: flex;
    flex: 1 1 12.5rem;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.home-hero__meeting-title {
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.home-hero__meeting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs) var(--spacing-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.home-hero__meeting-cta { flex: none; }

/* ── Pastille du medaillon (socle actualite) ──────────────────────
   Posee sur l'angle de l'image, sur fond blanc plein : jamais de texte
   directement sur une photo dont on ne maitrise pas la valeur. */
.home-hero__pastille {
    position: absolute;
    top: calc(var(--spacing-sm) * -1);
    left: calc(var(--spacing-sm) * -1);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    max-width: calc(100% - var(--spacing-md));
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* La ligne de reperes est en MONO : c'est ainsi que la maquette distingue une
   metadonnee d'une phrase. */
.home-hero__metas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs) var(--spacing-md);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.home-hero__mention {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* ── Colonne de preuves, socle institutionnel SANS photo ──────────
   Reprend les cartes deja definies plus haut (`.home-proof`), simplement
   ramenees dans la grille du plateau. */
.home-hero__plate--proof .home-orientation__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-gap);
    min-width: 0;
    align-content: center;
}