/* pages/souvenirs.css — le carnet de bal (2016 → 2026), la seule chronologie du site. 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
   2 Les années (11.10.2026 : compactes) : chaque année est coupée sur la couture (« 20 » en délié | « 16 » en plein) et
     se recolle au défilement ; une à trois phrases, les rendez-vous (date en or | nom, lieu, artistes), au plus une photo
   3 La prochaine ligne : vide, « Toi y qui ? » ; tes photos. 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, calc(6 * var(--vw)), 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: none; }   /* 06.10.2026 : plus de ligne verticale */

.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 + calc(7 * var(--vw)), 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 + calc(7 * var(--vw)), 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, calc(10 * var(--vw)), 7rem) auto 0; padding-inline: var(--marge); font-size: var(--t-corps); text-align: center; }
/* 11.10.2026 : au téléphone, le carnet ne prend plus tout l'écran (la photo un peu plus petite, la consigne plus près) */
@media (max-width: 1099px), (max-aspect-ratio: 1/1) {
  .s-hero { --s-pw: min(50cqi, 17rem); padding-bottom: 1.5rem; }
  .s-carnet { min-height: 0; row-gap: 10px; }
  .s-bornes { font-size: clamp(2.5rem, 1.5rem + calc(5 * var(--vw)), 4rem); }
  /* la consigne, à droite du crayon qui pend sous le carnet */
  .s-mode-emploi { min-height: 6rem; margin-top: 1.1rem; padding-left: calc(45% + 1.75rem); text-align: left; font-size: var(--t-petit); }
}

/* 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 ANNÉES DU CARNET (11.10.2026)
   Une section par année, noir et noir-2 en alternance. Téléphone : une colonne (l'année, le texte, les rendez-vous, la
   photo). Bureau : l'année à cheval sur la couture, le texte et la photo à gauche, les rendez-vous à droite. */
.s-annee {
  padding-block: 1.3rem 1.4rem; background: var(--guide); overflow-x: clip;
  scroll-margin-top: calc(var(--barre-h) + 1rem);
}
.s-annee:nth-child(even) { background: var(--suit); }

/* 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(--part-suit) 1fr; align-items: baseline;
  font-family: var(--f-display); font-size: clamp(3.5rem, 1rem + calc(12 * var(--vw)), 12rem); 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; }
@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 50%;
    }
    .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 55%;
    }
  }
}
@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 à trois phrases */
.s-an-texte { margin-top: .9rem; padding-inline: var(--marge); max-width: calc(34rem + 2 * var(--marge)); font-size: var(--t-petit); line-height: 1.42; }

/* une ligne du carnet : dans la marge, la date (en plein, or) et le lieu | le nom, un détail, les artistes, les DJs */
.s-danses { clear: both; margin-top: .6rem; padding-inline: var(--marge); }
.danse {
  display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); column-gap: .75rem; align-items: start;
  padding-block: .6rem;
  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; }
/* 11.10.2026 : la dernière ligne visible (les lignes de tools/agenda.cjs, masquées tant que leur date n'est pas passée,
   peuvent la suivre) */
.danse:not(:has(~ .danse:not([hidden]))) { padding-bottom: 0; }
.danse-marge { min-width: 0; padding-top: .1rem; }
.danse-quand time { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: 1.3rem; line-height: 1; color: var(--or); overflow-wrap: anywhere; }
.danse-quoi { min-width: 0; }
.danse-nom { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 100, 'wght' 300; font-size: clamp(1.25rem, 1.1rem + calc(.6 * var(--vw)), 1.75rem); line-height: 1.08; }   /* délié 300 : 20 px au moins */
/* le « e » de « 3e » : en Anybody 300, un exposant de 13 px perd sa lisibilité (règle des accents : pas de délié ≤ 300
   sous 20 px) ; il passe en Epilogue, la police du texte (11.10.2026) */
