/* pages/association.css — /association/, « La maison ». Un mouvement par chapitre :
   1 Qui vous reçoit ?   le comité coupé sur le roll-up se recolle, puis passe en couleur depuis la couture (scroll-driven, 80 vh)
   2 Présentation        la fiche d'identité : chaque ligne fait le pas jusqu'à la couture (view(), courte)
   3 Les dates clés      un pas par année ; la couture se coud au fil du défilement (scroll-driven, toute la frise),
                         le nœud de chaque année se pose, l'heure de la barre devient l'année ; le billet 2026 déborde
   4 Le comité           les prénoms de la bannière défilent en sens contraires (scroll-driven, doublon aria-hidden)
   5 Les buts            1 · 2 · 3 · tap : chaque but tombe sur un temps (une mesure, déclenchée à l'entrée)
   6 Le mot du comité    bloc vivant, livré vide : aucun mouvement
   Règles : le style de base EST la frame finale ; scroll-driven en forme longue sous double garde ; repli .sans-sd. */

/* =================================================================== 0. L'HEURE DE LA BARRE DEVIENT L'ANNÉE (9 pas)
   data-pas="9" sur .journee-heure et data-heure="1…9" sur les années de la frise : composants.css gère jusqu'à 9 pas. */

/* =================================================================== 1. QUI VOUS REÇOIT ? */
.mh-hero { overflow: clip; }
.mh-piste { position: relative; height: calc(100svh - var(--bandeau-h) - var(--barre-h) + 80vh); }
.mh-scene {
  --fq: clamp(3rem, 1.25rem + 14vw, 6rem);                          /* la question, en délié */
  --haut: calc(2.6rem + 1.8 * var(--fq) + .9rem);                   /* place de la question (deux lignes) */
  --bas: calc(1rem + 1.02 * var(--t-h1) + .6rem);                   /* place de la réponse (jambages compris) */
  position: sticky; top: var(--barre-h);
  height: calc(100svh - var(--bandeau-h) - var(--barre-h)); min-height: 34rem;
  container-type: size;              /* aucun padding ici : 100cqw / 100cqh = la scène entière (la couture est à 45cqw) */
  overflow: clip;
}
.mh-sur { position: absolute; z-index: var(--z-texte); left: var(--marge); top: .95rem; }

/* le titre : la question (délié, en haut) se resserre pendant que la réponse (plein, en bas) s'ouvre */
.mh-titre {
  position: absolute; inset: 0; z-index: var(--z-texte);
  font-family: var(--f-display); line-height: .9;
  pointer-events: none;
}
.mh-titre .duo-q, .mh-titre .duo-r { position: absolute; display: block; overflow: clip; overflow-clip-margin: .1em; padding-bottom: .04em; }
.mh-titre .l { display: block; }
.mh-titre .duo-q {
  left: var(--marge); right: var(--marge); top: 2.6rem;
  font-size: var(--fq); font-weight: 200; font-variation-settings: 'wdth' 92, 'wght' 200;
}
.mh-titre .axe-q { font-variation-settings: 'wdth' 84, 'wght' 200; }
.mh-titre .duo-r {
  left: var(--marge); bottom: 1rem;
  font-size: var(--t-h1); font-weight: 900; font-variation-settings: var(--plein); white-space: nowrap;
}
.mh-titre .axe-r { font-variation-settings: 'wdth' 62, 'wght' 900; }

/* la photo : le comité coupé sur l'arbre du roll-up (coupe à 62,81 % du tirage) ; la coupe tombe sur la couture de la page */
.mh-photo {
  --k: .6281;
  --pw: min(78cqw, calc((100cqh - var(--haut) - var(--bas) - 5rem - var(--off)) * .9697));
  --gap: clamp(.7rem, 3.2cqw, 2.4rem);
  --off: clamp(1.4rem, 5cqh, 3.6rem);
  position: absolute; top: var(--haut); bottom: var(--bas);
  left: calc(45cqw - var(--pw) * var(--k));
  width: var(--pw);
  display: flex; flex-direction: column; justify-content: center;
}
.mh-cadre { position: relative; aspect-ratio: 960 / 990; }
.mh-g, .mh-d, .mh-couleur { position: absolute; top: 0; height: 100%; }
.mh-g { left: 0; width: 62.81%; z-index: 1; }
.mh-d { left: 62.81%; width: 37.19%; z-index: 1; }
.mh-g-in, .mh-d-in { width: 100%; height: 100%; }
.mh-g img, .mh-d img, .mh-couleur img { width: 100%; height: 100%; object-fit: cover; }
.mh-couleur { left: 0; width: 100%; z-index: 2; clip-path: inset(0 0 0 0); }
.mh-fil {
  position: absolute; z-index: 3; left: 62.81%; top: -1.25rem; bottom: -1.25rem;
  width: var(--fil); margin-left: calc(var(--fil) / -2);
  background: var(--or); opacity: 0; pointer-events: none;
}
.mh-legende {
  position: relative; z-index: var(--z-texte);
  margin: .65rem 0 0 calc(var(--marge) - 45cqw + var(--pw) * var(--k));
  max-width: calc(100cqw - 2 * var(--marge));
  font-size: var(--t-petit); line-height: 1.35;
}
.mh-indice { display: none; }

