/* pages/sunday-vibes-2026.css — Lausanne Sunday Vibes & Raclette, dimanche 18 octobre 2026 (gabarit événement, court).
   La note de l'édition : ROUGE automne (#D7261C, décision Yann 06.10.2026), avec la maison noir et or. Texte BLANC sur
   rouge (charte §08 : 5,0:1 ; jamais de noir sur rouge sous 24 px, ni de crème : 4,3:1). Le rouge vit à deux endroits :
   le cartouche date du héros et l'aplat des tarifs. Un mouvement par chapitre ; mouvement réduit = frame finale.
   1 Le héros : une mesure d'intro (le titre monte, le cartouche se pose, la photo se pose)
   2 Le programme : cinq créneaux en liste nette ; l'heure et ce qu'on y fait se rejoignent (scroll-driven)
   3 Les tarifs : l'aplat rouge, cinq formules en liste nette (la Full Experience en avant)
   4 Les artistes : une affiche en deux lignes (Monica, DJ Nino)
   5 Le lieu : un bloc factuel, une photo de la salle (zoom), l'adresse, l'itinéraire (P2 11.10.2026)
   6 Ensuite : le billet du Winter déborde sur le lieu, la souche se détache (prise franche)
   Variables locales = réglages de cette page (préfixe --sv-). Couleurs, polices, durées : tokens.css. */

.page-sunday { --sv-debord: clamp(5rem, calc(9 * var(--vw)), 7.5rem); }   /* ce que le billet « Ensuite » mord sur le lieu */

/* =================================================================== 1. LE HÉROS */
.sv-heros {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "tete" "infos";   /* téléphone : une bande de photo d'abord, « Je participe » reste dans le premier écran */
  background: var(--noir);
}
.sv-heros-tete { grid-area: tete; padding: 1.25rem var(--marge) 0; }
.sv-presente { margin-bottom: 1rem; }
.sv-presente::after { content: ""; display: block; width: 4rem; height: var(--fil); margin-top: .7rem; background: var(--or); }   /* le filet or (charte §10) */
.sv-titre {
  display: grid; justify-items: start; width: fit-content; max-width: 100%;
  font-family: var(--f-display); font-size: clamp(5rem, 2rem + calc(7 * var(--vw)), 9rem); line-height: .86; letter-spacing: -.01em;
}
.sv-l { display: block; overflow: clip; padding-block: .05em .08em; margin-block: -.05em -.08em; }
.sv-l > span { display: block; }
.sv-l--q > span { font-size: .36em; font-weight: 200; font-variation-settings: var(--delie); line-height: 1.15; color: var(--texte); }
.sv-l--r > span { font-weight: 900; font-variation-settings: var(--plein); text-transform: uppercase; color: var(--or); }
.sv-l--et { justify-self: end; }
.sv-l--et > span { font-size: .42em; font-weight: 200; font-variation-settings: var(--delie); line-height: 1.15; color: var(--texte); }

.sv-heros-infos {
  grid-area: infos; align-self: start;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1rem;
  padding: 1.25rem var(--marge) 1.75rem;   /* P2 11.10.2026 : « Billetterie ↗ » entier dans le premier écran à 375 × 812 */
}
.sv-heros .cartouche { font-size: clamp(1.05rem, .8rem + calc(1 * var(--vw)), 1.6rem); }
.sv-quand { flex: 1 1 12rem; display: grid; gap: .25rem; }
.sv-date { font-family: var(--f-display); font-weight: 800; font-variation-settings: 'wdth' 80, 'wght' 800; font-size: var(--t-titre); line-height: 1.05; }
.sv-heures { font-weight: 700; color: var(--or); }
.sv-ou { font-size: var(--t-petit); line-height: 1.35; color: var(--texte-2); }
.sv-ou strong { color: var(--texte); }
.sv-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.sv-billetterie { flex: 1 1 100%; margin-top: -.4rem; color: var(--texte-3); }

.sv-photo { grid-area: photo; position: relative; margin: 0; aspect-ratio: 5 / 2; overflow: clip; }
.sv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 45%; }

