/* composants.css — composants partagés de Villa Vida, à la charte graphique v1.0 (noir, or, blanc ; les notes
   seulement dans le logo). HTML exact à copier : STYLEGUIDE.md.
   Règles :
   - le style de BASE de chaque composant est sa frame finale (mouvement réduit, navigateur sans scroll-driven) ;
   - toute animation scroll-driven est écrite en forme longue, dans @supports (animation-timeline: view())
     ET @media (prefers-reduced-motion: no-preference) ; repli IntersectionObserver par main.js (html.sans-sd) ;
   - chaque lien, bouton et champ répond au survol, au focus clavier et à l'appui. */

/* =================================================================== 1. BANDEAU MAQUETTE */
.bandeau {
  position: relative; z-index: calc(var(--z-barre) + 1);
  min-height: var(--bandeau-h);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .9rem;
  padding: 2px var(--marge);
  background: var(--noir-2); color: var(--texte-2);
  border-bottom: 1px solid var(--ligne);
  font-size: var(--t-mini); font-weight: 600; line-height: 1.2; letter-spacing: .04em;
  text-align: center;
}
.bandeau p { margin: 0; }
.bandeau-reperer {
  display: inline-flex; align-items: center; gap: .4em; min-height: 24px;
  padding: 0 .5em; border: 0; border-radius: 3px;
  background: transparent; color: var(--texte);
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .04em;
  text-decoration: underline dotted 1px; text-decoration-color: var(--or); text-underline-offset: .25em;
  transition: background-color 200ms var(--elan), color 200ms var(--elan);
}
.bandeau-reperer:hover { background: var(--or); color: var(--noir); text-decoration: none; }
.bandeau-reperer:active { translate: 0 1px; }
.bandeau-reperer[aria-pressed="true"] { background: var(--or); color: var(--noir); text-decoration: none; }
.bandeau-n { display: inline-block; min-width: 2.2em; padding: .1em .45em; border-radius: 999px; background: var(--or); color: var(--noir); text-decoration: none; }
.bandeau-reperer[aria-pressed="true"] .bandeau-n { background: var(--noir); color: var(--texte); }
.bandeau-reperer { white-space: nowrap; }
@media (max-width: 480px) {
  .bandeau { flex-wrap: nowrap; gap: .5rem; font-size: .6875rem; letter-spacing: .02em; }
  .bandeau p { white-space: nowrap; }
  .bandeau-option, .bandeau-mot { display: none; }
}

/* =================================================================== 2. MARQUE « À CONFIRMER » */
mark.ac {
  display: inline-block;
  margin-inline: .2em; padding: .18em .5em .12em;
  border-radius: 3px;
  background: var(--or-clair); color: var(--noir);
  font-family: var(--f-texte); font-size: var(--t-mini); font-weight: 700; font-style: normal;
  font-variation-settings: normal;
  line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; vertical-align: .25em;
  white-space: nowrap;
}
.fond-papier mark.ac, .billet mark.ac, .cb-papier mark.ac { background: var(--noir); color: var(--texte); }
/* mode « repérer » (bouton du bandeau) : toutes les marques et propositions sautent aux yeux */
.reperer-ac mark.ac { outline: 3px dashed var(--or-clair); outline-offset: 3px; }
.reperer-ac [data-ac] { outline: 2px dashed currentColor; outline-offset: 6px; }
.reperer-ac [data-ac]::after {
  content: "proposition de l'agence · à confirmer";
  display: block; width: max-content; margin-top: .6em; padding: .2em .6em;
  background: var(--or-clair); color: var(--noir);
  font: 700 var(--t-mini)/1.2 var(--f-texte); letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: normal;
}

/* =================================================================== 3. BOUTONS ET LIENS-ACTIONS (charte §13)
   Principal : or plein, texte noir. Secondaire : contour or. Sur fond clair : noir plein. Anybody 800, largeur 70. */
.bouton {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.5em;
  border: 2px solid var(--or); border-radius: 999px;
  background: var(--or); color: var(--noir);
  font-family: var(--f-display); font-size: var(--t-petit); font-weight: 800; font-variation-settings: 'wdth' 70, 'wght' 800;
  line-height: 1.1; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  transition: translate 160ms var(--elan), background-color 200ms var(--elan), border-color 200ms var(--elan), color 200ms var(--elan);
}
.bouton:hover { text-decoration: none; background: var(--or-clair); border-color: var(--or-clair); }
.bouton:active { translate: 0 2px; }
.bouton .fleche { flex: none; width: 1.25em; transition: translate 300ms var(--prise); }
.bouton:hover .fleche, .bouton:focus-visible .fleche { translate: .3em 0; }
.bouton--papier { background: var(--noir); border-color: var(--noir); color: var(--blanc); }   /* sur fond clair : noir plein */
.bouton--papier:hover { background: var(--noir-3); border-color: var(--noir-3); }
.bouton--fil { background: transparent; color: var(--or); }                                  /* secondaire : contour or */
.bouton--fil:hover { background: transparent; border-color: var(--or-clair); color: var(--or-clair); }
.bouton[aria-disabled="true"] { opacity: .75; cursor: not-allowed; }

/* lien souligné qui « fait un pas » */
.lien-pas {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; text-decoration: underline 2px var(--or); text-underline-offset: .3em;
  transition: gap 300ms var(--prise);
}
.lien-pas:hover, .lien-pas:focus-visible { gap: .8em; }
.lien-pas:active { translate: 0 1px; }
.lien-pas .fleche { width: 1em; }

.fleche { display: inline-block; width: 1.2em; height: .6em; flex: none; overflow: visible; vertical-align: middle; }
.fleche-bas { display: inline-block; width: .7em; height: .95em; flex: none; overflow: visible; }

/* =================================================================== 4. BARRE + « JE PARTICIPE »
   Noir, filet or en bas (il se déroule avec la lecture). Le logo, seul, dans son disque blanc cerclé d'or, à 96 px
   (charte §05 : taille minimale du logo en disque, « la taille de l'en-tête du site ») ; jamais de nom écrit à côté. */
