/* pages/accueil.css — l'accueil de Villa Vida, à la charte v1.0 : noir, or, le logo en héros.
   1 L'invitation + l'envol : le logo dans son disque fleurit (anim. 1) ; « Oui » ou un toucher du logo font pleuvoir ses
     notes (anim. 2) ; le même disque reste à l'écran pendant ≈ 300 vh, ses notes s'envolent en halo et reviennent
     (anim. 5, jouée par le compositeur : logo.js) ; autour de l'arbre paraissent les cartes (prochains rendez-vous,
     jeudis, cinq branches, fin ; CSS scroll-driven, forme longue) ; au téléphone, le disque se range et elles défilent
     en file sous lui (07.10.2026)
   2 Danse : « Ils sont venus danser chez nous » (08.10.2026) — les couples invités depuis 2016, une liste statique, le
     nœud or sur la couture ; chaque couple se recolle une fois, à son entrée dans l'écran (plus de salles ni de stages ici)
   3 Amitié : qui organise (11.10.2026 : deux phrases, trois mots, le lien vers /association/)
   4 Bachata : 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 cartes
   (.envol-cartes) 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 cartes 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 */
  --pied: 12rem;                                              /* téléphone : l'accroche et « Oui » sous le disque (12.10.2026 : réglable) */
  --D: max(min(calc(100 * var(--vw)) - 2 * var(--marge), var(--h) - var(--tete) - var(--pied), 36rem), min(17rem, calc(100 * var(--vw)) - 2 * var(--marge)));
  --S: 330vh;                                                 /* la séquence collante (bureau : 300vh) */
  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 + calc(9.6 * var(--vw)), 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; }
/* 12.10.2026 (décision Yann : la barre compacte du téléphone, tokens.css) : les 44 px gagnés vont au disque. La place
   réservée sous lui suit ce qu'il y a vraiment : l'accroche (deux lignes dès 21 rem de large, trois en dessous) et « Oui »
   (52 px), padding compris. « Oui » reste dans le premier écran (375 × 667, 390 × 664 de Safari avec sa barre d'adresse) ;
   à 320 × 640, le sur-titre et l'accroche se resserrent un peu pour qu'il y entre aussi (le bandeau y tient sur deux
   lignes). La largeur reste la limite au-delà (375 × 812 et plus : le disque garde sa marge de chaque côté). */
@media (max-width: 599px), (max-width: 899px) and (max-height: 30rem) {
  .envol { --pied: 9.5rem; }
  .heros-pied { align-content: center; }   /* sur un écran haut, l'accroche et « Oui » restent ensemble, au milieu du reste */
}
@media (max-width: 20.9rem) and (min-height: 35rem) {
  .envol { --pied: 11rem; --tete: 6.25rem; }
  .heros-pied { align-content: start; padding-top: .9rem; gap: .75rem; }
}

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

/* ---- le logo du héros, activable (accueil.js : role="button", seulement avec les calques et sans mouvement réduit) :
   un toucher ou un clic fait pleuvoir les notes ; aucun geste bloqué (manipulation : défilement et pincement gardés) */
.envol-disque.est-activable { pointer-events: auto; cursor: pointer; touch-action: manipulation; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.envol-disque.est-activable:focus-visible { outline-offset: 4px; border-radius: 50%; }

/* ---- autour de l'arbre : les cartes (prochains rendez-vous, jeudis, cinq branches, fin).
   Frame finale (mouvement réduit, sans scroll-driven) = une liste sous le disque, tout visible. */
.envol-cartes {
  grid-area: 2 / 1; position: relative; z-index: 2;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch;
  padding: calc(var(--pas) * .5) var(--marge) calc(var(--pas) * .6);
}
.ec-file { display: contents; }   /* téléphone (séquence) : la file qui défile sous le disque rangé */
.ec { min-width: 0; }
.ec-papier {
  height: 100%;
  display: grid; align-content: start; gap: .65rem;
  padding: 1.05rem 1.2rem 1.15rem;
  background: var(--noir-2); border-top: var(--fil) solid var(--or); border-radius: 0 0 var(--rayon) var(--rayon);
  font-size: var(--t-petit); line-height: 1.45; color: var(--texte);
}
.ec-papier p { margin: 0; }
/* les rendez-vous : des documents blancs (charte §10), comme les billets de l'agenda */
.ec--doc .ec-papier { background: var(--blanc); color: var(--noir); border-top: 0; border-radius: var(--rayon); }
.ec--doc .ec-titre { margin: 0; color: var(--or-profond); }
.ec-rdv { display: grid; gap: .85rem; }
.ec-evt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: start; }
.ec-evt:not([hidden]) ~ .ec-evt:not([hidden]) { padding-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--noir) 16%, transparent); }
.ec-evt .cartouche { font-size: .78rem; }
.ec-evt-corps { display: grid; gap: .3rem; min-width: 0; }
.ec-evt-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(1.15rem, 1rem + calc(.6 * var(--vw)), 1.45rem); line-height: 1; text-transform: uppercase; }
.ec-evt-nom a { text-decoration: none; padding-block: .25em; position: relative; }   /* zone tactile ≥ 24 px (10.10.2026, audit P2-20 ; lien en ligne : la mise en page ne bouge pas) */
/* 11.10.2026 (P2) : la zone tactile du nom atteint 44 px de haut par un pseudo-élément, sans rien déplacer. Il déborde
   surtout vers le bas (la date, qui n'est pas un lien) : au téléphone, le billet rogne ce qui dépasse en haut. */
