/* pages/souvenirs.css — le carnet de bal (2016 → 2025). Un mouvement par chapitre :
   1 Le carnet s'ouvre sur la couture (sa reliure) : les deux pages se déplient en 3D, une mesure ; le crayon tombe
     au bout de son cordon ; la photo glissée entre les pages se recolle en couleur au survol, au focus, au toucher
   2 Les pages du carnet : chaque année est coupée sur la couture (« 20 » en délié | « 16 » en plein) et se recolle
     au défilement (≥ 60 vh) ; chaque ligne s'écrit depuis la couture, comme au crayon ; les photos se recollent au toucher
   3 La prochaine ligne : vide, « Toi y qui ? » ; tes photos : les colonnes se touchent. Aucune animation continue.
   Variables locales (préfixe --s-) = réglages de géométrie. Couleurs, polices, durées : tokens.css. */

/* =================================================================== 1. LE CARNET S'OUVRE */
.s-hero {
  --s-mx: 10px;
  --s-pad: 14px;
  --s-cs: calc(45cqi - var(--s-mx));     /* largeur de la page gauche = position de la reliure dans le carnet */
  --s-pw: min(74cqi, 22rem);             /* largeur de la photo glissée */
  container-type: inline-size;
  padding: 8px 0 clamp(2.5rem, 6vw, 5rem);
}
.s-carnet {
  position: relative; isolation: isolate;
  margin: 0 var(--s-mx);
  min-height: calc(100svh - var(--barre-h) - var(--bandeau-h) - 16px);
  display: grid;
  grid-template-columns: [g] var(--s-cs) [d] 1fr [fin];
  grid-template-rows: [tete] auto [photo] 1fr [bornes] auto [annees] auto;
  row-gap: 14px;
  padding-block: var(--s-pad) calc(var(--s-pad) + 1.5rem);
  perspective: 1800px;
}
/* les deux pages : rouge (celle qui suit) | violet (celui qui guide), une ombre douce vers la reliure */
.s-page-g, .s-page-d { position: absolute; top: 0; bottom: 0; z-index: -1; isolation: isolate; }
.s-page-g::before, .s-page-d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: var(--grain-taille) var(--grain-taille); opacity: var(--grain-opacite);
}
.s-page-g {
  left: 0; width: var(--s-cs);
  background: linear-gradient(90deg, transparent 72%, var(--voile-reliure)), var(--suit);
  border-radius: var(--rayon) 0 0 var(--rayon);
  transform-origin: 100% 50%;
}
.s-page-d {
  left: var(--s-cs); right: 0;
  background: linear-gradient(270deg, transparent 76%, var(--voile-reliure)), var(--guide);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  transform-origin: 0 50%;
}
/* la reliure : la couture blanche */
.s-page-d::after { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: var(--fil); background: var(--or); }

.s-tete { grid-column: g / fin; grid-row: tete; padding-inline: var(--s-pad); position: relative; z-index: 2; }
.s-sur { margin-bottom: .6rem; }
.s-titre { font-family: var(--f-display); font-size: clamp(3.25rem, 1.6rem + 7vw, 6.5rem); line-height: .9; }
.s-q, .s-r, .s-l { display: block; }
.s-l { overflow: clip; overflow-clip-margin: .1em; padding-bottom: .05em; }
.s-l > span { display: block; }
.s-q { font-weight: 200; font-variation-settings: 'wdth' 100, 'wght' 200; }
.s-r { margin-top: .08em; font-size: .86em; font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; line-height: .92; }
.s-r .s-l { display: inline-block; }

/* la photo glissée entre les pages : sa couture (52,67 %) sur la reliure */
.s-hero-photo {
  grid-column: g / fin; grid-row: photo; align-self: center; justify-self: start;
  position: relative; z-index: 3;
  width: var(--s-pw);
  margin-left: calc(var(--s-cs) - var(--s-pw) * .5267);
  --ecart: clamp(1rem, 4.5cqi, 3.5rem);
  --decal: clamp(.75rem, 3cqi, 2rem);
  rotate: -2deg;
}
.s-hero-photo .photo-duo-cadre { box-shadow: 0 18px 40px var(--ombre-forte); }
.s-hero-photo figcaption { margin-top: calc(var(--decal) + .9rem); font-size: var(--t-mini); line-height: 1.35; letter-spacing: .02em; font-weight: 600; text-align: center; }
.s-geste { display: block; font-size: var(--t-petit); font-weight: 700; letter-spacing: 0; }

