/* pages/association.css — /association/, « L’association » (ex-« La maison »). Un mouvement par chapitre :
   1 Qui te reçoit ?     le comité devant le roll-up, en couleur (posé : charte v1.0, en bas de fichier)
   2 Qui on est          quelques phrases, le lien vers /souvenirs/, puis le billet « Le pas suivant » (tools/agenda.cjs)
                         (11.10.2026 : la frise « Les dates clés » est retirée ; l'histoire année par année est sur /souvenirs/)
   3 Le comité           les prénoms de la bannière défilent en sens contraires (scroll-driven, doublon aria-hidden) ;
                         les rôles en grille compacte (deux colonnes au téléphone, quatre au bureau)
   4 Les buts            1 · 2 · 3 · tap : chaque but tombe sur un temps (une mesure, déclenchée à l'entrée)
   5 Le mot du comité    bloc vivant, livré vide : aucun mouvement
   6 Les partenaires
   Règles : le style de base EST la frame finale ; scroll-driven en forme longue sous double garde ; repli .sans-sd. */

/* =================================================================== 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 + calc(14 * var(--vw)), 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 + calc(8.4 * var(--vw)), 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. QUI ON EST (11.10.2026)
   Quelques phrases au ton du site (FAITS §1, §5), le lien vers /souvenirs/ ; puis le pas suivant (un billet, sans débord). */
.mh-histoire { padding-block: calc(var(--pas) * .7) 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: 1rem; max-width: calc(34rem + 2 * var(--marge));
  margin-top: clamp(1.5rem, calc(4 * var(--vw)), 3rem); padding-inline: var(--marge);
  font-size: var(--t-corps); line-height: 1.45;
}
.mh-une { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300; font-size: clamp(1.45rem, 1rem + calc(1.9 * var(--vw)), 2.5rem); line-height: 1.1; }
.mh-recit-lien .lien-pas { min-height: 44px; }
@media (min-width: 900px) {
  /* le récit monte en face du titre, de l'autre côté de la couture : pas de demi-écran vide */
  .mh-histoire { display: grid; grid-template-columns: var(--part-guide) var(--part-suit); align-items: start; }
  .mh-histoire-tete { grid-column: 1; justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.5rem) 0 var(--marge); }
  .mh-histoire-tete .duo-titre { margin-left: auto; }
  .mh-recit { grid-column: 2; margin-top: 2.2rem; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.5rem); }
  .mh-histoire .mh-choix { grid-column: 1 / -1; }
}

/* le pas suivant : le billet du prochain événement (pré-rendu par tools/agenda.cjs, bloc « association ») */
.mh-billet {
  --souche: 34%;
  position: relative; z-index: 3;
  margin: clamp(2.5rem, calc(6 * var(--vw)), 5rem) var(--marge) 0;
  max-width: 54rem;
}
.mh-billet .billet-talon .sur-titre { margin-bottom: .6rem; }
.mh-billet .billet-titre { font-size: clamp(1.6rem, 1.1rem + calc(2 * var(--vw)), 3rem); }
.mh-billetterie { margin-top: .9rem; }   /* « Billetterie ↗ » (Weezevent), sous « Je participe » (la page de l'événement) */
.mh-billet-date { display: flex; flex-direction: column; }
.mh-billet .billet-date { font-size: clamp(3.5rem, 2rem + calc(6 * var(--vw)), 7.5rem); }
.mh-billet .billet-souche { translate: -10px 8px; rotate: -3deg; transform-origin: 100% 0; }
.mh-agenda { margin: 2rem var(--marge) 0; }
@media (max-width: 599px) {
  .mh-billet .billet-souche { transform-origin: 0 100%; translate: -4px -12px; rotate: -2.5deg; }
  .mh-billet .billet-date { font-size: 3.25rem; }
  .mh-billet-date { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; }
}
@media (min-width: 900px) {
  /* la perforation tombe sur la couture (45 vw) */
  .mh-billet { --souche: calc(calc(45 * var(--vw)) - 9rem); margin-left: 9rem; margin-right: var(--marge); max-width: none; }
}
@media (min-width: 1280px) {
  .mh-billet { margin-right: 12rem; }
}