@media (min-width: 900px) {
  .sv-heros {
    grid-template-columns: var(--part-suit) var(--part-guide);
    grid-template-areas: "photo tete" "photo infos";
    grid-template-rows: 1fr auto;
    min-height: calc(100svh - var(--barre-h) - var(--bandeau-h));
  }
  .sv-photo { aspect-ratio: auto; min-height: 30rem; }
  .sv-heros-tete { align-self: end; padding: 2.5rem var(--marge) 0 clamp(1.75rem, calc(4 * var(--vw)), 4.5rem); }
  .sv-heros-infos { padding: 2rem var(--marge) 2.75rem clamp(1.75rem, calc(4 * var(--vw)), 4.5rem); column-gap: 1.5rem; }
}
/* une mesure d'intro : le titre monte ligne à ligne, le cartouche se pose, la photo se pose (transform seulement) */
@media (prefers-reduced-motion: no-preference) {
  .sv-l > span { animation: sv-monte calc(var(--temps) * 2) var(--elan) both; animation-delay: calc(100ms + var(--i, 0) * 110ms); }
  .sv-heros .cartouche { animation: sv-pose var(--temps) var(--prise) 640ms both; }
  .sv-photo img { animation: sv-zoom var(--mesure) var(--elan) both; }
}
@keyframes sv-monte { from { translate: 0 105%; } }
@keyframes sv-pose  { from { translate: 0 -1.5rem; } }
@keyframes sv-zoom  { from { scale: 1.12; } }