.s-bornes {
  grid-column: g / fin; grid-row: bornes;
  display: grid; grid-template-columns: var(--s-cs) 1fr;
  font-family: var(--f-display); font-size: clamp(3.25rem, 1.5rem + 7vw, 6rem); line-height: .8;
  position: relative; z-index: 2;
}
.s-borne--g { justify-self: end; padding-right: .18em; font-weight: 200; font-variation-settings: 'wdth' 120, 'wght' 200; }
.s-borne--d { padding-left: .14em; font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900; }

.s-annees { grid-column: g / fin; grid-row: annees; position: relative; z-index: 2; padding-inline: var(--s-pad); }
.s-annees ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .2rem; }
.s-annees a {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .55rem;
  border-radius: 999px; color: var(--texte); text-decoration: none;
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 62, 'wght' 900; font-size: 1.05rem;
  transition: background-color 200ms var(--elan), color 200ms var(--elan), translate 300ms var(--prise);
}
.s-annees a:hover, .s-annees a:focus-visible { background: var(--or); color: var(--encre); translate: 0 -2px; }
.s-annees a:active { translate: 0 1px; }

/* le crayon au bout de son cordon, accroché à la reliure */
.s-crayon {
  position: absolute; z-index: 4; left: var(--s-cs); top: 100%;
  width: 34px; height: auto; margin: -18px 0 0 -17px;
  color: var(--texte); overflow: visible;
  transform-origin: 50% 0;
  rotate: 4deg;
}
.s-mode-emploi { max-width: 36em; margin: clamp(5.5rem, 10vw, 7rem) auto 0; padding-inline: var(--marge); font-size: var(--t-corps); text-align: center; }

/* intro : une mesure. 1 la page qui guide se déplie, 2 celle qui suit un temps plus tard, 3 la photo se glisse, tap le crayon */
@media (prefers-reduced-motion: no-preference) {
  .s-page-d { animation: s-deplie-d calc(var(--temps) * 1.3) var(--elan) both; }
  .s-page-g { animation: s-deplie-g calc(var(--temps) * 1.5) var(--prise) var(--temps) both; }
  .s-titre .s-l > span { animation: s-monte calc(var(--temps) * 1.4) var(--elan) calc(var(--temps) * .5) both; }
  .s-titre .s-l + .s-l > span { animation-delay: var(--temps); }
  .s-titre .s-r .s-l > span { animation-delay: calc(var(--temps) * 1.5); }
  .s-titre .s-r .s-l + .s-l > span { animation-delay: calc(var(--temps) * 1.75); }
  .s-hero-photo { animation: s-glisse calc(var(--temps) * 1.6) var(--prise) calc(var(--temps) * 1.5) both; }
  .s-crayon { animation: s-balance var(--mesure) var(--elan) calc(var(--temps) * 3) both; }
}
@keyframes s-deplie-d { from { transform: rotateY(-58deg); } }
@keyframes s-deplie-g { from { transform: rotateY(58deg); } }
@keyframes s-monte    { from { transform: translateY(104%); } }
@keyframes s-glisse   { from { transform: translateY(2.5rem) rotate(-5deg); } }
@keyframes s-balance  {
  0%   { transform: translateY(-40px) rotate(18deg); opacity: 0; }
  18%  { transform: translateY(0) rotate(-12deg); opacity: 1; }
  40%  { transform: rotate(8deg); }
  62%  { transform: rotate(-4deg); }
  82%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); opacity: 1; }
}

