/* pages/accueil.css — l'accueil de Villa Vida, à la charte v1.0 : noir, or, le logo en héros.
   1 L'invitation + la journée : le logo dans son disque fleurit (anim. 1) ; « Oui » fait pleuvoir ses notes (anim. 2)
     puis ouvre le billet ; le même disque reste à l'écran pendant ≈ 260 vh, ses notes s'envolent en halo et reviennent
     (anim. 5, jouée par le compositeur : logo.js), les repères de la journée apparaissent (CSS scroll-driven, forme longue)
   2 L'après-midi : passage croisé (≥ 80 vh) + photo de stage + couples en affiche
   3 21 h 45, la maison : silence volontaire, un seul reveal masqué
   4 22 h – 3 h : le titre sur le noir, puis la soirée
   5 Je participe : prise franche, la souche se détache
   6 Pied : aucun mouvement */

/* =================================================================== 1. L'INVITATION ET LA JOURNÉE
   Une grille à deux rangées : le premier écran (héros), puis la séquence (--S). Le disque (.envol-scene) et les repères
   (.envol-reperes) couvrent les deux rangées et collent sous la barre : le texte du héros défile, le disque reste.
   Style de base = frame finale (mouvement réduit) : rien ne colle, le logo est entier, les repères sont une liste. */
.envol {
  --h: calc(100svh - var(--barre-h) - var(--bandeau-h));   /* le premier écran, sous la barre */
  --tete: 7rem;                                               /* téléphone : sur-titre + titre au-dessus du disque */
  --D: max(min(100vw - 2 * var(--marge), var(--h) - var(--tete) - 12rem, 36rem), min(17rem, 100vw - 2 * var(--marge)));
  --S: 260vh;                                                 /* la séquence collante */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  background: var(--noir);
}

/* ---- le héros (premier écran) */
.heros {
  grid-area: 1 / 1;
  position: relative;   /* sans z-index : le billet (z-index) passe au-dessus du disque */
  min-height: var(--h);
  display: grid; grid-template-rows: var(--tete) var(--D) auto; justify-items: center;
  padding-inline: var(--marge);
  text-align: center;
}
.heros-tete { align-self: end; padding-bottom: 1rem; }
.heros-sur { margin-bottom: .55rem; }
.heros-titre {
  font-family: var(--f-display); font-weight: 200; font-variation-settings: 'wdth' 100, 'wght' 200;
  font-size: clamp(2.6rem, 1rem + 9.6vw, 6rem); line-height: .9; letter-spacing: 0;   /* ≥ 3 × le corps à 375 (52 px) */
}
.heros-titre .duo-q { font-variation-settings: 'wdth' 100, 'wght' 200; }
.heros-oui { display: none; }
.heros-pied { grid-row: 3; padding-top: 1.1rem; padding-bottom: 1rem; display: grid; justify-items: center; gap: .9rem; }
.heros-accroche { max-width: 24em; font-size: var(--t-corps); font-weight: 500; line-height: 1.38; color: var(--texte); }
.heros-bouton { min-width: 9rem; min-height: 52px; font-size: 1.125rem; letter-spacing: .08em; }
.heros-bouton[aria-expanded="true"] { background: transparent; color: var(--or); }
.reponses { display: none; }

/* ---- le disque (même place que le trou du héros) */
.envol-scene {
  grid-area: 1 / 1;
  position: relative; z-index: 1;
  height: var(--h);
  display: grid; justify-items: center; align-content: start;
  padding-top: var(--tete);
  pointer-events: none;
  overflow: clip;   /* les notes dansent jusqu'aux bords de l'écran, jamais au-delà */
}
.envol-disque { width: var(--D); }
.envol-logo { position: absolute; inset: 5%; }
/* le logo statique (intact) : tant que les calques ne sont pas prêts, et pour toujours sans script ni mouvement */
.envol-logo picture { display: contents; }
.envol-logo .disque-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* avec script et mouvement, le logo fleurit : le statique attend (repli : il revient seul au bout de 4 s) */
  .js .envol-logo .disque-logo { animation: logo-repli 1ms linear 4s both; }
}
@keyframes logo-repli { from { opacity: 0; } to { opacity: 1; } }

/* ---- les repères de la journée : frame finale = une liste */
.envol-reperes { grid-area: 2 / 1; position: relative; z-index: 2; padding: calc(var(--pas) * .5) var(--marge) calc(var(--pas) * .6); }
.envol-reperes-titre { margin-bottom: 1.25rem; }
.envol-source { display: block; margin-top: .35rem; color: var(--texte-3); font-weight: 600; letter-spacing: .06em; text-transform: none; }
.envol-liste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.repere {
  display: grid; align-content: start; gap: .3rem;
  padding: .85rem 1.1rem .95rem;
  background: var(--noir); border-left: var(--fil) solid var(--or);
}
.repere-h { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 4.25rem); line-height: .9; color: var(--or); }
.repere-quoi { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 130, 'wght' 300; font-size: var(--t-titre); line-height: 1.05; }
.repere-dit { font-size: var(--t-petit); color: var(--texte-2); line-height: 1.35; }
.repere-dit mark.ac { vertical-align: .1em; }

