/* pages/winter-2026.css — Lausanne Bachata Winter, page « Bientôt » (10.10.2026 : refaite en court, sur le modèle de
   /sunday-vibes-2026/ ; l'ancienne version est archivée dans lab/archives/p1-2026-10-10/). Un mouvement par chapitre :
   1 Le billet géant : souche | talon, une mesure d'intro (les deux moitiés se posent) ; date, nom, lieu, statut « Bientôt »
   2 Le format des éditions précédentes : trois lignes qui montent d'un pas au défilement
   3 Le lieu : très court, l'adresse et l'itinéraire (P2 11.10.2026 : plus de photos ni de citation)
   4 Rester au courant : le billet blanc (statut, + Calendrier, Partager : tools/agenda.cjs), Instagram, un lien vers /soutenir/
   Variables locales = réglages de géométrie de cette page (préfixe --w-). Couleurs, polices, durées : tokens.css. */

/* =================================================================== 1. LE BILLET GÉANT */
.w-hero {
  --w-mx: 10px;               /* marge latérale du billet */
  --w-my: 8px;                /* marge haute / basse */
  --w-pad: 14px;              /* marge intérieure du papier */
  --w-gap: 12px;              /* demi-écart des deux moitiés, au repos */
  --w-off: 30px;              /* le temps de retard de la souche (celle qui suit) */
  --w-kg: .8093;              /* tirage « soiree » : largeur moitié gauche / hauteur (730 / 902) */
  --w-kd: .6874;              /* moitié droite (620 / 902) */
  --w-ph: clamp(9rem, 100svh - 35.5rem, 24rem);   /* hauteur de la photo imprimée */
  --w-cs: calc(45cqi - var(--w-mx));               /* largeur de la souche = position de la perforation dans le billet */
  --w-ct: calc(55cqi - var(--w-mx));               /* largeur du talon */
  --w-gw: min(calc(var(--w-cs) - var(--w-pad)), calc(var(--w-ph) * var(--w-kg)));
  --w-dw: min(calc(var(--w-ct) - var(--w-pad)), calc(var(--w-ph) * var(--w-kd)));
  background: var(--encre);
}
.w-scene {
  container-type: inline-size;
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--barre-h) - var(--bandeau-h));
  overflow: clip;
}
.w-billet {
  position: relative; isolation: isolate;
  margin: var(--w-my) var(--w-mx) calc(var(--w-my) + 4px);
  display: grid;
  grid-template-columns: [s] var(--w-cs) [t] 1fr [fin];
  grid-template-rows: [tete] auto [photo] var(--w-ph) [bas] auto [lieu] 1fr;
  row-gap: 12px;
  padding-block: var(--w-pad);
}
/* les deux papiers : la souche rouge (celle qui suit), le talon violet (celui qui guide), encoches sur la perforation */
.w-papier { position: absolute; top: 0; bottom: 0; z-index: -1; isolation: isolate; }
.w-papier::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);
}
.w-papier--s {
  left: 0; width: var(--w-cs);
  background: var(--suit);
  border-radius: var(--rayon) 0 0 var(--rayon);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent 13px, #000 13.5px) bottom / 100% 51% no-repeat;
}
.w-papier--t {
  left: var(--w-cs); right: 0;
  background: var(--guide);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent 13px, #000 13.5px) bottom / 100% 51% no-repeat;
}
/* le filet des papiers : seulement sur le bord extérieur du billet. Rien sur la jonction souche | talon : les deux filets
   intérieurs y faisaient une ligne verticale qui coupait le titre (« Lausa|nne ») et la photo (audit 08.10, P1-3). */
.w-papier--s { box-shadow: inset 2px 0 0 var(--ligne-forte), inset 0 2px 0 var(--ligne-forte), inset 0 -2px 0 var(--ligne-forte); }
.w-papier--t { box-shadow: inset -2px 0 0 var(--ligne-forte), inset 0 2px 0 var(--ligne-forte), inset 0 -2px 0 var(--ligne-forte); }
/* la perforation, en pointillé or : seulement entre la souche et le talon, SOUS la photo (un élément de la grille du
   billet, rangées « bas » et « lieu ») ; elle ne traverse plus ni le titre ni la photo. Au bureau : pas de perforation. */
