/* pages/soutenir.css — /soutenir/, « Membres · Soutenir ». Un mouvement par chapitre :
   1 Tu soutiens ?        la carte « Toi | + 1 invité·e » se recolle, passe en couleur, puis les cartes Groove et VIP
                          s'ouvrent en éventail derrière elle (scroll-driven, 80 vh)
   2 Les cartes           la donne : chaque carte arrive à son pas, légèrement tournée (view(), courte)
   3 Pourquoi             la photo de groupe coupée se recolle en couleur (composant, ≥ 60 vh)
   4 Le don               un petit montant, un grand impact : le 5 grandit au défilement et déborde sur l'adhésion
   5 L'adhésion           aucun mouvement continu : la question | la réponse, un y sur la couture par champ valide
   Règles : le style de base EST la frame finale ; scroll-driven en forme longue sous double garde ; repli .sans-sd. */

/* =================================================================== 1. TU SOUTIENS ? */
.sh-hero { overflow: clip; }
.sh-piste { position: relative; height: calc(100svh - var(--bandeau-h) - var(--barre-h) + 80vh); }
.sh-scene {
  --fq: clamp(3rem, 1.25rem + calc(14 * var(--vw)), 8.125rem);
  --fr: clamp(2.25rem, 1.2rem + calc(4.6 * var(--vw)), 6rem);
  --haut: calc(2.6rem + 1.8 * var(--fq) + .6rem);
  --bas: calc(1rem + 1.8 * var(--fr) + .9rem);
  position: sticky; top: var(--barre-h);
  height: calc(100svh - var(--bandeau-h) - var(--barre-h)); min-height: 34rem;
  container-type: size;              /* sans padding : 100cqw = la scène entière, la couture est à 45cqw */
  overflow: clip;
}
.sh-sur { position: absolute; z-index: var(--z-texte); left: var(--marge); top: .95rem; }
.sh-titre { position: absolute; inset: 0; z-index: var(--z-texte); font-family: var(--f-display); line-height: .9; pointer-events: none; }
.sh-titre .duo-q, .sh-titre .duo-r { position: absolute; display: block; overflow: clip; overflow-clip-margin: .1em; padding-bottom: .04em; }
.sh-titre .l { display: block; }
.sh-titre .duo-q {
  left: var(--marge); right: var(--marge); top: 2.6rem;
  font-size: var(--fq); font-weight: 200; font-variation-settings: 'wdth' 96, 'wght' 200;
}
.sh-titre .axe-q { --q-de: 106; font-variation-settings: 'wdth' 86, 'wght' 200; }
.sh-titre .duo-r {
  left: var(--marge); right: var(--marge); bottom: 1rem;
  font-size: var(--fr); font-weight: 900; font-variation-settings: var(--plein); line-height: .9;
}
.sh-titre .axe-r { font-variation-settings: 'wdth' 70, 'wght' 900; }