.ec-evt-nom a::after { content: ""; position: absolute; left: 0; right: 0; top: -.35rem; height: max(calc(100% + .35rem), 44px); }
.ec-evt-nom a:hover { text-decoration: underline; text-decoration-color: var(--noir); }
.ec-evt-quand { font-size: var(--t-mini); line-height: 1.35; color: var(--encre-douce); }
.ec-evt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin-top: .2rem !important; }
.ec--doc .bouton { min-height: 44px; margin: 0; padding: .5em 1em; font-size: .875rem; }
.ec-billetterie { font-size: .875rem; min-height: 44px; }
.ec-evt--aucun { display: grid; gap: .5rem; grid-template-columns: 1fr; font-size: var(--t-corps); }
/* les cinq branches : le mot en plein, en or ; la citation en délié */
.ec-mot { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: clamp(2.1rem, 1.6rem + calc(1.6 * var(--vw)), 3.25rem); line-height: .88; text-transform: uppercase; color: var(--or); }
/* .ec-cite : une phrase en délié (11.10.2026 : plus de citation, sauf le slogan). Règle des accents : jamais sous 20 px
   (1,25 rem) en Anybody 300, les accents s'y perdent. */
.ec-cite { font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 118, 'wght' 300; font-size: clamp(1.25rem, .95rem + calc(.4 * var(--vw)), 1.3rem); line-height: 1.2; }
.ec-chiffre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.ec-n { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; font-size: clamp(2.75rem, 2rem + calc(2.4 * var(--vw)), 4.25rem); line-height: .85; color: var(--or); }
.ec-n-quoi { font-weight: 700; }
.ec-lien { margin-top: .15rem !important; }
/* la fin : pas de carte, le texte sur le noir */
.ec--fin { grid-column: 1 / -1; }
.ec--fin .ec-papier { background: none; border: 0; padding: .5rem 0 0; gap: 1rem; justify-items: start; }
.ec-fin-texte { font-family: var(--f-display); font-size: clamp(1.9rem, 1.3rem + calc(2.2 * var(--vw)), 3.25rem); line-height: .95; }
.ec-fin-texte .duo-q { display: block; font-weight: 300; font-variation-settings: 'wdth' 120, 'wght' 300; }
.ec-fin-texte .duo-r { display: block; font-weight: 900; font-variation-settings: var(--plein); color: var(--or); }