/* ---- mouvement permis : la piste s'allonge de --S ; disque et repères collent sous la barre */
@media (prefers-reduced-motion: no-preference) {
  .envol { grid-template-rows: auto var(--S); }
  .envol-scene { grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: var(--barre-h); }
}
/* repères animés (scroll-driven, ou repli .sans-sd piloté par logo.js) : posés autour du disque, un à la fois */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .envol { view-timeline-name: --envol; }
    .envol-reperes { grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: var(--barre-h); height: var(--h); padding: 0; pointer-events: none; }
    .envol-reperes-titre {
      position: absolute; left: var(--marge); right: var(--marge); top: .9rem; margin: 0; text-align: center;
      animation-name: repere-titre; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain 18% contain 98%;
    }
    /* le texte du héros s'efface en montant (il ne passe pas derrière le disque) ; le billet ouvert, lui, reste */
    .heros-tete, .heros-pied, .reponses {
      animation-name: heros-sort; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain 0% contain 14%;
    }
    .envol-liste { display: block; }
    .repere {
      position: absolute; left: var(--marge); right: var(--marge); top: calc(var(--tete) + var(--D) + 1.25rem);
      justify-items: center; text-align: center;
      animation-name: repere; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain var(--c0, 0%) contain var(--c1, 100%);
    }
  }
}
.sans-sd .envol-reperes { grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: var(--barre-h); height: var(--h); padding: 0; pointer-events: none; }
.sans-sd .envol-reperes-titre { display: none; }
.sans-sd .repere { position: absolute; left: var(--marge); right: var(--marge); top: calc(var(--tete) + var(--D) + 1.25rem); justify-items: center; text-align: center; opacity: 0; transition: opacity 300ms linear; }
/* le repère paraît d'un coup (pas de texte à demi transparent, donc jamais sous le contraste AA) et glisse en place */
@keyframes repere { 0% { opacity: 0; translate: 0 .75rem; } 1% { opacity: 1; translate: 0 .75rem; } 22%, 78% { opacity: 1; translate: 0 0; } 99% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes repere-titre { 0%, 100% { opacity: 0; } 1%, 99% { opacity: 1; } }
@keyframes heros-sort { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }   /* d'un coup, quand il touche la barre */

/* ---- le billet du « Oui » : un document blanc, ouvert après la pluie de notes */
.couture-billet {
  position: absolute; z-index: 3;
  left: var(--marge); right: var(--marge); bottom: .75rem;
  max-width: 30rem; margin-inline: auto;
  color: var(--noir); text-align: left;
}
.couture-billet:not([hidden]) { animation: billet-ouvre 560ms var(--elan) both; }
@keyframes billet-ouvre { from { opacity: 0; translate: 0 18px; clip-path: inset(0 0 100% 0 round var(--rayon)); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0 round var(--rayon)); } }
.cb-papier {
  --perf: 34%;
  position: relative;
  display: grid; grid-template-columns: var(--perf) 1fr;
  background: var(--blanc); border-radius: var(--rayon);
  overflow: clip;
}
.cb-entete { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-top: 14px; }
.cb-corps { position: relative; }
.cb-corps::before {   /* la perforation, en pointillé */
  content: ""; position: absolute; left: -1px; top: 0; bottom: 12px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--noir) 0 6px, transparent 6px 12px);
}
.cb-souche { display: flex; flex-direction: column; align-items: flex-start; padding: 0 12px 12px 16px; }
.cb-souche .billet-date { font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); color: var(--noir); }
.cb-souche .billet-an { font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); color: var(--or-profond); }
.cb-souche .billet-jour { font-size: .8125rem; }
.cb-corps { padding: 0 44px 12px 16px; }
.cb-corps .billet-titre { font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); }
.cb-corps .billet-lieu { font-size: .875rem; }
.cb-corps .billet-info { font-size: .8125rem; }
.cb-salles {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  margin: 0; padding: 0 8px 10px; border: 0; border-top: 2px solid var(--noir); min-inline-size: 0;
}
.cb-salles-titre {
  float: left; width: 100%; grid-column: 1 / -1;
  padding: 8px 8px 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.cb-salles-titre mark.ac { font-size: .625rem; }
.cb-salle {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 58px; margin: 0 4px; padding: 6px 10px; cursor: pointer;
  border: 2px solid var(--noir); border-radius: 6px; color: var(--noir);
  transition: background-color 240ms var(--elan), color 240ms var(--elan), translate 160ms var(--elan);
}
.cb-salle:hover { translate: 0 -2px; }
.cb-salle:active { translate: 0 1px; }
.cb-salle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.s-num { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: 1.3rem; line-height: 1; }
.s-niv { font-size: .8125rem; font-weight: 600; margin-top: 3px; white-space: nowrap; }
.cb-salle::after { content: ""; position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--noir); }
.cb-salle:has(input:checked) { background: var(--noir); color: var(--texte); }
.cb-salle:has(input:checked)::after { background: var(--or); border-color: var(--or); }
.cb-salle:has(input:focus-visible) { outline: 2px solid var(--noir); outline-offset: 2px; }
.cb-cta {
  grid-column: 1 / -1; position: relative;
  display: flex; align-items: center; justify-content: center; gap: .45em;
  height: 52px; margin: 2px 12px 12px; border-radius: 999px;
  background: var(--noir); color: var(--blanc); text-decoration: none;   /* sur un document clair : noir plein */
  font-family: var(--f-display); font-weight: 800; font-variation-settings: 'wdth' 70, 'wght' 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color 200ms var(--elan);
}
.cb-cta:hover { background: var(--noir-3); }
.cb-cta:active { translate: 0 1px; }
.cb-cta .fleche { width: 1.1em; transition: translate 300ms var(--prise); }
.cb-cta:hover .fleche, .cb-cta:focus-visible .fleche { translate: .3em 0; }
.cb-cta .cta-salle { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.cb-cta .cta-salle:not(:empty)::before { content: "· "; }
.cb-cta:focus-visible { outline: 2px solid var(--blanc); outline-offset: -6px; }
.cb-rejouer {
  position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%;
  background: transparent; color: var(--noir);
  transition: background-color 200ms var(--elan);
}
.cb-rejouer svg { width: 100%; height: 100%; }
.cb-rejouer:hover { background: color-mix(in srgb, var(--noir) 8%, var(--blanc)); }
.cb-rejouer:active { scale: .92; }

/* ---- après « Oui » : le titre répond */
.heros-oui { clip-path: inset(-20% 100% -30% 0); transition: clip-path 560ms var(--elan); }
.est-oui .heros-oui { clip-path: inset(-20% -5% -30% -5%); }

/* ---- bureau (paysage ≥ 900 px) : le titre à gauche, le disque au centre, la date et le lieu (puis le billet) à droite */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .envol { --D: min(var(--h) - 5rem, 40vw, 38rem); --tete: 0rem; --S: 260vh; }
  .heros {
    grid-template-columns: minmax(0, 1fr) var(--D) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3.5rem); justify-items: start; align-items: start;
    text-align: left;
  }
  .heros-tete { grid-area: 2 / 1; align-self: end; padding-bottom: 1.25rem; }
  .heros-titre { font-size: clamp(3rem, 1rem + 3.6vw, 6rem); }
  .heros-titre .duo-q { display: block; font-variation-settings: 'wdth' 140, 'wght' 200; }
  .heros-oui { display: block; margin-top: .08em; font-variation-settings: var(--plein); }
  .heros-pied { grid-area: 3 / 1; justify-items: start; padding-top: 0; }
  .heros-accroche { max-width: 20em; }
  .reponses { display: grid; gap: 1.5rem; grid-area: 2 / 3 / 4 / 4; align-self: center; justify-self: end; text-align: right; }
  .reponses p { margin: 0; }
  .reponses strong { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); line-height: 1; color: var(--or); }
  .reponses span:not(.sur-titre) { display: block; margin-top: .35rem; font-size: var(--t-petit); color: var(--texte-2); }
  .reponses .sur-titre { margin-bottom: .35rem; }
  .envol-scene { align-content: center; padding-top: 0; }
  .couture-billet {
    left: calc(50% + var(--D) / 2 + clamp(1rem, 2vw, 2rem)); right: var(--marge); top: 50%; bottom: auto;
    max-width: 26rem; margin: 0 0 0 auto; translate: 0 -50%;
  }
  .couture-billet:not([hidden]) { animation-name: billet-ouvre-bureau; }
  @keyframes billet-ouvre-bureau { from { opacity: 0; translate: 0 calc(-50% + 18px); clip-path: inset(0 0 100% 0 round var(--rayon)); } to { opacity: 1; translate: 0 -50%; clip-path: inset(0 0 0 0 round var(--rayon)); } }
  .est-oui .reponses { visibility: hidden; }
  .envol-reperes-titre { text-align: left; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .repere { left: auto; right: auto; top: auto; width: min(22rem, calc((100% - var(--D)) / 2 - 2 * var(--marge))); justify-items: start; text-align: left; }
    .repere--1 { left: var(--marge); top: 16%; }
    .repere--2 { right: var(--marge); top: 46%; }
    .repere--3 { left: var(--marge); top: 52%; }
    .repere--4 { right: var(--marge); top: 14%; }
  }
}