/* le jeu de cartes : la carte de face, coupée sur l'arbre du roll-up (52,67 %), sa coupe sur la couture de la page */
.sh-jeu {
  --k: .5267;
  --cw: min(58cqw, calc((100cqh - var(--haut) - var(--bas) - 7rem) / 1.425));
  --gap: clamp(.55rem, 2.4cqw, 1.6rem);
  --off: clamp(1rem, 3.4cqh, 2.6rem);
  position: absolute; left: 0; right: 0; top: var(--haut); bottom: var(--bas);
  display: flex; flex-direction: column; justify-content: center;
}
.sh-fig { width: var(--cw); margin-left: calc(45cqw - var(--cw) * var(--k)); }
.sh-pile { position: relative; }
.sh-carte {
  --h-tete: calc(var(--cw) * .2);
  --h-photo: calc(var(--cw) * 1.0552);
  --h-pied: calc(var(--cw) * .17);
  position: relative;
  width: var(--cw); height: calc(var(--h-tete) + var(--h-photo) + var(--h-pied));
}
/* la face : deux demi-cartes qui se tiennent */
.sh-face { z-index: 3; }
.sh-moitie { position: absolute; top: 0; bottom: 0; z-index: 1; }
.sh-moitie--g { left: 0; width: 52.67%; }
.sh-moitie--d { left: 52.67%; width: 47.33%; }
.sh-m-in {
  height: 100%; display: grid; grid-template-rows: var(--h-tete) var(--h-photo) var(--h-pied);
  overflow: clip;
  box-shadow: 0 1.2rem 2.4rem var(--ombre);
}
.sh-moitie--g .sh-m-in { border-radius: var(--rayon) 0 0 var(--rayon); }
.sh-moitie--d .sh-m-in { border-radius: 0 var(--rayon) var(--rayon) 0; }
.sh-tete {
  display: flex; align-items: center; gap: .55em;
  padding: 0 calc(var(--cw) * .045);
  background: var(--encre); color: var(--texte);
  font-size: calc(var(--cw) * .052); line-height: 1.05;
}
.sh-moitie--d .sh-tete { justify-content: space-between; }
.sh-logo { width: calc(var(--cw) * .12); height: calc(var(--cw) * .12); border-radius: 50%; flex: none; }
.sh-membre { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: max(.625rem, calc(var(--cw) * .036)); }
.sh-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: calc(var(--cw) * .1); text-transform: uppercase; line-height: 1; }
.sh-prix { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 70, 'wght' 900; font-size: calc(var(--cw) * .075); line-height: 1; }
.sh-photo { overflow: clip; }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; }
.sh-qui {
  display: flex; align-items: center;
  padding: 0 calc(var(--cw) * .045);
  font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300;
  font-size: max(.875rem, calc(var(--cw) * .062)); line-height: 1; white-space: nowrap;
}
.sh-moitie--g .sh-qui { background: var(--suit); justify-content: flex-end; }
.sh-moitie--d .sh-qui { background: var(--guide); }
.sh-couleur { position: absolute; z-index: 2; left: 0; right: 0; top: var(--h-tete); height: var(--h-photo); clip-path: inset(0 0 0 0); }
.sh-couleur img { width: 100%; height: 100%; object-fit: cover; }
.sh-fil {
  position: absolute; z-index: 4; left: 52.67%; top: -1rem; bottom: -1rem;
  width: var(--fil); margin-left: calc(var(--fil) / -2);
  background: var(--or); opacity: 0; pointer-events: none;
}
/* les dos : Groove et VIP, derrière, ouverts en éventail (frame finale) */
.sh-dos {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-rows: auto 1fr auto;
  border-radius: var(--rayon);
  background: var(--encre); color: var(--texte);
  overflow: clip;
  transform-origin: 50% 100%;
  box-shadow: 0 1rem 2rem var(--ombre);
}
.sh-dos::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: var(--grain-taille) var(--grain-taille); opacity: .16; filter: invert(1);
}
/* téléphone : les dos dépassent au-dessus de la carte (la place manque sur les côtés) */
.sh-dos--groove { translate: -12% -12%; rotate: -7deg; }
.sh-dos--vip { z-index: 2; translate: 17% -15%; rotate: 7deg; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sh-dos--groove { translate: -27% 3%; rotate: -9deg; }
  .sh-dos--vip { translate: 27% 3%; rotate: 9deg; }
}
.sh-dos-tete { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; padding: calc(var(--cw) * .05) calc(var(--cw) * .055) 0; }
.sh-dos--vip .sh-dos-tete { align-items: flex-end; }
.sh-dos-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: calc(var(--cw) * .13); line-height: .9; text-transform: uppercase; }
.sh-dos-prix { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; font-size: calc(var(--cw) * .1); line-height: 1; }
.sh-dos-y {
  grid-row: 2; align-self: center; justify-self: center; opacity: 0;
  display: grid; place-items: center; width: calc(var(--cw) * .3); aspect-ratio: 1;
  border-radius: 50%; background: var(--or); color: var(--encre);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--noeud); font-size: calc(var(--cw) * .2); line-height: 1;
  padding-bottom: .1em;
}
.sh-dos-pied { display: grid; grid-template-columns: 52.67% 1fr; height: var(--h-pied); font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300; font-size: max(.875rem, calc(var(--cw) * .062)); }
.sh-dos-pied span { display: flex; align-items: center; padding: 0 calc(var(--cw) * .045); }
.sh-dos-pied span:first-child { background: var(--suit); justify-content: flex-end; }
.sh-dos-pied span:last-child { background: var(--guide); border-left: var(--fil) solid var(--or); }
.sh-legende { margin: .8rem calc(var(--cw) * var(--k) - 45cqw + var(--marge)) 0; font-size: var(--t-petit); line-height: 1.35; }
.sh-indice { display: none; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sh-scene {
    --fq: clamp(3rem, 1rem + calc(8.4 * var(--vw)), 8.125rem);
    --fr: clamp(3rem, 1rem + calc(4.6 * var(--vw)), 6rem);
    --haut: calc(3.1rem + .95 * var(--fq) + 1.5rem);
  }
  .sh-sur { top: 1.6rem; }
  .sh-titre .duo-q { top: 3.1rem; right: auto; white-space: nowrap; }
  .sh-titre .axe-q { --q-de: 126; }
  .sh-titre .axe-r { font-variation-settings: 'wdth' 64, 'wght' 900; }
  .sh-titre .duo-r {
    left: auto; bottom: 1.6rem;
    width: min(9.2em, calc(55cqw - var(--cw-b) * .4733 - var(--cw-b) * .5 - var(--marge) - 1rem));
    text-align: right;
  }
  .sh-scene { --cw-b: min(30cqw, calc((100cqh - var(--haut) - 2.5rem) / 1.425)); }
  .sh-jeu { --cw: var(--cw-b); bottom: 1.6rem; justify-content: flex-end; }
  .sh-legende {
    position: absolute; left: var(--marge); bottom: 1.6rem; margin: 0;
    width: calc(45cqw - var(--cw) * var(--k) - var(--cw) * .45 - var(--marge) - 1rem); max-width: 16rem;
  }
  .sh-fig { position: static; }
  .sh-indice {
    display: flex; align-items: center; gap: .55em;
    position: absolute; z-index: var(--z-texte); right: var(--marge); top: calc(var(--haut) + .25rem);
    font-size: var(--t-petit); font-weight: 700; opacity: 0;
  }
  .sh-indice .fleche-bas { width: .8em; height: 1.1em; }
}