/* ---- mouvement permis : le disque colle sous la barre pendant toute la piste */
@media (prefers-reduced-motion: no-preference) {
  .envol-scene { grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: var(--barre-h); }
}
/* scroll-driven (forme longue) : la piste s'allonge de --S ; les cartes collent avec le disque et paraissent au défilement.
   Tout est en opacity / translate / transform (le compositeur), sur la timeline --envol ; aucun script.
   Une carte paraît d'un coup (jamais de texte à demi transparent : contraste AA à chaque position) et glisse en place.
   Avant et après son passage, elle est à 100vh (hors du cadre rogné : ni visible, ni cliquable).
   --a : début de l'entrée, --b : fin de la sortie (en % de la plage « contain » de la piste). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .envol { view-timeline-name: --envol; grid-template-rows: auto var(--S); }
    /* le texte du héros s'efface en montant (il ne passe pas derrière le disque) ; le billet ouvert part un peu plus tard,
       avant que les cartes n'arrivent (jamais l'un sur l'autre), hors du cadre (plus cliquable) */
    .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 10%;
    }
    .couture-billet { pointer-events: none; }
    .couture-billet > * { pointer-events: auto; }
    .couture-billet .cb-choix, .couture-billet .cb-rejouer {
      animation-name: billet-sort; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain 0% contain 14%;
    }
    .envol-cartes {
      grid-area: 1 / 1 / 3 / 2; align-self: start; position: sticky; top: var(--barre-h);
      display: block; height: var(--h); padding: 0; overflow: clip; pointer-events: none;
    }
    .ec { position: absolute; pointer-events: none; }
    .ec-papier { pointer-events: auto; }
    .ec {
      animation-name: ec-entre; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain var(--a, 0%) contain calc(var(--a, 0%) + var(--e, 6%));
    }
    .ec-papier {
      animation-name: ec-sort; animation-duration: 1ms; animation-timing-function: cubic-bezier(.5, 0, .75, 0); animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain calc(var(--b, 300%) - var(--f, 5%)) contain var(--b, 300%);
    }
    /* au clavier, la carte qui reçoit le focus se montre (posée, sans animation ; téléphone : accueil.js amène la file) */

    /* gardés pour le bureau : la base des cartes posées autour du disque (le bloc du bureau ne réécrit que le reste) */
    .ec-papier { display: flex; flex-direction: column; height: auto; min-height: 100%; }
    .ec-lien { margin-top: auto !important; padding-top: .35rem; }
    .ec--fin .ec-papier { min-height: 0; justify-items: center; text-align: center; padding: 0; gap: .75rem; }
    .ec:not(.ec--fin) .ec-papier { position: relative; }
    .ec:focus-within, .ec:focus-within .ec-papier { animation-name: none; }
  }

  /* téléphone (et tout écran en portrait), 07.10.2026 : le disque se range en haut, plus petit (translate + scale,
     compositeur) et y reste ; ses notes s'envolent autour, puis reviennent. Sous lui, une fenêtre fixe (rognage statique) ;
     les cartes, compactes, y défilent en file, à peu près au pas du doigt : une seule animation, un translate sur la file
     (--envol, forme longue). Une ou deux cartes à l'écran, jamais l'une sur l'autre, aucune tranche dessinée.
     La file finit sur « Les notes reviennent sur l'arbre », --air au-dessus du bas de la fenêtre : la section suivante
     arrive après ce blanc, au même pas (la piste se termine quand la file s'arrête).
     --S en rem : la longueur de la file (≈ 1 720 px à 375) ne dépend pas de la hauteur de l'écran ; 225 vh à 375 × 812.
     (La plage « contain » commence sous la barre : la timeline compte avec le scroll-padding de la page.) */
  @media (prefers-reduced-motion: no-preference) and ((width < 900px) or (aspect-ratio < 1)) {
    .envol {
      --S: 114rem; --dock: .5; --air: 4.5rem;
      --dock-y: calc(.75rem - var(--tete) - var(--D) * (1 - var(--dock)) / 2);
      --slot: calc(var(--D) * var(--dock) + 1.5rem);
      --fen: calc(var(--h) - var(--slot));
    }
    .envol-disque {
      animation-name: disque-range; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain 2% contain 12%;
    }
    /* la sortie (12.10.2026) : quand la scène se décroche, la barre se range (barre.js) ; 2 rem plus loin, le disque
       s'envole, plus vite que la page (10 rem de plus sur 10 rem de défilement, en accélérant) : il ne glisse plus sous la
       barre et ne reste pas coupé en haut de l'écran. Un translate sur la scène (compositeur), sans toucher au rangement. */
    .envol-scene {
      animation-name: disque-sort; animation-duration: 1ms; animation-timing-function: cubic-bezier(.45, 0, .8, .4); animation-fill-mode: both;
      animation-timeline: --envol;
      animation-range: contain calc(100% + var(--bandeau-h) + 2rem) contain calc(100% + var(--bandeau-h) + 12rem);
    }
    /* le haut de la fenêtre : les cartes s'y estompent. 07.10.2026 : un masque sur la fenêtre elle-même, et non plus un
       dégradé noir posé par-dessus (::before) : en haut de page, ce dégradé barrait le disque d'une bande noire. */
    .envol-cartes {
      top: calc(var(--barre-h) + var(--slot)); height: var(--fen);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
              mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
      overflow: clip; overflow-clip-margin: 6px;   /* rien de la file ne déborde sur le disque rangé au-dessus */
    }
    .ec-file {
      display: grid; gap: .75rem; max-width: calc(34rem + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge);
      animation-name: ec-file; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --envol; animation-range: contain 0% contain calc(100% + var(--bandeau-h));
    }
    .est-oui .ec-file { animation-range-start: contain 9%; }   /* billet du « Oui » ouvert : la file attend qu'il soit parti */
    .ec, .ec:not(.ec--fin) { position: relative; inset: auto; animation-name: none; }
    .ec .ec-papier, .ec:not(.ec--fin) .ec-papier, .ec.ec--ensemble .ec-papier {
      animation-name: none; display: grid; align-content: start; gap: .5rem; min-height: 0; padding: .95rem 1.1rem 1rem;
    }
    .ec .ec-lien { margin-top: 0 !important; padding-top: .1rem; }
    /* les branches : le mot en grand, deux ou trois lignes, le lien juste dessous */
    .ec--branche .ec-papier { font-size: var(--t-petit); }
    .ec--branche .ec-mot { font-size: clamp(2.5rem, 1.9rem + calc(3 * var(--vw)), 3.25rem); }
    .ec--branche .ec-cite { font-size: clamp(1.25rem, 1rem + calc(.8 * var(--vw)), 1.4rem); }
    .ec--branche .ec-n { font-size: clamp(2.9rem, 2.2rem + calc(3 * var(--vw)), 3.75rem); }
    .ec-chiffre { gap: 0 .45rem; }
    /* la fin, posée sous la dernière carte */
    .ec.ec--fin .ec-papier { padding: 1.5rem 0 0; gap: .9rem; justify-items: center; text-align: center; }
    .ec--fin .ec-fin-texte { font-size: clamp(1.75rem, 1.2rem + calc(2.4 * var(--vw)), 2.4rem); }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-height: 740px) and ((width < 900px) or (aspect-ratio < 1)) {
  .envol { --dock: .45; }
}
/* 12.10.2026 (décision Yann : la barre compacte du téléphone) : le disque rangé est nettement plus grand, la place vient de
   la barre. 0,68 du disque au téléphone haut (233 px à 375 × 812, contre 171), 0,55 au téléphone bas (171 px à
   375 × 667, contre 122) ; la fenêtre des cartes garde 374 à 547 px (une carte entière, ou deux). Couché (≤ 30 rem de
   haut) : 0,45, comme avant (la fenêtre y est déjà petite). Tablette et bureau : inchangés. */
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
  .envol { --dock: .68; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) and (max-height: 740px) {
  .envol { --dock: .55; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) and (max-height: 30rem) {
  .envol { --dock: .45; }
}
/* couché (≤ 30 rem de haut) : la fenêtre est si près du disque que la première carte passait sur lui pendant qu'il se
   range ; la file attend qu'il soit rangé (12 %), comme elle attend le billet du « Oui » */
@media (prefers-reduced-motion: no-preference) and (max-height: 30rem) and ((width < 900px) or (aspect-ratio < 1)) {
  .ec-file, .est-oui .ec-file { animation-range-start: contain 12%; }
}
/* téléphone et portrait (toutes formes, mouvement réduit compris) : les rendez-vous sont des billets à la charte,
   posés sur le noir — le cartouche à la note de la série en souche, deux encoches, le statut et « Je participe » */
@media (width < 900px), (aspect-ratio < 1) {
  .ec--doc .ec-papier { background: none; color: var(--texte); padding: 0; border-radius: 0; gap: .6rem; }
  .ec--doc .ec-titre { color: var(--or); }
  .ec-rdv { gap: .6rem; }
  .ec-evt {
    grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0; align-items: stretch;
    background: var(--blanc); color: var(--noir); border-radius: var(--rayon); overflow: clip;
  }
  .ec-evt:not([hidden]) ~ .ec-evt:not([hidden]) { padding-top: 0; border-top: 0; }
  .ec-evt .cartouche { min-width: 0; padding: .6rem .25rem; font-size: .78rem; }
  .ec-evt-corps { position: relative; gap: .2rem; padding: .65rem .8rem .75rem .95rem; }
  .ec-evt-corps::before, .ec-evt-corps::after {   /* les encoches du billet, entre la souche et le talon */
    content: ""; position: absolute; left: -.45rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--noir);
  }
  .ec-evt-corps::before { top: -.45rem; }
  .ec-evt-corps::after { bottom: -.45rem; }
  .ec-evt-nom { font-size: 1.0625rem; }
  .ec-evt-actions { gap: .4rem .5rem; margin-top: .25rem !important; }
  .ec--doc .bouton { min-height: 44px; padding: .45em .95em; font-size: .8125rem; }
  .ec-evt--aucun { grid-template-columns: 1fr; padding: .9rem 1rem; }
  .ec-plus { display: none; }
}
@keyframes heros-sort { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }   /* d'un coup, quand il touche la barre */
@keyframes billet-sort { 0%, 70% { opacity: 1; translate: 0 0; } 71%, 100% { opacity: 0; translate: 0 -100vh; } }
@keyframes ec-entre { 0% { opacity: 0; translate: 0 100vh; } 1% { opacity: 1; translate: 0 2.25rem; } 100% { opacity: 1; translate: 0 0; } }
@keyframes ec-sort { 0% { opacity: 1; transform: none; } 99% { opacity: 1; transform: translateY(-1.75rem); } 100% { opacity: 0; transform: translateY(-100vh); } }
/* téléphone : le disque se range (2 % → 12 %) et reste rangé jusqu'au bout (la frame finale, sans animation, est à sa place) */
@keyframes disque-range { from { translate: 0 0; scale: 1; } to { translate: 0 var(--dock-y); scale: var(--dock); } }
/* téléphone : en fin de piste, la scène du disque s'envole (12.10.2026) */
@keyframes disque-sort { from { translate: 0 0; } to { translate: 0 -10rem; } }
/* la file : entre par le bas de la fenêtre, finit --air au-dessus de son bas (100 % = la hauteur de la file) */
@keyframes ec-file { from { translate: 0 var(--fen); } to { translate: 0 calc(var(--fen) - var(--air) - 100%); } }