/* =================================================================== 2. L'APRÈS-MIDI : le passage croisé */
.croise {
  position: relative;
  height: calc(100svh - var(--barre-h) + 92vh);   /* 92 vh de croisement */
}
.croise-scene {
  position: sticky; top: var(--barre-h);
  height: calc(100svh - var(--barre-h));
  overflow: clip; isolation: isolate;
  background: var(--guide);
}
.croise-col {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(.75rem, 2.4vw, 3rem) clamp(2.5rem, 9vh, 7rem);
  will-change: transform;
}
.croise-col::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: var(--grain-taille) var(--grain-taille); opacity: var(--grain-opacite);
}
/* frame finale : violet à gauche, rouge à droite (les rôles se sont inversés) */
.croise-col--suit  { left: var(--part-guide); width: var(--part-suit); background: var(--suit); z-index: 2; box-shadow: -1px 0 0 var(--or), -2px 0 0 var(--or); }
.croise-col--guide { left: 0; width: var(--part-guide); background: var(--guide); z-index: 1; }
.croise-col--guide { align-items: flex-end; text-align: right; }
.croise-salle { position: relative; }
.croise-num { margin-top: .4rem; font-family: var(--f-display); line-height: .8; }
.croise-mot { display: block; font-weight: 200; font-variation-settings: 'wdth' 130, 'wght' 200; font-size: clamp(3rem, 1.6rem + 3vw, 4.5rem); }
.croise-chiffre {
  display: block; font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900;
  font-size: clamp(9rem, min(3rem + 34vw, 34svh), 30rem); line-height: .78; letter-spacing: -.02em;
  margin-top: .05em;
}
.croise-detail { margin-top: .6rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.3; }
.croise-ed { display: block; font-weight: 500; opacity: 1; }
.croise-tete {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  padding: clamp(1.25rem, 4vh, 3.5rem) var(--marge) 0;
  pointer-events: none;
}
.croise-tete .sur-titre { margin-bottom: .8rem; }
.croise-tete .duo-titre { max-width: 12em; }
.croise-format { margin-top: 1rem; font-size: var(--t-petit); font-weight: 600; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .croise { view-timeline-name: --croise; view-timeline-inset: var(--barre-h) 0px; }
    .croise-col--suit {
      animation-name: croise-suit; animation-duration: 1ms; animation-timing-function: cubic-bezier(.45, 0, .25, 1); animation-fill-mode: both;
      animation-timeline: --croise; animation-range: contain 4% contain 96%;
    }
    .croise-col--guide {
      animation-name: croise-guide; animation-duration: 1ms; animation-timing-function: cubic-bezier(.5, 0, .3, 1); animation-fill-mode: both;
      animation-timeline: --croise; animation-range: contain 0% contain 92%;
    }
  }
}
@keyframes croise-suit  { from { transform: translateX(calc(-100% * 55 / 45)); box-shadow: 1px 0 0 var(--or), 2px 0 0 var(--or); } }
@keyframes croise-guide { from { transform: translateX(calc(100% * 45 / 55)); } }
.sans-sd .croise { height: auto; }
.sans-sd .croise-scene { position: relative; top: 0; height: max(36rem, calc(100svh - var(--barre-h))); }
.sans-sd .croise-col { transition: transform 1100ms var(--elan); }
.sans-sd .croise-col--suit { transition-delay: var(--temps); }
.sans-sd .croise:not(.vu) .croise-col--suit { transform: translateX(calc(-100% * 55 / 45)); }
.sans-sd .croise:not(.vu) .croise-col--guide { transform: translateX(calc(100% * 45 / 55)); }
@media (prefers-reduced-motion: reduce) {
  .croise { height: auto; }
  .croise-scene { position: relative; top: 0; height: max(36rem, calc(100svh - var(--barre-h))); }
}