.w-billet::after {
  content: ""; grid-column: t; grid-row: bas / -1; justify-self: start; z-index: 1;
  width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--or) 0 7px, transparent 7px 14px);
}

/* ---- le titre */
.w-tete {
  grid-column: s / fin; grid-row: tete;
  position: relative; z-index: 3;
  padding-inline: var(--w-pad);
}
.w-presente { margin-bottom: .55rem; }
.w-titre { font-family: var(--f-display); font-size: clamp(3.25rem, 1.6rem + calc(7.4 * var(--vw)), 7rem); line-height: .9; letter-spacing: 0; }
.w-titre .w-q, .w-titre .w-r, .w-titre .w-l { display: block; }
.w-titre .w-l { overflow: clip; overflow-clip-margin: .1em; padding-bottom: .04em; }
.w-titre .w-l > span { display: block; }
.w-q { font-weight: 200; font-variation-settings: 'wdth' 100, 'wght' 200; }
/* « Bachata » commence sur la couture : la phrase passe d'une encre à l'autre */
.w-q .w-l + .w-l { padding-left: calc(var(--w-cs) - var(--w-pad) - .04em); }
.w-r { font-size: 2em; line-height: .84; margin-top: .02em; font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; text-transform: uppercase; letter-spacing: -.005em; }

/* ---- la date (souche) */
.w-date {
  grid-column: s; grid-row: bas; align-self: start;
  display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: end;
  padding-inline: var(--w-pad) .5rem;
  position: relative; z-index: 3;
}
.w-jour { grid-column: 1 / -1; font-size: var(--t-petit); font-weight: 700; letter-spacing: .04em; }
.w-jj { grid-row: 2 / span 2; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900; font-size: clamp(5.5rem, 3rem + calc(10 * var(--vw)), 9rem); line-height: .78; letter-spacing: -.02em; }
.w-mm, .w-an { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: clamp(1.15rem, .9rem + calc(1 * var(--vw)), 2rem); line-height: .95; }
.w-mm { align-self: end; }
.w-an { align-self: end; padding-bottom: .1em; }

.w-lieu-billet {
  grid-column: s; grid-row: lieu; align-self: end;
  padding-inline: var(--w-pad) .5rem;
  font-size: var(--t-petit); font-weight: 600; line-height: 1.3;
  position: relative; z-index: 3;
}
.w-lieu-nom { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(1.3rem, 1rem + calc(1.2 * var(--vw)), 2.1rem); line-height: 1; margin-bottom: .25rem; }

/* ---- les infos et le CTA (talon) */
.w-infos {
  grid-column: t; grid-row: bas / span 2; align-self: end;
  display: grid; justify-items: start; gap: .35rem;
  padding-inline: var(--w-pad);
  position: relative; z-index: 3;
}
.w-lbw { font-family: var(--f-display); line-height: .85; font-size: 3rem; white-space: nowrap; }
.w-lbw-l { font-weight: 200; font-variation-settings: 'wdth' 150, 'wght' 200; }
.w-lbw-n { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; }
.w-etat { margin-top: .15rem; }
.w-bientot { font-size: var(--t-petit); font-weight: 600; line-height: 1.3; }
.w-cta { margin-top: .4rem; width: 100%; padding-inline: .8em; white-space: nowrap; font-size: 1rem; }

/* ---- la photo imprimée sur le billet, coupée sur la perforation */
.w-photo { grid-row: photo; height: var(--w-ph); margin: 0; overflow: clip; position: relative; }
.w-photo img { position: absolute; top: 0; height: 100%; width: auto; max-width: none; }
.w-photo--g { grid-column: s; justify-self: end; width: var(--w-gw); z-index: 1; }
.w-photo--g img { right: 0; }
.w-photo--d { grid-column: t; justify-self: start; width: var(--w-dw); z-index: 1; }
.w-photo--d img { left: 0; }
/* la couleur naturelle : quand le billet est recollé, elle s'ouvre depuis la perforation */
.w-photo--c {
  grid-column: s / fin; justify-self: start; z-index: 2;
  margin-left: calc(var(--w-cs) - var(--w-gw));
  width: calc(var(--w-gw) + var(--w-dw));
  clip-path: inset(0 0 0 0);
}
.w-photo--c img { left: calc(var(--w-gw) - var(--w-ph) * var(--w-kg)); }