/* intro : une mesure — celui qui guide se pose, celle qui suit un temps plus tard, puis le titre */
@media (prefers-reduced-motion: no-preference) {
  .sh-moitie--d { animation: sh-pose-guide var(--temps) var(--elan) 0ms both; }
  .sh-moitie--g { animation: sh-pose-suit calc(var(--temps) * 1.25) var(--prise) var(--temps) both; }
  .sh-titre .duo-q .l { animation: sh-monte calc(var(--temps) * 1.4) var(--elan) 60ms both; }
  .sh-titre .duo-r .l { animation: sh-monte calc(var(--temps) * 1.3) var(--prise) calc(var(--temps) * 2.6) both; }
  .sh-sur { animation: sh-glisse var(--temps) var(--elan) 0ms both; }
}
@keyframes sh-pose-guide { from { transform: translate(14px, -22px); } }
@keyframes sh-pose-suit  { from { transform: translate(-18px, 30px); } }
@keyframes sh-monte      { from { transform: translateY(104%); } }
@keyframes sh-glisse     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* le défilement : la carte se recolle (guide, puis suit), passe en couleur, puis Groove et VIP s'ouvrent en éventail */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sh-piste { view-timeline-name: --sh; view-timeline-inset: var(--barre-h) 0px; }
    .sh-moitie--d .sh-m-in {
      animation-name: sh-d; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 0% contain 38%;
    }
    .sh-moitie--g .sh-m-in {
      animation-name: sh-g; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 10% contain 50%;
    }
    .sh-fil {
      animation-name: sh-fil; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 0% contain 52%;
    }
    .sh-couleur {
      animation-name: sh-couleur; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 48% contain 78%;
    }
    .sh-dos-y {
      animation-name: sh-dos-y; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 0% contain 46%;
    }
    .sh-dos--groove {
      animation-name: sh-dos-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 58% contain 92%;
    }
    .sh-dos--vip {
      animation-name: sh-dos-v; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 64% contain 98%;
    }
    .sh-titre .axe-q {
      animation-name: sh-axe-q; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 0% contain 70%;
    }
    .sh-titre .axe-r {
      animation-name: sh-axe-r; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 40% contain 95%;
    }
    .sh-indice {
      animation-name: sh-indice; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: contain 0% contain 14%;
    }
    .sh-legende {
      animation-name: sh-leg-sort; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sh; animation-range: exit 50% exit 70%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (not ((min-width: 900px) and (min-aspect-ratio: 1/1))) {
    .sh-legende {
      animation-name: sh-leg, sh-leg-sort; animation-timing-function: var(--prise), linear;
      animation-timeline: --sh, --sh; animation-range: contain 10% contain 50%, exit 50% exit 70%;
    }
  }
}
@keyframes sh-leg { from { translate: 0 var(--off); } }
@keyframes sh-d        { from { translate: var(--gap) 0; } }
@keyframes sh-g        { from { translate: calc(-1 * var(--gap)) var(--off); } }
@keyframes sh-fil      { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sh-couleur  { from { clip-path: inset(0 47.33% 0 52.67%); } }
@keyframes sh-dos-y    { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sh-dos-g    { from { translate: 0 0; rotate: 0deg; } }
@keyframes sh-dos-v    { from { translate: 0 0; rotate: 0deg; } }
@keyframes sh-axe-q    { from { font-variation-settings: 'wdth' var(--q-de, 126), 'wght' 200; } }
@keyframes sh-axe-r    { from { font-variation-settings: 'wdth' 50, 'wght' 900; } }
@keyframes sh-indice   { from { opacity: 1; } to { opacity: 0; } }
@keyframes sh-leg-sort { to { opacity: 0; } }

.sans-sd .sh-piste { height: auto; }
.sans-sd .sh-scene { position: relative; top: 0; }
.sans-sd .sh-m-in { transition: translate 700ms var(--elan) 600ms; }
.sans-sd .sh-moitie--g .sh-m-in { transition: translate 800ms var(--prise) calc(600ms + var(--temps)); }
.sans-sd .sh-couleur { transition: clip-path 1000ms var(--elan) 2000ms; }
.sans-sd .sh-dos { transition: translate 900ms var(--elan) 2600ms, rotate 900ms var(--elan) 2600ms; }
.sans-sd .sh-piste:not(.vu) .sh-moitie--d .sh-m-in { translate: var(--gap) 0; }
.sans-sd .sh-piste:not(.vu) .sh-moitie--g .sh-m-in { translate: calc(-1 * var(--gap)) var(--off); }
.sans-sd .sh-piste:not(.vu) .sh-couleur { clip-path: inset(0 47.33% 0 52.67%); }
.sans-sd .sh-piste:not(.vu) .sh-dos { translate: 0 0; rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .sh-piste { height: auto; }
  .sh-scene { position: relative; top: 0; }
}

/* =================================================================== 2. LES CARTES : la donne
   (11.10.2026) Au téléphone, des cartes compactes : « Toi » au-dessus, « + 1 invité·e » sur une ligne sous le filet or,
   le bouton en contour (un seul CTA principal par écran : celui du formulaire). La photo du bar ne reste qu'au bureau. */
.sh-cartes { padding-block: var(--pas); }
.sh-cartes-tete { padding-inline: var(--marge); }
.sh-cartes-tete .sur-titre { margin-bottom: 1rem; }
.sh-cartes-tete .duo-titre { max-width: 10em; }
.sh-nouveau { margin-top: 1.1rem; max-width: 34em; font-size: var(--t-corps); }
.sh-paquet {
  display: grid; gap: 1.25rem;
  margin-top: 2rem; padding-inline: var(--marge);
}
.sh-membre-carte { box-shadow: 0 1.5rem 3rem var(--ombre-forte); }
.sh-membre-carte .membre-tete { padding: 1rem 1rem .75rem; }
.sh-membre-carte--vibe { width: min(94%, 25rem); }
.sh-membre-carte--groove { width: min(96%, 27rem); justify-self: end; }
.sh-membre-carte--vip { width: min(100%, 30rem); }
.sh-membre-carte--vip .membre-nom { font-size: clamp(2.4rem, 1.6rem + calc(3.2 * var(--vw)), 4.75rem); }
.sh-membre-carte--groove .membre-nom { font-size: clamp(2.1rem, 1.4rem + calc(2.8 * var(--vw)), 4.1rem); }
.sh-membre-carte .bouton { width: auto; margin: 0 1rem 1rem; }
.sh-bar { display: none; }
.sh-mail { margin-top: 1.75rem; padding-inline: var(--marge); max-width: calc(34em + 2 * var(--marge)); font-size: var(--t-petit); font-weight: 600; }
@media (max-width: 599px) {
  .sh-membre-carte .membre-duo { grid-template-columns: 1fr; }
  .sh-membre-carte .membre-toi { padding: .75rem 1rem .9rem; }
  .sh-membre-carte .membre-toi .membre-qui { margin-bottom: .35rem; }
  .sh-membre-carte .membre-invite {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem;
    padding: .7rem 1rem .8rem;
    border-left: 0; border-top: var(--fil) solid var(--or);
  }
  .sh-membre-carte .membre-invite .membre-qui { margin: 0; }
  .sh-membre-carte .membre-invite p:last-child { font-size: var(--t-corps); font-weight: 600; }
}
@media (min-width: 600px) {
  .sh-paquet { gap: clamp(2rem, calc(5 * var(--vw)), 3rem); margin-top: clamp(3rem, calc(8 * var(--vw)), 6rem); }
  .sh-membre-carte .membre-tete { padding-block: 1.3rem 1.1rem; }
  .sh-membre-carte .bouton { min-height: 56px; }
  .sh-mail { margin-top: clamp(2.5rem, calc(6 * var(--vw)), 4rem); }
}
@media (min-width: 900px) {
  .sh-cartes-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .sh-cartes-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(1rem, calc(2.6 * var(--vw)), 2.75rem); }
  .sh-cartes-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; }
  /* trois cartes en escalier : un pas chacune */
  .sh-paquet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, calc(2 * var(--vw)), 2rem); row-gap: 0; align-items: start; }
  .sh-membre-carte { width: auto; }
  .sh-membre-carte--vibe { grid-column: 1 / span 4; grid-row: 1; }
  .sh-membre-carte--groove { grid-column: 5 / span 4; grid-row: 1; margin-top: 6rem; justify-self: stretch; }
  .sh-membre-carte--vip { grid-column: 9 / span 4; grid-row: 1; margin-top: 12rem; }
  /* la photo du bar remonte sous Vibe (la carte la plus haute de l'escalier) */
  .sh-bar { display: block; grid-column: 1 / span 4; grid-row: 2; width: 82%; justify-self: end; margin-top: -8rem; }
  .sh-bar img { width: 100%; height: auto; border-radius: var(--rayon); }
  .sh-bar figcaption { margin-top: .7rem; font-size: var(--t-petit); }
  .sh-mail { margin: -4rem 0 0 calc(var(--part-suit) + clamp(1rem, calc(2.6 * var(--vw)), 2.75rem)); padding: 0 var(--marge) 0 0; max-width: 40rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sh-membre-carte, .sh-bar {
      animation-name: sh-donne; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 32%;
    }
    .sh-membre-carte--groove { animation-name: sh-donne-d; }
    .sh-bar { animation-name: sh-donne-d; }
  }
}
@keyframes sh-donne   { from { translate: -1.5rem 4rem; rotate: -4deg; } }
@keyframes sh-donne-d { from { translate: 1.5rem 4rem; rotate: 4deg; } }
.sans-sd .sh-membre-carte, .sans-sd .sh-bar { transition: translate 700ms var(--prise), rotate 700ms var(--prise); }
.sans-sd .sh-paquet:not(.vu) .sh-membre-carte { translate: 0 4rem; rotate: -3deg; }