.barre {
  position: sticky; top: 0; z-index: var(--z-barre);
  height: var(--barre-h);
  display: flex; align-items: center; gap: .5rem;
  padding-inline: var(--marge);
  background: var(--noir);
  color: var(--texte);
  isolation: isolate;
}
.barre::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: var(--ligne);
}
/* le filet de la journée : il se déroule avec la lecture (scroll-driven, forme longue ; frame finale = déroulé) */
.barre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--or);
  transform-origin: 0 50%;
  pointer-events: none;
}
.barre-logo {
  display: block; flex: none;
  width: var(--disque-barre); height: var(--disque-barre);
  border-radius: 50%;
  text-decoration: none;
  transition: scale 200ms var(--elan);
}
.barre-logo:active { scale: .97; }
.barre-logo:focus-visible { outline-offset: 3px; border-radius: 50%; }

/* ------------------------------------------------------------------ le logo en disque (charte §03, §10)
   Disque blanc, filet or de 1/60 du diamètre ; le logo au centre, intact (ni pivoté, ni recoloré, ni effet).
   .disque-cadre fixe le diamètre (container-type : le filet se calcule sur lui) ; .vv-logo = calques animables (logo.js) */
.disque-cadre { container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 1; }
.disque picture { display: contents; }
.disque {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--blanc);
  border: max(1px, calc(100cqi / 60)) solid var(--or);
}
.disque .disque-logo, .disque > .vv-logo { position: absolute; inset: 5%; width: 90%; height: 90%; }
.disque-logo { display: block; clip-path: circle(53.7% at 50% 50%); }   /* le carré blanc du fichier, découpé au cercle intérieur (rayon 0,5 − 1/60 du disque, sur 90 %) */
.disque > .logo-hote { position: absolute; inset: 5%; }   /* hôte des calques animables (logo.js) ; le statique d'abord */
.logo-hote picture { display: contents; }
.disque .logo-hote .disque-logo { inset: 0; width: 100%; height: 100%; }
.vv-logo { container-type: inline-size; }
.vv-scene { position: absolute; inset: 0; contain: layout style; }   /* insérer ou animer les calques ne relance pas la mise en page de la page */
.vv-en-attente .vv-note { opacity: 0; }   /* fleurir : notes cachées le temps de créer leurs animations (< 100 ms) */
.vv-arbre, .vv-poussiere, .vv-note, .vv-lettre { position: absolute; display: block; max-width: none; background-repeat: no-repeat; }
.vv-poussiere { inset: 0; width: 100%; height: 100%; }
.vv-grappe { position: absolute; will-change: transform; }