/* bureau paysage : les deux pages se lisent d'un côté à l'autre de la reliure, la photo au milieu, 2016 | 2025 de part et d'autre */
@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  .s-hero { --s-mx: 3rem; --s-pad: 2.25rem; --s-pw: min(32cqi, 30rem, calc((100svh - 21rem) * .948)); }
  .s-carnet { grid-template-rows: [tete] auto [photo bornes] 1fr [annees] auto; row-gap: 1.25rem; }
  .s-tete { display: grid; grid-template-columns: calc(var(--s-cs) - var(--s-pad)) 1fr; padding: 0 var(--s-pad); }
  .s-sur { grid-column: 1; grid-row: 1; }
  .s-titre { grid-column: 1 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: calc(var(--s-cs) - var(--s-pad)) 1fr; align-items: end; font-size: clamp(3.25rem, 1rem + 4.29cqi, 7rem); }   /* composante rem (zoom texte) ; 77,8 px à 1440 comme avant */
  .s-q { grid-column: 1; justify-self: end; text-align: right; padding-right: .3em; padding-top: 1.6rem; }
  .s-r { grid-column: 2; padding-left: .22em; font-size: 1em; }
  .s-r .s-l { display: block; }
  .s-bornes { align-self: end; padding-bottom: 1rem; font-size: clamp(4.5rem, 9cqi, 10rem); }
  .s-borne--g { font-variation-settings: 'wdth' 100, 'wght' 200; }
  .s-borne--g { justify-self: start; padding: 0 0 0 var(--s-pad); }
  .s-borne--d { justify-self: end; padding: 0 var(--s-pad) 0 0; }
  .s-hero-photo figcaption { max-width: 22rem; margin-inline: auto; }
}

/* =================================================================== 2. LES PAGES DU CARNET */
main { counter-reset: danse; }
.s-page { --s-part: var(--part-suit); padding-block: var(--pas); overflow-x: clip; }
.s-page--inverse { --s-part: var(--part-guide); }
.s-annee + .s-annee { margin-top: var(--pas); }
.s-annee { scroll-margin-top: calc(var(--barre-h) + 1rem); }

/* l'année coupée sur la couture : « 20 » en délié | « 16 » en plein, qui se recollent */
.s-an {
  display: grid; grid-template-columns: var(--s-part) 1fr; align-items: baseline;
  font-family: var(--f-display); font-size: clamp(6rem, 1rem + 24vw, 22rem); line-height: .8;
  overflow: clip; padding-block: .04em .02em;
}
.s-an-g { justify-self: end; padding-right: .06em; font-weight: 200; font-variation-settings: 'wdth' 140, 'wght' 200; }
.s-an-d { padding-left: .06em; font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900; }
.s-an-note { margin: .9rem 0 0 var(--s-part); padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.75rem); font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-an-g {
      animation-name: s-an-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 60%;
    }
    .s-an-d {
      animation-name: s-an-d; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 15% cover 66%;
    }
  }
}
@keyframes s-an-g { from { translate: -.42em 0; } }
@keyframes s-an-d { from { translate: .42em .12em; } }
.sans-sd .s-an-g, .sans-sd .s-an-d { transition: translate 1100ms var(--elan); }
.sans-sd .s-an-d { transition-timing-function: var(--prise); transition-delay: var(--temps); }
.sans-sd .s-an:not(.vu) .s-an-g { translate: -.42em 0; }
.sans-sd .s-an:not(.vu) .s-an-d { translate: .42em .12em; }