/* =================================================================== 3. POURQUOI (11.10.2026 : avant les prix, trois phrases ; plus de photo de groupe,
   déjà dans le pied, ni de liste « Pour… », ni de citation) */
.sh-pourquoi { padding-block: var(--pas); }
.sh-pourquoi > .duo-titre { padding-inline: var(--marge); max-width: 11em; }
.sh-pourquoi-texte {
  margin-top: clamp(1.4rem, calc(4 * var(--vw)), 2.5rem); padding-inline: var(--marge);
  max-width: calc(var(--mesure-texte) + 2 * var(--marge));
  font-size: var(--t-corps); line-height: 1.45;
}
.sh-pourquoi-texte > * + * { margin-top: .7em; }
.sh-pourquoi-texte > :first-child {
  font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300;
  font-size: clamp(1.35rem, 1rem + calc(1.6 * var(--vw)), 2.5rem); line-height: 1.12;
}
@media (max-width: 899px) {
  /* téléphone : le filet ne traverse pas le texte */
  .sh-pourquoi { background: var(--guide); }
}
@media (min-width: 900px) {
  /* bureau : la question à gauche du filet (55 %), les trois phrases en face, en bas : pas de demi-écran vide */
  .sh-pourquoi { display: grid; grid-template-columns: var(--part-guide) var(--part-suit); align-items: end; }
  .sh-pourquoi > .duo-titre { grid-column: 1; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.5rem) 0 var(--marge); }
  .sh-pourquoi-texte { grid-column: 2; margin: 0; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.5rem); }
}

