/* Site public Los Pagayos : jetons et composants partagés (direction « billet de fête »). */

:root {
  /* Couleurs */
  --fond: #E9EBEF;
  --papier: #FFFFFF;
  --marine: #1B2A4A;
  --marine-fonce: #0F1A30;
  --marine-2: #52607C;
  --rouge: #B42A22;
  --rouge-fonce: #962018;
  --moutarde: #D6A534;
  --filet: #1B2A4A26;
  --filet-clair: rgba(255, 255, 255, .22);
  --erreur: #B42A22;
  --succes: #2F7A4B;

  /* Typographie */
  --police: "Archivo", system-ui, sans-serif;
  --titre: "Big Shoulders Display", "Arial Narrow", sans-serif;

  /* Espacements */
  --gouttiere: clamp(16px, 4vw, 48px);
  --section: clamp(48px, 7vw, 96px);
  --largeur: 1320px;
  /* Marge des bords de page : sous l'en-tête, au-dessus du pied. */
  --bord: clamp(20px, 4vw, 48px);

  /* Billet */
  --encoche: 14px;
  --ombre-billet: 0 30px 60px -30px rgba(27, 42, 74, .35);
  --rayon: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Champs date et heure : Safari iOS leur impose une largeur minimale et centre la valeur, ce qui les fait déborder. */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
.evitement { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--papier); color: var(--marine); padding: 12px 16px; font-weight: 700; border-radius: var(--rayon); }
.evitement:focus { top: 12px; }
main:focus, [id="contenu"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--marine); font: 400 1.0625rem/1.55 var(--police); -webkit-font-smoothing: antialiased; }
::selection { background: var(--moutarde); color: var(--marine); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre); font-weight: 800; line-height: .9; text-transform: uppercase; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
.page { padding-inline: var(--gouttiere); }
.large { max-width: var(--largeur); margin-inline: auto; }
.section { padding-block: var(--section); }
.section.colle { padding-top: 0; }
.chiffres { font-variant-numeric: tabular-nums; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--rouge); }

/* ── Billet : papier, encoches, pointillés ─────────────────────────── */
.billet {
  background: var(--papier); position: relative;
  -webkit-mask: radial-gradient(circle var(--encoche) at var(--x, 70%) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--encoche) at var(--x, 70%) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--encoche) at var(--x, 70%) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--encoche) at var(--x, 70%) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.billet.sans-encoche { --x: -100px; }
.decoupe { border-left: 2px dashed var(--filet); }

/* ── Boutons ───────────────────────────────────────────────────────── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; background: var(--rouge); color: #fff; text-decoration: none; font: 700 .92rem/1.1 var(--police); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; border: 0; border-radius: var(--rayon); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.bouton:hover { background: var(--rouge-fonce); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .6; cursor: not-allowed; }
.bouton.marine { background: var(--marine); }
.bouton.marine:hover { background: var(--marine-fonce); }
.bouton.clair { background: transparent; color: var(--marine); box-shadow: inset 0 0 0 2px var(--marine); }
.bouton.clair:hover { background: var(--marine); color: #fff; }
.bouton.blanc { background: #fff; color: var(--marine); }
.bouton.blanc:hover { background: var(--moutarde); }

/* ── Tampon ────────────────────────────────────────────────────────── */
.tampon { display: inline-block; border: 2px solid currentColor; color: var(--rouge); padding: 4px 10px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; line-height: 1.2; transform: rotate(-6deg); border-radius: 3px; }
.tampon.bleu { color: var(--marine-2); }

/* ── En-tête ───────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 50; background: var(--marine); color: #fff; }
.entete-grille { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.6rem/1 var(--titre); text-transform: uppercase; }
.marque img { height: 42px; width: 42px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; padding: 10px 14px; font-weight: 600; font-size: .93rem; border-radius: var(--rayon); }
.menu a:hover { background: rgba(255, 255, 255, .1); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--moutarde); border-radius: 0; }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.lien-membre { display: grid; place-items: center; width: 44px; height: 44px; color: rgba(255, 255, 255, .6); border-radius: 50%; transition: color .2s, background .2s; }
.lien-membre svg { width: 20px; height: 20px; }
.lien-membre:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.menu-mobile { display: none; }

/* ── Titre de page (pages intérieures) ─────────────────────────────── */
.tete-page { padding-block: clamp(20px, 4vw, 48px); }
.tete-page .billet { --x: 72%; display: grid; grid-template-columns: 72% 28%; min-height: 380px; box-shadow: var(--ombre-billet); }
.tete-page-photo { position: relative; overflow: hidden; background: var(--marine); color: #fff; }
.tete-page-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tete-page-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 20, 38, .92) 10%, rgba(12, 20, 38, .55) 55%, rgba(12, 20, 38, .1)); }
.tete-page-texte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 3.5vw, 44px); }
.tete-page h1 { font-size: clamp(3.6rem, 9vw, 8rem); font-weight: 900; line-height: .82; }
.tete-page-texte p { margin-top: 14px; max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, .9); }

