/* ==========================================================================
   VISION 2045 — Funiculaire St-Luc – Chandolin SA
   Feuille de style unique. Charte officielle SLC.

   01 Jetons           07 Héros          13 Chronologie
   02 Réinitialisation 08 Bandes images  14 Questions – réponses
   03 Typographie      09 Cartes         15 Fiches projets
   04 Structure        10 Trajectoire    16 Formulaire
   05 Boutons          11 Chiffres       17 Pied de page + cookies
   06 En-tête          12 Actualités     18 Mouvement, impression, divers
   ========================================================================== */

/* == 01 · JETONS ========================================================== */

:root {
  /* Couleurs officielles — charte Val d'Anniviers 2026 (SAM).
     Les cinq teintes ci-dessous sont reprises telles quelles du nuancier
     RVB de la charte ; les équivalents CMJN figurent en commentaire pour
     les déclinaisons imprimées. */
  --bleu:       #2A5188;   /* principale        · C100 M70 J20 N0 */
  --jaune:      #F0C22E;   /* secondaire        · C0 M25 J95 N0   */
  --bleu-ciel:  #7AC7F3;   /* secondaire        · C60 M0 J0 N0    */
  --jaune-clair:#FFF393;   /* aplat             · C0 M0 J55 N0    */
  --creme:      #FFF8CC;   /* aplat             · C0 M0 J23 N0    */

  /* Hors charte : la croix du logo SLC et les messages d'erreur. */
  --rouge-suisse: #E30613;

  /* Déclinaisons de travail, toutes dérivées de la teinte du bleu de charte
     (H 215°). Elles n'ajoutent aucune couleur nouvelle : elles donnent au
     bleu de charte les valeurs claires et sombres dont l'interface a besoin
     et que le nuancier print n'a pas à fournir. Contrastes vérifiés sur
     blanc, sur --bleu-neige et sur --bleu-papier : tous ≥ 4,5:1. */
  --bleu-profond: #1A3356;   /* voiles photographiques, dégradés  12,7:1 */
  --bleu-clair:   #11669C;   /* liens et surtitres                 6,0:1 */
  --bleu-brume:   #566A81;   /* texte tertiaire                    5,6:1 */
  --bleu-voile:   #C9D6E3;
  --bleu-papier:  #EAF0F6;
  --bleu-neige:   #F4F7FB;

  /* Le jaune de charte est illisible sur blanc (1,7:1). Cette version
     assombrie, de même teinte, sert dès qu'il faut porter du texte. */
  --jaune-profond: #886507;   /* 5,4:1 sur blanc, 5,0:1 sur --creme */

  --blanc: #FFFFFF;
  --trait: #DBE3EB;

  --encre:       var(--bleu);
  --encre-doux:  #3E556F;   /* 7,7:1 sur blanc */
  --encre-clair: var(--bleu-brume);
  --fond:        var(--blanc);

  /* Polices officielles.
     Grota Rounded porte trois graisses sous un seul nom de famille :
     400 Regular, 700 Bold, 900 Titles Black. Les deux jetons ci-dessous
     fixent la graisse employée partout, pour n'avoir qu'un endroit à
     modifier si la charte évolue. */
  --f-titre: "Grota Rounded", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fw-titre: 900;   /* h1…h5, chiffres et grands nombres → Titles Black */
  --fw-ui:    700;   /* surtitres, boutons, navigation, libellés → Bold  */

  /* Textes : une seule et même taille sur tout le site. Les quatre jetons
     sont conservés pour ne pas casser les appels existants. */
  --t-xs:   1rem;
  --t-sm:   1rem;
  --t-base: 1rem;
  --t-lead: 1rem;
  /* Libellés d'interface en Grota Rounded Bold, en capitales (navigation, réglages cookies).
     Ce ne sont pas des textes de lecture : ils gardent une taille réduite. */
  --t-ui:   0.8125rem;
  --t-h4:   clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --t-h3:   clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --t-h2:   clamp(1.3125rem, 1.05rem + 1.275vw, 2.25rem);   /* -25 % */
  --t-h1:   clamp(2rem, 1.4rem + 2.6vw, 3.5rem);   /* 3.5 rem dès ~1290 px */

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --wrap: 1200px;
  --r-sm: 2px;
  --r:    4px;

  --ombre:    0 1px 2px rgba(26, 51, 86, .07), 0 8px 24px rgba(26, 51, 86, .07);
  --ombre-ht: 0 2px 4px rgba(26, 51, 86, .09), 0 18px 44px rgba(26, 51, 86, .14);

  --duree: .45s;
  --courbe: cubic-bezier(.22, .68, .36, 1);
}

/* == 02 · RÉINITIALISATION ================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* <picture> est un simple conteneur sans dimension propre. Sans cette règle, le
   « height: 100% » des images qui suivent ne se résout pas : elles reprennent
   leur hauteur intrinsèque, object-fit reste sans effet et la photographie se
   cale en haut du cadre au lieu d'être centrée. */
:is(.heros__media, .heros-page__media, .bande-image__media,
    .carte-projet__media, .carte-actu__media) picture {
  display: block; width: 100%; height: 100%;
}
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--bleu-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bleu); }

:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; border-radius: var(--r-sm); }
.section--bleu :focus-visible, .heros :focus-visible, .pied :focus-visible { outline-color: var(--jaune); }

::selection { background: var(--jaune); color: var(--bleu); }

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

/* Empêche une coupure de ligne à l'intérieur d'un nom composé : dans une
   colonne étroite, « St-Luc » se scinderait sinon en « St- / Luc ». */
.insecable { white-space: nowrap; }

.skip {
  position: absolute; top: -100%; left: var(--s4); z-index: 200;
  background: var(--jaune); color: var(--bleu);
  padding: var(--s3) var(--s5);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: var(--s4); }

/* == 03 · TYPOGRAPHIE ===================================================== */
/* Les titres reprennent le parti pris du logo : capitales, Grota Rounded
   Titles Black. L'interlettrage reste à zéro : c'est la condition pour que
   les ligatures capitales du dessin de titrage (LA LE LI LL LO LU RA RE RI
   RO RU) s'affichent, Chromium les supprimant dès qu'un letter-spacing est
   appliqué. La chasse de la fonte est déjà réglée pour la composition en
   capitales, aucune correction n'est nécessaire. */

h1, h2, h3, h4, h5 {
  font-family: var(--f-titre);
  font-weight: var(--fw-titre);
  font-variant-ligatures: common-ligatures;
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: 1.06;
  margin: 0;
  color: var(--encre);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.14; }
h4 { font-size: var(--t-h4); line-height: 1.22; }
h5 { font-size: var(--t-sm); letter-spacing: .04em; }

p { margin: 0 0 var(--s5); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--encre-doux); max-width: 62ch; }

.eyebrow {
  font-family: var(--f-titre); font-weight: var(--fw-ui);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin: 0 0 var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--jaune); flex: none; }
.eyebrow--centre { justify-content: center; }
.section--bleu .eyebrow { color: var(--jaune); }

.prose > * + * { margin-top: var(--s5); }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s7); font-size: var(--t-h4); }
.prose ul, .prose ol { padding-left: 1.15em; margin-bottom: var(--s5); }
.prose li { margin-bottom: var(--s3); }
.prose li::marker { color: var(--jaune-profond); }
.prose strong { font-weight: 500; color: var(--bleu); }
.section--bleu .prose strong { color: var(--jaune); }

ul, ol { margin: 0 0 var(--s5); }