/* « La journée ↓ » */
.barre-journee {
  position: absolute; left: var(--part-suit); top: 50%;
  translate: -50% -50%;
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px; padding: 0 .85em;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--texte);
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap;
  transition: background-color 220ms var(--elan), color 220ms var(--elan);
}
.barre-journee:hover, .barre-journee[aria-expanded="true"] { background: var(--noir-3); color: var(--or-clair); }
.barre-journee:active { scale: .97; }
.barre-journee .fleche-bas { width: .7em; height: .9em; transition: translate 300ms var(--prise); }
.barre-journee:hover .fleche-bas { translate: 0 .15em; }
/* l'heure de la journée qui tourne au fil du défilement (accueil) — décorative, aria-hidden */
.journee-heure {
  display: inline-block; height: 1.25em; overflow: clip;
  padding: 0 .45em; border-radius: 999px;
  background: var(--or); color: var(--noir);
  font-size: .8125rem; font-weight: 700; line-height: 1.25em; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.journee-heure > span { display: flex; flex-direction: column; translate: 0 calc(var(--pas-heure, 0) * -1.25em); transition: translate 420ms var(--prise); }
.journee-heure > span > span { display: block; height: 1.25em; text-align: center; white-space: nowrap; }

/* « Je participe » : toujours dans la barre, à droite, dès t = 0. Bouton principal : or plein, texte noir. */
.cta-participe {
  position: relative; isolation: isolate;
  margin-left: auto;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 44px; padding: .3rem 1rem;
  border-radius: 999px;
  background: var(--or); color: var(--noir);
  font-family: var(--f-display); font-size: .875rem; font-weight: 800; font-variation-settings: 'wdth' 70, 'wght' 800;
  line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  transition: translate 160ms var(--elan), background-color 200ms var(--elan);
}
.cta-participe:hover { text-decoration: none; background: var(--or-clair); }
.cta-participe:active { translate: 0 2px; }
/* la salle choisie, recopiée (main.js) — sur deux lignes au téléphone, en ligne au bureau */
.cta-salle { font-family: var(--f-texte); font-size: .6875rem; font-weight: 700; font-variation-settings: normal; letter-spacing: .02em; text-transform: none; }
.cta-salle:empty { display: none; }

/* téléphone : le bouton suit le logo pour laisser sa place à « Je participe » */
@media (max-width: 599px) {
  .barre-journee { position: static; translate: none; padding: 0 .45em; gap: .3em; font-size: .875rem; }
  .journee-heure { display: none; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .barre::after {
      animation-name: fil-journee; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes fil-journee { from { scale: 0 1; } }
/* l'heure suit les chapitres marqués data-heure="1…9" (timeline-scope) ; repli IntersectionObserver dans main.js */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    html:has(.journee-heure[data-pas]) { timeline-scope: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5, --heure-6, --heure-7, --heure-8, --heure-9; }
    [data-heure="1"] { view-timeline-name: --heure-1; }
    [data-heure="2"] { view-timeline-name: --heure-2; }
    [data-heure="3"] { view-timeline-name: --heure-3; }
    [data-heure="4"] { view-timeline-name: --heure-4; }
    [data-heure="5"] { view-timeline-name: --heure-5; }
    [data-heure="6"] { view-timeline-name: --heure-6; }
    [data-heure="7"] { view-timeline-name: --heure-7; }
    [data-heure="8"] { view-timeline-name: --heure-8; }
    [data-heure="9"] { view-timeline-name: --heure-9; }
    /* data-pas sur .journee-heure = nombre de chapitres datés de la page (2 à 9) */
    .journee-heure[data-pas] > span {
      transition: none;
      animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: forwards;
      animation-range: entry 75% entry 100%;
    }
    .journee-heure[data-pas="2"] > span { animation-name: heure-1, heure-2; animation-timeline: --heure-1, --heure-2; }
    .journee-heure[data-pas="3"] > span { animation-name: heure-1, heure-2, heure-3; animation-timeline: --heure-1, --heure-2, --heure-3; }
    .journee-heure[data-pas="4"] > span { animation-name: heure-1, heure-2, heure-3, heure-4; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4; }
    .journee-heure[data-pas="5"] > span { animation-name: heure-1, heure-2, heure-3, heure-4, heure-5; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5; }
    .journee-heure[data-pas="6"] > span { animation-name: heure-1, heure-2, heure-3, heure-4, heure-5, heure-6; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5, --heure-6; }
    .journee-heure[data-pas="7"] > span { animation-name: heure-1, heure-2, heure-3, heure-4, heure-5, heure-6, heure-7; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5, --heure-6, --heure-7; }
    .journee-heure[data-pas="8"] > span { animation-name: heure-1, heure-2, heure-3, heure-4, heure-5, heure-6, heure-7, heure-8; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5, --heure-6, --heure-7, --heure-8; }
    .journee-heure[data-pas="9"] > span { animation-name: heure-1, heure-2, heure-3, heure-4, heure-5, heure-6, heure-7, heure-8, heure-9; animation-timeline: --heure-1, --heure-2, --heure-3, --heure-4, --heure-5, --heure-6, --heure-7, --heure-8, --heure-9; }
  }
}
@keyframes heure-1 { from { translate: 0 0; } to { translate: 0 -1.25em; } }
@keyframes heure-2 { from { translate: 0 -1.25em; } to { translate: 0 -2.5em; } }
@keyframes heure-3 { from { translate: 0 -2.5em; } to { translate: 0 -3.75em; } }
@keyframes heure-4 { from { translate: 0 -3.75em; } to { translate: 0 -5em; } }
@keyframes heure-5 { from { translate: 0 -5em; } to { translate: 0 -6.25em; } }
@keyframes heure-6 { from { translate: 0 -6.25em; } to { translate: 0 -7.5em; } }
@keyframes heure-7 { from { translate: 0 -7.5em; } to { translate: 0 -8.75em; } }
@keyframes heure-8 { from { translate: 0 -8.75em; } to { translate: 0 -10em; } }
@keyframes heure-9 { from { translate: 0 -10em; } to { translate: 0 -11.25em; } }

@media (min-width: 900px) {
  .barre { gap: 1.5rem; }
  .barre-journee { font-size: 1rem; padding: 0 1.1em; }
  .journee-heure { font-size: .875rem; }
  .cta-participe { flex-direction: row; gap: .45em; min-height: 48px; padding: 0 1.6rem; font-size: 1rem; }
  .cta-salle { font-family: inherit; font-size: inherit; font-weight: inherit; font-variation-settings: inherit; letter-spacing: inherit; text-transform: inherit; }
  .cta-salle:not(:empty)::before { content: "· "; }
}
/* zoom 400–500 % ou écran très bas : la barre (disque de 96 px) ne colle plus, elle mangerait l'écran */
@media (max-width: 21.9rem), (max-height: 30rem) {
  .barre { position: relative; }
}

/* =================================================================== 5. LA JOURNÉE : la page se fend sur la couture, les pas apparaissent entre les moitiés */
.journee {
  position: fixed; inset: 0; z-index: var(--z-journee);
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  overflow: auto; overscroll-behavior: contain;
  background: var(--fond-couture);
  color: var(--texte);
  clip-path: inset(0 0 0 0);
  transition: clip-path calc(var(--temps) * 1.2) var(--elan), display calc(var(--temps) * 1.2) allow-discrete, overlay calc(var(--temps) * 1.2) allow-discrete;
}
.journee::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: var(--grain-taille) var(--grain-taille); opacity: var(--grain-opacite);
}
.journee::backdrop { background: transparent; }
@supports not selector(:popover-open) {
  .journee { display: none; }
  .journee.est-ouvert { display: block; }
}
.journee:not(:popover-open) { clip-path: inset(0 calc(100% - var(--part-suit)) 0 var(--part-suit)); }
@starting-style {
  .journee:popover-open { clip-path: inset(0 calc(100% - var(--part-suit)) 0 var(--part-suit)); }
}
.journee-cadre {
  position: relative;
  min-height: 100%;
  display: grid; align-content: center; gap: clamp(1.5rem, 4vh, 3rem);
  padding: calc(var(--barre-h) + 1rem) 0 3rem;
}
.journee-titre {
  display: grid; grid-template-columns: var(--part-suit) 1fr;
  font-family: var(--f-display); font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem); line-height: .9;
}
.journee-titre .duo-q { grid-column: 1 / -1; justify-self: center; font-weight: 200; font-variation-settings: var(--delie); }
.journee-titre .duo-r { grid-column: 2; padding-left: .25em; font-weight: 900; font-variation-settings: var(--plein); }
.journee-pas { display: grid; gap: .1rem; counter-reset: pas; }
.journee-pas li { --i: 0; }
.journee-pas a {
  position: relative;
  display: grid; grid-template-columns: var(--part-suit) 1fr; align-items: baseline;
  min-height: 48px; padding-block: .3rem;
  color: inherit; text-decoration: none;
}
.journee-pas .pas-g, .journee-pas .pas-d {
  font-family: var(--f-display); font-size: clamp(1.75rem, 1rem + 3.4vw, 4.25rem); line-height: 1;
  transition: translate 420ms var(--prise), opacity 300ms var(--elan);
}
.journee-pas .pas-g {
  justify-self: end; padding-right: clamp(.8rem, 2.5vw, 2rem);
  font-weight: 900; font-variation-settings: var(--plein); font-variant-numeric: tabular-nums;
}
.journee-pas .pas-d {
  padding-left: clamp(.8rem, 2.5vw, 2rem);
  font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300;
}
/* le petit y qui se pose sur la couture quand on choisit un pas */
.journee-pas a::after {
  content: "y";
  position: absolute; left: var(--part-suit); top: 50%;
  width: 1.6em; height: 1.6em; margin: -.8em 0 0 -.8em;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--or); color: var(--noir);
  font: 900 1rem/1 var(--f-display); font-variation-settings: var(--noeud);
  scale: 0; transition: scale 300ms var(--prise);
}
.journee-pas a:hover::after, .journee-pas a:focus-visible::after { scale: 1; }
.journee-pas a:hover .pas-g, .journee-pas a:focus-visible .pas-g { translate: -.35em 0; }
.journee-pas a:hover .pas-d, .journee-pas a:focus-visible .pas-d { translate: .35em 0; }
.journee-pas a:active { translate: 0 2px; }
.journee-pas a:focus-visible { outline-offset: -3px; }
.journee-pas a[aria-current="page"] .pas-d { font-weight: 700; font-variation-settings: 'wdth' 125, 'wght' 700; }
/* entrée des pas : celui qui guide (à droite) d'abord, celui qui suit un temps plus tard */
.journee .pas-d { transition-delay: calc(140ms + var(--i) * 45ms); }
.journee .pas-g { transition-delay: calc(140ms + var(--temps) * .5 + var(--i) * 45ms); }
.journee:not(:popover-open) .pas-d { translate: 1.5em 0; opacity: 0; }
.journee:not(:popover-open) .pas-g { translate: -1.5em 0; opacity: 0; }
@starting-style {
  .journee:popover-open .pas-d { translate: 1.5em 0; opacity: 0; }
  .journee:popover-open .pas-g { translate: -1.5em 0; opacity: 0; }
}
.journee-fermer {
  position: absolute; top: calc((var(--barre-h) - 44px) / 2); left: var(--part-suit); translate: -50% 0;
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1em;
  border: 0; border-radius: 999px; background: var(--or); color: var(--noir);
  font-size: .9375rem; font-weight: 700;
  transition: scale 200ms var(--elan);
}
.journee-fermer:hover { scale: 1.04; }
.journee-fermer:active { scale: .97; }
.journee-fermer .fleche-bas { width: .7em; height: .9em; rotate: 180deg; }
.journee-pied {
  display: grid; grid-template-columns: var(--part-suit) 1fr;
  font-size: var(--t-petit);
}
.journee-pied > :first-child { justify-self: end; padding-right: clamp(.8rem, 2.5vw, 2rem); text-align: right; }
.journee-pied > :last-child { padding-left: clamp(.8rem, 2.5vw, 2rem); }
.journee-pied a { font-weight: 700; }