/* ---- intro : une mesure 1 · 2 · 3 · tap (la photo est là dès t = 0, les moitiés arrivent d'un léger décalage) */
@media (prefers-reduced-motion: no-preference) {
  .w-t { animation: w-pose-t var(--temps) var(--elan) both; }
  .w-s { animation: w-pose-s calc(var(--temps) * 1.25) var(--prise) var(--temps) both; }
  .w-billet::after { animation: w-trace var(--temps) var(--elan) calc(var(--temps) * 2) both; }
  .w-titre .w-l > span { animation: w-monte calc(var(--temps) * 1.4) var(--elan) both; }
  .w-titre .w-q .w-l + .w-l > span { animation-delay: calc(var(--temps) * .5); }
  .w-titre .w-r .w-l > span { animation-delay: var(--temps); }
}
@keyframes w-pose-t { from { transform: translate(14px, -22px); } }
@keyframes w-pose-s { from { transform: translate(-18px, 30px); } }
@keyframes w-trace  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes w-monte  { from { transform: translateY(104%); } }

/* ---- bureau paysage : le billet en triptyque, date | photo | titre */
@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  .w-hero {
    --w-mx: 3rem; --w-my: 1.25rem; --w-pad: 2.25rem;
    --w-gap: 34px; --w-off: 56px;
    --w-ph: min(calc(100svh - var(--barre-h) - var(--bandeau-h) - 2 * var(--w-my) - 2 * var(--w-pad) - 1rem), 44rem);
    --w-gw: min(calc(24cqi - var(--w-mx)), calc(var(--w-ph) * var(--w-kg)));
    --w-dw: min(calc(27cqi - var(--w-mx)), calc(var(--w-ph) * var(--w-kd)));
  }
  .w-billet { grid-template-rows: [tete photo bas lieu] 1fr; row-gap: 0; }
  .w-photo, .w-photo--c { align-self: center; }
  .w-billet::after { display: none; }
  .w-tete {
    grid-column: t; grid-row: 1; align-self: start; justify-self: end;
    width: calc(var(--w-ct) - var(--w-dw) - 1.5rem); padding: 0 var(--w-pad) 0 0;
  }
  .w-titre { font-size: clamp(3rem, 1rem + 4.29cqi, 6.5rem); }   /* composante rem (zoom texte) ; 77,8 px à 1440 comme avant */
  .w-q { font-variation-settings: 'wdth' 92, 'wght' 200; }
  .w-q .w-l + .w-l { padding-left: 0; }
  .w-r { font-size: 1.72em; }
  .w-date {
    grid-row: 1; align-self: start; justify-self: start;
    width: calc(var(--w-cs) - var(--w-gw) - 1.5rem); padding: 0 0 0 var(--w-pad);
    grid-template-columns: 1fr;
  }
  .w-jj { grid-row: auto; font-size: clamp(8rem, 15cqi, 15rem); line-height: .76; margin-top: .25rem; }
  .w-mm, .w-an { font-size: clamp(1.75rem, 2.6cqi, 3rem); }
  .w-lieu-billet { grid-row: 1; width: calc(var(--w-cs) - var(--w-gw) - 1.5rem); padding: 0 0 0 var(--w-pad); }
  .w-infos { grid-row: 1; justify-self: end; justify-items: end; text-align: right; width: calc(var(--w-ct) - var(--w-dw) - 1.5rem); padding: 0 var(--w-pad) 0 0; }
  .w-lbw { font-size: clamp(3rem, 1rem + 4.29cqi, 6rem); }
  .w-cta { width: auto; padding-inline: 1.25em; font-size: var(--t-corps); }
}
/* téléphone (11.10.2026) : le billet ne dépasse plus de l'écran. Le talon et ce qu'il porte s'adaptent à sa largeur
   (avant : « Bachata », « LBW 26 » et le bouton élargissaient le billet ; son bord droit sortait de l'écran à 360, 375 et
   414 px, et « 26 » ou « Bachata » étaient rognés à 390). « Bachata » part de la perforation tant qu'il y tient, sinon
   un peu avant ; « LBW 26 » suit la largeur du talon (4,25 em pour 55 % de la scène, moins les marges). */