/* ---- 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 + calc(2.4 * var(--vw)), 4rem); color: var(--noir); }
.cb-souche .billet-an { font-size: clamp(1.1rem, 1rem + calc(.6 * var(--vw)), 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 + calc(.9 * var(--vw)), 1.7rem); }
.cb-corps .billet-lieu { font-size: .875rem; }
.cb-corps .billet-info { font-size: .8125rem; }
.cb-statut { margin-top: .55rem; }
/* la ligne « Billetterie ↗ » (Weezevent), seulement si elle est ouverte (08.10.2026 : plus de choix de salle) */
.cb-plus { grid-column: 1 / -1; margin: 0; padding: 10px 16px 12px; border-top: 2px solid var(--noir); font-size: .9375rem; }
.cb-corps--seul { grid-column: 1 / -1; padding-left: 16px; }
.cb-corps--seul::before { content: none; }
.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: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, calc(40 * var(--vw)), 38rem); --tete: 0rem; }
  .heros {
    grid-template-columns: minmax(0, 1fr) var(--D) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(1.5rem, calc(3 * var(--vw)), 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 + calc(3.6 * var(--vw)), 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 + calc(1.4 * var(--vw)), 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; }
  .reponses-evt { display: grid; gap: 1.5rem; }
  .envol-scene { align-content: center; padding-top: 0; }
  .couture-billet {
    left: calc(50% + var(--D) / 2 + clamp(1rem, calc(2 * var(--vw)), 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; }
}
/* bureau : les cartes paraissent autour du disque, à gauche et à droite, une par côté à la fois ; le disque ne se range pas */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-aspect-ratio: 1/1) {
    .envol { --S: 300vh; }
    .envol-disque { animation-name: none; }
    .ec, .ec:not(.ec--fin) { --b: 300%; --e: 6%; --f: 5%; animation-name: ec-entre; top: auto; bottom: auto; left: auto; right: auto; width: min(25rem, calc(50% - var(--D) / 2 - 2 * var(--marge))); max-width: none; margin: 0; }
    .ec:not(.ec--fin) .ec-papier, .ec--ensemble .ec-papier { animation-name: ec-sort; min-height: 0; }
    .ec:not(.ec--fin) .ec-papier::before { content: none; }
    .ec--branche .ec-papier { gap: .65rem; padding: 1.05rem 1.2rem 1.15rem; font-size: var(--t-petit); }
    .ec--branche .ec-mot { font-size: clamp(2.1rem, 1.6rem + calc(1.6 * var(--vw)), 3.25rem); }
    .ec--branche .ec-cite { font-size: clamp(1.25rem, .95rem + calc(.4 * var(--vw)), 1.3rem); }
    .ec--branche .ec-n { font-size: clamp(2.75rem, 2rem + calc(2.4 * var(--vw)), 4.25rem); }
    .ec--fin .ec-papier { justify-items: start; text-align: left; }
    .ec--fin .ec-fin-texte { font-size: clamp(2.25rem, 1rem + calc(2.4 * var(--vw)), 3.5rem); }
    .ec--fin .ec-fin-texte .duo-q, .ec--fin .ec-fin-texte .duo-r { display: block; }
    .ec.ec--prochains { --a: 11%; --b: 36%; left: var(--marge); top: 8%; }
    .ec.ec--jeudis    { --a: 15%; --b: 40%; right: var(--marge); top: 16%; }
    .ec.ec--danse     { --a: 38%; --b: 59%; left: var(--marge); top: 9%; }
    .ec.ec--bachata   { --a: 44%; --b: 62%; right: var(--marge); bottom: 10%; }
    .ec.ec--amitie    { --a: 56%; --b: 74%; left: var(--marge); bottom: 9%; }
    .ec.ec--passion   { --a: 60%; --b: 81%; right: var(--marge); top: 9%; }
    .ec.ec--ensemble  { --a: 75%; --b: 300%; --f: 5%; left: var(--marge); top: 22%; }
    .ec.ec--fin       { --a: 82%; right: var(--marge); top: 30%; }
    .ec:focus-within, .ec:focus-within .ec-papier { animation-name: none; }
  }
}