.liste-cochee { list-style: none; padding: 0; margin: 0; }
.liste-cochee li { position: relative; padding-left: var(--s6); margin-bottom: var(--s3); }
.liste-cochee li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 3px; background: var(--jaune);
}

.maj { font-size: var(--t-sm); color: var(--encre-doux); }
.centre { text-align: center; }
.centre .lead { margin-inline: auto; }
.centre .eyebrow { justify-content: center; }

/* Valeurs absentes des documents source, signalées et non inventées */
.tbd, .a-completer {
  display: inline-block; padding: 1px 8px;
  border: 1px dashed var(--bleu-brume); border-radius: var(--r-sm);
  font-size: 1rem; color: var(--bleu-brume); background: var(--bleu-neige);
  white-space: nowrap;
}
.section--bleu .tbd, .heros-page .tbd {
  border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
}

.note-redaction {
  font-size: var(--t-sm); color: var(--encre-clair);
  border-left: 3px solid var(--jaune); padding-left: var(--s4);
}

/* == 04 · STRUCTURE ======================================================= */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.wrap--medium { max-width: 980px; }
.wrap--etroit { max-width: 760px; }

.section { padding-block: clamp(var(--s8), 7vw, var(--s10)); }
.section--serree { padding-block: clamp(var(--s7), 5vw, var(--s9)); }
.section--haute  { padding-block: clamp(var(--s9), 9vw, 160px); }

.section--blanc { background: var(--blanc); }
.section--papier { background: var(--bleu-papier); }
.section--neige { background: var(--bleu-neige); }

.section--bleu { background: var(--bleu); color: var(--blanc); }
.section--bleu :is(h1, h2, h3, h4, h5) { color: var(--blanc); }
.section--bleu .lead { color: rgba(255,255,255,.85); }
/* Les boutons et liens fléchés gèrent leur propre couleur. */
/* Charte, page LIENS : « fond bleu principal, texte jaune clair ».
   Le jaune de charte ne donne que 4,7:1 sur le bleu ; le jaune clair
   monte à 7,0:1 — la règle de charte est aussi la plus lisible. */
/* .traj__projet est un lien-bloc : il enveloppe une liste entière et garde
   donc la couleur de texte courante, la vocation de lien étant portée par
   son libellé « Fiche projet » et par le survol du bloc. */
.section--bleu a:not(.btn):not(.lien-fleche):not(.traj__projet) { color: var(--jaune-clair); }
.section--bleu .maj { color: rgba(255,255,255,.7); }

.section-tete { max-width: 68ch; margin-bottom: var(--s8); }
.section-tete--centre { margin-inline: auto; text-align: center; }
.section-tete--centre .eyebrow { justify-content: center; }
.section-tete .lead { margin-top: var(--s5); }

.grille { display: grid; gap: var(--s5); }
.grille--2, .grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.split { display: grid; gap: var(--s7); }
/* Les enfants de grille ont min-width:auto par défaut : un <select> aux options
   longues imposerait sinon sa largeur intrinsèque et ferait déborder la page. */
.split > *, .grille > *, .form__duo > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .split--tiers { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); }
  .split--tiers-inv { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
  .split__colle { position: sticky; top: 120px; align-self: start; }
}

.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mt-8 { margin-top: var(--s8); }

.ariane {
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--s6); color: rgba(255,255,255,.72);
}
.ariane a { color: rgba(255,255,255,.88); text-decoration: none; }
.ariane a:hover { color: var(--jaune); text-decoration: underline; }
.ariane__sep { margin-inline: var(--s2); opacity: .5; }

.callout {
  padding: var(--s5) var(--s6);
  background: var(--bleu-neige);
  border-left: 4px solid var(--jaune);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-sm); line-height: 1.68;
}
.callout--info { background: var(--creme); }
.callout--neutre { background: var(--bleu-papier); border-left-color: var(--bleu-voile); }
.callout p + p { margin-top: var(--s3); }
.section--bleu .callout {
  background: rgba(255,255,255,.07); border-left-color: var(--jaune); color: rgba(255,255,255,.9);
}


.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 34rem; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th, .table td { padding: var(--s4) var(--s3); text-align: left; border-bottom: 1px solid var(--trait); }
.table th {
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-clair); border-bottom: 2px solid var(--bleu);
}
.table tbody tr:hover { background: var(--bleu-neige); }

/* == 05 · BOUTONS ========================================================= */

.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 15px var(--s6);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r);
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe), transform .2s var(--courbe);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Le jaune est réservé aux appels à l’action. */
.btn--primary { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }
.btn--primary:hover { background: var(--bleu); color: var(--jaune); border-color: var(--bleu); }
.section--bleu .btn--primary:hover,
.heros .btn--primary:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }

.btn--ghost { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.btn--ghost:hover { background: var(--bleu); color: var(--blanc); }

.btn--sur-sombre { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.55); }
.btn--sur-sombre:hover { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }

.fleche { transition: transform var(--duree) var(--courbe); }
.btn:hover .fleche, .lien-fleche:hover .fleche { transform: translateX(4px); }
/* Flèche orientée à gauche (« Retour aux actualités ») : le survol l’entraîne
   dans le sens de la lecture du lien. */
.btn:hover .fleche--retour, .lien-fleche:hover .fleche--retour { transform: translateX(-4px); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--bleu); padding-bottom: 3px; border-bottom: 2px solid var(--jaune);
}
.lien-fleche:hover { color: var(--bleu-clair); }
.section--bleu .lien-fleche { color: var(--jaune); }
.section--bleu .lien-fleche:hover { color: var(--blanc); }

/* == 06 · EN-TÊTE ========================================================= */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  transition: background var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.entete__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 84px;
}
.entete.est-fixe { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--trait); }

/* Tant que l'en-tête est transparente, elle porte son propre dégradé. Le menu
   blanc reste lisible sur n'importe quelle photographie sans qu'il faille
   assombrir toute l'image du héros. */
.entete--clair:not(.est-fixe)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 180px;
  background: linear-gradient(to bottom, rgba(26,51,86,.84), rgba(26,51,86,0));
  pointer-events: none; z-index: -1;
}

.marque { display: flex; align-items: center; text-decoration: none; flex: none; }
.marque__logo { height: 46px; width: auto; transition: height var(--duree) var(--courbe); }
.entete.est-fixe .marque__logo { height: 38px; }

/* Logo blanc sur héros photographique, logo bleu dès que le fond blanchit */
.marque__logo--blanc { display: none; }
.marque__logo--bleu  { display: block; }
.entete--clair:not(.est-fixe) .marque__logo--blanc { display: block; }
.entete--clair:not(.est-fixe) .marque__logo--bleu  { display: none; }

.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: clamp(var(--s3), 1.5vw, var(--s6)); }
  .nav a {
    font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    color: var(--bleu); padding-block: var(--s2);
    border-bottom: 2px solid transparent;
    transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
  }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--jaune); }
  .entete--clair:not(.est-fixe) .nav a { color: var(--blanc); }
}

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 10px; background: none; border: 0;
}
@media (min-width: 1060px) { .burger { display: none; } }
.burger__bar {
  display: block; height: 2px; width: 100%; background: var(--bleu);
  transition: transform var(--duree) var(--courbe), opacity .2s, background var(--duree);
}
.entete--clair:not(.est-fixe) .burger__bar { background: var(--blanc); }
.burger[aria-expanded="true"] .burger__bar { background: var(--bleu); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 84px 0 0; z-index: 99;
  background: var(--blanc);
  padding: var(--s6) var(--s5) var(--s8);
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .3s var(--courbe), transform .3s var(--courbe), visibility .3s;
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; transform: none; }
.menu-mobile a {
  display: block; padding: var(--s4) 0;
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  color: var(--bleu); border-bottom: 1px solid var(--trait);
}
.menu-mobile a:hover { color: var(--bleu-clair); }
.menu-mobile__pied { margin-top: var(--s7); font-size: var(--t-sm); color: var(--encre-clair); }
.menu-mobile__pied a {
  font-family: var(--f-texte); font-weight: 300; font-size: var(--t-sm);
  text-transform: none; letter-spacing: normal; padding: var(--s2) 0; border: 0;
}

