/* pages/jeudis.css — Bachata Movida Nights, tous les jeudis (08.10.2026) : la page d'un événement récurrent, sur le modèle
   de /sunday-vibes-2026/, plus courte. La maison seule (noir et or) : aucune note n'est décidée pour la série (FAITS §7.0 bis),
   le cartouche est à l'or, comme le Winter. 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 En bref : chaque ligne glisse vers la couture (scroll-driven, forme longue)
   2 bis L'accès (#lieu, sous la fiche) : l'itinéraire, le site du Movida (P2 11.10.2026 : plus de section « Le lieu »)
   3 Le calendrier : le jeudi se pose dans la semaine
   4 Ensuite : le billet du prochain grand rendez-vous déborde sur le calendrier, la souche se détache
   Variables locales = réglages de cette page (préfixe --jd- ; --sv-debord pour le billet « Ensuite », écrit par agenda.cjs).
   Couleurs, polices, durées : tokens.css. */

.page-jeudis { --sv-debord: clamp(5rem, calc(9 * var(--vw)), 7.5rem); }

/* =================================================================== 1. LE HÉROS */
.jd-heros {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "tete" "infos";
  background: var(--noir);
}
.jd-heros-tete { grid-area: tete; padding: 1.25rem var(--marge) 0; }
.jd-presente { margin-bottom: 1rem; }
.jd-presente::after { content: ""; display: block; width: 4rem; height: var(--fil); margin-top: .7rem; background: var(--or); }
.jd-titre {
  display: grid; justify-items: start; width: fit-content; max-width: 100%;
  font-family: var(--f-display); font-size: clamp(4.75rem, 2rem + calc(7 * var(--vw)), 9rem); line-height: .86; letter-spacing: -.01em;
}
.jd-l { display: block; overflow: clip; padding-block: .05em .08em; margin-block: -.05em -.08em; }
.jd-l > span { display: block; }
.jd-l--q > span { font-size: .42em; font-weight: 200; font-variation-settings: var(--delie); line-height: 1.15; color: var(--texte); }
.jd-l--r > span { font-weight: 900; font-variation-settings: var(--plein); text-transform: uppercase; color: var(--or); }

.jd-heros-infos {
  grid-area: infos; align-self: start;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1rem;
  padding: 1.75rem var(--marge);
}
.jd-heros .cartouche { font-size: clamp(1.05rem, .8rem + calc(1 * var(--vw)), 1.6rem); min-width: 5.2em; }
.jd-quand { flex: 1 1 12rem; display: grid; gap: .25rem; }
.jd-mot { font-size: var(--t-mini); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.jd-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; }
.jd-heures { font-weight: 700; color: var(--or); }
.jd-ou { font-size: var(--t-petit); line-height: 1.35; color: var(--texte-2); }
.jd-ou strong { color: var(--texte); }
.jd-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

.jd-photo { grid-area: photo; position: relative; margin: 0; aspect-ratio: 5 / 2; overflow: clip; }
.jd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
/* la légende sur la photo : voile noir dégradé sous le texte (charte §11) */
.jd-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 0 .5em;
  padding: 2.25rem var(--marge) .7rem;
  background: var(--voile-photo);
  font-size: var(--t-mini); font-weight: 600; line-height: 1.35; color: var(--texte);
}

@media (min-width: 900px) {
  .jd-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));
  }
  .jd-photo { aspect-ratio: auto; min-height: 30rem; }
  .jd-photo figcaption { padding-inline: clamp(1rem, calc(2.5 * var(--vw)), 2.5rem); }
  .jd-heros-tete { align-self: end; padding: 2.5rem var(--marge) 0 clamp(1.75rem, calc(4 * var(--vw)), 4.5rem); }
  .jd-heros-infos { padding: 2rem var(--marge) 2.75rem clamp(1.75rem, calc(4 * var(--vw)), 4.5rem); column-gap: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .jd-l > span { animation: jd-monte calc(var(--temps) * 2) var(--elan) both; animation-delay: calc(100ms + var(--i, 0) * 110ms); }
  .jd-heros .cartouche { animation: jd-pose var(--temps) var(--prise) 640ms both; }
  .jd-photo img { animation: jd-zoom var(--mesure) var(--elan) both; }
}
@keyframes jd-monte { from { translate: 0 105%; } }
@keyframes jd-pose  { from { translate: 0 -1.5rem; } }
@keyframes jd-zoom  { from { scale: 1.12; } }