/* =================================================================== 3. LE COMITÉ : noir comme les t-shirts ; une grille compacte */
.mh-comite { position: relative; z-index: 1; padding: clamp(2.5rem, calc(6 * var(--vw)), 5rem) 0 var(--pas); }
.mh-ruban { overflow: clip; margin-bottom: clamp(1.75rem, calc(5 * var(--vw)), 4rem); font-family: var(--f-display); line-height: .92; }
.mh-ruban-l { white-space: nowrap; font-size: clamp(2.75rem, 1.2rem + calc(8 * var(--vw)), 10rem); }
.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-roles { display: grid; gap: 1.75rem; margin-top: clamp(1.75rem, calc(5 * var(--vw)), 4rem); padding-inline: var(--marge); }
.mh-role-titre {
  margin-bottom: .6rem;
  font: 700 var(--t-mini)/1.3 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or);
}
.mh-role-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.role { padding-block: .6rem .7rem; border-top: 1px solid var(--filet); min-width: 0; }
/* le rôle en Epilogue (pas de délié ≤ 300 sous 20 px : les accents s'y perdent), le nom en plein */
.role dt { margin-bottom: .3rem; font-size: var(--t-mini); line-height: 1.3; font-weight: 600; color: var(--texte-2); }
.role dd, .mh-controle {
  margin: 0;
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900;
  font-size: clamp(1.25rem, 1rem + calc(.6 * var(--vw)), 1.75rem); line-height: 1.04; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.role dd + dd { margin-top: .15em; }
.mh-controle { padding-top: .6rem; border-top: 1px solid var(--filet); }
.mh-comite-note { margin-top: 1.5rem; padding-inline: var(--marge); 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, calc(2.4 * var(--vw)), 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, calc(2.4 * var(--vw)), 2.5rem) 0 0; text-align: right; }
  .mh-roles { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  .mh-role-groupe:last-child { grid-column: 1 / -1; }
}
/* 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; } }

/* =================================================================== 4. LES BUTS : 1 · 2 · 3 · tap */
.mh-buts { padding-block: calc(var(--pas) * .7) 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: 1rem; max-width: 36em; font-size: var(--t-petit); }
.mh-mesure { position: relative; margin-top: clamp(1.5rem, calc(5 * var(--vw)), 4rem); }
.temps {
  display: grid; grid-template-columns: 3.4rem 1fr; align-items: start;
  padding: .7rem var(--marge) .7rem 0;
}
.temps-n {
  justify-self: end; padding-right: .8rem;
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900;
  font-size: 2.6rem; line-height: .78; color: var(--or);
}
.temps--tap .temps-n { font-weight: 200; font-variation-settings: 'wdth' 100, 'wght' 200; font-size: 1.6rem; line-height: 1; color: var(--texte); }
.temps p { max-width: 38rem; font-size: var(--t-corps); line-height: 1.42; }
.mh-buts-pied { margin-top: 1rem; padding-inline: var(--marge); font-size: var(--t-petit); }
.mh-buts-statuts { margin-top: .5rem; padding-inline: var(--marge); }   /* 12.10.2026 : le PDF des statuts, comme sur l'ancien site */
@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, calc(2.6 * var(--vw)), 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, calc(2.6 * var(--vw)), 2.75rem) 0 0; text-align: right; }
  /* au bureau : le temps contre la couture, le but de l'autre côté */
  .temps { grid-template-columns: var(--part-suit) var(--part-guide); padding: 1rem 0; }
  .temps-n { padding: 0 clamp(1rem, calc(2.6 * var(--vw)), 2.75rem) 0 var(--marge); font-size: clamp(3rem, 1.5rem + calc(4 * var(--vw)), 6.5rem); }
  .temps--tap .temps-n { font-size: clamp(2rem, 1rem + calc(2.6 * var(--vw)), 4.5rem); }
  .temps p { padding: .2rem var(--marge) 0 clamp(1rem, calc(2.6 * var(--vw)), 2.75rem); }
  .temps--1 p { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 105, 'wght' 300; font-size: clamp(1.15rem, .9rem + calc(1.1 * var(--vw)), 1.9rem); line-height: 1.16; }
  .mh-buts-pied, .mh-buts-statuts { padding-left: calc(var(--part-suit) + clamp(1rem, calc(2.6 * var(--vw)), 2.75rem)); }
}
/* 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); } }

/* =================================================================== 5. 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(7rem, 4rem + calc(12 * var(--vw)), 20rem); }
@media (max-width: 899px) {
  .mh-mot > header { padding-block: 2.5rem; }
  .mh-mot .bloc-vivant-corps { padding-block: 2.5rem; }
}

/* =================================================================== 6. LES PARTENAIRES */
.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; }
/* 11.10.2026 : au téléphone, la question suit le réglage commun des h2 (délié wdth 78, composants.css §6) */
@media (max-width: 599px) { .mh-part-titre { --delie: 'wdth' 78, 'wght' 200; } }
.mh-part-liste { display: grid; gap: 1.1rem; margin-top: clamp(1.5rem, calc(5 * var(--vw)), 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(1.75rem, 1.1rem + calc(3.2 * var(--vw)), 5rem); line-height: .92; text-transform: uppercase; }
.mh-part-ou { display: block; margin-top: .3rem; font-size: var(--t-petit); }
.mh-part-note { margin-top: 1.25rem; font-size: var(--t-petit); }
.mh-part-cta { margin-top: 1.5rem; }
@media (max-width: 899px) {
  .mh-partenaires { padding-block: 2.75rem; }
}
@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, calc(3 * var(--vw)), 3rem) 0 var(--marge); }
  .mh-part-liste, .mh-part-note, .mh-part-cta { grid-column: 2; padding: 0 var(--marge) 0 clamp(1rem, calc(3 * var(--vw)), 3rem); }
  .mh-part-liste { margin-top: .4rem; }
}

