/* 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 + 14vw, 8.125rem);
  --fr: clamp(2.25rem, 1.2rem + 4.6vw, 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 + 8.4vw, 8.125rem);
    --fr: clamp(3rem, 1rem + 4.6vw, 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 */
.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.3rem; max-width: 34em; font-size: var(--t-corps); }
.sh-paquet {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(3rem, 8vw, 6rem); padding-inline: var(--marge);
}
.sh-membre-carte { box-shadow: 0 1.5rem 3rem var(--ombre-forte); }
.sh-membre-carte .membre-tete { padding-block: 1.3rem 1.1rem; }
.sh-membre-carte--vibe { width: min(92%, 25rem); }
.sh-membre-carte--groove { width: min(94%, 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 + 3.2vw, 4.75rem); }
.sh-membre-carte--groove .membre-nom { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 4.1rem); }
.sh-membre-carte .bouton { min-height: 56px; }
.sh-bar { width: min(78%, 24rem); justify-self: end; }
.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-top: clamp(2.5rem, 6vw, 4rem); padding-inline: var(--marge); font-size: var(--t-petit); font-weight: 600; }
@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, 2.6vw, 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, 2.6vw, 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, 2vw, 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 { grid-column: 1 / span 4; grid-row: 2; width: 82%; justify-self: end; margin-top: -8rem; }
  .sh-mail { margin: -4rem 0 0 calc(var(--part-suit) + clamp(1rem, 2.6vw, 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 : l'énergie collective */
.sh-pourquoi { padding-block: var(--pas); }
.sh-pourquoi-tete { padding-inline: var(--marge); }
.sh-pourquoi-tete .duo-titre { max-width: 11em; }
.sh-groupe { --ecart: clamp(1.2rem, 8vw, 7rem); --decal: clamp(1rem, 4vw, 3rem); margin-top: clamp(3rem, 8vw, 6rem); }
/* la coupe de la photo (52,72 %) tombe sur la couture de la section (55 %) */
.sh-groupe .photo-duo-cadre { width: 100%; margin-left: calc(var(--part-guide) - 52.72%); }
.sh-groupe figcaption { padding-inline: var(--marge); }
.sh-raisons { margin-top: clamp(3rem, 8vw, 6rem); }
.raison {
  display: grid; grid-template-columns: var(--part-guide) var(--part-suit); align-items: baseline;
  padding-block: clamp(.8rem, 2vw, 1.4rem);
  border-top: 1px solid var(--filet);
}
.raison:last-child { border-bottom: 1px solid var(--filet); }
.raison-pour {
  justify-self: end; padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge);
  font-family: var(--f-display); font-weight: 200; font-variation-settings: 'wdth' 140, 'wght' 200;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 7rem); line-height: .85;
}
.raison-txt {
  padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900;
  font-size: clamp(1.2rem, .9rem + 1.5vw, 2.5rem); line-height: 1.02;
  hyphens: auto; -webkit-hyphens: auto;
}
.raison--4 .raison-txt { font-size: clamp(1.1rem, .85rem + 1.3vw, 2.2rem); }
.raison--1 .raison-pour { font-size: clamp(3.2rem, 1.6rem + 6.4vw, 9rem); }
.sh-energie { margin-top: clamp(3rem, 8vw, 6rem); padding-inline: var(--marge); max-width: 48rem; }
.sh-exister { margin-top: 1.4rem; padding-inline: var(--marge); max-width: 40rem; font-size: var(--t-corps); font-weight: 600; }
@media (max-width: 899px) {
  /* téléphone : la citation ne traverse pas la couture */
  .sh-pourquoi { background: var(--guide); }
  .sh-raisons { background: var(--fond-inverse); }
}
@media (min-width: 900px) {
  .sh-pourquoi-tete { display: grid; grid-template-columns: var(--part-guide) var(--part-suit); padding: 0; }
  .sh-pourquoi-tete > * { grid-column: 1; padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); }
  .sh-energie, .sh-exister { margin-left: var(--part-guide); padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.5rem); max-width: calc(var(--part-suit) + 0px); }
  /* la citation passe du côté violet, contre la couture ; la phrase qui la suit reste en face, un temps plus bas :
     sinon la moitié violette restait un aplat vide d'un demi-écran sous les raisons */
  .sh-energie { margin-top: clamp(3rem, 8vw, 6rem); margin-left: 0; max-width: var(--part-guide); padding: 0 clamp(.75rem, 2.4vw, 2.5rem) 0 var(--marge); text-align: right; }
}

/* =================================================================== 4. LE DON : le 5 grandit, et déborde sur l'adhésion */
.page-soutenir { --cinq: clamp(15rem, 4rem + 42vw, 32rem); }
.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(2rem, 5vw, 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 + 1.6vw, 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, 4vw, 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, 2.6vw, 2.75rem); }
  .sh-cinq { margin-top: clamp(-6rem, -4vw, -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.5rem; max-width: 34rem; font-size: var(--t-corps); }
.sh-honnete > * + * { margin-top: .7rem; }
.sh-form { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.sh-champ--email .champ-q { font-size: clamp(1.5rem, .9rem + 2.6vw, 3.25rem); hyphens: manual; }
.sh-champ--email .champ-saisie { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.25rem); }
.sh-champ--mot .champ-q, .sh-champ--tel .champ-q { font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
/* 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 + .8vw, 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, 2.6vw, 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, 2.6vw, 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%; }
}

/* =================================================================== 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; }
  .raison { grid-template-columns: 1fr; }
  .raison-pour, .raison-txt { justify-self: start; padding-inline: var(--marge); }
  .raison-pour { font-size: 2.5rem; }
  .sh-groupe .photo-duo-cadre { margin-left: 0; }
  .sh-formules { grid-template-columns: 1fr; }
  .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; } }