/* Talon */
.talon { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(20px, 2.6vw, 36px); }
.talon .numero { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marine-2); display: flex; justify-content: space-between; gap: 12px; }
.talon .slogan { font: 900 clamp(2.4rem, 3.6vw, 3.6rem)/.88 var(--titre); text-transform: uppercase; }
.talon .slogan span { color: var(--rouge); white-space: nowrap; }
.talon dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .92rem; border-top: 1px solid var(--filet); padding-top: 14px; }
.talon dt { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; color: var(--marine-2); padding-top: 3px; }
.talon dd { margin: 0; }
.talon .actions { display: grid; gap: 8px; }
.talon .bouton { font-stretch: 100%; padding: 0 12px; white-space: nowrap; }

/* ── Titres de section ─────────────────────────────────────────────── */
.tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.tete h2 { font-size: clamp(3rem, 6.5vw, 6rem); }
.tete p { color: var(--marine-2); max-width: 60ch; margin-top: 10px; }

/* ── Petits billets (sorties) ──────────────────────────────────────── */
.rangee { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.petit-billet { --x: 100%; --encoche: 12px; display: grid; grid-template-rows: auto auto 1fr; text-decoration: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
a.petit-billet:hover { transform: translateY(-4px) rotate(-.4deg); }
.petit-billet .photo { aspect-ratio: 16 / 9; background: var(--marine) center / cover no-repeat; }
.petit-billet .photo img { width: 100%; height: 100%; object-fit: cover; }
.petit-billet .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 18px 20px 14px; border-bottom: 2px dashed var(--filet); }
.petit-billet .jour { font: 900 4.2rem/.8 var(--titre); white-space: nowrap; }
.petit-billet .jour.plage { font-size: 3.2rem; }
.petit-billet .mois { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; text-align: right; }
.petit-billet .bas { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.petit-billet h3 { font-size: 1.9rem; }
.petit-billet p { color: var(--marine-2); font-size: .93rem; }
.petit-billet .tampon { align-self: flex-start; margin-top: 10px; }
.petit-billet.passe .jour { color: var(--marine-2); }
.defilement { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px); gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; scrollbar-color: var(--marine-2) transparent; }
.defilement > * { scroll-snap-align: start; }
.vide { color: var(--marine-2); padding: 24px 0; }
.squelette { min-height: 260px; background: linear-gradient(90deg, #fff 25%, #F4F5F8 50%, #fff 75%); background-size: 200% 100%; animation: miroiter 1.4s infinite; }
@keyframes miroiter { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }

/* ── Coupons (grille à pointillés) ─────────────────────────────────── */
.coupons { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--papier); }
.coupon { padding: 26px 26px 30px; border-right: 2px dashed var(--filet); border-bottom: 2px dashed var(--filet); }
.coupon:nth-child(3n) { border-right: 0; }
.coupon:nth-last-child(-n+3) { border-bottom: 0; }
.coupon h3 { font-size: 2.3rem; margin-bottom: 8px; }
.coupon p { color: var(--marine-2); }

/* ── Fiche (tableau de faits) ──────────────────────────────────────── */
.fiche { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--marine); margin-top: 28px; }
.fiche div { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.fiche div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--filet); }
.fiche div:nth-child(even) { padding-left: 14px; }
.fiche span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--marine-2); }
.fiche strong { font-size: 1.15rem; }

/* ── Bloc marine (mécénat, appels) ─────────────────────────────────── */
.bloc-marine { background: var(--marine); color: #fff; padding: clamp(24px, 4vw, 52px); }
.bloc-marine h2 { font-size: clamp(2.8rem, 5vw, 4.6rem); margin-bottom: 16px; }
.bloc-marine p { color: rgba(255, 255, 255, .82); max-width: 54ch; }
.coches { list-style: none; padding: 0; margin: 24px 0 28px; }
.coches li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--filet-clair); }
.coches svg { flex: 0 0 18px; height: 18px; margin-top: 3px; stroke: var(--moutarde); fill: none; stroke-width: 2.4; }