/* bureau paysage : la question en une ligne au-dessus, le couple au centre, la réponse à droite, la légende à gauche */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .mh-scene { --fq: clamp(3rem, 1rem + 8.4vw, 8.125rem); --haut: calc(3.1rem + .95 * var(--fq) + 1.4rem); }
  .mh-sur { top: 1.6rem; }
  .mh-titre .duo-q { top: 3.1rem; right: auto; white-space: nowrap; }
  .mh-titre .duo-r {
    left: auto; right: var(--marge); bottom: 1.6rem;
    max-width: calc(55cqw - var(--marge) - var(--pw-b) * .3719 - var(--gap-b) - 1rem);
    white-space: normal; text-align: right; line-height: .86;
  }
  .mh-titre .axe-q { font-variation-settings: 'wdth' 88, 'wght' 200; }
  .mh-titre .axe-r { display: block; font-variation-settings: 'wdth' 80, 'wght' 900; }
  .mh-scene { --pw-b: min(calc((100cqh - var(--haut) - 1.6rem) * .9697), 44cqw); --gap-b: clamp(.7rem, 3.2cqw, 2.4rem); }
  .mh-photo {
    --pw: var(--pw-b);
    top: auto; bottom: 1.6rem; display: block;
  }
  .mh-legende {
    position: absolute; left: calc(-45cqw + var(--pw) * var(--k) + var(--marge)); bottom: 0;
    width: calc(45cqw - var(--pw) * var(--k) - var(--marge) - var(--gap) - 1.25rem); max-width: 17rem;
    margin: 0;
  }
  .mh-indice {
    display: flex; align-items: center; gap: .55em;
    position: absolute; z-index: var(--z-texte); right: var(--marge); top: calc(var(--haut) + .5rem);
    font-size: var(--t-petit); font-weight: 700; opacity: 0;
  }
  .mh-indice .fleche-bas { width: .8em; height: 1.1em; }
}

/* l'intro : une mesure 1 · 2 · 3 · tap (la photo est là dès t = 0, les moitiés arrivent d'un léger décalage) */
@media (prefers-reduced-motion: no-preference) {
  .mh-d { animation: mh-pose-guide var(--temps) var(--elan) 0ms both; }
  .mh-g { animation: mh-pose-suit calc(var(--temps) * 1.25) var(--prise) var(--temps) both; }
  .mh-titre .duo-q .l { animation: mh-monte calc(var(--temps) * 1.4) var(--elan) 60ms both; }
  .mh-titre .duo-r .l { animation: mh-monte calc(var(--temps) * 1.3) var(--prise) calc(var(--temps) * 3) both; }
  .mh-sur { animation: mh-glisse var(--temps) var(--elan) 0ms both; }
}
@keyframes mh-pose-guide { from { transform: translate(14px, -22px); } }
@keyframes mh-pose-suit  { from { transform: translate(-18px, 30px); } }
@keyframes mh-monte      { from { transform: translateY(104%); } }
@keyframes mh-glisse     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* le défilement recolle : celui qui guide d'abord, celle qui suit un temps plus tard (prise), puis la couleur depuis la couture */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mh-piste { view-timeline-name: --mh; view-timeline-inset: var(--barre-h) 0px; }
    .mh-d-in {
      animation-name: mh-d; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 0% contain 42%;
    }
    .mh-g-in {
      animation-name: mh-g; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 12% contain 56%;
    }
    .mh-fil {
      animation-name: mh-fil; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 0% contain 58%;
    }
    .mh-couleur {
      animation-name: mh-couleur; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 56% contain 90%;
    }
    .mh-titre .axe-q {
      animation-name: mh-axe-q; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 0% contain 70%;
    }
    .mh-titre .axe-r {
      animation-name: mh-axe-r; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 40% contain 92%;
    }
    .mh-indice {
      animation-name: mh-indice; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mh; animation-range: contain 0% contain 14%;
    }
  }
}
/* la légende s'efface quand la scène passe sous la barre ; au téléphone, elle suit aussi celle qui suit (jamais sur la photo) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mh-legende {
      animation-name: mh-leg-sort; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mh; animation-range: exit 50% exit 70%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (not ((min-width: 900px) and (min-aspect-ratio: 1/1))) {
    .mh-legende {
      animation-name: mh-leg, mh-leg-sort; animation-timing-function: var(--prise), linear;
      animation-timeline: --mh, --mh; animation-range: contain 12% contain 56%, exit 50% exit 70%;
    }
  }
}
@keyframes mh-leg      { from { translate: 0 var(--off); } }
@keyframes mh-leg-sort { to { opacity: 0; } }
@keyframes mh-d       { from { translate: var(--gap) 0; } }
@keyframes mh-g       { from { translate: calc(-1 * var(--gap)) var(--off); } }
@keyframes mh-fil     { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mh-couleur { from { clip-path: inset(0 37.19% 0 62.81%); } }
@keyframes mh-axe-q   { from { font-variation-settings: 'wdth' 118, 'wght' 200; } }
@keyframes mh-axe-r   { from { font-variation-settings: 'wdth' 50, 'wght' 900; } }
@keyframes mh-indice  { from { opacity: 1; } to { opacity: 0; } }

/* repli sans scroll-driven : pas de piste, le recollage se joue une fois à l'arrivée */
.sans-sd .mh-piste { height: auto; }
.sans-sd .mh-scene { position: relative; top: 0; }
.sans-sd .mh-d-in { transition: translate 700ms var(--elan) 600ms; }
.sans-sd .mh-g-in { transition: translate 800ms var(--prise) calc(600ms + var(--temps)); }
.sans-sd .mh-couleur { transition: clip-path 1100ms var(--elan) 2100ms; }
.sans-sd .mh-piste:not(.vu) .mh-d-in { translate: var(--gap) 0; }
.sans-sd .mh-piste:not(.vu) .mh-g-in { translate: calc(-1 * var(--gap)) var(--off); }
.sans-sd .mh-piste:not(.vu) .mh-couleur { clip-path: inset(0 37.19% 0 62.81%); }
@media (prefers-reduced-motion: reduce) {
  .mh-piste { height: auto; }
  .mh-scene { position: relative; top: 0; }
}