/* une ligne du carnet : la date contre la couture | le lieu ; les partenaires à cheval sur la couture */
.s-danses { margin-top: clamp(2rem, 5vw, 3.5rem); }
.danse {
  position: relative;
  counter-increment: danse;
  display: grid; grid-template-columns: var(--s-part) 1fr; align-items: start;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--or) 85%, transparent) 1.2px, transparent 1.6px);
  background-size: 9px 4px; background-repeat: repeat-x; background-position: 0 0;
}
.danse:last-child { padding-bottom: 0; }
.danse-quand { grid-column: 1; justify-self: end; text-align: right; padding: 0 clamp(.75rem, 2.4vw, 2.75rem) 0 var(--marge); }
.danse-n { display: block; margin-bottom: .35rem; font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.danse-n::before { content: "danse n° " counter(danse); }
.danse-quand time { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; line-height: .9; font-size: var(--t-h3); }
.danse-quoi { grid-column: 2; min-width: 0; padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.75rem); }
.danse-nom { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 112, 'wght' 300; font-size: var(--t-titre); line-height: 1.05; }
.danse-ou { margin-top: .4rem; font-size: var(--t-petit); font-weight: 700; line-height: 1.3; }
.danse-detail { margin-top: .45rem; font-size: var(--t-petit); line-height: 1.4; max-width: 36em; }
.danse-couples { grid-column: 1 / -1; display: grid; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(1.4rem, 3.5vw, 2.4rem); }
.danse-couples .couple-coupe { --part: var(--s-part); }
.danse-couples .couple-meta > :first-child { padding-left: var(--marge); }
.danse-couples .couple-meta > :last-child { padding-right: var(--marge); }
/* les rangs : une grande date pour les couples venus de loin, une petite pour un repas */
.danse--intl .danse-quand time, .danse--edition .danse-quand time { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); line-height: .82; }
.danse--intl .danse-nom, .danse--edition .danse-nom { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); }
.danse--petite .danse-quand time { font-size: var(--t-titre); font-weight: 900; }
.danse--petite .danse-nom { font-family: var(--f-texte); font-weight: 700; font-variation-settings: normal; font-size: var(--t-corps); }
.danse--petite { padding-block: 1rem; }
/* la fondation : une vignette collée dans le carnet */
.danse--fondation .danse-quoi { margin-inline: clamp(.5rem, 2vw, 2rem) var(--marge); padding: 1rem 1.15rem 1.1rem; background: var(--blanc); color: var(--encre); rotate: -1.5deg; box-shadow: 0 10px 24px var(--ombre); }
.danse--fondation .danse-nom { font-weight: 900; font-variation-settings: var(--plein); }
.danse--fondation .danse-quand time { font-size: clamp(2.2rem, 1.3rem + 4vw, 5rem); }
/* les 5 ans : le chiffre devient un nœud sur la couture */
.danse.danse--anniv { padding-bottom: clamp(5.5rem, 10vw, 8rem); }
.s-cinq {
  position: absolute; left: var(--s-part); bottom: .25rem;
  width: 1.15em; height: 1.15em; margin-left: -.575em;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--or); color: var(--encre);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--noeud); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1;
  rotate: -8deg;
}
.danse--derniere .danse-couples { margin-bottom: .5rem; }
/* la ligne s'écrit depuis la couture, comme au crayon (court : un reveal, pas une structure) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .danse-quand {
      animation-name: s-ecrit-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 10% entry 90%;
    }
    .danse-quoi {
      animation-name: s-ecrit-d; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 25% entry 100%;
    }
  }
}
@keyframes s-ecrit-g { from { clip-path: inset(-10% 0 -10% 100%); } to { clip-path: inset(-10% -10% -10% -10%); } }
@keyframes s-ecrit-d { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -10% -10% -10%); } }

.s-citation { margin: clamp(2rem, 5vw, 3.5rem) var(--marge) 0; font-size: clamp(1.35rem, 1rem + 1.5vw, 2.4rem); max-width: 26em; }
.s-suite { margin-top: var(--pas); text-align: center; padding-inline: var(--marge); }

/* les photos glissées dans le carnet : leur couture sur celle de la page ; elles se recollent au toucher */
.s-photo {
  --w: 88%;
  width: var(--w);
  margin: clamp(3rem, 8vw, 6rem) 0 0 calc(var(--s-part) - var(--w) * var(--k, .5));
  --ecart: clamp(1rem, 5vw, 4.5rem);
  --decal: clamp(.75rem, 3.4vw, 2.75rem);
}
.s-photo .photo-duo-cadre { box-shadow: 0 20px 44px var(--ombre); }
.s-photo figcaption { max-width: 30em; margin-top: calc(var(--decal) + .8rem); font-weight: 600; }
.s-photo--2019 { rotate: 1.2deg; }
.s-photo--2022 { --w: 64%; rotate: -1.6deg; }
.s-photo--2024 { --w: 92%; rotate: .8deg; }
@media (min-width: 900px) {
  .s-photo { --w: 60%; }
  .s-photo--2022 { --w: 32%; }
  .s-photo--2024 { --w: 70%; }
}
.photo-duo[data-recolle="focus"]:focus-visible { outline-offset: 10px; }