/* == 07 · HÉROS =========================================================== */

.heros {
  position: relative; min-height: min(94vh, 880px);
  display: flex; align-items: flex-end;
  padding-top: 84px; overflow: hidden; background: var(--bleu);
}
.heros__media { position: absolute; inset: 0; z-index: 0; }
.heros__media img { width: 100%; height: 100%; object-fit: cover; }

/* Voile bleu : rend le texte lisible sur n’importe quelle photographie,
   y compris les vues de neige très claires. */
.heros__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26,51,86,.96) 0%, rgba(42,81,136,.84) 34%,
                    rgba(42,81,136,.50) 68%, rgba(42,81,136,.38) 100%),
    linear-gradient(to right, rgba(26,51,86,.60) 0%, rgba(42,81,136,0) 62%);
}

.heros__in { position: relative; z-index: 1; width: 100%; padding-block: clamp(var(--s8), 8vw, var(--s10)); }
.heros__eyebrow { color: var(--jaune); }
.heros__titre { color: var(--blanc); max-width: 17ch; }
.heros__titre .accent { color: var(--jaune); display: block; }
.heros__intro { color: rgba(255,255,255,.9); max-width: 54ch; margin-top: var(--s6); font-size: var(--t-lead); }
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

.altimetre {
  display: flex; align-items: center; gap: var(--s4); margin-top: var(--s8);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.altimetre__trait { flex: 1; height: 1px; background: rgba(255,255,255,.4); position: relative; }
.altimetre__trait::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; background: var(--jaune); border-radius: 50%;
}

.heros-page {
  position: relative; background: var(--bleu); color: var(--blanc);
  /* Le H1 est désormais seul : une hauteur plancher évite un bandeau écrasé
     et laisse voir la photographie. */
  min-height: clamp(420px, 56vh, 620px);
  display: flex; align-items: flex-end;
  padding-top: calc(84px + var(--s8));
  padding-bottom: clamp(var(--s7), 5vw, var(--s8));
  overflow: hidden;
}
.heros-page__media { position: absolute; inset: 0; z-index: 0; }
/* Point d'ancrage du recadrage, réglable page par page.
   Sur un écran large, la bande du héros est bien plus panoramique que la
   photographie : le recadrage centré ampute alors le HAUT et le BAS du cliché.
   Sur mobile, c'est l'inverse — la bande devient plus haute que large et ce
   sont les CÔTÉS qui disparaissent. Deux réglages distincts sont donc
   nécessaires, posés sur le conteneur du média :

       <div class="heros-page__media"
            style="--ancrage:62%; --ancrage-x-mob:80%">

   --ancrage        décalage vertical   (utile sur grand écran)
   --ancrage-x      décalage horizontal (rarement nécessaire)
   --ancrage-x-mob  décalage horizontal sous 720 px, quand le sujet est
                    excentré et se ferait couper — le télésiège de la page
                    « Q&A », par exemple, qui occupe le quart droit du cadre.
   Valeurs par défaut : 50 % dans les deux axes, soit un recadrage centré. */
.heros-page__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--ancrage-x, 50%) var(--ancrage, 50%);
}
@media (max-width: 720px) {
  .heros-page__media img {
    object-position: var(--ancrage-x-mob, var(--ancrage-x, 50%)) var(--ancrage, 50%);
  }
}
.heros-page__media::after {
  content: ""; position: absolute; inset: 0;
  /* Voile allégé : la photographie reste lisible. Le dégradé latéral porte le
     H1, aligné à gauche, sans noyer le reste de l'image. */
  background:
    linear-gradient(to top, rgba(26,51,86,.78) 0%, rgba(42,81,136,.46) 55%, rgba(42,81,136,.36) 100%),
    linear-gradient(to right, rgba(26,51,86,.54) 0%, rgba(42,81,136,0) 70%);
}
.heros-page__in { position: relative; z-index: 1; width: 100%; }
.heros-page h1 { color: var(--blanc); max-width: 20ch; }
.heros-page .lead { color: rgba(255,255,255,.88); margin-top: var(--s5); }
.heros-page .eyebrow { color: var(--jaune); }
.heros-page__deco { position: absolute; inset: 0; z-index: 0; opacity: .22; }

/* == 08 · BANDES ILLUSTRÉES =============================================== */

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r); }
.figure figcaption { margin-top: var(--s3); font-size: var(--t-xs); letter-spacing: .04em; color: var(--encre-clair); }

/* Bandeau photographique posé dans le flux d'une section — à la différence de
   .bande-image, qui pose la photographie en fond derrière du texte.
   Le cadre est panoramique quelle que soit la proportion native du fichier :
   c'est le navigateur qui recadre (object-fit), jamais une déformation.
   Le <picture> doit porter la proportion lui-même, sinon le « height: 100% »
   de l'image ne se résout pas — même raison qu'au § 02 pour les héros. */
/* La marge est portée par le composant, non par un utilitaire .mt-* : ceux-ci
   sont déclarés au § 04, donc AVANT le « margin: 0 » de .figure ci-dessus, qui
   les écraserait silencieusement (même spécificité, règle plus tardive). */
.figure--bandeau { margin-top: var(--s8); }
.figure--bandeau picture { display: block; width: 100%; aspect-ratio: 16 / 9; }
.figure--bandeau img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: var(--r); box-shadow: var(--ombre);
}
/* Sur mobile, un 16/9 pleine largeur devient une bande trop mince pour laisser
   lire le sujet : la proportion se resserre. */
@media (max-width: 640px) {
  .figure--bandeau picture { aspect-ratio: 4 / 3; }
}

.bande-image {
  position: relative; min-height: 440px;
  display: flex; align-items: center; overflow: hidden; background: var(--bleu);
}
.bande-image__media { position: absolute; inset: 0; }
.bande-image__media img { width: 100%; height: 100%; object-fit: cover; }
.bande-image__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(26,51,86,.96) 0%, rgba(42,81,136,.80) 52%, rgba(42,81,136,.52) 100%);
}
.bande-image__in { position: relative; z-index: 1; padding-block: var(--s9); color: var(--blanc); }
.bande-image :is(h2, h3) { color: var(--blanc); }
.bande-image .lead { color: rgba(255,255,255,.88); }
.bande-image .eyebrow { color: var(--jaune); }

/* == 09 · CARTES ========================================================== */