/* =================================================================== 4. LE DON : le 5 grandit, et déborde sur l'adhésion */
.page-soutenir { --cinq: clamp(15rem, 4rem + calc(42 * var(--vw)), 32rem); }
@media (max-width: 599px) { .page-soutenir { --cinq: 10rem; } }   /* 11.10.2026 : le 5 reste un geste, pas un demi-écran */
.sh-don {
  display: flow-root;                 /* la marge négative du 5 raccourcit vraiment la section : il chevauche l'adhésion */
  position: relative; z-index: 2;
  padding: var(--pas) 0 0;
}
.sh-don-tete, .sh-don-texte { padding-inline: var(--marge); }
.sh-don-tete .sur-titre { margin-bottom: 1rem; }
.sh-don-texte { margin-top: clamp(1.25rem, calc(5 * var(--vw)), 3rem); max-width: 36rem; }
.sh-don-texte > * + * { margin-top: 1rem; }
.sh-don-une { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300; font-size: clamp(1.35rem, 1rem + calc(1.6 * var(--vw)), 2.5rem); line-height: 1.12; }
.sh-don-texte .bouton { margin-top: .6rem; }
/* la boîte du 5 fait .78 em ; .56 em passent sous le bord de la section : le chiffre est à cheval sur le rouge et le noir */
.sh-cinq {
  position: relative; z-index: 3;
  width: max-content;
  margin: clamp(1rem, calc(4 * var(--vw)), 3rem) 0 calc(-.56 * var(--cinq)) var(--marge);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 100, 'wght' 900;
  font-size: var(--cinq); line-height: .78; letter-spacing: -.02em;
  white-space: nowrap; pointer-events: none;
  transform-origin: 0 28%;            /* la ligne de la couture rouge | noir : le 5 grandit de part et d'autre */
}
@media (min-width: 900px) {
  /* le texte à droite de la couture ; le 5 dessous, à cheval sur l'adhésion */
  .sh-don-tete, .sh-don-texte { margin-left: var(--part-suit); padding: 0 var(--marge) 0 clamp(1rem, calc(2.6 * var(--vw)), 2.75rem); }
  .sh-cinq { margin-top: clamp(-6rem, calc(-4 * var(--vw)), -2rem); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sh-cinq {
      animation-name: sh-grandit; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes sh-grandit { from { scale: .62; font-variation-settings: 'wdth' 50, 'wght' 900; } }
.sans-sd .sh-cinq { transition: scale 1200ms var(--elan); }
.sans-sd .sh-cinq:not(.vu) { scale: .62; }

/* =================================================================== 5. L'ADHÉSION : question | réponse */
.sh-adhesion { position: relative; z-index: 1; padding: calc(.6 * var(--pas) + .56 * var(--cinq)) 0 var(--pas); }
.sh-adhesion-tete { padding-inline: var(--marge); }
.sh-adhesion-tete .sur-titre { margin-bottom: 1rem; }
.sh-honnete { margin-top: 1.1rem; max-width: 34rem; font-size: var(--t-corps); }
.sh-form { margin-top: clamp(1.75rem, calc(6 * var(--vw)), 4.5rem); }
.sh-champ--mot .champ-q { font-size: clamp(1.25rem, 1rem + calc(1.2 * var(--vw)), 2rem); }
.sh-form textarea.champ-saisie { min-height: 4.5rem; }
@media (max-width: 599px) {
  /* téléphone : des champs plus serrés ; 11.10.2026 : la question au-dessus de la réponse (composants.css §12), le champ
     sur toute la largeur */
  .sh-form .champ-q { padding-block: .8rem .35rem; }
  .sh-form .champ-r { padding-block: 0 .7rem; }
}
@media (min-width: 600px) {
  .sh-champ--email .champ-q { font-size: clamp(1.5rem, .9rem + calc(2.6 * var(--vw)), 3.25rem); hyphens: manual; }
  .sh-champ--email .champ-saisie { font-size: clamp(1.3rem, 1rem + calc(1.6 * var(--vw)), 2.25rem); }
}
/* le choix de la formule : quatre étiquettes du côté de la réponse */
.sh-formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sh-formule {
  position: relative; display: grid; align-content: center; gap: .1rem;
  min-height: 64px; padding: .55rem .7rem;
  border: 2px solid var(--or); border-radius: 4px;
  cursor: pointer; line-height: 1.05;
  transition: background-color 220ms var(--elan), color 220ms var(--elan), translate 160ms var(--elan);
}
.sh-formule input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sh-f-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: clamp(1.15rem, 1rem + calc(.8 * var(--vw)), 1.6rem); text-transform: uppercase; }
.sh-f-prix { font-size: var(--t-petit); font-weight: 600; }
.sh-formule:hover { translate: 0 -2px; background: var(--voile-papier); }
.sh-formule:active { translate: 0 1px; }
.sh-formule:has(input:checked) { background: var(--or); color: var(--encre); }
.sh-formule:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 3px; box-shadow: 0 0 0 6px var(--encre); }
.sh-champ--formule .champ-q { align-self: center; }
/* le montant n'apparaît que pour un don */
.sh-form:not(:has(input[value="don"]:checked)) .sh-champ--montant { display: none; }
.sh-form .formulaire-envoi { margin-top: 2px; }
.sh-form .formulaire-envoi .bouton { white-space: nowrap; }
@media (min-width: 900px) {
  .sh-adhesion-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .sh-adhesion-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(1rem, calc(2.6 * var(--vw)), 2.75rem); }
  .sh-adhesion-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; }
  .sh-formules { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 46rem; }
}
@media (max-width: 599px) {
  .sh-form .formulaire-envoi { grid-template-columns: 1fr; gap: 1rem; background: var(--guide); }
  .sh-form .formulaire-envoi > :first-child { justify-self: start; text-align: left; padding: 0 var(--marge); }
  .sh-form .formulaire-envoi > :last-child { padding: 0 var(--marge); }
  .sh-form .formulaire-envoi .bouton { width: 100%; }
  /* le disque (96 px, le minimum de la charte) à côté de la phrase, pas au-dessus */
  .sh-form .sh-envoi-g { grid-template-columns: 6rem 1fr; align-items: center; justify-items: start; }
  .sh-form .sh-envoi-logo { width: 6rem; }
}