.danse-nom sup { font-family: var(--f-texte); font-variation-settings: normal; font-weight: 500; }
.danse-ou { margin-top: .3rem; font-size: var(--t-mini); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.danse-ou span { display: block; }
.danse-ou span + span { font-weight: 500; color: var(--texte-2); }
.danse-avec { display: flex; flex-wrap: wrap; gap: .2rem .75rem; margin-top: .35rem; font-size: var(--t-petit); line-height: 1.3; }
.danse-avec li { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; }
.danse-dj { color: var(--texte-2); }   /* les DJs, au bout de la liste des artistes */
.danse-plus { margin-top: .25rem; font-size: var(--t-petit); line-height: 1.35; }
.danse-lien .lien-pas { min-height: 44px; }
/* le couple, en petit : les prénoms en plein, le nœud (y, &) en or (le « couple coupé » des pages, sans la couture) */
.couple-mini { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: 1.02rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.couple-mini .y {
  display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-inline: .12em; vertical-align: .08em;
  border-radius: 50%; background: var(--or); color: var(--noir);
  font-size: .7em; line-height: 1; text-transform: none; font-variation-settings: var(--noeud);
}
/* la ligne s'écrit depuis la gauche, comme au crayon (court : un reveal, pas une structure) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .danse-quoi {
      animation-name: s-ecrit; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 10% entry 90%;
    }
  }
}
@keyframes s-ecrit { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }

/* au plus une photo par année, glissée dans le carnet (jamais deux fois la même dans la page ; celle du pied n'y est pas).
   Téléphone : elle flotte à droite du texte de l'année ; les rendez-vous passent dessous. */
.s-photo { float: right; width: 41%; margin: .9rem var(--marge) .5rem 1rem; rotate: 1.5deg; }
.s-annee:nth-child(even) .s-photo { rotate: -1.5deg; }
.s-photo--portrait { width: 29%; }
.s-photo img { display: block; width: 100%; height: auto; box-shadow: 0 12px 28px var(--ombre); }
.s-photo figcaption { margin-top: .5rem; font-size: var(--t-mini); font-weight: 600; line-height: 1.3; }

@media (min-width: 900px) {
  .s-annee { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); grid-template-rows: auto auto auto 1fr; align-content: start; padding-block: 3rem 3.5rem; }
  .s-an { grid-column: 1 / -1; }
  .s-an-texte {
    grid-column: 1; grid-row: 2; justify-self: end; text-align: right; max-width: 28rem;
    margin-top: 1.75rem; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge);
    font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 104, 'wght' 300; font-size: var(--t-titre); line-height: 1.15;
  }
  .s-photo { float: none; grid-column: 1; grid-row: 3; justify-self: end; width: min(70%, 26rem); margin: 2rem clamp(1.5rem, calc(4 * var(--vw)), 4rem) 0 var(--marge); }
  .s-photo--portrait { width: min(42%, 16rem); }
  .s-danses { grid-column: 2; grid-row: 2 / span 3; margin-top: 1.25rem; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); max-width: 48rem; }
  .danse { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: 1rem; }
  .danse-quand time { font-size: 1.75rem; }
  .couple-mini { font-size: 1.35rem; }
}

/* =================================================================== 3. LA PROCHAINE LIGNE, TES PHOTOS */
.s-prochaine { padding-block: var(--pas) calc(var(--pas) + clamp(4.5rem, calc(10 * var(--vw)), 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, calc(6 * var(--vw)), 4.5rem);
  display: grid; grid-template-columns: var(--part-suit) 1fr; row-gap: 1.25rem;
  padding-block: clamp(1.5rem, calc(4 * var(--vw)), 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: none; }   /* 06.10.2026 : plus de ligne verticale */
.s-ligne-date { grid-column: 1; justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 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 + calc(4.4 * var(--vw)), 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, calc(2.4 * var(--vw)), 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, calc(2.4 * var(--vw)), 2.75rem); position: relative; z-index: 1; }
.s-ligne-cta .bouton { background: var(--or); color: var(--encre); }
@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: 1.5rem; }
/* 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(calc(42 * var(--vw)), 24rem);
  position: relative; z-index: 2;
  width: var(--cw); aspect-ratio: 4 / 3;
  margin: calc(-1 * clamp(5.5rem, calc(13 * var(--vw)), 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(2.25rem, 1.2rem + calc(3.4 * var(--vw)), 4.5rem); }
.s-cadre-r { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: clamp(2rem, 1.1rem + calc(3.2 * var(--vw)), 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: .6rem; font-size: var(--t-corps); }
.s-envoi-texte .lien-pas { min-height: 44px; }
.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, calc(2.4 * var(--vw)), 2.75rem); }
  .s-prochaine-sur { margin-left: var(--part-suit); padding-left: clamp(.75rem, calc(2.4 * var(--vw)), 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, calc(4 * var(--vw)), 3.5rem); }
  .s-envoi-tete { justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .s-envoi-tete .duo-titre { max-width: 8em; }
  .s-envoi-texte { padding: 0 var(--marge) .5rem clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}

/* téléphone (11.10.2026) : la prochaine ligne et l'envoi, resserrés */
@media (max-width: 899px) {
  .s-prochaine { padding-block: 2.25rem calc(1.5rem + clamp(4.5rem, calc(10 * var(--vw)), 9rem)); }
  .s-prochaine .s-toi { --taille: 2.1rem; }
  .s-ligne-vide { margin-top: 1.25rem; padding-block: 1.1rem; row-gap: .9rem; }
  .s-envoi { padding-bottom: 2.5rem; }
}

/* =================================================================== 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: 3.75rem; }
  .s-an-g { font-variation-settings: 'wdth' 90, 'wght' 200; }
  .danse { grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: .6rem; }
  .danse-quand time { font-size: 1.15rem; }
  .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); }
}

/* 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); }