/* 2020 : deux objets, deux encres — le bar (rouge) | les platines (violet) ; en couleur au survol, au focus, au toucher */
.s-paire {
  display: grid; grid-template-columns: calc(var(--s-part) - var(--fil) / 2) calc(100% - var(--s-part) - var(--fil) / 2); column-gap: var(--fil);
  margin-top: clamp(3rem, 8vw, 6rem); cursor: pointer;
}
.s-paire-photo { margin: 0; min-width: 0; }
.s-paire-cadre { position: relative; aspect-ratio: 4 / 3; overflow: clip; }
.s-paire-cadre picture, .s-paire-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-paire-cadre img { object-fit: cover; }
.s-paire-encre { transition: clip-path 640ms var(--elan); }
.s-paire-photo--dj .s-paire-encre { transition: clip-path 720ms var(--prise) 120ms; }
.s-paire:is(:hover, :focus-visible, :focus-within, :active) .s-paire-photo--bar .s-paire-encre { clip-path: inset(0 100% 0 0); }
.s-paire:is(:hover, :focus-visible, :focus-within, :active) .s-paire-photo--dj .s-paire-encre { clip-path: inset(0 0 0 100%); }
.s-paire:focus-visible { outline-offset: 6px; }
.s-paire-photo figcaption { margin-top: .75rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.35; }
.s-paire-photo--bar figcaption { text-align: right; padding: 0 clamp(.75rem, 2.4vw, 2.75rem) 0 var(--marge); }
.s-paire-photo--dj figcaption { padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.75rem); }

@media (min-width: 900px) {
  .s-annee--courte .s-danses { margin-top: 1.5rem; }
  .s-citation { margin-left: calc(var(--s-part) + clamp(.75rem, 2.4vw, 2.75rem)); }
  .s-page--inverse .s-citation { margin-left: var(--marge); max-width: calc(var(--s-part) - var(--marge) - 3rem); }
  .danse-couples { gap: clamp(1.25rem, 2.4vw, 2.25rem); }
  .s-couples-grille { grid-template-columns: 1fr; }
}

/* =================================================================== 3. LA PROCHAINE LIGNE, TES PHOTOS */
.s-prochaine { padding-block: var(--pas) calc(var(--pas) + clamp(6rem, 12vw, 9rem)); overflow-x: clip; }
.s-prochaine-sur, .s-prochaine-titre { padding-inline: var(--marge); }
.s-prochaine-sur { margin-bottom: 1rem; }
.s-prochaine-titre { max-width: 11em; }
.s-ligne-vide {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: var(--part-suit) 1fr; row-gap: 1.25rem;
  padding-block: clamp(1.5rem, 4vw, 3rem);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--or) 85%, transparent) 1.2px, transparent 1.6px), radial-gradient(circle, color-mix(in srgb, var(--or) 85%, transparent) 1.2px, transparent 1.6px);
  background-size: 9px 4px, 9px 4px; background-repeat: repeat-x; background-position: 0 0, 0 100%;
}
/* la couture continue sur la ligne vide */
.s-ligne-vide::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--part-suit); width: var(--fil); margin-left: calc(var(--fil) / -2); background: var(--or); }
.s-ligne-date { grid-column: 1; justify-self: end; text-align: right; padding: 0 clamp(.75rem, 2.4vw, 2.75rem) 0 var(--marge); }
.s-ligne-date time { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: clamp(2.2rem, 1.2rem + 4.4vw, 6rem); line-height: .85; }
.s-ligne-date span { display: block; margin-top: .4rem; font-size: var(--t-petit); font-weight: 600; }
.s-ligne-nom { grid-column: 2; align-self: end; padding: 0 var(--marge) 0 clamp(.75rem, 2.4vw, 2.75rem); font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 118, 'wght' 300; font-size: var(--t-titre); line-height: 1.05; }
.s-toi { grid-column: 1 / -1; position: relative; z-index: 1; }
.s-toi .couple-z { font-weight: 200; font-variation-settings: 'wdth' 130, 'wght' 200; text-transform: none; }
.s-ligne-cta { grid-column: 2; padding: .5rem var(--marge) 0 clamp(.75rem, 2.4vw, 2.75rem); position: relative; z-index: 1; }
.s-ligne-cta .bouton { background: var(--or); color: var(--encre); }
.s-ligne-cta .cta-salle { font-size: inherit; font-weight: inherit; }
.s-ligne-cta .cta-salle:not(:empty)::before { content: "· "; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-toi .couple-x {
      animation-name: s-toi-x; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 55%;
    }
    .s-toi .couple-z {
      animation-name: s-toi-z; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 15% cover 62%;
    }
  }
}
@keyframes s-toi-x { from { translate: -1.2em 0; } }
@keyframes s-toi-z { from { translate: 1.4em 0; } }