/* =================================================================== têtes de chapitre (sur-titre + duo-titre) */
.jd-tete { display: grid; gap: 1rem; padding-inline: var(--marge); }
.jd-tete .duo-titre { font-size: var(--t-h2); max-width: 10em; }
@media (min-width: 900px) {
  .jd-tete { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding: 0; align-items: start; }
  .jd-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); }
  .jd-tete > :not(.sur-titre) { grid-column: 2; padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
  .jd-tete .duo-titre { grid-row: 1; }
}

/* =================================================================== 2. EN BREF : six lignes, le mot à gauche de la couture, la réponse à droite */
.jd-bref { padding-block: var(--pas); }
.jd-fiche { margin-top: clamp(2.5rem, calc(6 * var(--vw)), 4.5rem); border-bottom: 1px solid var(--ligne-forte); }
.jd-ligne { display: grid; gap: .35rem; padding: 1.1rem var(--marge) 1.2rem; border-top: 1px solid var(--ligne-forte); }
.jd-ligne dt { font-size: var(--t-mini); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.jd-ligne dd { display: grid; gap: .3rem; margin: 0; }
.jd-ligne dd strong { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(2rem, 1.2rem + calc(3.2 * var(--vw)), 4.5rem); line-height: .95; }   /* P2 11.10.2026 : plus de capitales (« Presque toute l’année » est une phrase) */
.jd-ligne dd > span { font-size: var(--t-petit); color: var(--texte-2); }
.jd-ligne dd strong .jd-dj { display: inline-block; margin-right: .35em; white-space: nowrap; }
.jd-ligne dd strong .jd-dj:nth-child(even) { color: var(--or); }   /* les DJs, l'un après l'autre : crème, or, crème, or */
.jd-accroche { max-width: 34rem; font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300; font-size: var(--t-titre); line-height: 1.15; }
@media (min-width: 900px) {
  .jd-ligne { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding-inline: 0; align-items: baseline; }
  .jd-ligne dt { justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .jd-ligne dd { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jd-ligne dd {
      animation-name: jd-vers-couture; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 5% cover 35%;
    }
  }
}
@keyframes jd-vers-couture { from { translate: 2.5rem 0; } }
.sans-sd .jd-ligne dd { transition: translate 700ms var(--elan); }
.sans-sd .jd-ligne:not(.vu) dd { translate: 2.5rem 0; }

/* =================================================================== 2 bis. L'ACCÈS (#lieu), sous la fiche « En bref » (P2 11.10.2026)
   L'ancienne section « Le lieu » répétait l'adresse de la fiche : il reste l'itinéraire et le site du Movida. */
.jd-acces { display: grid; gap: .3rem; padding: 1.5rem var(--marge) 0; }
.jd-acces-liens { display: flex; flex-wrap: wrap; column-gap: 1.75rem; }
.jd-acces .lien-pas { padding-block: .6rem; }
.jd-acces .lien-pas .petit { font-weight: 500; }
@media (min-width: 900px) {
  .jd-acces { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding-inline: 0; align-items: center; }
  .jd-acces .sur-titre { justify-self: end; text-align: right; padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .jd-acces-liens { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}

/* =================================================================== 3. AJOUTER AU CALENDRIER : la semaine, le jeudi en or */
.jd-calendrier { padding-top: var(--pas); padding-bottom: calc(var(--pas) + var(--sv-debord)); }   /* fond noir (P2 11.10.2026) : la section « Le lieu » qui séparait les deux noir-2 est partie */
.jd-cal { display: grid; gap: 2rem; margin-top: clamp(2.5rem, calc(6 * var(--vw)), 4.5rem); padding-inline: var(--marge); }
.jd-semaine {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: .3rem;
  max-width: 40rem;
  font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 90, 'wght' 300;
  font-size: clamp(.8rem, .6rem + calc(.9 * var(--vw)), 1.2rem); text-transform: uppercase; color: var(--texte-3); text-align: center;
}
.jd-semaine li { padding: .6rem 0; border-top: var(--fil) solid var(--ligne-forte); }
.jd-semaine .jd-jeudi {
  display: grid; justify-items: center; gap: .25rem; padding: .9rem .1rem;
  border-top-color: var(--or); background: var(--or); color: var(--noir);
  font-weight: 900; font-variation-settings: var(--plein); font-size: 1.35em;
}
.jd-semaine-h { font-family: var(--f-texte); font-weight: 700; font-variation-settings: normal; font-size: .5em; letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.jd-cal-texte { display: grid; gap: 1rem; max-width: 34rem; }
.jd-cal-texte > p:first-child { font-size: var(--t-corps); line-height: 1.5; }
.jd-cal-cta { margin-top: .25rem; }
@media (min-width: 900px) {
  .jd-cal { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding: 0; align-items: center; }
  .jd-semaine { justify-self: end; width: min(100%, 36rem); padding: 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem) 0 var(--marge); }
  .jd-cal-texte { padding: 0 var(--marge) 0 clamp(.75rem, calc(2.4 * var(--vw)), 2.75rem); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jd-semaine .jd-jeudi {
      animation-name: jd-jeudi; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 30% cover 45%;
    }
  }
}
@keyframes jd-jeudi { from { translate: 0 -1.25rem; } }

/* =================================================================== 4. ENSUITE : le billet du prochain grand rendez-vous (écrit par agenda.cjs) */
.jd-ensuite { padding: 0 var(--marge) var(--pas); }
.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; }
.sv-ensuite-agenda { margin-top: clamp(1.5rem, calc(4 * var(--vw)), 2.5rem); text-align: center; }
.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 .billet-souche {
      animation-name: jd-prise; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: cover 30% cover 50%;
    }
  }
}
@keyframes jd-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; }