.carte {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: var(--s6);
  transition: border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.carte--lien { text-decoration: none; color: inherit; display: block; }
.carte--lien:hover { border-color: var(--bleu); box-shadow: var(--ombre); transform: translateY(-2px); }

/* Les cartes d’ambition sont désormais posées sur le fond blanc de la section
   d’introduction : c’est l’aplat bleu neige, le filet jaune et l’ombre portée
   qui les détachent, là où le fond papier de l’ancienne section suffisait. */
.carte-axe {
  background: var(--bleu-neige); border: 1px solid var(--trait);
  border-top: 4px solid var(--jaune); border-radius: 0 0 var(--r) var(--r);
  padding: var(--s6); display: flex; flex-direction: column;
  box-shadow: var(--ombre);
  transition: box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe),
              background var(--duree) var(--courbe);
}
.carte-axe:hover { background: var(--blanc); box-shadow: var(--ombre-ht); transform: translateY(-3px); }
.carte-axe__num { font-family: var(--f-titre); font-weight: var(--fw-titre); font-size: 2.4rem; line-height: 1; color: var(--bleu-brume); margin-bottom: var(--s4); }
.carte-axe h3 { font-size: var(--t-h4); margin-bottom: var(--s4); }
.carte-axe p { font-size: var(--t-sm); color: var(--encre-doux); }

.carte-defi { padding-left: var(--s5); border-left: 3px solid var(--jaune); }
.carte-defi h3 { font-size: var(--t-xs); letter-spacing: .14em; color: var(--jaune); margin-bottom: var(--s3); }
.carte-defi :is(p, div) { font-size: var(--t-sm); color: rgba(255,255,255,.86); }
:is(.section--blanc, .section--papier, .section--neige) .carte-defi h3 { color: var(--bleu-clair); }
:is(.section--blanc, .section--papier, .section--neige) .carte-defi :is(p, div) { color: var(--encre-doux); }

.carte-projet {
  position: relative; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.carte-projet:hover { border-color: var(--bleu); box-shadow: var(--ombre-ht); transform: translateY(-3px); }
.carte-projet__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bleu-papier); }
.carte-projet__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe); }
.carte-projet:hover .carte-projet__media img { transform: scale(1.04); }
.carte-projet__corps { padding: var(--s5) var(--s6) var(--s6); display: flex; flex-direction: column; flex: 1; }
.carte-projet h3 { font-size: var(--t-h4); margin-block: var(--s4) var(--s3); }
.carte-projet h3 a { color: inherit; text-decoration: none; }
.carte-projet h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-projet p { font-size: var(--t-sm); color: var(--encre-doux); }
.carte-projet__pied {
  margin-top: auto; padding-top: var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-clair); border-top: 1px solid var(--trait);
}

/* Badges — la couleur porte la saison, la forme porte la maturité */
.meta-projet { display: flex; flex-wrap: wrap; gap: var(--s2); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 100px; border: 1px solid; white-space: nowrap;
}
.badge__pt { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.badge--engage { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.badge--engage .badge__pt { background: var(--jaune); }
.badge--avant { background: transparent; color: var(--bleu); border-color: var(--bleu-voile); border-style: dashed; }
.badge--avant .badge__pt { background: transparent; border: 1.5px solid var(--bleu-brume); }

.badge--hiver { background: var(--bleu-papier); color: var(--bleu); border-color: var(--bleu-voile); }
.badge--ete { background: var(--creme); color: var(--jaune-profond); border-color: #D3BB69; }
.badge--quatre { background: var(--blanc); color: var(--bleu); border-color: var(--bleu-voile); }
.badge--horizon { background: transparent; color: var(--encre-doux); border-color: var(--bleu-voile); }

/* --- Pastilles de saison -------------------------------------------------
   Forme et couleurs définies une seule fois, pour les deux endroits où ces
   pastilles apparaissent : le calendrier de la trajectoire (.traj__saison,
   § 10) et les badges des fiches projets (.badge__pt). Toute évolution se
   fait ici ; les deux représentations restent ainsi rigoureusement
   identiques. Le carré arrondi distingue la saison de la pastille ronde qui
   porte la maturité (projet engagé / avant-projet). */

.traj__saison,
:is(.badge--hiver, .badge--ete, .badge--quatre) .badge__pt {
  width: 11px; height: 11px; border-radius: 2px;
}
.traj__saison--hiver,  .badge--hiver  .badge__pt { background: var(--bleu-ciel); }
.traj__saison--ete,    .badge--ete    .badge__pt { background: var(--jaune); }
.traj__saison--quatre, .badge--quatre .badge__pt {
  background: linear-gradient(135deg, var(--bleu-ciel) 50%, var(--jaune) 50%);
}

/* Sur fond bleu, les badges s’inversent */
:is(.section--bleu, .heros-page, .bande-image) .badge--avant {
  color: var(--blanc); border-color: rgba(255,255,255,.5);
}
:is(.section--bleu, .heros-page, .bande-image) .badge--avant .badge__pt { border-color: rgba(255,255,255,.7); }
:is(.section--bleu, .heros-page, .bande-image) .badge--horizon {
  color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35);
}
:is(.section--bleu, .heros-page, .bande-image) .badge--engage {
  background: var(--jaune); color: var(--bleu); border-color: var(--jaune);
}
:is(.section--bleu, .heros-page, .bande-image) .badge--engage .badge__pt { background: var(--bleu); }
:is(.section--bleu, .heros-page, .bande-image) .badge--hiver {
  background: rgba(255,255,255,.14); color: var(--blanc); border-color: rgba(255,255,255,.38);
}
:is(.section--bleu, .heros-page, .bande-image) .badge--ete {
  background: transparent; color: var(--jaune); border-color: var(--jaune);
}
:is(.section--bleu, .heros-page, .bande-image) .badge--quatre {
  background: rgba(255,255,255,.14); color: var(--blanc); border-color: rgba(255,255,255,.38);
}
/* Seul le cartouche s’inverse : la pastille de saison, elle, reste celle du
   calendrier — qui est lui aussi présenté sur fond bleu. */

.groupe-soutien h4 {
  font-size: var(--t-xs); letter-spacing: .12em; color: var(--jaune);
  margin-bottom: var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.groupe-soutien ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.groupe-soutien li { padding-block: 5px; color: rgba(255,255,255,.86); }

.doc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) var(--s6);
  border: 1px solid var(--trait); border-radius: var(--r);
  text-decoration: none; color: inherit; background: var(--blanc);
  transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.doc:hover { border-color: var(--bleu); background: var(--bleu-neige); }
.doc__titre { display: block; font-family: var(--f-titre); font-weight: var(--fw-ui); text-transform: uppercase; font-size: var(--t-sm); letter-spacing: .04em; }
.doc__desc { display: block; font-size: var(--t-sm); color: var(--encre-clair); margin-top: 2px; }
.doc__type { font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs); letter-spacing: .1em; color: var(--bleu-clair); white-space: nowrap; }

.personnes { display: grid; }
/* Liste sur deux colonnes : multi-colonnes plutôt que grille, pour que les
   noms sur deux lignes (David Melly) ne creusent pas un blanc dans la colonne
   voisine. La lecture se fait de haut en bas, colonne après colonne. */
.personnes--duo { display: block; columns: 1; column-gap: var(--s8); }
.personnes--duo .personne { break-inside: avoid; }
@media (min-width: 720px) { .personnes--duo { columns: 2; } }
.personne { padding-block: var(--s4); border-bottom: 1px solid var(--trait); }
.personne__nom { font-family: var(--f-titre); font-weight: var(--fw-ui); text-transform: uppercase; font-size: var(--t-sm); letter-spacing: .04em; }
.personne__role { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux); }
.personne--direction .personne__nom { font-size: var(--t-h4); }