/* =================================================================== TÉLÉPHONE : les marges des chapitres, resserrées (11.10.2026) */
@media (max-width: 899px) {
  .mh-histoire { padding-block: 2.5rem 2.75rem; }
  .mh-comite { padding-block: 2.25rem 2.75rem; }
  .mh-buts { padding-block: 2.5rem 2.5rem; }
}

/* =================================================================== RENDU DIFFÉRÉ (§14.2) : les chapitres sous le premier écran
   ne sont composés qu'à l'approche de l'écran. 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. (11.10.2026 : la frise est retirée, la page
   fait environ 5 500 px au téléphone ; les estimations suivent.) */
@supports (content-visibility: auto) {
  .mh-comite { content-visibility: auto; contain-intrinsic-block-size: auto 64rem; }
  .mh-buts { content-visibility: auto; contain-intrinsic-block-size: auto 40rem; }
  .mh-mot { content-visibility: auto; contain-intrinsic-block-size: auto 22rem; }
  .mh-partenaires { content-visibility: auto; contain-intrinsic-block-size: auto 24rem; }
}

/* =================================================================== 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; }
  .mh-billet { --souche: 100%; }
  .mh-ruban-l { font-size: 2.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; }

/* 06.10.2026 : « commence », en délié large (wdth 140), était plus large que sa colonne (800 px pour 718 au bureau,
   365 pour 343 au téléphone) et se faisait rogner. Le délié de ce titre se resserre à 112 : il tient aux deux tailles.
   (11.10.2026 : le titre devient « Depuis quand ? / 2016. » ; la règle reste, sans effet gênant) */
/* 11.10.2026 : au téléphone (< 600 px), la question suit le réglage commun des h2 (composants.css §6, wdth 78) */
@media (min-width: 600px) {
  #t-histoire .duo-q { font-variation-settings: 'wdth' 112, 'wght' 200; }
}