/* =================================================================== 6. DUO-TITRE : la question en délié, la réponse en plein */
.duo-titre {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: .9;
  letter-spacing: 0;
}
.duo-titre .duo-q, .duo-titre .duo-r { display: block; }
.duo-q { font-weight: 200; font-variation-settings: var(--delie); }
.duo-r { font-weight: 900; font-variation-settings: var(--plein); color: var(--or); }   /* le plein en or (charte §09, §12 : « Winter ») */
:is(.billet, .fond-papier, .cb-papier) .duo-r { color: var(--or-profond); }
.duo-titre .duo-r { margin-top: .06em; }
/* l'axe en mouvement : ≤ 20 glyphes par titre (repeint sur le thread principal). Frame finale = resserré / ouvert. */
.duo-titre .axe-q { font-variation-settings: var(--delie-serre); }
.duo-titre .axe-r { font-variation-settings: var(--plein-ouvert); }
/* révélation masquée (data-revele) : chaque ligne monte derrière son masque */
.duo-titre[data-revele] .duo-q, .duo-titre[data-revele] .duo-r { overflow: clip; padding-block: .06em .12em; margin-block: -.06em -.12em; }
.duo-titre[data-revele] .duo-r { margin-top: 0; }
.duo-titre[data-revele] .ligne { display: block; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .duo-titre .axe-q {
      animation-name: axe-resserre; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 40% cover 55%;
    }
    .duo-titre .axe-r {
      animation-name: axe-ouvre; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 50% cover 60%;
    }
    .duo-titre[data-revele] .ligne {
      animation-name: revele; animation-duration: 1ms; animation-timing-function: var(--elan); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    .duo-titre[data-revele] .duo-r .ligne { animation-range: entry 25% entry 100%; }
  }
}
@keyframes axe-resserre { from { font-variation-settings: var(--delie); } }
@keyframes axe-ouvre    { from { font-variation-settings: var(--plein); } }
@keyframes revele       { from { translate: 0 105%; } }
/* repli sans scroll-driven (main.js pose html.sans-sd et .vu au passage) */
.sans-sd .duo-titre[data-revele] .ligne { transition: translate 700ms var(--elan); }
.sans-sd .duo-titre[data-revele] .duo-r .ligne { transition-delay: var(--temps); }
.sans-sd .duo-titre[data-revele]:not(.vu) .ligne { translate: 0 105%; }
.sans-sd .duo-titre .axe-q, .sans-sd .duo-titre .axe-r { transition: font-variation-settings 900ms var(--elan) 200ms; }
.sans-sd .duo-titre:not(.vu, [data-axe-fige]) .axe-q { font-variation-settings: var(--delie); }
.sans-sd .duo-titre:not(.vu, [data-axe-fige]) .axe-r { font-variation-settings: var(--plein); }
/* sans reflux (main.js) : si le wdth animé fait changer les lignes d'un titre (le texte qui suit sauterait d'une ligne au
   défilement : layout shift), main.js réduit l'amplitude de l'axe jusqu'à ce que les lignes tiennent (data-axe-amplitude,
   en %) ; sous 20 %, l'axe reste sur sa frame finale (data-axe-fige). La révélation masquée, elle, continue. */
[data-axe-fige] :is(.axe-q, .axe-r) { animation-name: none !important; transition: none !important; }

/* sur-titre (eyebrow) : petites capitales espacées, une hiérarchie réelle (édition, salle, heure) */
.sur-titre {
  display: block;
  font-family: var(--f-texte); font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  color: var(--or);
}
:is(.billet, .fond-papier, .cb-papier) .sur-titre { color: var(--or-profond); }

/* =================================================================== 7. COLONNES NOIR-2 | NOIR, SÉPARÉES PAR LE FILET OR */
.colonnes {
  display: grid;
  grid-template-columns: var(--part-suit) var(--part-guide);
  background: var(--fond-couture);
}
.colonnes > * { min-width: 0; padding-block: var(--pas); }
.colonnes > :first-child { padding-left: var(--marge); padding-right: clamp(.75rem, 2.4vw, 2.75rem); }
.colonnes > :last-child  { padding-right: var(--marge); padding-left: clamp(.75rem, 2.4vw, 2.75rem); }
.colonnes--inverse { grid-template-columns: var(--part-guide) var(--part-suit); background: var(--fond-inverse); }
.colonnes--touche { background: var(--fond-touche); }
.colonnes--touche > :first-child { padding-right: clamp(.6rem, 1.6vw, 1.75rem); }
.colonnes--touche > :last-child { padding-left: clamp(.6rem, 1.6vw, 1.75rem); }
/* le contenu côté gauche s'appuie sur la couture */
.colonnes .vers-couture { text-align: right; justify-self: end; }
@media (max-width: 21.9rem) {
  .colonnes, .colonnes--inverse { grid-template-columns: 1fr; }
  .colonnes > :first-child, .colonnes > :last-child { padding-inline: var(--marge); }
  .colonnes .vers-couture { text-align: left; justify-self: start; }
}