.coord__bloc { padding-block: var(--s4); border-bottom: 1px solid var(--trait); }
.coord__bloc:last-child { border-bottom: 0; }
.coord__bloc h4 { font-size: var(--t-xs); letter-spacing: .12em; color: var(--bleu-clair); margin-bottom: var(--s2); }
.coord__bloc p { font-size: var(--t-sm); }

/* == 10 · TRAJECTOIRE PAR AMBITION ======================================== */
/* Quatre colonnes, une par ambition. À l'intérieur : maturité, puis horizon,
   puis initiatives. La saison est portée par une pastille doublée d'un libellé
   lu par les lecteurs d'écran, jamais par la seule couleur.                  */

.traj { display: grid; gap: var(--s6); margin-top: var(--s7); }
@media (min-width: 720px)  { .traj { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); } }
@media (min-width: 1120px) { .traj { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.traj__col { display: flex; flex-direction: column; gap: var(--s5); }

/* Le pictogramme et la pastille numérotée occupent leur propre ligne ;
   l'intitulé de l'ambition dispose ainsi de toute la largeur de la colonne
   au lieu de se replier contre le numéro. */
.traj__tete { padding-bottom: var(--s4); border-bottom: 2px solid var(--jaune); }
.traj__marque { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.traj__marque .picto-axe { flex: none; width: 72px; height: 72px; }
.traj__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--jaune); color: var(--bleu);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
  display: grid; place-items: center;
}
.traj__tete h3 { margin: 0; font-size: var(--t-h4); color: var(--blanc); line-height: 1.22; }

.traj__groupe { padding: var(--s5); border-radius: var(--r); }
/* Les voiles d'accentuation assombrissent au lieu d'éclaircir : le jaune de
   charte n'a que 4,7:1 sur le bleu, un voile clair le ferait passer sous le
   seuil AA. Un voile de --bleu-profond remonte le rapport à 5,6:1. */
.traj__groupe--projets { border: 1px solid var(--jaune); background: rgba(26, 51, 86, .35); }
.traj__groupe--avant { border: 1px dashed rgba(255,255,255,.45); background: rgba(26, 51, 86, .22); }
.traj__groupe h4 {
  margin: 0 0 var(--s4);
  font-size: var(--t-ui); letter-spacing: .14em; text-transform: uppercase;
}
.traj__groupe--projets h4 { color: var(--jaune); }
.traj__groupe--avant h4 { color: rgba(255,255,255,.78); }

/* Un « bloc-projet » regroupe toutes les initiatives qui relèvent d'une même
   fiche : le schéma imprimé les réunit entre deux filets pointillés, la page
   les réunit dans un seul lien. Le calendrier compte ainsi huit liens — un
   par projet — et non dix-huit, un par initiative. */
.traj__projet {
  display: block; color: rgba(255,255,255,.9); text-decoration: none;
  padding: var(--s3); margin-inline: calc(var(--s3) * -1);
  border-radius: var(--r);
  transition: background var(--duree) var(--courbe);
}
.traj__projet + .traj__projet {
  margin-top: var(--s4); padding-top: var(--s5);
  border-top: 1px dotted rgba(255,255,255,.5);
}
/* La règle globale « a:hover { color: var(--bleu) } » l'emporterait sur la
   couleur posée par .traj__projet : le bloc entier passerait en bleu foncé
   sur fond bleu. On la neutralise ici, le survol n'étant signalé que par le
   voile de fond et par le soulignement du libellé « Fiche projet ». */
.traj__projet:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.traj__projet:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.traj__annee {
  margin: var(--s5) 0 var(--s2);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
  letter-spacing: .06em; color: var(--blanc);
}
.traj__projet > .traj__annee:first-child { margin-top: 0; }
/* L'astérisque renvoie à la note de bas de section. */
.traj__ast { color: var(--jaune); }

.traj__liste { list-style: none; padding: 0; margin: 0; }
.traj__liste li { display: flex; gap: var(--s3); padding-block: 5px; line-height: 1.45; }

.traj__fiche {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
  letter-spacing: .12em; text-transform: uppercase; color: var(--jaune);
}
.traj__projet:hover .traj__fiche { text-decoration: underline; }
.traj__projet:hover .traj__fiche .fleche { transform: translateX(4px); }

/* Forme et couleurs : voir « Pastilles de saison », § 09. Ici, seul
   l’alignement sur la ligne de texte de la liste. */
.traj__saison { flex: none; margin-top: .38em; }

.traj-legende {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.22);
  display: grid; gap: var(--s4);
  color: rgba(255,255,255,.78);
}
@media (min-width: 900px) { .traj-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s8); } }
.traj-legende__grp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
@media (min-width: 900px) { .traj-legende__grp { grid-column: 1 / -1; } }
.traj-legende__lbl {
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.74);
}
.traj-legende__cle { display: inline-flex; align-items: center; gap: var(--s2); }
.traj-legende__cle .traj__saison { margin-top: 0; }
.traj-legende__def { margin: 0; }
.traj-legende__def strong { color: var(--blanc); }
.traj-legende__note { margin: 0; color: rgba(255,255,255,.72); }
@media (min-width: 900px) { .traj-legende__note { grid-column: 1 / -1; } }

/* == 10bis · RÉCAPITULATIF DES INITIATIVES =============================== */
/* Présentation statique par horizon. Chaque information est portée par un
   libellé écrit, jamais par la seule position ou la seule couleur.          */

.recap { margin-top: var(--s7); }

.recap__bloc {
  display: grid; gap: var(--s5);
  padding-block: var(--s6);
  border-top: 1px solid rgba(255,255,255,.22);
}
@media (min-width: 860px) {
  .recap__bloc { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s7); align-items: start; }
}
.recap__bloc:last-of-type { border-bottom: 1px solid rgba(255,255,255,.22); }

.recap__annee {
  font-family: var(--f-titre); font-weight: var(--fw-titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1; color: var(--jaune); margin: 0;
}
@media (min-width: 860px) { .recap__annee { position: sticky; top: 110px; } }

.recap__items {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.recap__item {
  padding: var(--s5);
  background: rgba(26, 51, 86, .25);
  border-left: 3px solid var(--jaune);
  border-radius: 0 var(--r) var(--r) 0;
  display: flex; flex-direction: column; gap: var(--s3);
}
.recap__axe {
  margin: 0;
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: 1rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7); line-height: 1.5;
}
.recap__axe-num { color: var(--jaune); margin-right: 6px; }
.recap__item h4 { margin: 0; font-size: var(--t-h4); color: var(--blanc); line-height: 1.2; }
.recap__item h4 a { color: inherit; text-decoration: none; }
.recap__item h4 a:hover { color: var(--jaune); text-decoration: underline; }
.recap__item .meta-projet { margin-top: auto; padding-top: var(--s2); }

.recap-legende {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.22);
}
.recap-legende__grp { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.recap-legende__lbl {
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: 1rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.74);
}

/* --- Aperçu statique des ambitions (accueil) ----------------------------- */