/* ---- la suite de l'après-midi : violet | rouge */
.apresmidi-suite { --part: var(--part-guide); padding-block: calc(var(--pas) * .6) calc(var(--pas) * .45); overflow-x: clip; }
.am-haut { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.am-photo { --ecart: clamp(1.25rem, 9vw, 7rem); --decal: clamp(1rem, 4vw, 3rem); }
.am-photo figcaption { padding-inline: var(--marge); }
.am-credit { display: block; margin-top: .2rem; font-size: var(--t-mini); letter-spacing: .03em; }
.am-programme { padding-inline: var(--marge); }
.am-programme > .sur-titre { margin-bottom: 1.1rem; }
.am-ed { letter-spacing: .08em; }
.duo-lignes li {
  display: grid; grid-template-columns: 1fr 1fr; align-items: baseline;
  padding-block: .55rem; border-top: 1px solid var(--filet);
}
.duo-lignes li:last-child { border-bottom: 1px solid var(--filet); }
.duo-lignes li > :first-child { padding-right: .9rem; text-align: right; font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-titre); line-height: 1; }
.duo-lignes li > :last-child { padding-left: .9rem; font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; font-size: var(--t-titre); line-height: 1.05; }
.am-winter { margin-top: 1rem; font-size: var(--t-petit); }