@media (max-width: 599px) {
  .w-billet { grid-template-columns: [s] var(--w-cs) [t] minmax(0, 1fr) [fin]; }
  .w-q .w-l + .w-l { padding-left: max(0px, min(calc(var(--w-cs) - var(--w-pad) - .04em), calc(100% - 3.7em))); }
  .w-lbw { font-size: clamp(2rem, 12.9cqi - 9px, 3rem); }
  .w-cta { white-space: normal; }
}

/* =================================================================== 2. LE FORMAT DES ÉDITIONS PRÉCÉDENTES (10.10.2026)
   Trois lignes, sans heure ni prix d'une autre édition ; chaque ligne monte d'un pas en entrant (translate seul). */
.w-format { padding-block: var(--pas); overflow-x: clip; }
.w-format-tete { padding-inline: var(--marge); }
.w-format-tete .sur-titre { margin-bottom: 1rem; }
.w-format-tete .duo-titre { max-width: 9em; }
.w-format-liste { margin-top: clamp(2rem, calc(5 * var(--vw)), 4rem); padding-inline: var(--marge); }
.w-format-liste li { display: grid; gap: .3rem; padding-block: 1.1rem; border-top: 1px solid var(--filet); }
.w-format-liste li:last-child { border-bottom: 1px solid var(--filet); }
.w-format-quand { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: 1; color: var(--or); }
.w-format-quoi { font-size: var(--t-corps); line-height: 1.4; }
.w-format-note { margin-top: 1.25rem; padding-inline: var(--marge); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .w-format-liste li {
      animation-name: w-format-monte; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes w-format-monte { from { translate: 0 1.25rem; } }
.sans-sd .w-format-liste li { transition: translate 600ms var(--elan); }
.sans-sd .w-format-liste li:not(.vu) { translate: 0 1.25rem; }
@media (min-width: 900px) {
  .w-format-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .w-format-tete .sur-titre { grid-column: 1; justify-self: end; text-align: right; padding: 1.5rem clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .w-format-tete .duo-titre { grid-column: 2; grid-row: 1; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .w-format-liste { padding-inline: 0; }
  .w-format-liste li { grid-template-columns: var(--part-suit) var(--part-guide); align-items: baseline; gap: 0; }
  .w-format-quand { justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .w-format-quoi { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); font-size: var(--t-titre); line-height: 1.25; }
  .w-format-note { margin-left: var(--part-suit); padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}

/* =================================================================== 3. LE LIEU : très court (P2 11.10.2026)
   L'adresse et l'itinéraire. Les photos de la salle et le bloc lieu complet sont sur /sunday-vibes-2026/ ; plus de citation. */
.w-lieu { padding-block: var(--pas); }
.w-lieu-tete { padding-inline: var(--marge); }
.w-lieu-tete .sur-titre { margin-bottom: 1rem; }
.w-lieu-tete .duo-titre { max-width: 9em; }
.w-adresse { display: grid; justify-items: start; gap: .35rem; margin-top: clamp(1.25rem, calc(3 * var(--vw)), 2.25rem); padding-inline: var(--marge); }
.w-adresse-rue { font-size: var(--t-corps); line-height: 1.4; }
.w-adresse-dit { margin-top: .5rem; font-size: var(--t-petit); line-height: 1.4; color: var(--texte-2); }   /* 12.10.2026 : la salle reste décrite après le 18.10 */
.w-adresse-rue strong { display: block; margin-bottom: .3rem; font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: .95; color: var(--or); }
.w-adresse .lien-pas { padding-block: .6rem; }
.w-adresse .lien-pas .petit { font-weight: 500; }
@media (min-width: 900px) {
  .w-lieu-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .w-lieu-tete .sur-titre { grid-column: 1; justify-self: end; text-align: right; padding: 1.5rem clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .w-lieu-tete .duo-titre { grid-column: 2; grid-row: 1; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .w-adresse { margin-left: var(--part-suit); padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}

/* =================================================================== 4. RESTER AU COURANT : le titre, le billet blanc, Instagram, un lien vers /soutenir/
   (P2 11.10.2026 : le titre sort du billet ; le bloc « Deviens membre » devient une ligne et un lien) */
.w-reserve { position: relative; z-index: 2; padding: var(--pas) var(--marge); }
.w-reserve-tete { margin-bottom: clamp(1.5rem, calc(4 * var(--vw)), 3rem); }
.w-reserve-tete .sur-titre { margin-bottom: 1rem; }
.w-reserve-tete .duo-titre { max-width: 9em; }
.w-ticket {
  --souche: 40%;
  position: relative; z-index: 3;
  margin: 0 auto;
  max-width: 68rem;
}
.w-ticket .billet-souche { position: relative; display: flex; flex-direction: column; }
.w-ticket-date { display: flex; flex-direction: column; }
.w-ticket-date .billet-date { font-size: clamp(4rem, 2rem + calc(9 * var(--vw)), 10rem); }
.w-ticket-lieu { margin-top: 1rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.35; }
/* le statut, ce qui est publié (« Infos bientôt disponibles »), le calendrier, partager (tools/agenda.cjs) */
.evt-etat { margin-top: 1rem; }
.w-ticket .evt-info { margin-top: .6rem; }
.w-ticket .evt-billetterie { margin-top: 1rem; }
.evt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin-top: 1rem; }   /* + Calendrier et Partager alignés (P2 11.10.2026) */
.w-ticket .bouton--fil { width: auto; border-color: var(--noir); color: var(--noir); }   /* secondaire, sur le document blanc */
.w-ticket .bouton--fil:hover { border-color: var(--or-profond); color: var(--or-profond); }

.w-suivre { display: grid; gap: .1rem; max-width: 68rem; margin: clamp(1.5rem, calc(4 * var(--vw)), 2.5rem) auto 0; }
.w-suivre p { font-size: var(--t-corps); line-height: 1.4; }
.w-suivre .lien-pas { padding-block: .65rem; }
@media (min-width: 900px) {
  .w-reserve { padding-inline: 0; }
  .w-reserve-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); }
  .w-reserve-tete .sur-titre { grid-column: 1; justify-self: end; text-align: right; padding: 1.5rem clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); margin: 0; }
  .w-reserve-tete .duo-titre { grid-column: 2; grid-row: 1; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .w-ticket { --souche: calc(calc(45 * var(--vw)) - 9rem); margin-left: 9rem; margin-right: var(--marge); max-width: none; }  /* la perforation tombe sur la couture */
  .w-suivre { max-width: none; margin-left: var(--part-suit); padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}
@media (min-width: 1280px) { .w-ticket { margin-right: 12rem; } }
@media (max-width: 599px) {
  .w-ticket .billet-souche { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; }
  .w-ticket-date { grid-row: 1 / span 2; }
  .w-ticket-lieu { margin-top: 0; }
}

/* =================================================================== très petit écran / zoom 400–500 % */
@media (max-width: 21.9rem) {
  .w-hero { --w-ph: 9rem; }
  .w-q .w-l + .w-l { padding-left: 0; }
  .w-titre { font-size: 3rem; }
  .w-q { font-variation-settings: 'wdth' 72, 'wght' 200; }
  .w-r { font-size: 1.5em; }
  .w-jj { font-size: 4rem; }
  /* le talon n'a que 120 px : « LBW 26 » (174 px) et le bouton (153 px) élargissaient le billet de 44 px, « 26 » sortait de la scène */
  .w-lbw { font-size: 1.75rem; }
  .w-cta, .evt-cta { white-space: normal; padding-inline: .6em; }
}

/* =================================================================== CHARTE v1.0 (05.10.2026) — Winter : la maison, or sans note
   La photo de décembre 2024, en couleur, est imprimée sur le billet dès t = 0 ; pas de scène épinglée. */
.w-photo--c { clip-path: none; }
@media (prefers-reduced-motion: no-preference) {
  .w-t { animation: w-pose-t var(--temps) var(--elan) both; }
  .w-s { animation: w-pose-s calc(var(--temps) * 1.25) var(--prise) var(--temps) both; }
}
/* l'édition Winter : « Winter » et la date en or, comme l'affiche de la charte (§12) */
.w-r, .w-jj { color: var(--or); }