/* =================================================================== 2. PRÉSENTATION : la fiche d'identité */
.mh-histoire { padding-block: var(--pas); }
.mh-histoire-tete { padding-inline: var(--marge); }
.mh-histoire-tete .sur-titre { margin-bottom: 1rem; }
.mh-histoire-tete .duo-titre { max-width: 9.5em; }
.mh-recit { display: grid; gap: 2.25rem; margin-top: clamp(2.5rem, 7vw, 5.5rem); padding-inline: var(--marge); }
.mh-recit .citation { font-size: clamp(1.4rem, .95rem + 1.9vw, 2.75rem); }
.mh-c2 { padding-left: 10%; }

.mh-fiche { margin-top: clamp(3.5rem, 9vw, 7.5rem); padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--fond-inverse); }
/* téléphone : les citations ne traversent pas la couture (fond violet plein) ; la fiche, elle, garde sa couture */
@media (max-width: 899px) {
  .mh-histoire { background: var(--guide); }
}
.mh-fiche-titre { display: grid; grid-template-columns: var(--part-guide) var(--part-suit); align-items: baseline; margin-bottom: 1.4rem; }
.mh-fiche-titre .sur-titre { justify-self: end; padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); text-align: right; }
.mh-fiche-source { padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem); font-size: var(--t-petit); }
.mh-fiche-liste { border-top: 1px solid var(--filet); }
.fiche-l {
  position: relative;
  display: grid; grid-template-columns: var(--part-guide) var(--part-suit); align-items: baseline;
  padding-block: clamp(.9rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--filet);
}
.fiche-l dt {
  justify-self: end; padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); text-align: right;
  font-family: var(--f-display); font-weight: 200; font-variation-settings: 'wdth' 125, 'wght' 200;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.5rem); line-height: .95;
}
.fiche-l dt span { font-weight: 200; }
.fiche-l dd {
  margin: 0; padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 62, 'wght' 900;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.5rem); line-height: 1.02;
}
.fiche-l--nom dd { font-size: clamp(2rem, 1.2rem + 3.2vw, 4.5rem); font-variation-settings: var(--plein); }
.fiche-l--logo dd, .fiche-l--slogan dd { font-family: var(--f-texte); font-weight: 600; font-variation-settings: normal; font-size: var(--t-corps); line-height: 1.35; }
.fiche-l--annees dt { font-size: clamp(1.6rem, 1rem + 2.4vw, 3.5rem); }
.mh-an { display: inline-block; font-size: clamp(2.4rem, 1.4rem + 4vw, 6rem); line-height: .85; font-variation-settings: 'wdth' 50, 'wght' 900; }
.mh-an + .mh-an { margin-left: .18em; }
/* le logo, intact dans son disque, posé sur la couture */
.fiche-l--logo {
  --disque: clamp(6rem, 3.5rem + 8vw, 10rem);   /* ≥ 96 px : taille minimale du logo en disque (charte §05) */
  --m-haut: clamp(1rem, 2.5vw, 2rem);
  padding-top: calc(var(--disque) + var(--m-haut) * 2);
}
.fiche-l--logo dd { position: relative; }
.mh-logo {
  position: absolute; top: calc(-1 * (var(--disque) + var(--m-haut))); left: calc(var(--disque) / -2);
  width: var(--disque); aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--guide), 0 0 0 7px var(--or);
}
.mh-logo img { width: 100%; height: 100%; border-radius: 50%; }
.mh-philo { margin-top: clamp(3rem, 8vw, 6rem); padding-inline: var(--marge); font-size: clamp(1.3rem, .95rem + 1.5vw, 2.4rem); max-width: 52rem; }
@media (min-width: 900px) {
  .mh-histoire-tete { display: grid; grid-template-columns: var(--part-guide) var(--part-suit); padding: 0; }
  .mh-histoire-tete > * { grid-column: 1; padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); }
  .mh-recit { grid-template-columns: var(--part-guide) var(--part-suit); gap: 0; padding: 0; }
  .mh-c1 { padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); text-align: right; }
  .mh-c2 { padding: clamp(5rem, 11vw, 10rem) var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem); }
  .mh-c2 .citation-source { margin-top: 1.25rem; }
  .mh-philo { margin-left: var(--part-guide); padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem); max-width: calc(var(--part-suit) + 0px); }
}
/* le pas : la question vient de la gauche, la réponse de la droite, un temps plus tard */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fiche-l dt {
      animation-name: mh-pas-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 10% cover 34%;
    }
    .fiche-l dd {
      animation-name: mh-pas-d; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 35% cover 42%;
    }
    .mh-logo {
      animation-name: mh-logo; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes mh-pas-g { from { translate: -1.1em 0; opacity: 0; } }
@keyframes mh-pas-d { from { translate: 1.1em 0; opacity: 0; } }
@keyframes mh-logo  { from { rotate: -24deg; scale: .7; } }
.sans-sd .fiche-l dt, .sans-sd .fiche-l dd { transition: translate 700ms var(--elan), opacity 500ms var(--elan); }
.sans-sd .fiche-l dd { transition-delay: var(--temps); }
.sans-sd .mh-fiche:not(.vu) .fiche-l dt { translate: -1.1em 0; opacity: 0; }
.sans-sd .mh-fiche:not(.vu) .fiche-l dd { translate: 1.1em 0; opacity: 0; }

/* =================================================================== 3. LES DATES CLÉS : un pas par année */
.page-association { --deb: clamp(13rem, 9rem + 9vw, 17rem); }   /* le billet 2026 déborde d'autant sur le comité */
.mh-frise {
  position: relative; z-index: 2;
  padding-top: var(--pas);
}
.mh-frise-tete { padding-inline: var(--marge); }
.mh-frise-tete .sur-titre { margin-bottom: 1rem; }
.mh-frise-tete .duo-titre { max-width: 10em; }
.mh-frise-note { margin-top: 1.1rem; max-width: 30em; font-size: var(--t-petit); }
.mh-frise-corps { position: relative; margin-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
/* la couture de la frise : elle se coud au défilement (frame finale = cousue) */
.mh-couture {
  position: absolute; top: 0; bottom: 0; left: var(--part-suit);
  width: var(--fil); margin-left: calc(var(--fil) / -2);
  background: var(--or); transform-origin: 50% 0;
  pointer-events: none;
}
.pas-liste { position: relative; }
.pas {
  position: relative;
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: start;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.pas-annee {
  grid-row: 1;
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900;
  font-size: clamp(4rem, 2rem + 9vw, 11rem); line-height: .8; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.pas-recit { grid-row: 1; font-size: var(--t-petit); line-height: 1.42; hyphens: auto; -webkit-hyphens: auto; }
.pas--g .pas-annee { grid-column: 1; justify-self: end; padding: 0 clamp(1.4rem, 3vw, 3rem) 0 var(--marge); text-align: right; }
.pas--g .pas-recit { grid-column: 2; padding: .35rem var(--marge) 0 clamp(1.4rem, 3vw, 3rem); }
.pas--d .pas-annee { grid-column: 2; padding: 0 var(--marge) 0 clamp(1.4rem, 3vw, 3rem); }
.pas--d .pas-recit { grid-column: 1; padding: .35rem clamp(1.4rem, 3vw, 3rem) 0 var(--marge); }
.pas-evt + .pas-evt { margin-top: .8rem; }
.pas-mois {
  display: block; margin-bottom: .2rem;
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
}
.pas-mois sup { font-size: .8em; }
/* le nœud de l'année, sur la couture */
.pas-noeud {
  position: absolute; z-index: 1; left: var(--part-suit); top: calc(clamp(2.25rem, 5vw, 4.5rem) + .1em);
  width: 2rem; height: 2rem; margin-left: -1rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--or); color: var(--encre);
  font: 900 1.15rem/1 var(--f-display); font-variation-settings: var(--noeud);
  padding-bottom: .12em;
}
/* 2016 : les chiffres de l'affiche */
.pas-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; margin-top: 1.1rem; }
.pas-chiffres li { line-height: 1.15; white-space: nowrap; }
.pas-chiffres strong { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: .9; margin-right: .12em; }
.pas-chiffres li:first-child { flex-basis: 100%; }
.pas-chiffres li:first-child strong { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
/* 2020 : 1 · 2 · 3 */
.pas-evt--tour { font-weight: 600; }
.pas-tour { display: grid; gap: .25rem; margin-top: .9rem; font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.05; }
.pas-tour span { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; margin-right: .3em; }
/* les couples d'artistes : le y posé sur la couture de la frise */
.pas-couple, .pas-couples { grid-column: 1 / -1; margin-top: clamp(1.75rem, 4vw, 3rem); }
.pas-couples { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.pas-couple .couple-coupe, .pas-couples .couple-coupe { padding-block: .05em; }
/* les photos coupées : la coupe tombe sur la couture ; elles se recollent au toucher */
.pas-photo { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 3.5rem); }
.pas-photo .photo-duo-cadre { width: var(--w); margin-left: calc(var(--part-suit) - var(--w) * var(--k)); }
.pas-photo--2019 { --w: min(88vw, 52rem); --k: .4875; }
.pas-photo--2024 { --w: min(94vw, 58rem); --k: .5; }
.pas-photo figcaption { padding-inline: var(--marge); }
.pas-legende-ac { display: block; }
.pas-photo:focus-visible { outline-offset: 6px; }
/* 2024 : la phrase du retour */
.pas-retour { margin-top: 1.4rem; font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300; font-size: clamp(1.2rem, .95rem + 1vw, 1.9rem); line-height: 1.12; hyphens: manual; }
.pas-retour cite { display: block; margin-top: .5rem; font-family: var(--f-texte); font-size: var(--t-mini); font-style: normal; font-weight: 700; letter-spacing: .04em; font-variation-settings: normal; }
.pas-evt--suite { font-weight: 700; }
.pas-lien { margin-top: 1.1rem; }
.pas--d .pas-lien .lien-pas { justify-content: flex-end; }
/* 2026 */
.pas-evt--une { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300; font-size: clamp(1.2rem, .95rem + 1vw, 1.9rem); line-height: 1.12; hyphens: manual; }
.pas-2026 { display: grid; gap: .65rem; margin-top: 1.1rem; }
.pas-2026 li { font-weight: 700; line-height: 1.25; }
.pas-2026 .pas-mois { font-weight: 700; }
.pas--2026 { padding-bottom: 0; }

@media (min-width: 900px) {
  .mh-frise-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .mh-frise-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(1.4rem, 3vw, 3rem); }
  .mh-frise-tete .sur-titre { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: start; padding: 1.2rem clamp(1.4rem, 3vw, 3rem) 0 0; text-align: right; }
  .pas-recit { max-width: 34rem; font-size: var(--t-corps); }
  .pas--d .pas-recit { justify-self: end; text-align: right; }
  .pas-noeud { width: 2.6rem; height: 2.6rem; margin-left: -1.3rem; font-size: 1.5rem; top: calc(clamp(2.25rem, 5vw, 4.5rem) + .6em); }
}
/* les pas : l'année sort de la couture vers son côté ; le nœud se pose quand elle passe au milieu de l'écran */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mh-couture {
      animation-name: mh-coud; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 50% exit 50%;
    }
    .pas--g .pas-annee {
      animation-name: mh-sort-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 15% cover 40%;
    }
    .pas--d .pas-annee {
      animation-name: mh-sort-d; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 15% cover 40%;
    }
    .pas-noeud {
      animation-name: mh-noeud; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: cover 40% cover 50%;
    }
  }
}
@keyframes mh-coud    { from { scale: 1 0; } }
@keyframes mh-sort-g  { from { translate: .45em 0; clip-path: inset(-10% -10% -10% 100%); } to { clip-path: inset(-10% -10% -10% -10%); } }
@keyframes mh-sort-d  { from { translate: -.45em 0; clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
@keyframes mh-noeud   { from { scale: 0; rotate: -90deg; } }
.sans-sd .pas-annee { transition: translate 700ms var(--elan), clip-path 700ms var(--elan); }
.sans-sd .pas-noeud { transition: scale 400ms var(--prise) 300ms; }
.sans-sd .pas--g:not(.vu) .pas-annee { translate: .45em 0; clip-path: inset(-10% -10% -10% 100%); }
.sans-sd .pas--d:not(.vu) .pas-annee { translate: -.45em 0; clip-path: inset(-10% 100% -10% -10%); }
.sans-sd .pas:not(.vu) .pas-noeud { scale: 0; }

/* le billet 2026 : le pas suivant, qui déborde de la frise sur le comité */
.mh-billet {
  --souche: 34%;
  position: relative; z-index: 3;
  margin: clamp(1.5rem, 4vw, 3rem) var(--marge) calc(-1 * var(--deb));
  max-width: 54rem;
}
.mh-billet .billet-talon .sur-titre { margin-bottom: .6rem; }
.mh-billet .billet-titre { font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem); }
.mh-billet-date { display: flex; flex-direction: column; }
.mh-billet .billet-date { font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.mh-billet .cta-salle:not(:empty)::before { content: "· "; }
.mh-billet .cta-salle { font-size: inherit; font-weight: inherit; }
.mh-billet .billet-souche { translate: -10px 8px; rotate: -3deg; transform-origin: 100% 0; }
@media (max-width: 599px) {
  .mh-billet .billet-souche { transform-origin: 0 100%; translate: -4px -12px; rotate: -2.5deg; }
}
@media (min-width: 900px) {
  /* la perforation tombe sur la couture (45 vw) */
  .mh-billet { --souche: calc(45vw - 9rem); margin-left: 9rem; margin-right: var(--marge); max-width: none; }
}
@media (min-width: 1280px) {
  .mh-billet { margin-right: 12rem; }
}

/* =================================================================== 4. LE COMITÉ : noir comme les t-shirts */
.mh-comite {
  position: relative; z-index: 1;
  padding: calc(var(--deb) + clamp(2.5rem, 6vw, 5rem)) 0 var(--pas);
}
/* la couture continue dans le noir */
.mh-comite::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--part-suit);
  width: var(--fil); margin-left: calc(var(--fil) / -2);
  background: var(--or); opacity: .9; pointer-events: none;
}
.mh-ruban { overflow: clip; margin-bottom: clamp(2.5rem, 6vw, 5rem); font-family: var(--f-display); line-height: .92; }
.mh-ruban-l { white-space: nowrap; font-size: clamp(3.5rem, 1.5rem + 10vw, 12rem); }
.mh-ruban-l span { display: inline-block; }
.mh-ruban-l--q { font-weight: 200; font-variation-settings: 'wdth' 130, 'wght' 200; }
.mh-ruban-l--r { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; translate: -30% 0; }
.mh-ruban-l--q span { translate: -8% 0; }
.mh-comite-tete { padding-inline: var(--marge); }
.mh-comite-tete .sur-titre { margin-bottom: 1rem; }
.mh-comite-tete .duo-titre { max-width: 10em; }
.mh-banniere { margin-top: 1.4rem; max-width: 30em; font-size: var(--t-corps); }
.mh-banniere .sur-titre { margin-bottom: .35rem; }
.mh-roles { margin-top: clamp(3rem, 8vw, 6rem); display: grid; gap: clamp(2.75rem, 7vw, 5.5rem); }
.mh-role-titre {
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: baseline;
  margin-bottom: 1.25rem;
  font-family: var(--f-display); font-size: clamp(1.5rem, 1rem + 2vw, 3rem); line-height: .95;
}
.mh-role-titre .duo-q { justify-self: end; padding: 0 clamp(.9rem, 2.4vw, 2.5rem) 0 var(--marge); font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300; }
.mh-role-titre .duo-r { padding: 0 var(--marge) 0 clamp(.9rem, 2.4vw, 2.5rem); }
.role {
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: baseline;
  padding-block: .55rem .65rem;
  border-top: 1px solid var(--filet);
}
.role dt {
  grid-row: 1 / span 3; justify-self: end; padding: 0 clamp(.9rem, 2.4vw, 2.5rem) 0 var(--marge); text-align: right;
  font-size: var(--t-petit); line-height: 1.3; font-weight: 500;
}
.role dd {
  grid-column: 2; margin: 0; padding: 0 var(--marge) 0 clamp(.9rem, 2.4vw, 2.5rem);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900;
  text-transform: uppercase; line-height: 1;
}
.mh-role-groupe--decide .role dd { font-size: clamp(1.55rem, 1rem + 2.4vw, 3.4rem); }
.mh-role-groupe--decide .role dt { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; font-size: clamp(1.05rem, .85rem + .9vw, 1.6rem); line-height: 1.1; }
.mh-role-groupe--execute .role dd { font-size: clamp(1.25rem, .95rem + 1.3vw, 2.2rem); }
.role dd + dd { margin-top: .2em; }
.mh-controle { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); }
.mh-controle { padding: 0 var(--marge) 0 calc(var(--part-suit) + clamp(.9rem, 2.4vw, 2.5rem)); display: block; font-weight: 700; font-size: var(--t-corps); }
.mh-comite-note { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding: 0 var(--marge) 0 calc(var(--part-suit) + clamp(.9rem, 2.4vw, 2.5rem)); max-width: calc(var(--part-suit) + 36rem); font-size: var(--t-petit); }
@media (min-width: 900px) {
  .mh-comite-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .mh-comite-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(.9rem, 2.4vw, 2.5rem); }
  .mh-comite-tete .sur-titre { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: start; padding: 1.2rem clamp(.9rem, 2.4vw, 2.5rem) 0 0; text-align: right; }
  .mh-roles { grid-template-columns: 1fr; }
}
/* les deux lignes de prénoms glissent en sens contraires, comme deux danseurs qui se croisent */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mh-ruban-l--q span {
      animation-name: mh-ruban-q; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    .mh-ruban-l--r {
      animation-name: mh-ruban-r; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes mh-ruban-q { from { translate: -42% 0; } to { translate: 6% 0; } }
@keyframes mh-ruban-r { from { translate: 4% 0; } to { translate: -46% 0; } }

/* =================================================================== 5. LES BUTS : 1 · 2 · 3 · tap */
.mh-buts { padding-block: var(--pas); }
.mh-buts-tete { padding-inline: var(--marge); }
.mh-buts-tete .sur-titre { margin-bottom: 1rem; }
.mh-buts-tete .duo-titre { max-width: 9em; }
.mh-buts-forme { margin-top: 1.3rem; max-width: 36em; font-size: var(--t-petit); }
.mh-mesure {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(90deg, transparent calc(var(--part-suit) - var(--fil) / 2), var(--or) 0 calc(var(--part-suit) + var(--fil) / 2), transparent 0);
}
.temps {
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: start;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
}
.temps-n {
  justify-self: end; padding: 0 clamp(1rem, 2.6vw, 2.75rem) 0 var(--marge);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900;
  font-size: clamp(4.5rem, 2.5rem + 9vw, 12rem); line-height: .78;
}
.temps--tap .temps-n { font-weight: 200; font-variation-settings: 'wdth' 130, 'wght' 200; font-size: clamp(3rem, 1.6rem + 6vw, 8rem); }
.temps p { padding: .2rem var(--marge) 0 clamp(1rem, 2.6vw, 2.75rem); max-width: 38rem; font-size: var(--t-corps); line-height: 1.42; hyphens: auto; -webkit-hyphens: auto; }
.temps--1 p { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 105, 'wght' 300; font-size: clamp(1.15rem, .9rem + 1.1vw, 1.9rem); line-height: 1.16; }
.mh-buts-pied { margin-top: clamp(2.5rem, 6vw, 4rem); padding: 0 var(--marge) 0 calc(var(--part-suit) + clamp(1rem, 2.6vw, 2.75rem)); font-size: var(--t-petit); }
@media (min-width: 900px) {
  .mh-buts-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .mh-buts-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(1rem, 2.6vw, 2.75rem); }
  .mh-buts-tete .sur-titre { grid-column: 1; grid-row: 1 / span 3; justify-self: end; align-self: start; padding: 1.2rem clamp(1rem, 2.6vw, 2.75rem) 0 0; text-align: right; }
}
/* une mesure : chaque but tombe sur son temps (classe posée par pages/association.js à l'entrée) */
@media (prefers-reduced-motion: no-preference) {
  .mesure-prete .mh-buts:not(.en-mesure) .temps-n { translate: 0 -.3em; opacity: 0; }
  .mesure-prete .mh-buts:not(.en-mesure) .temps p { clip-path: inset(0 0 100% 0); }
  .mh-buts.en-mesure .temps-n { animation: mh-temps var(--temps) var(--prise) calc(var(--i) * var(--temps)) both; }
  .mh-buts.en-mesure .temps p { animation: mh-texte calc(var(--temps) * 1.4) var(--elan) calc(var(--i) * var(--temps) + 120ms) both; }
}
@keyframes mh-temps { from { translate: 0 -.3em; opacity: 0; } 60% { opacity: 1; } }
@keyframes mh-texte { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10% 0); } }