.am-couples { margin-top: var(--pas); }
.am-couples-titre {
  display: grid; grid-template-columns: var(--part-guide) 1fr;
  font-family: var(--f-display); font-size: var(--t-h2); line-height: .9;
}
.am-couples-titre .duo-q { grid-row: 1; justify-self: end; padding-right: .2em; text-align: right; }
.am-couples-titre .duo-r { grid-row: 2; grid-column: 2; padding-left: .15em; }
.am-couples-intro { display: grid; grid-template-columns: var(--part-guide) 1fr; margin-top: 1.25rem; font-size: var(--t-petit); }
.am-couples-intro { padding-inline: var(--marge); display: block; text-align: center; }
.am-edition { margin-top: clamp(2.5rem, 7vw, 6rem); }
.am-edition-nom { display: grid; grid-template-columns: var(--part-guide) 1fr; margin-bottom: 1.25rem; }
.am-edition-nom .sur-titre { grid-column: 1 / -1; justify-self: center; padding: .3rem .8rem; background: var(--encre); border-radius: 999px; }
.am-liste { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); }
.am-liste .couple-coupe { padding-block: .1em; }
.am-lien { margin-top: calc(var(--pas) * .55); text-align: center; }

@media (min-width: 900px) {
  .am-haut { grid-template-columns: var(--part-guide) var(--part-suit); align-items: center; gap: 0; }
  .am-photo { margin-left: calc(var(--part-guide) * 0); padding-left: var(--marge); padding-right: clamp(1rem, 3vw, 3rem); }
  .am-photo figcaption { padding-inline: 0; max-width: 28em; }
  .am-programme { padding: 0 var(--marge) 0 clamp(1.25rem, 3vw, 3rem); }
  .duo-lignes li { grid-template-columns: auto 1fr; }
  .duo-lignes li > :first-child { text-align: left; padding-right: 1rem; }
}