/* ── Pied de page ──────────────────────────────────────────────────── */
/* Même écart au-dessus du pied que sous l'en-tête, sur toutes les pages : la
   dernière section n'ajoute pas son propre bas, sinon les deux s'empilaient
   (192 px sur l'accueil, 96 ailleurs). */
.pied { background: var(--marine); color: #fff; padding-block: 56px 40px; margin-top: var(--bord); }
main > .section:last-of-type, #actu > :is(.section, .tete-page):last-child { padding-bottom: 0; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.pied .nom { font: 900 clamp(3.4rem, 8vw, 7rem)/.82 var(--titre); text-transform: uppercase; }
.pied .nom + p { margin-top: 12px; color: var(--moutarde); font-weight: 600; }
.pied h2 { font: 700 .8rem/1 var(--police); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin-bottom: 14px; }
.pied p, .pied a { color: rgba(255, 255, 255, .86); text-decoration: none; display: block; margin-bottom: 6px; }
.pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pied [data-adresse-bloc] a { display: inline; margin: 0; }
.reseaux { display: flex; gap: 8px; }
.reseaux a { width: 44px; height: 44px; border-radius: var(--rayon); background: rgba(255, 255, 255, .08); display: grid; place-items: center; margin: 0; }
.reseaux a:hover { background: var(--rouge); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }
.pied .mentions {
  margin-top: 40px; margin-bottom: 0; padding-top: 18px;
  border-top: 1px dashed var(--filet-clair);
  font-size: .82rem; color: rgba(255, 255, 255, .6);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
}
.pied .mentions a { display: inline; margin: 0; }
.mentions .sep { opacity: .4; }

/* ── Adaptation ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .menu, .entete-actions { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary { list-style: none; cursor: pointer; font-weight: 700; padding: 9px 16px; border-radius: var(--rayon); background: rgba(255, 255, 255, .12); }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--marine); padding: 6px var(--gouttiere) 22px; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .5); }
  .menu-mobile nav a { display: block; padding: 13px 0; border-bottom: 1px dashed var(--filet-clair); text-decoration: none; font-weight: 600; }
  .menu-mobile nav .bouton { display: flex; margin-top: 16px; width: 100%; border: 0; }
  .tete-page .billet { grid-template-columns: 1fr; --x: -100px; min-height: 0; }
  .tete-page-photo { min-height: 46vh; }
  /* La découpe passe à l'horizontale : les encoches doivent suivre. Le masque
     du billet ne sait creuser qu'en haut et en bas, donc on pose ici deux
     disques de la couleur du fond, à cheval sur les bords gauche et droit,
     centrés sur le pointillé. Le masque du billet les rogne à l'aplomb du
     papier : il ne reste que les deux demi-lunes mordues, comme sur un vrai
     ticket détaché. */
  .talon.decoupe { border-left: 0; border-top: 2px dashed var(--filet); position: relative; }
  .talon.decoupe::before,
  .talon.decoupe::after {
    content: ""; position: absolute; z-index: 1;
    width: calc(var(--encoche) * 2); height: calc(var(--encoche) * 2);
    top: calc(var(--encoche) * -1); border-radius: 50%;
    background: var(--fond); pointer-events: none;
  }
  .talon.decoupe::before { left: calc(var(--encoche) * -1); }
  .talon.decoupe::after { right: calc(var(--encoche) * -1); }
  .pied-grille { grid-template-columns: 1fr; }
  .coupons { grid-template-columns: 1fr 1fr; }
  .coupon:nth-child(n) { border-right: 2px dashed var(--filet); border-bottom: 2px dashed var(--filet); }
  .coupon:nth-child(2n) { border-right: 0; }
  .coupon:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .rangee { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); scroll-padding-inline: var(--gouttiere); }
  .rangee > * { scroll-snap-align: start; }
  .rangee > .vide { grid-column: auto; }
  .coupons { grid-template-columns: 1fr; }
  .coupon:nth-child(n) { border-right: 0; border-bottom: 2px dashed var(--filet); }
  .coupon:last-child { border-bottom: 0; }
  .fiche { grid-template-columns: 1fr; }
  .fiche div:nth-child(n) { padding-inline: 0; border-right: 0; }
}