/* =================================================================== TRÈS PETIT ÉCRAN / ZOOM 400–500 % : une seule colonne */
@media (max-width: 21.9rem) {
  .sh-titre .duo-q { font-size: 3rem; font-variation-settings: 'wdth' 72, 'wght' 200; }
  .sh-titre .duo-r { font-size: 2rem; }
  .sh-jeu { --cw: 70cqw; }
  .sh-fig { margin-left: var(--marge); }
  .sh-legende { margin-inline: 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 carte
     et légende, dans l'ordre du DOM ; plus rien ne se recouvre ni ne sort de la scène */
  .sh-piste { height: auto; }
  .sh-scene { position: relative; top: 0; height: auto; min-height: 0; container-type: inline-size; padding: 2.6rem 0 1.25rem; }
  .sh-titre { position: static; }
  .sh-titre .duo-q, .sh-titre .duo-r { position: relative; inset: auto; padding-inline: var(--marge); }
  .sh-titre .duo-r { margin-top: .5rem; }
  .sh-jeu { position: static; margin-top: 1.5rem; }
  .sh-legende { animation-name: none; }
  .sh-dos { display: none; }
  .sh-cinq { --cinq: 8rem; }
}

/* =================================================================== CHARTE v1.0 (05.10.2026)
   La carte « Toi | + 1 invité·e » porte la photo réelle, en couleur, posée : plus de moitiés teintées ni de recollage,
   plus de piste de 80 vh ; les cartes Groove et VIP restent ouvertes en éventail (frame finale). Plus de petit logo
   sur la carte (la charte ne descend pas sous 96 px). Au succès de l'adhésion, le logo à côté de l'envoi fait
   pleuvoir ses notes (pages/soutenir.js). */
.sh-piste { height: auto; }
.sh-scene { position: relative; top: 0; }
.sh-hero :is(.sh-m-in, .sh-couleur, .sh-fil, .sh-dos, .sh-dos-y, .sh-legende, .axe-q, .axe-r) { animation: none; transition: none; }
.sh-couleur, .sans-sd .sh-piste:not(.vu) .sh-couleur { clip-path: none; }
.sans-sd .sh-piste:not(.vu) .sh-m-in { translate: none; }
.sans-sd .sh-piste:not(.vu) .sh-dos--groove { translate: -12% -12%; rotate: -7deg; }
.sans-sd .sh-piste:not(.vu) .sh-dos--vip { translate: 17% -15%; rotate: 7deg; }
.sh-fil { display: none; }
.sh-dos { border: 1px solid var(--ligne-forte); }
/* l'envoi : le logo en disque (112 px), à gauche de l'annonce */
.sh-envoi-g { display: grid; justify-items: end; gap: 1rem; }
.sh-envoi-logo { display: block; width: 7rem; }
@media (max-width: 21.9rem) { .sh-envoi-g { justify-items: start; } }
/* zoom 500 % : le disque passe au-dessus de la phrase, les formules sur une colonne */
@media (max-width: 18rem) { .sh-form .sh-envoi-g, .sh-formules { grid-template-columns: 1fr; } }