/* =================================================================== 3. LA MAISON : silence volontaire */
.ch-maison { padding-block: calc(var(--pas) * .6) var(--pas); }
.maison-tete { padding-inline: var(--marge); }
.maison-tete .sur-titre { margin-bottom: 1rem; }
.maison-tete .duo-titre { max-width: 11em; }
.maison-note { margin-top: 1.1rem; font-size: var(--t-petit); max-width: 34em; }
.maison-citations { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 8vw, 6rem); padding-inline: var(--marge); }
.maison-citations .citation { font-size: clamp(1.4rem, .95rem + 1.9vw, 2.75rem); }
.maison-c2 { text-align: right; padding-left: 12%; }
.maison-c1 { padding-right: 12%; }
@media (min-width: 900px) {
  .maison-citations { grid-template-columns: var(--part-suit) var(--part-guide); gap: 0; padding: 0; }
  /* la 1re citation remonte en face de la réponse du titre : sans elle, la colonne rouge restait un aplat vide d'un écran
     entier (sur-titre seul) pendant qu'on lit « Une petite soif ? » ; la 2e garde son temps de retard, de l'autre côté */
  .maison-c1 { margin-top: calc(-3 * var(--t-h2)); padding: 0 clamp(.7rem, 2vw, 2.5rem) 0 var(--marge); text-align: right; }
  .maison-c2 { padding: clamp(4rem, 9vw, 8rem) var(--marge) 0 clamp(.7rem, 2vw, 2.5rem); text-align: left; }
}
.maison-groupe { margin: clamp(3rem, 8vw, 6.5rem) 0 0; }
.maison-groupe img { width: 100%; height: auto; aspect-ratio: 1440 / 736; object-fit: cover; }
.maison-groupe figcaption, .maison-comite figcaption { margin-top: .8rem; padding-inline: var(--marge); font-size: var(--t-petit); }
.maison-groupe figcaption span { display: block; }
.maison-histoire {
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide); align-items: end;
  margin-top: clamp(3rem, 8vw, 6.5rem);
}
.maison-annee { justify-self: end; padding: 0 clamp(.7rem, 2vw, 2.5rem) 0 var(--marge); text-align: right; }
.maison-2017 { font-size: clamp(4.5rem, 2rem + 13vw, 15rem); line-height: .8; font-variation-settings: 'wdth' 50, 'wght' 900; }
.maison-annee .petit { margin-top: .8rem; }
.maison-recit { padding: 0 var(--marge) 0 clamp(.7rem, 2vw, 2.5rem); }
.maison-onze { font-family: var(--f-display); font-weight: 200; font-variation-settings: 'wdth' 140, 'wght' 200; font-size: clamp(3rem, 1.4rem + 6vw, 8rem); line-height: .9; }
.maison-local { margin-top: .9rem; font-size: var(--t-corps); max-width: 20em; }
.maison-lien { margin-top: 1.4rem; }
.maison-lien .lien-pas { display: inline; }
.maison-comite { margin: clamp(3rem, 8vw, 6.5rem) 0 0; display: grid; }
.maison-comite img { width: 100%; height: auto; aspect-ratio: 960 / 990; object-fit: cover; }
.maison-comite figcaption > span { display: block; }
.maison-comite .sur-titre { margin-bottom: .45rem; }
.maison-prenoms { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: var(--t-titre); line-height: 1.12; margin-bottom: .55rem; }
@media (min-width: 900px) {
  .maison-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .maison-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(.7rem, 2vw, 2.5rem); }
  .maison-tete .sur-titre { grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: start; padding: 1.4rem clamp(.7rem, 2vw, 2.5rem) 0 0; text-align: right; }
  .maison-groupe { width: 84%; margin-left: 8%; }
  .maison-groupe figcaption { padding: 0; }
  .maison-comite { grid-template-columns: var(--part-suit) var(--part-guide); align-items: end; }
  .maison-comite picture { grid-column: 2; grid-row: 1; width: 70%; margin-left: clamp(.7rem, 2vw, 2.5rem); }
  .maison-comite figcaption { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; padding: 0 clamp(.7rem, 2vw, 2.5rem) 0 var(--marge); max-width: 26rem; }
}

/* =================================================================== 4. LA NUIT : le titre posé sur le noir, puis la soirée
   (l'ancienne fusion rouge × violet et la lumière de piste WebGL sont retirées : la charte veut un noir plat) */
.ch-nuit { position: relative; isolation: isolate; overflow-x: clip; border-top: var(--fil) solid var(--or); }
.fusion { position: relative; z-index: 1; }
.fusion-scene { position: relative; min-height: min(70svh, 44rem); display: grid; }
.fusion-tete {
  display: grid; align-content: center; justify-items: center; gap: 1.2rem;
  padding: var(--pas) var(--marge); text-align: center;
}
.fusion-tete .duo-titre { font-size: clamp(3.25rem, 1.5rem + 9vw, 11rem); }

.nuit-contenu { position: relative; z-index: 1; padding: 0 var(--marge) calc(var(--pas) + var(--debord-billet)); }
.ch-nuit { --debord-billet: clamp(10rem, 22svh, 15rem); }
.nuit-grille { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.nuit-vibes {
  display: flex; flex-wrap: wrap; gap: 0 .25em;
  font-family: var(--f-display); font-size: clamp(3rem, 1.2rem + 8vw, 9.5rem); line-height: .86;
}
.nuit-vibes span:nth-child(odd) { font-weight: 200; font-variation-settings: 'wdth' 140, 'wght' 200; }
.nuit-vibes span:nth-child(even) { font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900; }
.nuit-horaires { margin-top: 2rem; display: grid; grid-template-columns: max-content 1fr; gap: .55rem; font-size: var(--t-corps); }
.nuit-horaires li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: .9rem; align-items: baseline; padding-top: .55rem; border-top: 1px solid var(--filet); }
.nuit-horaires strong { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: 1.25em; line-height: 1; }
.nuit-soiree .petit { margin-top: 1rem; }
.nuit-photo img { width: 100%; height: auto; }
.nuit-photo figcaption { margin-top: .8rem; font-size: var(--t-petit); }
.nuit-djs { margin-top: var(--pas); }
.nuit-djs-titre { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.nuit-solo { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; font-size: var(--t-titre); line-height: 1.1; }
.nuit-liste { display: grid; gap: .25rem; }
.dj { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; }
.dj-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 52, 'wght' 900; line-height: .9; text-transform: uppercase; }
.dj--1 .dj-nom { font-size: clamp(3.25rem, 1.4rem + 8.5vw, 10rem); }
.dj--2 .dj-nom { font-size: clamp(2.5rem, 1.2rem + 6vw, 7.25rem); }
.dj--3 .dj-nom { font-size: clamp(2.9rem, 1.3rem + 7.2vw, 8.5rem); }
.dj--2 { justify-content: flex-end; text-align: right; }
.dj-ville { font-size: var(--t-petit); font-weight: 600; }
.nuit-djs > .petit { margin-top: 1.25rem; }
@media (min-width: 900px) {
  .nuit-grille { grid-template-columns: 1fr 1fr; align-items: end; }
  .nuit-djs { display: grid; grid-template-columns: var(--part-suit) 1fr; align-items: end; }
  .nuit-djs-titre { grid-column: 1; align-self: start; padding-right: 2rem; }
  .nuit-liste { grid-column: 2; }
  .nuit-djs > .petit { grid-column: 2; }
}