/* =================================================================== 8. COUPLE COUPÉ « X y Y » (affiche, cartes) */
.couple-coupe {
  --part: var(--part-suit);
  --taille: var(--t-h3);
  --serre: .14em;
  position: relative;
  display: grid; grid-template-columns: var(--part) 1fr; align-items: baseline;
  color: inherit; text-decoration: none;
  font-family: var(--f-display); font-size: var(--taille); line-height: .92;
}
.couple-coupe .couple-x, .couple-coupe .couple-z {
  font-weight: 900; font-variation-settings: var(--plein); text-transform: uppercase; letter-spacing: .01em;
  transition: translate 520ms var(--prise);
}
.couple-coupe .couple-x { justify-self: end; padding-right: .62em; translate: calc(-1 * var(--serre)) 0; }
.couple-coupe .couple-z { justify-self: start; padding-left: .62em; translate: var(--serre) 0; }
.liste-couples { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); }
/* le nœud : le y (ou le « & » quand c'est ainsi publié) posé sur la couture */
.couple-coupe .couple-y {
  position: absolute; z-index: 1; left: var(--part); top: 0;
  width: 1.55em; height: 1.55em; margin-left: -.775em; margin-top: .02em;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--or); color: var(--noir);
  font-weight: 900; font-variation-settings: var(--noeud); font-size: .62em; line-height: 1;
  text-transform: none;
  transition: scale 300ms var(--prise), rotate 520ms var(--prise);
}
.couple-coupe .couple-meta {
  grid-column: 1 / -1; display: grid; grid-template-columns: var(--part) 1fr; margin-top: .55rem;
  font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 600; line-height: 1.3;
  text-transform: none; letter-spacing: 0;
}
.couple-coupe .couple-meta > :first-child { justify-self: end; padding-right: .9rem; text-align: right; }
.couple-coupe .couple-meta > :last-child { padding-left: .9rem; }
/* se recolle au survol, au focus, au toucher */
a.couple-coupe:hover .couple-x, a.couple-coupe:focus-visible .couple-x, .couple-coupe:active .couple-x { translate: .1em 0; }
a.couple-coupe:hover .couple-z, a.couple-coupe:focus-visible .couple-z, .couple-coupe:active .couple-z { translate: -.1em 0; }
a.couple-coupe:hover .couple-y, a.couple-coupe:focus-visible .couple-y { scale: 1.12; rotate: -10deg; }
a.couple-coupe:focus-visible { outline-offset: 8px; }
.couple-coupe--inverse { --part: var(--part-guide); }
.couple-coupe--grand { --taille: clamp(2.6rem, 1.2rem + 6.6vw, 8rem); }
.couple-coupe--moyen { --taille: clamp(2rem, 1rem + 4.2vw, 5.25rem); }
.couple-coupe--petit { --taille: clamp(1.6rem, 1rem + 2.4vw, 3.25rem); }
/* variante carte : deux demi-cartes noir-2 | noir qui épousent les prénoms */
.couple-coupe--carte .couple-x, .couple-coupe--carte .couple-z { padding-block: .22em .16em; }
.couple-coupe--carte .couple-x { background: var(--suit); padding-left: .45em; margin-right: 2px; }
.couple-coupe--carte .couple-z { background: var(--guide); padding-right: .45em; margin-left: 2px; }
.couple-coupe--carte .couple-y { top: .1em; }
.couple-coupe--carte .couple-meta { margin-top: .35rem; }

/* =================================================================== 9. PHOTO RÉELLE, EN COULEUR (charte §11)
   Les photos ne sont plus coupées ni teintées : la photo couleur seule (.photo-duo-couleur), au repos.
   Si un texte se pose un jour sur une photo : voile noir dégradé (--voile-photo) sous le texte, jamais de couleur.
   Les noms de classes sont gardés (data-recolle n'a plus d'effet). */
.photo-duo { --coupe: 50%; position: relative; }
.photo-duo-cadre {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: clip;
}
.photo-duo-cadre > picture, .photo-duo-cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-duo-cadre img { width: 100%; height: 100%; object-fit: cover; }
.photo-duo-g, .photo-duo-d { display: none; }
.photo-duo figcaption, .legende {
  margin-top: .75rem;
  font-size: var(--t-petit); line-height: 1.4;
  color: var(--texte-2);
}
.voile-photo { position: relative; isolation: isolate; }
.voile-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--voile-photo); }

/* =================================================================== 10. BILLET + SOUCHE : un document blanc (charte §10 : « Blanc (documents) »)
   Texte noir ; l'or y passe en or profond (5,9:1), jamais l'or Villa (2,5:1). */
.billet {
  --souche: 38%;       /* largeur de la souche (à gauche de la perforation) */
  --encoche: 12px;
  position: relative;
  display: grid; grid-template-columns: var(--souche) 1fr;
  color: var(--noir);
}
.billet-souche, .billet-talon {
  position: relative;
  background: var(--blanc);
  padding: clamp(1rem, .6rem + 1.6vw, 2rem);
}
.billet-souche {
  border-radius: var(--rayon) 0 0 var(--rayon);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) bottom / 100% 51% no-repeat;
}
.billet-talon {
  border-radius: 0 var(--rayon) var(--rayon) 0;
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) bottom / 100% 51% no-repeat;
}
/* la perforation, en pointillé */
.billet-talon::before {
  content: ""; position: absolute; left: -1px; top: calc(var(--encoche) + 6px); bottom: calc(var(--encoche) + 6px); width: 2px;
  background: repeating-linear-gradient(to bottom, var(--encre) 0 6px, transparent 6px 12px);
}
.billet-jour { display: block; font-weight: 700; font-size: var(--t-petit); letter-spacing: .04em; }
.billet-date {
  display: block;
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 50, 'wght' 900;
  font-size: clamp(2.75rem, 1.6rem + 5vw, 7rem); line-height: .84; letter-spacing: -.01em;
}
.billet-an { display: block; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 62, 'wght' 900; font-size: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); line-height: 1; margin-top: .15em; }
.billet-titre { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 58, 'wght' 900; font-size: var(--t-titre); line-height: 1; }
.billet-lieu { margin-top: .4em; font-weight: 600; font-size: var(--t-petit); line-height: 1.35; }
.billet-info { margin-top: .3em; font-size: var(--t-petit); color: var(--encre-douce); }
.billet .bouton { width: 100%; margin-top: 1rem; }
/* téléphone : la souche passe au-dessus du talon, la perforation devient horizontale */
@media (max-width: 599px) {
  .billet--adaptatif { grid-template-columns: 1fr; }
  .billet--adaptatif .billet-souche {
    border-radius: var(--rayon) var(--rayon) 0 0;
    -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 100%, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) right / 51% 100% no-repeat;
  }
  .billet--adaptatif .billet-talon {
    border-radius: 0 0 var(--rayon) var(--rayon);
    -webkit-mask: radial-gradient(circle at 0 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) left / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 0, transparent var(--encoche), #000 calc(var(--encoche) + .5px)) right / 51% 100% no-repeat;
  }
  .billet--adaptatif .billet-talon::before {
    left: calc(var(--encoche) + 6px); right: calc(var(--encoche) + 6px); top: -1px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--encre) 0 6px, transparent 6px 12px);
  }
  .billet--adaptatif .billet-souche { transform-origin: 0 100%; }
}
/* la souche se détache : prise franche (déclenchée par .billet--prise ou au défilement, voir pages) */
.billet-souche { transition: translate 520ms var(--prise), rotate 520ms var(--prise); transform-origin: 100% 0; }
.billet--prise .billet-souche { translate: -10px 8px; rotate: -3deg; }