.ambitions {
  display: grid; gap: 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
@media (min-width: 760px) { .ambitions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ambitions { grid-template-columns: repeat(4, 1fr); } }

.ambition {
  padding: var(--s6) var(--s5) var(--s6) 0;
  border-bottom: 1px solid rgba(255,255,255,.22);
  display: flex; flex-direction: column;
}
@media (min-width: 760px) {
  .ambition { padding-inline: var(--s6); border-left: 1px solid rgba(255,255,255,.22); }
  .ambition:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1080px) {
  .ambition { border-bottom: 0; }
}

.ambition__num {
  font-family: var(--f-titre); font-weight: var(--fw-titre); font-size: 2.6rem; line-height: 1;
  color: var(--jaune); margin-bottom: var(--s4);
}
.ambition h3 { font-size: var(--t-h4); color: var(--blanc); margin-bottom: var(--s3); }
.ambition p { font-size: var(--t-sm); color: rgba(255,255,255,.82); }
.ambition__compte {
  margin-top: auto; padding-top: var(--s5);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.ambition__compte strong { color: var(--jaune); font-size: 1rem; }

.reperes {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin-top: var(--s8); padding-top: var(--s7);
  border-top: 1px solid rgba(255,255,255,.22);
}
.repere { display: flex; flex-direction: column; gap: var(--s2); }
.repere__val {
  font-family: var(--f-titre); font-weight: var(--fw-titre);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1;
  color: var(--blanc);
}
.repere__lbl {
  font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* == 11 · CHIFFRES ======================================================== */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s6); }
.chiffre { border-top: 3px solid var(--jaune); padding-top: var(--s4); }
.chiffre__val {
  font-family: var(--f-titre); font-weight: var(--fw-titre); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1; color: var(--bleu);
}
.chiffre__unite { font-size: .45em; color: var(--bleu-brume); margin-left: 4px; }
.chiffre__lbl { margin-top: var(--s3); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-clair); }
.section--bleu .chiffre__val { color: var(--blanc); }
.section--bleu .chiffre__unite { color: var(--jaune); }
.section--bleu .chiffre__lbl { color: rgba(255,255,255,.72); }

.tuiles-signature { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .tuiles-signature { grid-template-columns: 1fr 1fr; } }
.tuile-signature h3 {
  font-size: var(--t-h4); color: var(--bleu-clair);
  padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 2px solid var(--jaune);
}
.tuile-signature ul { list-style: none; padding: 0; margin: 0; }
.tuile-signature li { position: relative; padding-left: var(--s5); font-size: var(--t-sm); color: var(--encre-doux); margin-bottom: var(--s3); }
.tuile-signature li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 2px; background: var(--jaune); }

/* == 12 · ACTUALITÉS ====================================================== */

.actu { padding-block: var(--s6); border-bottom: 1px solid var(--trait); }
.actu:first-of-type { padding-top: 0; }
.actu__meta {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-clair); margin-bottom: var(--s3);
}
.actu__cat { color: var(--bleu-clair); }
.actu :is(h2, h3) a { color: inherit; text-decoration: none; }
.actu :is(h2, h3) a:hover { color: var(--bleu-clair); }
.actu p { margin-top: var(--s3); font-size: var(--t-sm); color: var(--encre-doux); }

/* --- Filtres par catégorie (page Actualités) ----------------------------- */
/* Boutons de bascule : l’état retenu est porté par aria-pressed, le CSS ne
   fait que le refléter. Sans JavaScript, toutes les actualités restent
   affichées et la barre disparaît (voir .filtres[hidden]). */

.filtres {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-bottom: var(--s7);
}
.filtres[hidden] { display: none; }
.filtre {
  padding: 10px var(--s5);
  background: transparent; color: var(--bleu);
  border: 2px solid var(--trait); border-radius: var(--r);
  font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-ui);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
.filtre:hover { border-color: var(--bleu); }
.filtre[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.filtre:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.actus-vide {
  padding: var(--s7) var(--s6); text-align: center;
  border: 1px dashed var(--trait); border-radius: var(--r);
  color: var(--encre-doux);
}

/* --- Grille de cartes (page Actualités) ---------------------------------- */
/* Trois colonnes dès 900 px, deux puis une en dessous. */

.grille-actus {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) { .grille-actus { grid-template-columns: repeat(3, 1fr); } }

.carte-actu {
  position: relative;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.carte-actu:hover { border-color: var(--bleu); box-shadow: var(--ombre-ht); transform: translateY(-3px); }
/* Le display: flex ci-dessus prime sur la feuille du navigateur : sans cette
   règle, une carte masquée par le filtre resterait visible. */
.carte-actu[hidden] { display: none; }

.carte-actu__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bleu-papier); }
.carte-actu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe); }
.carte-actu:hover .carte-actu__media img { transform: scale(1.04); }

/* Une actualité peut être publiée avant que sa photographie ne soit disponible.
   Plutôt qu'un cadre vide ou une image d'attente à remplacer partout, la carte
   se passe de vignette et porte un filet jaune : la grille reste lisible et le
   visuel pourra être ajouté plus tard sans rien changer d'autre. */
.carte-actu--sans-image { border-top: 4px solid var(--jaune); }
.carte-actu--sans-image .carte-actu__corps { padding-top: var(--s6); }

.carte-actu__corps { display: flex; flex-direction: column; flex: 1; padding: var(--s5) var(--s6) var(--s6); }
.carte-actu .actu__meta { margin-bottom: var(--s4); }
.carte-actu :is(h2, h3) { font-size: var(--t-h4); line-height: 1.22; letter-spacing: .02em; margin-bottom: var(--s3); }
.carte-actu :is(h2, h3) a { color: inherit; text-decoration: none; }
.carte-actu:hover :is(h2, h3) a { color: var(--bleu-clair); }
/* Le lien du titre couvre toute la carte : une seule cible, une seule
   tabulation, et le bouton « Découvrir » reste purement visuel. */
.carte-actu :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
/* Le chapeau est repris tel quel du communiqué : il peut faire plusieurs
   centaines de caractères. Sur la carte, on le tronque visuellement — le texte
   reste entier dans le HTML et sur la page de l'article. */
.carte-actu__extrait {
  margin: 0; color: var(--encre-doux);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}

.carte-actu__cta { margin-top: auto; padding-top: var(--s6); }
.carte-actu__cta .btn { width: 100%; justify-content: center; }
.carte-actu:hover .btn--ghost { background: var(--bleu); color: var(--blanc); }
.carte-actu:hover .btn--ghost .fleche { transform: translateX(4px); }

/* Le focus clavier porte sur la carte entière, pas sur les seuls mots du titre. */
.carte-actu:has(a:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 2px; }
.carte-actu a:focus-visible { outline: none; }

/* == 13 · CHRONOLOGIE « LES RACINES D'UNE VISION » ======================== */

/* La fiche imprimée est reprise telle quelle : un feuillet clair posé sur le
   fond papier, un bandeau bleu portant les cinq jalons fondateurs, puis les
   trois époques en colonnes. Les brun et vert de la fiche n'appartenant pas
   au nuancier SAM, les époques sont teintées avec les déclinaisons de charte
   (bleu principal, bleu clair, jaune assombri), toutes ≥ 4,5:1 sur blanc. */

.racines {
  background: var(--blanc);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.racines__tete { padding: var(--s7) var(--s5) var(--s6); text-align: center; }
.racines__titre { font-size: var(--t-h2); }
.racines__sous { color: var(--encre-doux); margin: var(--s4) 0 0; }
@media (min-width: 700px) { .racines__tete { padding: var(--s8) var(--s7) var(--s7); } }

/* --- Bandeau des cinq jalons fondateurs ---------------------------------- */

.jalons {
  position: relative; list-style: none; margin: 0;
  padding: var(--s7) var(--s5);
  background: var(--bleu-profond); color: var(--blanc);
  display: grid; gap: var(--s6);
}
/* Le fil conducteur passe derrière les pastilles : vertical sur petit écran,
   horizontal dès 900 px. Les décalages sont calés sur le diamètre exact des
   pastilles, pour que la ligne traverse leur centre. */
.jalons::before {
  content: ""; position: absolute;
  left: calc(var(--s5) + 29px); top: var(--s7); bottom: var(--s7);
  width: 2px; background: var(--jaune);
}
.jalon { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: var(--s5); }
.jalon__an {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--jaune); color: var(--bleu-profond);
  box-shadow: 0 0 0 5px rgba(240, 194, 46, .22);
  font-family: var(--f-titre); font-weight: var(--fw-titre);
  font-size: 1.05rem; letter-spacing: .02em;
}
.jalon__txt { line-height: 1.35; }