/* =================================================================== 5. JE PARTICIPE : la prise franche, le billet déborde sur la nuit */
.ch-participe { position: relative; z-index: 2; padding: 0 var(--marge) var(--pas); }
.participe-billet {
  --souche: 40%;
  position: relative; z-index: 3;
  margin: calc(-1 * var(--debord-billet, clamp(10rem, 22svh, 15rem))) auto 0;
  max-width: 68rem;
}
.ch-participe { --debord-billet: clamp(10rem, 22svh, 15rem); }
.participe-date { display: flex; flex-direction: column; }
.participe-date .billet-date { font-size: clamp(4rem, 2rem + 9vw, 10rem); }
.participe-lieu { margin-top: 1.25rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.35; }
.participe-edition { margin-top: 1rem; font-family: var(--f-display); font-weight: 200; font-variation-settings: 'wdth' 150, 'wght' 200; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: .9; }
.participe-titre { font-size: clamp(3rem, 1.8rem + 4.2vw, 7rem); color: var(--encre); }
.billet-talon .billet-titre { margin-top: 1.4rem; }
.participe-salles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.25rem 0 0; padding: 0; border: 0; min-inline-size: 0; }
.participe-salles legend { float: left; width: 100%; grid-column: 1 / -1; margin-bottom: .1rem; }
.participe-salles legend .petit { text-transform: none; letter-spacing: 0; font-weight: 500; }
.p-salle {
  position: relative; display: flex; align-items: center; min-height: 56px; padding: .55rem .8rem;
  border: 2px solid var(--c); cursor: pointer; font-size: var(--t-petit); line-height: 1.2;
  transition: background-color 220ms var(--elan), color 220ms var(--elan), translate 160ms var(--elan);
}
.p-salle strong { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: 1.35rem; line-height: 1; }
.p-salle--2 { --c: var(--suit); }
.p-salle--1 { --c: var(--guide); }
.p-salle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.p-salle:hover { translate: 0 -2px; }
.p-salle:active { translate: 0 1px; }
.p-salle:has(input:checked) { background: var(--c); color: var(--texte); }
.p-salle:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.participe-billet .bouton { margin-top: 1.25rem; }
.participe-billet .cta-salle:not(:empty)::before { content: "· "; }
.participe-billet .cta-salle { font-size: inherit; font-weight: inherit; }
/* la souche se détache : une prise franche, sur un court passage du défilement (frame finale = détachée) */
.participe-billet .billet-souche { translate: -12px 10px; rotate: -3deg; transform-origin: 100% 0; transition: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .participe-billet { view-timeline-name: --prise; }
    .participe-billet .billet-souche {
      animation-name: prise-souche; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: --prise; animation-range: cover 38% cover 52%;
    }
  }
}
@keyframes prise-souche { from { translate: 0 0; rotate: 0deg; } }
.sans-sd .participe-billet .billet-souche { transition: translate 520ms var(--prise), rotate 520ms var(--prise); }
.sans-sd .participe-billet:not(.vu) .billet-souche { translate: 0 0; rotate: 0deg; }

.participe-suite { display: grid; gap: 2.5rem; max-width: 68rem; margin: var(--pas) auto 0; }
.participe-membre-titre { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: .95; margin: .4rem 0 .8rem; }
.participe-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.1rem; margin-bottom: .6rem; font-weight: 600; }
.participe-prix strong { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 60, 'wght' 900; font-size: 1.5em; }
.participe-membre > p + p { margin-top: .5rem; }
.participe-liens { display: grid; gap: .9rem; margin-top: .8rem; }
.participe-liens .lien-pas { font-size: var(--t-titre); font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 70, 'wght' 900; text-decoration-thickness: 2px; }
.participe-liens .petit { font-family: var(--f-texte); font-weight: 500; font-variation-settings: normal; }
@media (min-width: 900px) {
  .ch-participe { padding-inline: 0; }
  .participe-billet { --souche: calc(45vw - 9rem); margin-left: 9rem; margin-right: var(--marge); max-width: none; }  /* la perforation tombe sur la couture */
  .participe-suite { grid-template-columns: var(--part-suit) var(--part-guide); max-width: none; gap: 0; }
  .participe-membre { justify-self: end; text-align: right; padding: 0 clamp(1rem, 3vw, 3rem) 0 var(--marge); }
  .participe-prix { justify-content: flex-end; }
  .participe-reseaux { padding: 0 var(--marge) 0 clamp(1rem, 3vw, 3rem); }
}
@media (min-width: 1280px) {
  .participe-billet { margin-right: 12rem; }
}