/* =================================================================== têtes de chapitre (sur-titre + duo-titre) */
.sv-tete { display: grid; gap: .75rem; padding-inline: var(--marge); }
.sv-tete .duo-titre { font-size: var(--t-h2); max-width: 10em; }
@media (min-width: 900px) {
  .sv-tete { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding: 0; align-items: start; }
  .sv-tete .sur-titre { grid-column: 1; justify-self: end; text-align: right; padding: 1.4rem clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .sv-tete > :not(.sur-titre) { grid-column: 2; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .sv-tete .duo-titre { grid-row: 1; }
  .sv-tete > :not(.sur-titre, .duo-titre) { margin-top: .9rem; }
}

/* =================================================================== 2. LE PROGRAMME : cinq créneaux, une liste nette
   (P2 11.10.2026) : l'heure à gauche, ce qu'on y fait à droite ; plus de citation sous chaque créneau, plus de source. */
.sv-programme { padding-block: var(--pas); }
.sv-accroche { max-width: 34rem; font-size: var(--t-corps); line-height: 1.4; color: var(--texte-2); }
.sv-gagner { max-width: 34rem; margin-top: .6rem; font-size: var(--t-petit); font-weight: 700; line-height: 1.4; }   /* annonce du 12.10.2026 */
.sv-prog { margin-top: clamp(1.75rem, calc(4 * var(--vw)), 3.5rem); border-bottom: 1px solid var(--ligne-forte); }
.sv-cr {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline;
  padding: .85rem var(--marge) .95rem; border-top: 1px solid var(--ligne-forte);
}
.sv-cr-h { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(1.5rem, 1.1rem + calc(2.2 * var(--vw)), 3.5rem); line-height: 1; color: var(--or); font-variant-numeric: tabular-nums; }
.sv-cr-debut { display: block; white-space: nowrap; }
.sv-cr-fin { display: block; margin-top: .3rem; font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 600; font-variation-settings: normal; line-height: 1.2; color: var(--texte-2); white-space: nowrap; }
.sv-cr-quoi { display: grid; gap: .25rem; }
.sv-cr-titre { font-family: var(--f-display); font-weight: 700; font-variation-settings: 'wdth' 100, 'wght' 700; font-size: clamp(1.15rem, 1rem + calc(.9 * var(--vw)), 1.9rem); line-height: 1.1; }
.sv-cr-dit { font-size: var(--t-petit); line-height: 1.4; color: var(--texte-2); }
@media (min-width: 900px) {
  .sv-cr { grid-template-columns: var(--part-suit) var(--part-guide); column-gap: 0; padding-inline: 0; align-items: center; padding-block: 1.25rem; }
  .sv-cr-h { justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .sv-cr-quoi { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}
/* l'heure (à gauche) et ce qu'on y fait (à droite) se rejoignent, comme deux danseurs qui se trouvent */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-cr-h {
      animation-name: sv-pas-g; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 38%;
    }
    .sv-cr-quoi {
      animation-name: sv-pas-d; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 10% cover 42%;
    }
  }
}
@keyframes sv-pas-g { from { translate: -2rem 0; } }
@keyframes sv-pas-d { from { translate: 2rem 0; } }
.sans-sd .sv-cr-h, .sans-sd .sv-cr-quoi { transition: translate 700ms var(--elan); }
.sans-sd .sv-cr:not(.vu) .sv-cr-h { translate: -2rem 0; }
.sans-sd .sv-cr:not(.vu) .sv-cr-quoi { translate: 2rem 0; }

/* =================================================================== 3. LES TARIFS : l'aplat rouge (texte BLANC), cinq formules en liste nette
   (P2 11.10.2026) : nom et prix sur une ligne, ce qui est compris dessous, en phrase ; la Full Experience en document noir. */
.sv-tarifs { padding-block: var(--pas); background: var(--rouge); color: var(--blanc); }
.sv-tarifs .sur-titre, .sv-tarifs .duo-q, .sv-tarifs .duo-r { color: var(--blanc); }
.sv-formules { display: grid; margin-top: clamp(1.75rem, calc(4 * var(--vw)), 3rem); padding-inline: var(--marge); }
.sv-formule {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .35rem; align-items: baseline;
  padding: .8rem 0 .85rem; border-bottom: 1px solid color-mix(in srgb, var(--blanc) 45%, transparent);
}
.sv-formule-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); text-transform: uppercase; font-size: clamp(1.3rem, 1.05rem + calc(1 * var(--vw)), 2.1rem); line-height: 1; }
.sv-prix { display: flex; align-items: baseline; gap: .3em; white-space: nowrap; }
.sv-prix-chf { font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; }
.sv-prix-n { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(1.9rem, 1.4rem + calc(1.6 * var(--vw)), 3.2rem); line-height: .9; }
.sv-compris { grid-column: 1 / -1; max-width: 34rem; font-size: var(--t-petit); line-height: 1.4; }
.sv-formule--full { margin-bottom: .35rem; padding: 1.1rem 1rem 1.2rem; border: 0; border-radius: var(--rayon); background: var(--noir); color: var(--texte); }
.sv-formule--full .sv-formule-nom, .sv-formule--full .sv-prix-n { color: var(--or); }
.sv-formule--full .sv-formule-nom { font-size: clamp(1.6rem, 1.2rem + calc(1.6 * var(--vw)), 2.8rem); }
.sv-formule--full .sv-prix-n { font-size: clamp(2.6rem, 1.8rem + calc(2.6 * var(--vw)), 4.6rem); }
.sv-tarifs-pied { display: grid; justify-items: start; gap: 1rem; padding: 1.25rem var(--marge) 0; }
.sv-raclette { max-width: 36rem; font-size: var(--t-corps); font-weight: 700; line-height: 1.35; }
.sv-membres { max-width: 36rem; font-size: var(--t-petit); line-height: 1.45; }   /* annonce du 12.10.2026 */
.sv-membres-lien { margin-top: -.5rem; }
.sv-tarifs :focus-visible { outline-color: var(--blanc); }
@media (min-width: 900px) {
  .sv-tarifs { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: start; }
  .sv-tarifs > .sv-tete { grid-column: 1 / -1; }
  .sv-formules { grid-column: 2; grid-row: 2; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .sv-tarifs-pied { grid-column: 1; grid-row: 2; align-self: end; justify-items: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 1rem var(--marge); }
}
/* les formules montent en escalier : plus elles sont loin, plus elles viennent de bas */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-formule {
      animation-name: sv-escalier; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes sv-escalier { from { translate: 0 calc(.75rem + var(--n, 0) * .5rem); } }

/* =================================================================== 4. LES ARTISTES : Monica, Aurora & Nino (stages) | DJ Nino (social)
   (P2 11.10.2026) : plus de cadre « Photo à fournir » ; Monica en nom seul, DJ Nino avec sa photo en vignette. */
.sv-artistes { padding-block: var(--pas); background: var(--noir); }
.sv-gens { margin-top: clamp(1.5rem, calc(4 * var(--vw)), 3rem); padding-inline: var(--marge); }
.sv-artiste {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-content: center;
  padding: .9rem 0; border-top: 1px solid var(--ligne-forte);
}
.sv-artiste:last-child { border-bottom: 1px solid var(--ligne-forte); }
.sv-artiste > :not(.sv-portrait) { grid-column: 1; }
.sv-portrait { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: clamp(5.5rem, 4rem + calc(6 * var(--vw)), 10rem); aspect-ratio: 4 / 5; margin: 0; overflow: clip; border-radius: var(--rayon); background: var(--noir-2); }
.sv-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sv-artiste-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); text-transform: uppercase; font-size: clamp(2.25rem, 1.4rem + calc(3.6 * var(--vw)), 5rem); line-height: .88; color: var(--or); }
.sv-artiste-role { margin-top: .5rem; font-size: var(--t-mini); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sv-artiste-dit { margin-top: .3rem; font-size: var(--t-petit); line-height: 1.4; color: var(--texte-2); }
@media (min-width: 900px) {
  .sv-gens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, calc(4 * var(--vw)), 4rem); }
  .sv-artiste--nino { grid-column: 2; grid-row: 1 / span 2; }   /* Monica et Aurora & Nino à gauche, DJ Nino à droite */
  .sv-artiste:last-child { border-bottom: 0; }
  .sv-gens { border-bottom: 1px solid var(--ligne-forte); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-artiste--monica, .sv-artiste--duo, .sv-artiste--nino {
      animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    .sv-artiste--monica, .sv-artiste--duo { animation-name: sv-vient-g; }
    .sv-artiste--nino { animation-name: sv-vient-d; }
  }
}
@keyframes sv-vient-g { from { translate: -2rem 0; } }
@keyframes sv-vient-d { from { translate: 2rem 0; } }