/* =================================================================== 2. DANSE : « Ils sont venus danser chez nous » (08.10.2026)
   Les couples d'artistes invités depuis 2016 (FAITS §5, §8, §9). Une liste statique, centrée sur la couture (45 %) :
   les prénoms de part et d'autre, le nœud (y, &) en or. Pas de texte défilant, aucune animation continue : à son entrée
   dans l'écran, chaque couple se recolle (translate, view(), forme longue) ; frame finale = recollé. */
.ch-danse { padding-block: var(--pas) calc(var(--pas) * .8); }
.venus-tete { padding-inline: var(--marge); }
.venus-tete .sur-titre { margin-bottom: 1rem; }
.venus-tete .duo-titre { max-width: 11em; }
.venus-intro { margin-top: 1.1rem; max-width: 30em; font-size: var(--t-petit); color: var(--texte-2); }
.venus-liste { display: grid; gap: clamp(1.35rem, calc(3 * var(--vw)), 2.5rem); margin-top: clamp(2.5rem, calc(7 * var(--vw)), 5.5rem); }
.venus-couple--grand { --taille: clamp(2.25rem, 1rem + calc(5.2 * var(--vw)), 6.25rem); }
.venus-couple--moyen { --taille: clamp(2rem, 1rem + calc(3.9 * var(--vw)), 4.75rem); }
.venus-couple--petit { --taille: clamp(1.75rem, 1rem + calc(2.8 * var(--vw)), 3.5rem); }
.venus-couple .couple-meta { margin-top: .4rem; color: var(--texte-2); }
.venus-couple .couple-meta > :last-child { font-variant-numeric: tabular-nums; }
.venus-suisse { margin-top: clamp(2.5rem, calc(6 * var(--vw)), 4.5rem); padding-inline: var(--marge); font-size: var(--t-petit); font-weight: 600; line-height: 1.5; }
.venus-suisse .sur-titre { display: block; margin-bottom: .35rem; }
.venus-lien { margin-top: 1.5rem; padding-inline: var(--marge); }
@media (min-width: 900px) {
  .venus-tete { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .venus-tete > * { grid-column: 2; padding: 0 var(--marge) 0 clamp(.7rem, calc(2 * var(--vw)), 2.5rem); }
  .venus-tete .sur-titre { grid-column: 1; grid-row: 1 / span 2; justify-self: end; align-self: start; padding: 1.4rem clamp(.7rem, calc(2 * var(--vw)), 2.5rem) 0 0; text-align: right; }
  .venus-suisse, .venus-lien { display: grid; grid-template-columns: var(--part-suit) var(--part-guide); padding: 0; }
  .venus-suisse { align-items: baseline; }
  .venus-suisse .sur-titre { grid-column: 1; justify-self: end; margin: 0; padding-right: clamp(.7rem, calc(2 * var(--vw)), 2.5rem); text-align: right; }
  .venus-suisse > :not(.sur-titre), .venus-lien > * { grid-column: 2; padding-left: clamp(.7rem, calc(2 * var(--vw)), 2.5rem); }
  .venus-lien .lien-pas { justify-self: start; margin-left: clamp(.7rem, calc(2 * var(--vw)), 2.5rem); padding-left: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .venus-couple .couple-x, .venus-couple .couple-z, .venus-couple .couple-y {
      animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 25% cover 42%;
    }
    .venus-couple .couple-x { animation-name: venus-x; }
    .venus-couple .couple-z { animation-name: venus-z; }
    .venus-couple .couple-y { animation-name: venus-y; }
  }
}
@keyframes venus-x { from { translate: -.9em 0; } }
@keyframes venus-z { from { translate: .9em 0; } }
@keyframes venus-y { from { scale: .4; } }
.sans-sd .venus-couple:not(.vu) .couple-x { translate: -.9em 0; }
.sans-sd .venus-couple:not(.vu) .couple-z { translate: .9em 0; }

/* =================================================================== 3. AMITIÉ : qui organise (11.10.2026)
   Deux phrases, trois mots (la philosophie : FAITS §1), le lien vers /association/. L'histoire, le comité et les photos de
   groupe sont sur /association/ ; la photo de groupe des Utins n'est plus qu'au pied (une photo, une fois par page). */
.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-corps { display: grid; gap: 1.4rem; margin-top: clamp(1.5rem, calc(4 * var(--vw)), 3rem); padding-inline: var(--marge); }
.maison-texte { max-width: 30em; font-size: var(--t-corps); line-height: 1.45; }
.maison-mots { font-family: var(--f-display); font-size: clamp(2.25rem, 1.2rem + calc(3.6 * var(--vw)), 4.75rem); line-height: .94; }
.maison-mots span { display: block; }
.maison-mots span:nth-child(odd) { font-weight: 200; font-variation-settings: 'wdth' 118, 'wght' 200; }
.maison-mots span:nth-child(even) { font-weight: 900; font-variation-settings: 'wdth' 56, 'wght' 900; color: var(--or); }
.maison-lien .lien-pas { min-height: 44px; }
@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, calc(2 * var(--vw)), 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, calc(2 * var(--vw)), 2.5rem) 0 0; text-align: right; }
  /* les trois mots face au texte, de l'autre côté de la couture */
  .maison-corps { grid-template-columns: var(--part-suit) var(--part-guide); align-items: center; gap: 1rem 0; padding: 0; }
  .maison-mots { grid-column: 1; grid-row: 1 / span 2; justify-self: end; text-align: right; padding: 0 clamp(.7rem, calc(2 * var(--vw)), 2.5rem) 0 var(--marge); }
  .maison-texte, .maison-lien { grid-column: 2; padding: 0 var(--marge) 0 clamp(.7rem, calc(2 * var(--vw)), 2.5rem); }
  .maison-lien { align-self: start; }
}