@media (min-width: 900px) {
  .jalons { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: var(--s8) var(--s6); }
  .jalons::before {
    left: var(--s7); right: var(--s7); top: calc(var(--s8) + 33px);
    bottom: auto; width: auto; height: 2px;
  }
  .jalon { grid-template-columns: none; justify-items: center; text-align: center; gap: var(--s5); }
  .jalon__an { width: 68px; height: 68px; font-size: 1.15rem; }
  .jalon__txt { max-width: 20ch; }
}

/* --- Les trois époques ---------------------------------------------------- */

.epoques { display: grid; gap: var(--s8); padding: var(--s7) var(--s5) var(--s8); }
@media (min-width: 700px) { .epoques { padding: var(--s8) var(--s7); } }
@media (min-width: 900px) { .epoques { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
/* Empilées, les époques occuperaient toute la largeur : on borne la
   justification pour garder une ligne lisible. */
@media (max-width: 899px) { .epoque__tete, .epoque__liste { max-width: 62ch; margin-inline: auto; } }

/* Chaque époque porte deux teintes : « --teinte » habille le texte et doit donc
   rester lisible, « --accent » habille le filet et les pastilles, purement
   décoratifs. C'est ce qui permet aux Éclaireurs de porter le jaune de charte :
   il colore les éléments graphiques, là où il est illisible en texte (1,7:1). */
.epoque { position: relative; --teinte: var(--bleu); --accent: var(--teinte); }
.epoque--pionniers  { --teinte: var(--bleu);         --accent: var(--bleu); }
.epoque--batisseurs { --teinte: var(--bleu-clair);   --accent: var(--bleu-clair); }
.epoque--eclaireurs { --teinte: var(--bleu-profond); --accent: var(--jaune); }

/* Le filet de séparation est posé dans la gouttière : les trois colonnes
   gardent exactement la même largeur de texte. */
@media (min-width: 900px) {
  .epoque + .epoque::before {
    content: ""; position: absolute;
    left: calc(var(--s7) / -2); top: 0; bottom: 0;
    width: 1px; background: var(--bleu-voile);
  }
}

.epoque__tete { text-align: center; }
.epoque__intention { font-size: var(--t-sm); font-style: italic; color: var(--encre-clair); margin: 0 0 var(--s3); }
/* En colonnes, l'intention la plus longue passe sur deux lignes : on réserve
   la hauteur pour que les trois titres d'époque restent sur la même ligne. */
@media (min-width: 900px) { .epoque__intention { min-height: 3.44em; } }
.epoque__titre { color: var(--teinte); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--s3); }
.epoque__periode {
  font-family: var(--f-texte); font-weight: 500; font-size: var(--t-sm);
  text-transform: none; letter-spacing: normal; color: var(--encre-doux);
}
.epoque__filet { display: block; width: 56px; height: 3px; background: var(--accent); margin: var(--s4) auto 0; }

/* Le détail reste volontairement discret : c'est la lecture de second rang,
   après les cinq jalons du bandeau. */
.epoque__liste { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.epoque__jalon {
  position: relative;
  padding: 0 0 var(--s5) var(--s6);
  border-left: 1px solid var(--bleu-voile);
}
.epoque__jalon:last-child { padding-bottom: 0; }
.epoque__jalon::before {
  content: ""; position: absolute; left: -4px; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--blanc);
}
.epoque__jalon--cle::before { background: var(--jaune); box-shadow: 0 0 0 3px var(--blanc), 0 0 0 6px var(--jaune-clair); }
.epoque__an {
  display: block;
  font-family: var(--f-titre); font-weight: var(--fw-ui);
  font-size: var(--t-sm); color: var(--teinte); letter-spacing: .02em;
}
.epoque__fait { display: block; font-size: var(--t-sm); color: var(--encre-doux); margin-top: 2px; line-height: 1.5; }

/* == 14 · QUESTIONS – RÉPONSES ============================================ */

.accordeon { border-top: 1px solid var(--trait); }
.qa { border-bottom: 1px solid var(--trait); }
.qa__btn {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; background: none; border: 0; text-align: left;
  font-family: var(--f-texte); font-weight: 300;
  font-size: var(--t-lead); line-height: 1.45; color: var(--bleu);
  transition: color var(--duree) var(--courbe);
}
.qa__btn:hover { color: var(--bleu-clair); }
.qa__signe { position: relative; width: 16px; height: 16px; margin-top: 7px; flex: none; }
.qa__signe::before, .qa__signe::after {
  content: ""; position: absolute; background: var(--jaune);
  transition: transform var(--duree) var(--courbe), opacity var(--duree);
}
.qa__signe::before { left: 0; top: 7px; width: 16px; height: 2px; }
.qa__signe::after { left: 7px; top: 0; width: 2px; height: 16px; }
.qa.est-ouvert .qa__signe::after { transform: rotate(90deg); opacity: 0; }
.qa__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duree) var(--courbe); }
/* Le bouton est imbriqué dans un h3 : on s’appuie sur la classe posée par le JS. */
.qa.est-ouvert .qa__corps { grid-template-rows: 1fr; }
.qa__corps > div { overflow: hidden; }
.qa__corps > div > * { margin-bottom: var(--s5); font-size: var(--t-sm); color: var(--encre-doux); }
.qa__corps > div > *:first-child { padding-top: var(--s2); }

/* == 15 · FICHES PROJETS ================================================== */

.variante {
  padding: var(--s5) var(--s6); border-left: 3px solid var(--trait);
  margin-bottom: var(--s5); font-size: var(--t-sm);
  color: var(--encre-doux); background: var(--bleu-neige);
}
.variante--retenue { border-left-color: var(--jaune); background: var(--creme); color: var(--encre); }
.variante__tete { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.variante__num { font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); }
.variante__titre { font-family: var(--f-titre); font-weight: var(--fw-ui); text-transform: uppercase; font-size: var(--t-sm); letter-spacing: .03em; color: var(--bleu); }

.etapes { display: grid; gap: var(--s6); }
.etape { position: relative; padding-left: var(--s6); border-left: 2px solid var(--bleu-voile); }
.etape::before { content: ""; position: absolute; left: -6px; top: .5em; width: 10px; height: 10px; background: var(--jaune); border-radius: 50%; }
.etape__horizon { font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); }
.etape h3 { font-size: var(--t-h4); margin-block: var(--s2) var(--s3); }
.etape p { font-size: var(--t-sm); color: var(--encre-doux); }

/* Le titre suit immédiatement le filet : padding haut réduit et neutralisation
   du margin-top hérité de « .prose h3 » (48 px), qui doublait l’espace. */