/* =================================================================== très petit écran / zoom 400–500 % */
@media (max-width: 21.9rem) {
  .jd-titre { font-size: 3rem; }
  .jd-ligne dd strong { font-size: 1.75rem; }
  .jd-semaine { font-size: .7rem; gap: .1rem; }
}

/* zones tactiles ≥ 24 px (10.10.2026, audit P2-20) : les liens « Instagram » dans le texte (en ligne : la mise en page ne
   bouge pas) et celui de la fiche « En bref » (marge négative : idem) */
.page-jeudis p.petit a:not([class]) { padding-block: .3em; }
.jd-fiche .lien-pas { padding-block: 2px; margin-block: -2px; }

/* zones tactiles ≥ 44 px (P2 11.10.2026) : les liens isolés (héros, « Soutenir l'association », le billet « Ensuite ») */
.jd-actions > .lien-pas, .jd-soutenir .lien-pas, .sv-ensuite-agenda .lien-pas, .sv-billet-billetterie .lien-pas { padding-block: .6rem; }

/* 11.10.2026 : avec JavaScript, le texte du cartouche (« Tous les · Jeu. · 21 h 30 », le repli) reste invisible jusqu'à
   ce que pages/jeudis.js y écrive le prochain jeudi : le changement se fait hors de la vue, sans décalage (CLS 0 au
   bureau). Le cartouche lui-même, de taille fixe, est là dès le premier rendu. */
@media (scripting: enabled) {
  html:not(.jd-pret) [data-prochain-cartouche] > * { visibility: hidden; }
}