/* =================================================================== 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 + calc(9 * var(--vw)), 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, calc(6 * var(--vw)), 5rem); }
.nuit-vibes {
  display: flex; flex-wrap: wrap; gap: 0 .25em;
  font-family: var(--f-display); font-size: clamp(3rem, 1.2rem + calc(8 * var(--vw)), 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-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 { margin-bottom: 1.5rem; }
.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 + calc(8.5 * var(--vw)), 10rem); }
.dj--2 .dj-nom { font-size: clamp(2.5rem, 1.2rem + calc(6 * var(--vw)), 7.25rem); }
.dj--3 .dj-nom { font-size: clamp(2.9rem, 1.3rem + calc(7.2 * var(--vw)), 8.5rem); }
.dj--4 .dj-nom { font-size: clamp(2.7rem, 1.25rem + calc(6.6 * var(--vw)), 7.75rem); }
.dj--2, .dj--4 { justify-content: flex-end; text-align: right; }
.dj-ville { font-size: var(--t-petit); font-weight: 600; }
@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; }
}

/* =================================================================== 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-v { display: flex; flex-direction: column; }   /* une variante par événement (tools/agenda.cjs, garde-fou de date) */
.participe-date { display: flex; flex-direction: column; }
.participe-date .billet-date { font-size: clamp(4rem, 2rem + calc(9 * var(--vw)), 10rem); }
.participe-lieu { margin-top: 1.25rem; font-size: var(--t-petit); font-weight: 600; line-height: 1.35; }
.participe-titre { font-size: clamp(2rem, 1.4rem + calc(2.2 * var(--vw)), 3.75rem); color: var(--encre); }   /* 12.10.2026 : la question seule ; le nom de l'événement prend la place (composants, .billet-titre--grand) */
.billet-talon .billet-titre { margin-top: 1.4rem; }
.participe-etat { margin-top: .9rem; }
.participe-actions { display: grid; justify-items: start; gap: 1rem; margin-top: 1.25rem; }
.participe-billet .participe-actions .bouton { margin-top: 0; }
/* 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; }

/* 11.10.2026 : le bloc membre devient une ligne (les cartes VIBE, GROOVE, VIP sont sur /soutenir/ ; « Suivre » est au pied) */
.participe-membre { max-width: 68rem; margin: clamp(2rem, calc(5 * var(--vw)), 4rem) auto 0; }
.participe-membre .lien-pas { min-height: 44px; font-size: var(--t-corps); }
@media (min-width: 900px) {
  .ch-participe { padding-inline: 0; }
  .participe-billet { --souche: calc(calc(45 * var(--vw)) - 9rem); margin-left: 9rem; margin-right: var(--marge); max-width: none; }  /* la perforation tombe sur la couture */
  .participe-membre { max-width: none; margin-left: 9rem; margin-right: var(--marge); }
}
@media (min-width: 1280px) {
  .participe-billet { margin-right: 12rem; }
}