.s-envoi { padding-block: 0 var(--pas); display: grid; gap: 2rem; }
/* le cadre vide, coins d'album compris, qui attend ta photo : il dépasse sur la ligne vide du carnet */
.s-cadre-vide {
  --cw: min(62vw, 24rem);
  position: relative; z-index: 2;
  width: var(--cw); aspect-ratio: 4 / 3;
  margin: calc(-1 * clamp(7rem, 14vw, 11rem)) 0 0 calc(var(--part-suit) - var(--cw) * .5);
  display: grid; place-content: center; text-align: center;
  font-family: var(--f-display); line-height: .9;
  background:
    linear-gradient(135deg, var(--or) 0 20px, transparent 20.5px) top left / 44px 44px no-repeat,
    linear-gradient(225deg, var(--or) 0 20px, transparent 20.5px) top right / 44px 44px no-repeat,
    linear-gradient(45deg, var(--or) 0 20px, transparent 20.5px) bottom left / 44px 44px no-repeat,
    linear-gradient(315deg, var(--or) 0 20px, transparent 20.5px) bottom right / 44px 44px no-repeat;
  border: 2px dashed color-mix(in srgb, var(--or) 80%, transparent); border-radius: 4px;
  rotate: -3deg;
}
.s-cadre-q { font-weight: 200; font-variation-settings: 'wdth' 120, 'wght' 200; font-size: clamp(3rem, 1.8rem + 3vw, 4.5rem); }
.s-cadre-r { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s-cadre-vide {
      animation-name: s-cadre; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes s-cadre { from { rotate: -11deg; translate: 0 2.5rem; } }
.s-envoi-tete { padding-inline: var(--marge); }
.s-envoi-texte { padding-inline: var(--marge); max-width: 38rem; display: grid; gap: 1rem; font-size: var(--t-corps); }
.s-envoi-ac { font-size: var(--t-petit); font-weight: 600; }
@media (min-width: 900px) {
  .s-prochaine-titre { margin-left: var(--part-suit); padding-left: clamp(.75rem, 2.4vw, 2.75rem); }
  .s-prochaine-sur { margin-left: var(--part-suit); padding-left: clamp(.75rem, 2.4vw, 2.75rem); }
  .s-envoi { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; align-items: end; }
  .s-cadre-vide { grid-column: 1 / -1; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
  .s-envoi-tete { justify-self: end; text-align: right; padding: 0 clamp(.75rem, 2.4vw, 2.75rem) 0 var(--marge); }
  .s-envoi-tete .duo-titre { max-width: 8em; }
  .s-envoi-texte { padding: 0 var(--marge) .5rem clamp(.75rem, 2.4vw, 2.75rem); }
}

/* =================================================================== très petit écran / zoom 400–500 % */
@media (max-width: 21.9rem) {
  .s-titre { font-size: 3rem; }
  .s-q { font-variation-settings: 'wdth' 72, 'wght' 200; }
  .s-hero { --s-pw: 84cqi; }
  .s-bornes { font-size: 3rem; }
  .s-an { font-size: 5rem; }
  .s-an-g { font-variation-settings: 'wdth' 90, 'wght' 200; }
  .danse { grid-template-columns: 1fr; }
  .danse-quand { justify-self: start; text-align: left; }
  .danse-quoi { grid-column: 1; padding-left: var(--marge); margin-top: .6rem; }
  .s-photo, .s-photo--2022, .s-photo--2024 { --w: 100%; margin-left: 0; rotate: none; }
  .s-paire { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .s-ligne-vide { grid-template-columns: 1fr; }
  .s-ligne-date, .s-ligne-nom, .s-ligne-cta { grid-column: 1; justify-self: start; text-align: left; padding-inline: var(--marge); }
  .danse-quand time { font-size: 2rem !important; }
  /* les grands couples (2,6 rem au plancher) ne tiennent plus dans la colonne de 45 % : « ALONSO » se coupait et sortait à gauche */
  .danse-couples .couple-coupe--grand { --taille: 2.25rem; }
}

/* CHARTE v1.0 (05.10.2026) : les années, en plein, signées or (charte §09 : dates en plein ; §07 : l'or des titres sur noir) */
.s-an-d { color: var(--or); }