/* =================================================================== 5. LE LIEU : un bloc factuel (P2 11.10.2026)
   Une photo de la salle, l'adresse, le parking, l'itinéraire. Plus de citation de l'ancien site, plus de source. */
.sv-lieu { padding-top: var(--pas); padding-bottom: calc(var(--pas) + var(--sv-debord)); }
.sv-lieu-corps { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, calc(4 * var(--vw)), 3rem); }
.sv-lieu-photo { margin: 0; min-width: 0; }
.sv-lieu-cadre { position: relative; aspect-ratio: 16 / 9; overflow: clip; }
.sv-lieu-cadre picture, .sv-lieu-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-lieu-cadre img { object-fit: cover; object-position: 38% 50%; }
.sv-lieu-photo figcaption { padding: .6rem var(--marge) 0; color: var(--texte-3); }
.sv-adresse { display: grid; justify-items: start; gap: .7rem; padding-inline: var(--marge); }
.sv-adresse-rue { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: .95; color: var(--or); }
.sv-lieu-dit { max-width: 32rem; line-height: 1.45; }
.sv-adresse .lien-pas { padding-block: .6rem; }
.sv-adresse .lien-pas .petit { font-weight: 500; }
@media (min-width: 900px) {
  .sv-lieu-corps { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; align-items: center; }
  .sv-lieu-photo { padding-left: var(--marge); padding-right: clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .sv-lieu-cadre { aspect-ratio: 3 / 2; border-radius: var(--rayon); }
  .sv-lieu-photo figcaption { padding-inline: 0; text-align: right; }
  .sv-adresse { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-lieu-cadre { view-timeline-name: --sv-lieu; }
    .sv-lieu-cadre img {
      animation-name: sv-zoom; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --sv-lieu; animation-range: entry 0% cover 70%;
    }
  }
}

/* =================================================================== 6. ENSUITE : le billet du Winter (un document blanc) déborde sur le lieu */
.sv-ensuite { padding: 0 var(--marge) calc(var(--pas) * .6); }   /* P2 11.10.2026 : le pas d'avant / pas d'après suit, il fait la marge */
.sv-billet {
  --souche: 36%;
  position: relative; z-index: 3;
  max-width: 60rem; margin: calc(-1 * var(--sv-debord)) auto 0;
}
.sv-billet-date { display: flex; flex-direction: column; }
.sv-billet .billet-date { font-size: clamp(3.5rem, 2rem + calc(6 * var(--vw)), 7.5rem); }
.sv-billet-lieu { margin-top: 1rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.35; }
.sv-billet .billet-talon .sur-titre { margin-bottom: .5rem; }
.sv-billet-titre { font-size: clamp(1.8rem, 1.1rem + calc(2.6 * var(--vw)), 3.4rem); }
.sv-billet-statut { margin-top: .6rem; }
.sv-billet-billetterie { margin-top: .9rem; }   /* « Billetterie ↗ » sous « Je participe » (08.10.2026) */
.sv-ensuite-agenda { margin-top: clamp(1.5rem, calc(4 * var(--vw)), 2.5rem); text-align: center; }
/* la souche se détache : frame finale = détachée ; prise franche sur un court passage du défilement */
.sv-billet .billet-souche { translate: -10px 8px; rotate: -3deg; transform-origin: 100% 0; transition: none; }
@media (max-width: 599px) {
  .sv-billet .billet-souche { transform-origin: 0 100%; translate: -4px -10px; rotate: -2.5deg; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sv-billet { view-timeline-name: --sv-prise; }
    .sv-billet .billet-souche {
      animation-name: sv-prise; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: --sv-prise; animation-range: cover 30% cover 50%;
    }
  }
}
@keyframes sv-prise { from { translate: 0 0; rotate: 0deg; } }
.sans-sd .sv-billet .billet-souche { transition: translate 520ms var(--prise), rotate 520ms var(--prise); }
.sans-sd .sv-billet:not(.vu) .billet-souche { translate: 0 0; rotate: 0deg; }

/* =================================================================== zones tactiles ≥ 44 px (P2 11.10.2026) : les liens isolés */
.sv-actions > .lien-pas, .sv-ensuite-agenda .lien-pas, .sv-billet-billetterie .lien-pas { padding-block: .6rem; }