/* =================================================================== 11. CARTE MEMBRE « Toi | + 1 invité·e » */
.membre {
  --part: 58%;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--noir-2); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  overflow: clip;
}
.membre-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem .9rem;
}
.membre-nom { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: .9; text-transform: uppercase; }
.membre-prix { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 70, 'wght' 900; font-size: var(--t-titre); line-height: 1; white-space: nowrap; }
.membre-prix span { font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 500; font-variation-settings: normal; }
.membre-duo { display: grid; grid-template-columns: var(--part) 1fr; }
.membre-toi, .membre-invite { padding: 1rem 1.25rem 1.25rem; font-size: var(--t-petit); line-height: 1.4; }
.membre-toi { background: var(--suit); }
.membre-invite { background: var(--guide); border-left: var(--fil) solid var(--or); }
.membre-qui { margin-bottom: .5rem; font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300; font-size: var(--t-titre); line-height: 1; }
.membre-toi li + li { margin-top: .35rem; }
.membre-toi li { padding-left: 1em; text-indent: -1em; }
.membre-toi li::before { content: "·"; display: inline-block; width: 1em; text-indent: 0; font-weight: 900; }
.membre .bouton { margin: 0; width: 100%; }
@media (max-width: 21.9rem) { .membre-duo { grid-template-columns: 1fr; } .membre-invite { border-left: 0; border-top: var(--fil) solid var(--or); } }

/* =================================================================== 12. CHAMP QUESTION | RÉPONSE, avec le y de validation */
.champ {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--part-suit) 1fr; align-items: end;
  background: var(--fond-couture);
  transition: gap 300ms var(--prise);
}
/* le grain d'impression (10 %) continue sous les champs et sous l'envoi : la matière ne s'arrête pas au formulaire */
.champ::before, .formulaire-envoi::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);
}
.champ + .champ { margin-top: 2px; }
.champ-q {
  align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1.1rem clamp(.8rem, 2vw, 1.75rem) .9rem var(--marge);
  font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.02; text-align: right;
  transition: translate 300ms var(--prise);
}
.champ-r { position: relative; padding: 1.1rem var(--marge) .9rem clamp(.8rem, 2vw, 1.75rem); transition: translate 300ms var(--prise); }
.champ-saisie {
  width: 100%; min-height: 48px; padding: .35em 0 .3em;
  border: 0; border-bottom: 2px solid var(--or); border-radius: 0;
  background: transparent; color: var(--texte);
  font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 70, 'wght' 900;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: border-color 200ms var(--elan), background-color 200ms var(--elan);
}
.champ-saisie:hover { background: var(--voile-papier); }
.champ-saisie:focus-visible { outline-offset: 2px; background: var(--voile-papier); }
textarea.champ-saisie { min-height: 7rem; resize: vertical; font-family: var(--f-texte); font-weight: 500; font-variation-settings: normal; font-size: var(--t-corps); line-height: 1.45; }
select.champ-saisie { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--or) 50%), linear-gradient(135deg, var(--or) 50%, transparent 50%); background-position: right .9em center, right .45em center; background-size: .45em .45em; background-repeat: no-repeat; padding-right: 1.6em; }
select.champ-saisie option { color: var(--texte); background: var(--noir-2); }
.champ-aide { display: block; margin-top: .45rem; font-size: var(--t-petit); }
/* le y de validation, sur le filet or */
.champ-y {
  position: absolute; left: var(--part-suit); bottom: 1.3rem;
  width: 2rem; height: 2rem; margin-left: -1rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--or); color: var(--noir);
  font: 900 1.15rem/1 var(--f-display); font-variation-settings: var(--noeud);
  scale: 0; transition: scale 360ms var(--prise);
  pointer-events: none;
}
.champ:has(.champ-saisie:user-valid) .champ-y, .champ--ok .champ-y { scale: 1; }
/* il manque une moitié : les deux moitiés s'écartent de 8 px, le texte le dit */
.champ--manque .champ-q, .champ:has(.champ-saisie:user-invalid) .champ-q { translate: -4px 0; }
.champ--manque .champ-r, .champ:has(.champ-saisie:user-invalid) .champ-r { translate: 4px 0; }
.champ--manque, .champ:has(.champ-saisie:user-invalid) { background: var(--fond-touche); }
.champ-erreur {
  grid-column: 2; padding: 0 var(--marge) .9rem clamp(.8rem, 2vw, 1.75rem);
  font-size: var(--t-petit); font-weight: 700;
}
.champ-erreur:empty { display: none; }
.champ-erreur::before { content: "↑ "; }
@media (max-width: 21.9rem) {
  .champ { grid-template-columns: 1fr; }
  .champ-q { justify-content: flex-start; text-align: left; padding-left: var(--marge); }
  .champ-r, .champ-erreur { padding-left: var(--marge); grid-column: 1; }
  .champ-y { left: auto; right: var(--marge); bottom: auto; top: 1rem; }
}
/* annonce d'envoi par e-mail : dit AVANT l'envoi */
.formulaire-envoi { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--part-suit) 1fr; align-items: center; padding-block: 1.5rem; background: var(--fond-couture); }
.formulaire-envoi > :first-child { justify-self: end; padding-right: clamp(.8rem, 2vw, 1.75rem); text-align: right; font-size: var(--t-petit); padding-left: var(--marge); }
.formulaire-envoi > :last-child { padding-left: clamp(.8rem, 2vw, 1.75rem); padding-right: var(--marge); }
/* zoom 400–500 % : une colonne comme les champs (sinon la phrase, alignée sur la couture, sort à gauche de l'écran) */
@media (max-width: 21.9rem) {
  .formulaire-envoi { grid-template-columns: 1fr; row-gap: .75rem; }
  .formulaire-envoi > :first-child { justify-self: start; text-align: left; padding-right: var(--marge); }
  .formulaire-envoi > :last-child { padding-left: var(--marge); }
}