/* =================================================================== 6. LE MOT DU COMITÉ (bloc vivant, vide) */
/* taille du titre : composants.css §15 (agrandi pour tenir face aux h2) */
.mh-mot .bloc-vivant-vide { min-height: clamp(12rem, 8rem + 12vw, 20rem); }

/* =================================================================== 7. PARTENAIRES CITÉS */
.mh-partenaires { padding: var(--pas) var(--marge); }
.mh-part-titre { font-family: var(--f-display); font-size: var(--t-h2); line-height: .9; }
.mh-part-titre .duo-q, .mh-part-titre .duo-r { display: block; }
.mh-part-liste { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.mh-part-nom { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: clamp(2rem, 1.2rem + 3.6vw, 5rem); line-height: .92; text-transform: uppercase; }
.mh-part-ou { display: block; margin-top: .35rem; font-size: var(--t-petit); }
.mh-part-note { margin-top: 1.5rem; font-size: var(--t-petit); }
.mh-part-cta { margin-top: 2rem; }
@media (min-width: 900px) {
  .mh-partenaires { display: grid; grid-template-columns: var(--part-suit) 1fr; padding-inline: 0; }
  .mh-part-titre { grid-column: 1; grid-row: 1 / span 4; justify-self: end; text-align: right; padding: 0 clamp(1rem, 3vw, 3rem) 0 var(--marge); }
  .mh-part-liste, .mh-part-note, .mh-part-cta { grid-column: 2; padding: 0 var(--marge) 0 clamp(1rem, 3vw, 3rem); }
  .mh-part-liste { margin-top: .4rem; }
}

/* =================================================================== RENDU DIFFÉRÉ (§14.2) : la page fait ~17 000 px
   Sans cela, le premier rendu compose toute la page d'un coup (≈ 200 ms de style + mise en page à CPU 4×), et, quand le
   HTML arrive en deux paquets, la seconde moitié tombe dans une tâche après le LCP. Les années de la frise et les
   chapitres qui suivent ne sont composés qu'à l'approche de l'écran. Les <li> gardent leur boîte (sujets des
   timelines --heure-N de la barre) ; seul leur contenu est sauté. contain-intrinsic-block-size « auto » : la hauteur
   réelle est retenue une fois vue (aucun saut au retour). Mesure des axes : main.js attend le rendu du bloc. */
@supports (content-visibility: auto) {
  .pas-liste > .pas { content-visibility: auto; contain-intrinsic-block-size: auto 40rem; }
  .mh-comite { content-visibility: auto; contain-intrinsic-block-size: auto 140rem; }
  .mh-buts { content-visibility: auto; contain-intrinsic-block-size: auto 110rem; }
  .mh-mot { content-visibility: auto; contain-intrinsic-block-size: auto 32rem; }
  .mh-partenaires { content-visibility: auto; contain-intrinsic-block-size: auto 38rem; }
}

/* =================================================================== TRÈS PETIT ÉCRAN / ZOOM 400–500 % : une seule colonne, la couture reste en fond */
@media (max-width: 21.9rem) {
  .mh-titre .duo-q { font-size: 3rem; font-variation-settings: 'wdth' 72, 'wght' 200; }
  .mh-titre .duo-r { font-size: 3rem; white-space: normal; }
  /* la photo entière dans l'écran, la coupe (62,81 % du tirage) pile sur la couture (45cqw) : largeur = 45cqw / 0,6281,
     bord gauche à 0 (à 92cqw, elle débordait de 37 px à gauche : 14 % du comité hors champ au zoom 500 %) */
  .mh-photo { --pw: calc(45cqw / var(--k)); margin-left: 0; }
  /* le hero passe dans le flux : la scène collante (34 rem de haut) ne tient pas dans un écran de 180 px ; titre, puis photo
     et légende, dans l'ordre du DOM ; plus rien ne se recouvre ni ne sort de la scène */
  .mh-piste { height: auto; }
  .mh-scene { position: relative; top: 0; height: auto; min-height: 0; container-type: inline-size; padding: 2.6rem 0 1.25rem; }
  .mh-titre { position: static; }
  .mh-titre .duo-q, .mh-titre .duo-r { position: relative; inset: auto; padding-inline: var(--marge); }
  .mh-titre .duo-r { margin-top: .5rem; }
  .mh-photo { position: relative; top: auto; bottom: auto; margin-top: 1.5rem; }
  .mh-legende { animation-name: none; }
  .fiche-l, .mh-fiche-titre, .pas, .role, .mh-role-titre, .temps { grid-template-columns: 1fr; }
  .fiche-l dt, .fiche-l dd, .mh-fiche-titre > *, .pas .pas-annee, .pas .pas-recit, .role dt, .role dd, .mh-role-titre > *, .temps-n, .temps p {
    grid-column: 1; grid-row: auto; justify-self: start; text-align: left; padding-inline: var(--marge);
  }
  .fiche-l dt, .pas-annee { font-size: 3rem; }
  .pas-noeud { display: none; }
  .mh-logo { left: 0; }
  .pas-photo .photo-duo-cadre { margin-left: var(--marge); width: calc(100% - 2 * var(--marge)); }
  .mh-billet { --souche: 100%; }
  .mh-controle, .mh-comite-note, .mh-buts-pied { padding-left: var(--marge); }
  .mh-ruban-l { font-size: 3rem; }
  .temps-n { font-size: 3.5rem; }
}

/* =================================================================== CHARTE v1.0 (05.10.2026)
   La photo du comité est une photo réelle, en couleur, posée : plus de moitiés teintées, plus de recollage, plus de
   piste de 80 vh. (Les règles .mh-g / .mh-d / .mh-fil ci-dessus n'ont plus d'élément : sans effet.) */
.mh-piste { height: auto; }
.mh-scene { position: relative; top: 0; }
.mh-couleur, .sans-sd .mh-piste:not(.vu) .mh-couleur { clip-path: none; animation: none; transition: none; }
.mh-fil { display: none; }
.mh-legende { animation: none; translate: none; opacity: 1; }
.mh-titre .axe-q, .mh-titre .axe-r { animation: none; }
/* le logo de la fiche : le disque de la charte (blanc, filet or 1/60), ni anneau ajouté, ni rotation */
.mh-logo { box-shadow: none; border-radius: 0; animation: none; }