/* ── Partenaires : bandes qui défilent (accueil, Mécénat) ──────────── */
.partenaires { margin-top: 16px; padding-inline: 0; overflow: hidden; }
.partenaires h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0 clamp(24px, 4vw, 52px) 24px; }
.defile { overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile::-webkit-scrollbar { display: none; }
.defile + .defile { margin-top: 12px; }
.piste { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; }
.piste li { flex: 0 0 auto; display: grid; place-items: center; width: 190px; height: 110px; padding: 14px; }
.piste img { max-width: 100%; max-height: 78px; width: auto; height: auto; object-fit: contain; }
/* Logo absent ou illisible : le nom du mécène prend sa place, il ne doit jamais disparaître. */
.nom-mecene { font: 700 .95rem/1.2 var(--titre, inherit); text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.defile.anime { overflow: hidden; }
.defile.anime .piste { animation: defile-logos 45s linear infinite; }
.defile.anime.inverse .piste { animation-direction: reverse; }
.defile.anime:hover .piste, .defile.anime:focus-within .piste { animation-play-state: paused; }
@keyframes defile-logos { to { transform: translateX(calc(-50% - 6px)); } }
@media (max-width: 560px) {
  .piste li { width: 150px; height: 92px; padding: 10px; }
  .piste img { max-height: 62px; }
  .defile.anime .piste { animation-duration: 35s; }
}

/* ── Encadré réseaux sociaux ───────────────────────────────────────── */
.reseaux-encart { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reseau { padding: clamp(20px, 3vw, 32px); color: #fff; }
.reseau.facebook { background: #1877F2; }
.reseau.instagram { background: linear-gradient(135deg, #833AB4 0%, #C13584 35%, #E1306C 60%, #F56040 80%, #FCAF45 100%); }
.reseau-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.reseau-tete svg { width: 22px; height: 22px; fill: currentColor; }
.reseau-tete .rond { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.reseau-tete h3 { font-size: 1.9rem; }
.reseau-tete p { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.reseau-tete .bouton { margin-left: auto; background: #fff; color: var(--marine); min-height: 44px; }
.reseau-tete .bouton:hover { background: var(--marine); color: #fff; }
.vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vignettes a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, .2); }
.vignettes img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.vignettes a:hover img { transform: scale(1.06); }
.vignettes .video { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.reseau .vide { color: rgba(255, 255, 255, .9); padding: 0; }
@media (max-width: 760px) { .reseaux-encart { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .reseau-tete { flex-wrap: wrap; } .reseau-tete .bouton { margin-left: 0; width: 100%; } }

/* ── Mouvement « billet de fête » ──────────────────────────────────────
   Style propre à la banda : rien ne glisse sagement, tout se pose avec un
   petit rebond, comme un billet qu'on lance sur le comptoir.
   - Apparitions (installerApparitions, commun.js) : jouées une fois, quand
     le bloc entre à l'écran. Les billets sont distribués en tournant, les
     tampons s'abattent ensuite, les titres sautent en place, les coupons
     se détachent, les coches se tracent.
   - Parallaxe (`animation-timeline`) : les photos glissent dans leur
     billet. Navigateur sans `animation-timeline` : elles restent fixes.
   - Menu : la barre moutarde s'ouvre depuis le centre au survol ; sur
     téléphone, les liens se déplient comme des talons de billet.
   Mouvement réduit : rien ne bouge, rien n'est masqué. */
@media (prefers-reduced-motion: no-preference) {
  /* Ouverture : le grand billet et les billets de tête de page se posent. */
  .grand-billet, .tete-page > .billet:not(.squelette) {
    animation: poser-billet 900ms cubic-bezier(.34, 1.4, .64, 1) both;
  }
  .grand-billet h1, .tete-page h1 { animation: sauter 800ms 180ms cubic-bezier(.34, 1.56, .64, 1) both; }
  .grand-billet .talon > *, .tete-page .talon > * {
    animation: monter-billet 700ms cubic-bezier(.34, 1.3, .64, 1) both;
  }
  .talon > :nth-child(2) { animation-delay: 300ms; }
  .talon > :nth-child(3) { animation-delay: 380ms; }
  .talon > :nth-child(4) { animation-delay: 460ms; }
  .talon > :nth-child(1) { animation-delay: 220ms; }
  .talon .slogan span { display: inline-block; animation: coup-de-tampon 600ms 700ms cubic-bezier(.34, 1.56, .64, 1) both; }

  /* Apparitions au défilement. */
  .a-apparaitre { opacity: 0; }
  .a-apparaitre.apparu { animation: monter-billet 800ms var(--retard, 0ms) cubic-bezier(.34, 1.3, .64, 1) both; }
  .petit-billet.a-apparaitre.apparu { animation-name: distribuer; animation-duration: 850ms; }
  .petit-billet:nth-child(even) { --tour: 5deg; }
  .tete h2.a-apparaitre.apparu, .bloc-marine h2.a-apparaitre.apparu { animation-name: sauter; }
  .coupon.a-apparaitre.apparu { animation-name: detacher; }
  .apparu .tampon { animation: coup-de-tampon 520ms calc(var(--retard, 0ms) + 520ms) cubic-bezier(.34, 1.56, .64, 1) both; }
  /* Coches (accueil) et contreparties (Mécénat) : chaque ligne glisse et sa
     coche se trace. Joué au chargement — la liste du Mécénat est à l'écran
     d'emblée sur ordinateur, le script ne la masque donc pas. Plus bas dans
     la page, le bloc est masqué (`.a-apparaitre`) : l'animation est coupée
     puis relancée quand il apparaît. */
  :is(.coches, .contreparties) li {
    animation: entrer-coche 600ms calc(var(--retard, 0ms) + 250ms + var(--n, 0) * 130ms) cubic-bezier(.34, 1.3, .64, 1) both;
  }
  :is(.coches, .contreparties) path {
    stroke-dasharray: 30;
    animation: tracer 520ms calc(var(--retard, 0ms) + 400ms + var(--n, 0) * 130ms) ease-out both;
  }
  :is(.coches, .contreparties) li:nth-child(2) { --n: 1; }
  :is(.coches, .contreparties) li:nth-child(3) { --n: 2; }
  :is(.coches, .contreparties) li:nth-child(4) { --n: 3; }
  :is(.coches, .contreparties) li:nth-child(5) { --n: 4; }
  .a-apparaitre :is(.coches, .contreparties) :is(li, path) { animation-name: none; }
  .apparu :is(.coches, .contreparties) li { animation-name: entrer-coche; }
  .apparu :is(.coches, .contreparties) path { animation-name: tracer; }

  /* Barre moutarde du menu : elle s'ouvre depuis le centre au survol. */
  .menu a { position: relative; }
  .menu a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
    background: var(--moutarde); transform: scaleX(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  }
  .menu a:hover::after { transform: scaleX(1); }
  .menu a[aria-current="page"]::after { display: none; }

  /* Menu mobile : chaque lien se déplie comme un talon qu'on détache, puis
     le bouton tombe comme un tampon. Le sélecteur ne vaut qu'ouvert : les
     animations se rejouent à chaque ouverture. */
  .menu-mobile[open] nav { animation: derouler 380ms cubic-bezier(.2, .8, .2, 1) both; }
  .menu-mobile[open] nav a:not(.bouton) {
    transform-origin: top center;
    animation: deplier 560ms calc(80ms + var(--i, 0) * 70ms) cubic-bezier(.34, 1.4, .64, 1) both;
  }
  .menu-mobile[open] nav a:nth-child(2) { --i: 1; }
  .menu-mobile[open] nav a:nth-child(3) { --i: 2; }
  .menu-mobile[open] nav a:nth-child(4) { --i: 3; }
  .menu-mobile[open] nav a:nth-child(5) { --i: 4; }
  .menu-mobile[open] nav .bouton { animation: coup-de-tampon 520ms 480ms cubic-bezier(.34, 1.56, .64, 1) both; }

  @supports (animation-timeline: view()) {
    /* Les photos glissent dans leur billet, plus lentement que la page. La
       frise est celle du CADRE : en `overflow: hidden`, il est lui-même une
       zone de défilement, et `view()` sur la photo ne bougerait jamais. */
    :is(.diapos, .tete-page-photo, .banda-photo) { view-timeline: --cadre-photo; }
    :is(.diapo img, .tete-page-photo img, .banda-photo img) {
      scale: 1.18;
      animation: glisser-photo linear both;
      animation-timeline: --cadre-photo;
    }
  }
}
@keyframes poser-billet { from { opacity: 0; translate: 0 -28px; rotate: -1.2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes monter-billet { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes distribuer { from { opacity: 0; translate: 0 70px; rotate: var(--tour, -5deg); } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes sauter { from { opacity: 0; translate: 0 .45em; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes detacher { from { opacity: 0; scale: .9; rotate: -2deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes coup-de-tampon { from { opacity: 0; scale: 2.2; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes entrer-coche { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tracer { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes derouler { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20px 0); } }
@keyframes deplier { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes glisser-photo { from { translate: 0 -7%; } to { translate: 0 7%; } }