/* =================================================================== 13. PAS D'AVANT | PAS D'APRÈS
   La bande blanche de la page (charte §07 : noir 60 %, blanc 20 %, or 15 %) : texte noir, l'or en or profond,
   le filet or au milieu. */
.pas-nav {
  display: grid; grid-template-columns: var(--part-suit) var(--part-guide);
  background: linear-gradient(90deg, transparent calc(var(--part-suit) - var(--fil) / 2), var(--or) 0 calc(var(--part-suit) + var(--fil) / 2), transparent 0), var(--blanc);
  color: var(--noir);
  position: relative; isolation: isolate;
}
.pas-nav .pas-sens { color: var(--or-profond); }
.pas-nav a:focus-visible { outline-color: var(--noir); }
.pas-nav a {
  display: grid; align-content: center; gap: .35rem;
  min-height: clamp(8rem, 6rem + 8vw, 14rem);
  padding: 1.5rem clamp(.9rem, 2.5vw, 3rem);
  color: inherit; text-decoration: none;
  transition: background-color 300ms var(--elan);
}
.pas-nav .pas-avant { justify-items: end; text-align: right; padding-left: var(--marge); }
.pas-nav .pas-apres { padding-right: var(--marge); }
.pas-sens { display: inline-flex; align-items: center; gap: .5em; font-size: var(--t-petit); font-weight: 700; }
.pas-sens .fleche { width: 1.4em; transition: translate 360ms var(--prise); }
.pas-titre {
  font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein);
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4.5rem); line-height: .92;
  transition: translate 420ms var(--prise);
}
.pas-avant:hover .pas-titre, .pas-avant:focus-visible .pas-titre { translate: -.25em 0; }
.pas-apres:hover .pas-titre, .pas-apres:focus-visible .pas-titre { translate: .25em 0; }
.pas-avant:hover .fleche, .pas-avant:focus-visible .fleche { translate: -.3em 0; }
.pas-apres:hover .fleche, .pas-apres:focus-visible .fleche { translate: .3em 0; }
.pas-nav a:hover { background: color-mix(in srgb, var(--or) 14%, var(--blanc)); }
.pas-nav a:active { translate: 0 2px; }
.pas-nav a:focus-visible { outline-offset: -6px; }
@media (max-width: 21.9rem) { .pas-nav { grid-template-columns: 1fr; } .pas-nav .pas-avant { justify-items: start; text-align: left; } }

/* =================================================================== 14. PIED « MERCI POUR LA DANSE » */
.pied {
  position: relative; isolation: isolate;
  background: var(--noir); color: var(--texte);
  border-top: var(--fil) solid var(--or);
  padding: var(--pas) 0 0;
  overflow: clip;
}
/* la photo de tout le monde (photo réelle, en couleur), voilée de noir en dégradé sous le texte (charte §10, §11) */
.pied-photo { position: absolute; left: 0; right: 0; top: 0; height: min(78%, 46rem); z-index: -3; }
.pied-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pied::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(78%, 46rem); z-index: -2; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--noir) 74%, transparent) 0%, color-mix(in srgb, var(--noir) 84%, transparent) 55%, var(--noir) 100%);
}
.pied::before { /* le filet or continue jusque dans le pied */
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--part-suit); width: var(--fil); margin-left: calc(var(--fil) / -2);
  background: var(--or); z-index: -1;
}
.pied-merci {
  display: grid; grid-template-columns: var(--part-suit) 1fr;
  font-family: var(--f-display); font-size: var(--t-h2); line-height: .9;
}
/* la question d'abord (à gauche), la réponse un temps plus bas (à droite) : l'ordre de lecture tient ligne à ligne */
.pied-merci .duo-q { grid-row: 1; justify-self: end; padding-right: .22em; text-align: right; }
.pied-merci .duo-r { grid-row: 2; grid-column: 2; padding-left: .2em; }
@media (max-width: 599px) { .pied-merci .duo-q { font-variation-settings: 'wdth' 100, 'wght' 200; } }
/* le disque du logo descend se poser sur le filet (scroll-driven, une fois ; frame finale = posé). Une translation
   seulement : la charte interdit de pivoter, déformer ou recolorer le logo. Repli : main.js observe .pied-logo. */