/* bureau : « Salle » et le chiffre sur la même ligne de base (le titre garde le haut de la scène) */
@media (min-width: 900px) {
  .croise-num { display: flex; align-items: baseline; gap: .25em; }
  .croise-col--guide .croise-num { justify-content: flex-end; }
  .croise-chiffre { font-size: clamp(9rem, min(3rem + 30vw, 38svh), 30rem); margin-top: 0; }
  .croise-col { padding-bottom: clamp(2rem, 6vh, 5rem); }
}

/* téléphone : la souche est au-dessus du talon ; elle se détache vers le haut, pivot à gauche */
@media (max-width: 599px) {
  .participe-billet .billet-souche { transform-origin: 0 100%; translate: -4px -16px; rotate: -2.5deg; }
  .participe-billet .billet-souche { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; }
  .participe-date { grid-row: 1 / span 2; }
  .participe-lieu { margin-top: 0; }
  .participe-edition { margin-top: .5rem; font-size: 2.6rem; }
}

/* très petit écran / zoom 400–500 % : « danses ? » se serre, « Oui. » passe à la ligne */
@media (max-width: 21.9rem) {
  .q1 { font-variation-settings: 'wdth' 110, 'wght' 200; }
  .q2, .est-uni .q2 { font-variation-settings: 'wdth' 64, 'wght' 200; }
  .ligne2 { display: block; }
  .oui-grand { position: relative; left: 0; display: block; }
  .croise-chiffre { font-size: 8rem; }
  /* le passage croisé n'a plus la place de croiser (scène de 120 px de haut à 500 %) : le titre puis les deux salles,
     l'une sous l'autre, dans le flux, sur leur frame finale ; rien ne se recouvre (le titre est le premier enfant de la
     scène dans le HTML : aucun « order » qui contredirait l'ordre de lecture) */
  .croise { height: auto; }
  .croise-scene { position: relative; top: 0; height: auto; display: flex; flex-direction: column; }
  .croise-tete { position: relative; padding-bottom: 2rem; }   /* premier dans le DOM : ordre de lecture = ordre visuel */
  .croise-scene .croise-col { position: relative; left: auto; width: auto; padding: 1.5rem var(--marge) 2rem; animation-name: none; transform: none; box-shadow: none; transition: none; }
  .sans-sd .croise:not(.vu) .croise-col { transform: none; }
  .croise-col--guide { align-items: flex-start; text-align: left; }
  .croise-col--guide .croise-num { justify-content: flex-start; }
  .participe-titre { font-size: 3rem; }
  .maison-onze, .maison-2017 { font-size: 3rem; }
  .nuit-vibes, .dj-nom { font-size: 3rem !important; }
  .am-couples-titre, .maison-histoire { grid-template-columns: 1fr; padding-inline: var(--marge); }
  .am-couples-titre .duo-q, .am-couples-titre .duo-r, .maison-annee, .maison-recit { grid-column: 1; justify-self: start; text-align: left; padding: 0; }
  .maison-recit { margin-top: 1.5rem; }
  .participe-date .billet-date { font-size: 3rem; }
}

/* téléphone : le titre du passage croisé (délié 200 de la charte, plus large) laisse la place aux deux salles */
@media (max-width: 599px) {
  .croise-chiffre { font-size: clamp(5.5rem, 24vw, 9rem); }
  .croise-col { padding-bottom: 1.5rem; }
  .croise-tete .duo-titre { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3rem); }
}
/* mouvement réduit : la scène ne colle pas ; le titre puis les deux salles, dans le flux (comme au zoom 500 %) */
@media (prefers-reduced-motion: reduce) {
  .croise-scene { height: auto; display: flex; flex-direction: column; }
  .croise-tete { position: relative; padding-bottom: 2rem; }
  .croise-scene .croise-col { position: relative; left: auto; width: auto; padding: 1.5rem var(--marge) 2rem; box-shadow: none; }
  .croise-col--guide { align-items: flex-start; text-align: left; }
  .croise-col--guide .croise-num { justify-content: flex-start; }
}