.sous-projet { padding-block: var(--s5) var(--s6); border-bottom: 1px solid var(--trait); }
.sous-projet:last-child { border-bottom: 0; }
.sous-projet h3 { font-size: var(--t-h4); margin-top: 0; margin-bottom: var(--s3); }
.sous-projet__tete { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.sous-projet p { font-size: var(--t-sm); color: var(--encre-doux); }

.amenagement { padding-block: var(--s5); border-bottom: 1px solid var(--trait); }
.amenagement:last-child { border-bottom: 0; }
.amenagement h4 { margin-bottom: var(--s3); }
.amenagement p { font-size: var(--t-sm); color: var(--encre-doux); }

/* == 16 · FORMULAIRE ====================================================== */

.form { max-width: 680px; }
.form__duo { display: grid; gap: var(--s5); }
@media (min-width: 620px) { .form__duo { grid-template-columns: 1fr 1fr; } }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-family: var(--f-titre); font-weight: var(--fw-ui); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); }
.obligatoire { color: var(--jaune-profond); }
.champ { min-width: 0; }
.champ :is(input, select, textarea) {
  width: 100%; max-width: 100%;
  padding: 13px var(--s4); background: var(--blanc);
  border: 1px solid var(--bleu-voile); border-radius: var(--r);
  font-size: var(--t-base); font-weight: 300;
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.champ textarea { min-height: 170px; resize: vertical; line-height: 1.65; }
.champ :is(input, select, textarea):focus {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 56, 87, .12);
}
.champ :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--rouge-suisse); }
.champ__aide { font-size: var(--t-xs); color: var(--encre-clair); }
.champ__erreur { font-size: var(--t-xs); color: var(--rouge-suisse); min-height: 1em; }

.consentement {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-family: var(--f-texte) !important; font-weight: 300 !important;
  font-size: var(--t-sm) !important;
  letter-spacing: normal !important; text-transform: none !important;
  color: var(--encre-doux) !important; line-height: 1.6;
}
.consentement input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--bleu); }

.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__retour { padding: var(--s4) var(--s5); border-radius: var(--r); font-size: var(--t-sm); margin-bottom: var(--s5); }
.form__retour--ok { background: var(--creme); border-left: 4px solid var(--jaune); color: var(--bleu); }
.form__retour--ko { background: #FDECEC; border-left: 4px solid var(--rouge-suisse); color: #8A1218; }

/* == 17 · PIED DE PAGE + COOKIES ========================================== */

.pied { background: var(--bleu); color: rgba(255,255,255,.82); padding-top: var(--s9); }
.pied a { color: rgba(255,255,255,.82); text-decoration: none; }
.pied a:hover { color: var(--jaune-clair); text-decoration: underline; }

.pied__haut { display: grid; gap: var(--s8); padding-bottom: var(--s8); }
/* Trois colonnes de poids voisins : marque, navigation, contact. La marque
   garde un peu plus d'air pour le logo et la signature. */
@media (min-width: 640px) and (max-width: 979px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .pied__haut { grid-template-columns: 1.3fr 1fr 1.1fr; gap: var(--s7) var(--s8); }
}

.pied__marque .marque__logo { height: 62px; width: auto; margin-bottom: var(--s5); }
.pied__signature {
  font-family: var(--f-titre); font-weight: var(--fw-ui); text-transform: uppercase;
  font-size: var(--t-sm); letter-spacing: .04em; line-height: 1.45;
  color: var(--jaune); margin-bottom: var(--s5);
}
.pied__adresse { font-size: var(--t-sm); line-height: 1.8; font-style: normal; }
.pied__joindre { font-size: var(--t-sm); line-height: 1.8; margin-top: var(--s4); }
.pied__joindre a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.pied__marque .pied__signature { margin-bottom: 0; }

.pied h4 { font-size: var(--t-xs); letter-spacing: .14em; color: var(--blanc); margin-bottom: var(--s4); }
.pied ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.pied li { padding-block: 5px; }

.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s5);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--t-xs); color: rgba(255,255,255,.72);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--s5); }
.pied__btn-cookies {
  background: none; border: 0; color: rgba(255,255,255,.72);
  text-decoration: underline; padding: 0; font-size: var(--t-xs);
}
.pied__btn-cookies:hover { color: var(--jaune); }

.cookies {
  position: fixed; inset: auto 0 0; z-index: 150;
  background: var(--blanc); border-top: 4px solid var(--jaune);
  box-shadow: 0 -8px 40px rgba(0, 56, 87, .18);
  padding: var(--s6) 0; max-height: 88vh; overflow-y: auto;
}
.cookies h2 { font-size: var(--t-h4); margin-bottom: var(--s3); }
.cookies p { font-size: var(--t-sm); color: var(--encre-doux); max-width: 74ch; }
.cookies__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
/* Le bandeau est une interface, pas une page : ses boutons restent compacts. */
.cookies .btn { font-size: var(--t-ui); padding: 11px var(--s5); }
.cookies__lien-detail { background: none; border: 0; color: var(--bleu-clair); text-decoration: underline; font-size: var(--t-ui); padding: 0; }
.cookies__reglages { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--trait); }
.cookies__cat { display: flex; gap: var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--trait); }
.cookies__cat:last-child { border-bottom: 0; }
.cookies__cat h3 { font-size: var(--t-ui); letter-spacing: .1em; margin-bottom: 4px; }
.cookies__cat p { font-size: var(--t-ui); }

.bascule { position: relative; flex: none; width: 46px; height: 26px; }
.bascule input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bascule__piste { display: block; width: 46px; height: 26px; background: var(--bleu-voile); border-radius: 100px; transition: background var(--duree) var(--courbe); }
.bascule__piste::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 20px; height: 20px; background: var(--blanc); border-radius: 50%;
  transition: transform var(--duree) var(--courbe);
}
.bascule input:checked + .bascule__piste { background: var(--bleu); }
.bascule input:checked + .bascule__piste::after { transform: translateX(20px); }
.bascule input:disabled + .bascule__piste { opacity: .55; }
.bascule input:focus-visible + .bascule__piste { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* == 18 · MOUVEMENT, IMPRESSION, DIVERS =================================== */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.est-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--courbe), transform .7s var(--courbe);
}
.reveal[data-delai="1"].est-visible { transition-delay: .06s; }
.reveal[data-delai="2"].est-visible { transition-delay: .12s; }
.reveal[data-delai="3"].est-visible { transition-delay: .18s; }
.reveal[data-delai="4"].est-visible { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .carte-projet:hover .carte-projet__media img { transform: none; }
}

@media print {
  .no-print, .entete, .menu-mobile, .cookies, .burger { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .heros, .heros-page { min-height: 0; padding: 1cm 0; background: #fff; color: #000; }
  .heros__media, .heros-page__media, .heros-page__deco, .bande-image__media { display: none; }
  .heros__titre, .heros-page h1 { color: #000; }
  .section { padding-block: .8cm; break-inside: avoid; }
  .section--bleu, .bande-image { background: #fff !important; color: #000 !important; }
  .section--bleu :is(h2, h3), .bande-image :is(h2, h3) { color: #000 !important; }
  .racines { box-shadow: none !important; border: 1px solid #000; }
  .jalons { background: #fff !important; color: #000 !important; border-block: 1px solid #000; }
  .jalons::before { display: none; }
  .jalon__an { background: #fff !important; color: #000 !important; border: 2px solid #000; box-shadow: none !important; }
  .epoque { break-inside: avoid; }
  .epoque__titre, .epoque__an { color: #000 !important; }
  .epoque__filet, .epoque__jalon::before { background: #000 !important; }
  .qa__corps { grid-template-rows: 1fr !important; }
  .qa__corps > div { overflow: visible !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}