.pied-logo {
  position: relative; z-index: 1;
  width: clamp(7rem, 5rem + 9vw, 13rem);
  margin: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 4rem) calc(var(--part-suit) - clamp(7rem, 5rem + 9vw, 13rem) / 2);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pied-logo {
      animation-name: pied-pose; animation-duration: 1ms; animation-timing-function: var(--prise); animation-fill-mode: both;
      animation-timeline: view(); animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes pied-pose { from { translate: 0 -30%; } }
.sans-sd .pied-logo { transition: translate 900ms var(--prise); }
.sans-sd .pied-logo:not(.vu) { translate: 0 -30%; }
.pied-duo { display: grid; grid-template-columns: var(--part-suit) 1fr; row-gap: .4rem; }
.pied-duo > :nth-child(odd) { justify-self: safe end; padding-right: clamp(.8rem, 2.4vw, 2.5rem); text-align: right; }   /* safe : si un mot dépasse la colonne, il ne sort pas de l'écran à gauche */
.pied-duo > :nth-child(even) { padding-left: clamp(.8rem, 2.4vw, 2.5rem); }
.pied-slogan { font-family: var(--f-display); font-size: clamp(1.25rem, .95rem + 1.4vw, 2.25rem); line-height: 1.05; }
.pied-slogan .q { font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300; }
.pied-slogan .r { font-weight: 900; font-variation-settings: var(--plein); }
.pied-slogan--en { margin-top: .35rem; font-size: clamp(1.05rem, .9rem + .8vw, 1.6rem); }
/* téléphone : « Partageons / notre passion, tient dans la colonne de 45 % avec sa marge (à 375 px, le guillemet sortait
   de 7 px à gauche ; wdth 100 : la ligne la plus longue commence à 22 px du bord) */
@media (max-width: 599px) { .pied-slogan .q { font-variation-settings: 'wdth' 100, 'wght' 300; } }
.pied-contact { margin-top: clamp(2.5rem, 6vw, 5rem); font-size: var(--t-petit); }
.pied-contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline 1px; text-underline-offset: .3em; transition: text-underline-offset 240ms var(--prise); }
.pied-contact a:hover, .pied-contact a:focus-visible { text-underline-offset: .5em; text-decoration-thickness: 2px; }
.pied-contact a:active { translate: 0 1px; }
.pied-contact .sur-titre { margin-bottom: .35rem; opacity: 1; }
.pied-bas {   /* la signature or de la page : or plein, texte noir (charte §07, §13) */
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--part-suit) 1fr;
  margin-top: clamp(2.5rem, 6vw, 5rem); padding-block: 1.1rem 1.4rem;
  background: var(--or); color: var(--noir);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: .03em; line-height: 1.5;
}
.pied-bas a { text-decoration-color: var(--noir); }
.pied-bas a:hover { text-decoration-color: var(--noir); }
.pied-bas a:focus-visible { outline-color: var(--noir); }
.pied-bas > :first-child { justify-self: end; padding-right: clamp(.8rem, 2.4vw, 2.5rem); text-align: right; padding-left: var(--marge); }
.pied-bas > :last-child { padding-left: clamp(.8rem, 2.4vw, 2.5rem); padding-right: var(--marge); }
.pied-bas a { display: inline-block; min-height: 24px; padding-block: 2px; }
@media (max-width: 21.9rem) {
  .pied-merci, .pied-duo, .pied-bas { grid-template-columns: 1fr; }
  .pied-merci .duo-q, .pied-duo > :nth-child(odd), .pied-bas > :first-child { justify-self: start; text-align: left; padding-left: var(--marge); }
  .pied-duo > :nth-child(even), .pied-merci .duo-r { padding-left: var(--marge); }
}

/* =================================================================== 15. BLOC VIVANT « Le mot du comité » (daté, signé, livré VIDE) */
.bloc-vivant {
  display: grid; grid-template-columns: var(--part-suit) 1fr;
  background: var(--fond-couture);
}
.bloc-vivant > header { justify-self: end; padding: var(--pas) clamp(.8rem, 2.4vw, 2.5rem) var(--pas) var(--marge); text-align: right; }
.bloc-vivant-titre { font-family: var(--f-display); font-size: clamp(2.25rem, 1.4rem + 3.6vw, 5.5rem); line-height: .9; }
.bloc-vivant-titre .duo-q, .bloc-vivant-titre .duo-r { display: block; }
/* délié 100 seulement à 48 px et plus (≥ 45 rem de large) ; en dessous, un délié 300 */
.bloc-vivant-titre .duo-q { font-weight: 300; font-variation-settings: 'wdth' 125, 'wght' 300; }
@media (min-width: 45rem) { .bloc-vivant-titre .duo-q { font-weight: 200; font-variation-settings: 'wdth' 125, 'wght' 200; } }
.bloc-vivant-date { margin-top: 1rem; font-size: var(--t-petit); font-weight: 700; }
.bloc-vivant-corps { padding: var(--pas) var(--marge) var(--pas) clamp(.8rem, 2.4vw, 2.5rem); max-width: calc(var(--mesure-texte) + 6rem); }
.bloc-vivant-vide {
  display: grid; place-items: center; min-height: 10rem; padding: 1.5rem;
  border: 2px dashed var(--or); border-radius: var(--rayon);
  font-weight: 700; text-align: center;
}
.bloc-vivant-signature { margin-top: 1rem; font-weight: 700; }

/* =================================================================== 16. TEXTES : citation verbatim, fait, liste à pas */
.citation {
  font-family: var(--f-display); font-weight: 300; font-variation-settings: 'wdth' 110, 'wght' 300;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem); line-height: 1.12;
  quotes: "« " " »";
}
.citation p::before { content: open-quote; }
.citation p::after { content: close-quote; }
.citation-source { display: block; margin-top: .9rem; font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 600; font-variation-settings: normal; }
.fait { font-family: var(--f-display); font-weight: 900; font-variation-settings: var(--plein); font-size: var(--t-h3); line-height: .9; color: var(--or); }   /* dates et chiffres en plein : or */
.texte { max-width: var(--mesure-texte); }
/* mot qui ne se coupe pas (« e-mail », « 21 h 45 ») ; dans un libellé de champ, envelopper TOUT le libellé dans un seul
   <span> (.champ-q est un flex : un nœud texte suivi d'un span y perd son espace) */
.insecable { white-space: nowrap; }
.texte > * + * { margin-top: 1em; }
.petit { font-size: var(--t-petit); }

/* =================================================================== 17. CHAPITRE (section de page) */
.chapitre { position: relative; overflow-x: clip; }
.chapitre-tete { padding: var(--pas) var(--marge) 0; }

/* =================================================================== 17 bis. LA NUIT : un noir plat
   (l'ancienne lumière de piste WebGL mélangeait deux couleurs : retirée. Aucune animation continue.) */
.nuit-fond { display: none; }

/* =================================================================== 18. TRÈS PETIT ÉCRAN / ZOOM 400–500 % (≤ 21,9 rem)
   Rien ne doit être coupé : le délié se serre (wdth), la réponse reste compressée, le bandeau passe à la ligne. */
@media (max-width: 21.9rem) {
  .bandeau { flex-wrap: wrap; }
  .bandeau p { white-space: normal; }
  .duo-q, .duo-titre .axe-q { font-variation-settings: 'wdth' 72, 'wght' 200; }
  .duo-titre .axe-r { font-variation-settings: var(--plein); }
  .duo-titre, .pas-titre, .couple-coupe { overflow-wrap: anywhere; }
  .journee-pas .pas-g, .journee-pas .pas-d { font-size: 1.5rem; }
  .journee-heure { display: none; }
  .barre-journee { position: static; translate: none; padding: 0 .45em; font-size: .8125rem; }
  .barre { gap: .35rem; }
  .cta-participe { padding: .3rem .6rem; font-size: .8125rem; }
}