/* 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 .participe-souche .participe-v { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: end; }
  .participe-lieu { margin-top: 0; }
  /* 12.10.2026 : « Alors, on y va ? » seul, sur une ligne de 320 à 599 px */
  .participe-titre { font-size: clamp(1.75rem, 1.1rem + calc(2.4 * var(--vw)), 2.25rem); }
  .participe-titre .duo-q { font-variation-settings: 'wdth' 100, 'wght' 200; }
}

/* 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; }
  .participe-titre { font-size: 1.75rem; }
  .billet-titre--grand { font-size: 2.1rem; }
  .maison-mots { font-size: 2rem; }
  .nuit-vibes { font-size: 2.25rem !important; }
  .dj-nom { font-size: 1.6rem !important; }
  .venus-couple { --part: 50%; }
  .participe-date .billet-date { font-size: 3rem; }
}

/* =================================================================== TÉLÉPHONE ET TABLETTE (07.10.2026 ; resserré le 11.10.2026)
   Sous 900 px, la suite de l'accueil tient en quatre écrans environ : marges resserrées, couples et DJs plus petits,
   les DJs sur deux colonnes, le billet déborde un peu moins sur la nuit. Tout reste dans le HTML (et au bureau). */
@media (max-width: 899px) {
  /* Danse : les couples, resserrés */
  .ch-danse { padding-block: 2.5rem 2.25rem; }
  .venus-tete .sur-titre { margin-bottom: .6rem; }
  .venus-intro { margin-top: .8rem; }
  .venus-liste { gap: .95rem; margin-top: 1.6rem; }
  .venus-couple--grand { --taille: 2.05rem; }
  .venus-couple--moyen { --taille: 1.8rem; }
  .venus-couple--petit { --taille: 1.6rem; }
  .venus-couple .couple-meta { margin-top: .3rem; }
  .venus-suisse { margin-top: 1.6rem; }
  .venus-lien { margin-top: .75rem; }
  .venus-lien .lien-pas { min-height: 44px; }
  /* Amitié */
  .ch-maison { padding-block: 2.5rem 2.75rem; }
  .maison-tete .sur-titre { margin-bottom: .6rem; }
  /* Bachata : le titre sans l'écran vide autour ; les DJs sur deux colonnes */
  .ch-nuit, .ch-participe { --debord-billet: clamp(8.5rem, 18svh, 12rem); }
  .fusion-scene { min-height: 0; }
  .fusion-tete { padding: 2.25rem var(--marge) 1.75rem; gap: .8rem; }
  .nuit-contenu { padding-bottom: calc(2.5rem + var(--debord-billet)); }
  .nuit-vibes { font-size: clamp(2.5rem, 1.4rem + calc(5 * var(--vw)), 3.5rem); }
  .nuit-grille { gap: 1.5rem; }
  .nuit-djs { margin-top: 2rem; }
  .nuit-djs-titre { margin-bottom: .9rem; }
  .nuit-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
  .dj, .dj--2, .dj--4 { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .25rem; text-align: left; }
  .dj--1 .dj-nom, .dj--2 .dj-nom, .dj--3 .dj-nom, .dj--4 .dj-nom { font-size: clamp(1.75rem, 1rem + calc(3.4 * var(--vw)), 2.4rem); }
  /* Je participe */
  .ch-participe { padding-bottom: 2.5rem; }
  .participe-membre { margin-top: 1.75rem; }
}