/* Caña & Musica : bar à tapas et soirées au Boulou.
   DA : une nuit d'été catalane sous les néons. Fond violet nuit, enseigne rose néon, jaune soleil des
   affiches, rouge feu pour l'action. Titres condensés comme les affiches du bar (Big Shoulders Display),
   écriture néon (Yellowtail). Toutes les couleurs passent par les variables du :root (thème « Nuit tropicale »). */

@font-face { font-family: "Big Shoulders Display"; src: url("polices/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Gochi Hand"; src: url("polices/gochi-hand.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("polices/yellowtail.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --nuit: #160a24; --nuit-2: #241038; --nuit-3: #34184f;
  --neon: #ff4fd8; --soleil: #ffd23f; --feu: #ff3d3d; --violet: #9b5cff;
  --creme: #fff6ea; --doux: #dccbe8; --sombre: #12060c; --ombre: #000;
  --lilas: #f2c4e2;   /* « CAÑA » de l'enseigne : mauve clair qui tire vers le rose-rouge (se détache du fond violet) */
  --titre: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif-condensed, sans-serif;
  --main: "Yellowtail", cursive;
  --craie: "Gochi Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  /* Ardoises de la carte : couleurs des craies du bar, fixes (comme un produit) */
  --ardoise: #1d2121; --bois: #5a3d26; --craie-blanche: #f3f0e8;
  --craie-jaune: #ffd75e; --craie-rouge: #ff6b5e; --craie-orange: #ffa95e; --craie-verte: #9be37a;
  --craie-bleue: #7cc8ff; --craie-violette: #c49bff; --craie-rose: #ff9ccf;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Panneaux : verre fumé éclairé par le haut */
  --verre: linear-gradient(180deg, color-mix(in srgb, var(--nuit-3) 82%, transparent), color-mix(in srgb, var(--nuit-2) 78%, transparent) 40%, color-mix(in srgb, var(--nuit) 82%, transparent));
  --marge: clamp(1rem, 4vw, 2.5rem);
  --large: 72rem;
  --rayon: 18px;
  --filet: color-mix(in srgb, var(--soleil) 45%, transparent);   /* traits dorés du programme */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6;
  color: var(--creme);
  background:
    radial-gradient(60rem 40rem at 100% 30%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 70%),
    radial-gradient(50rem 40rem at 0% 70%, color-mix(in srgb, var(--neon) 10%, transparent), transparent 70%),
    var(--nuit);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titre); line-height: .95; font-weight: 800; }
p { margin: 0; }
.nowrap { white-space: nowrap; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.symboles { display: none; }
.evitement { position: absolute; left: -999px; top: 0; z-index: 50; padding: .8rem 1.2rem; background: var(--soleil); color: var(--sombre); font-weight: 700; }
.evitement:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }

.pied a { display: inline-block; padding: .8rem 0; margin: -.8rem 0; color: var(--creme); text-underline-offset: 2px; }

/* ---------- En-tête collant ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--marge);
  background: color-mix(in srgb, var(--nuit) 92%, transparent);
}
.entete::after, .pied::before {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--neon), var(--soleil) 50%, var(--neon));
  box-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon), 0 0 32px color-mix(in srgb, var(--neon) 60%, transparent);
  animation: allume 8s linear infinite;
}
.entete::after { bottom: -2px; }
.pied::before { top: 0; z-index: 1; animation-delay: -3s; }
.marque { min-width: 0; display: flex; align-items: center; min-height: 44px; }
.marque-logo { display: block; height: clamp(1.7rem, 7vw, 2.4rem); width: auto; max-width: 100%;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--soleil) 45%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--soleil) 30%, transparent)); }   /* logo du bar (doré, fond transparent) : léger halo pour le détacher du fond */
.bouton-appel { flex: none; }
/* Réseaux sociaux dans l'en-tête : trois logos */
.reseaux { display: flex; flex: none; gap: .8rem; margin-inline: auto; }   /* au milieu de l'espace entre le logo et le menu */
.reseaux a { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; color: var(--creme); }
.reseaux a:hover { color: var(--soleil); }
.reseaux svg { width: 1.8rem; height: 1.8rem; }
/* Petit téléphone : le bouton Appeler ne garde que le combiné (le grand bouton de l'accroche reste écrit) */
@media (max-width: 480px) {
  .entete { column-gap: .4rem; }
  .bouton-appel { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
  .bouton-appel svg { width: 1.4rem; min-width: 1.4rem; height: 1.4rem; max-width: none; }
  .bouton-appel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .reseaux { gap: .25rem; }
  .reseaux a { width: 2.3rem; height: 2.75rem; }
  .reseaux svg { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 360px) { .entete { gap: .4rem; } .marque-logo { height: 1.4rem; } .reseaux { gap: 0; } .reseaux a { width: 2.15rem; } .reseaux svg { width: 1.35rem; height: 1.35rem; } }
.nav { display: flex; gap: .2rem; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 .7rem; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.nav a:hover { color: var(--soleil); }
.nav a[aria-current="page"] { color: var(--soleil); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
[data-vue][hidden] { display: none; }
/* Changement de page en fondu (script.js, FONDU_MS) : seulement ce qui est sous les grands boutons ;
   l'enseigne, le ruban et les boutons ne bougent pas */
[data-vue], .infos, .pied { transition: opacity .22s ease; }
html.change-de-page [data-vue], html.change-de-page .infos, html.change-de-page .pied { opacity: 0; }
@media (prefers-reduced-motion: reduce) { [data-vue], .infos, .pied { transition: none; } }
/* Téléphone : le menu passe sur une seconde ligne de l'en-tête (les pages en ont besoin) */
@media (max-width: 860px) {
  html { scroll-padding-top: 7.5rem; }
  .entete { flex-wrap: wrap; row-gap: 0; padding-bottom: .1rem; }
  .reseaux { margin: 0 0 0 auto; }   /* téléphone : à droite, contre le bouton Appeler */
  .nav { order: 3; width: 100%; justify-content: space-between; margin: 0; }
  .nav a { padding: 0 .3rem; font-size: 1.05rem; min-width: 0; overflow: hidden; }   /* police de secours plus large : le lien rétrécit */
  .nav a[href="#infos"] { display: none; }
}

/* ---------- Boutons ---------- */
.bouton {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--soleil); color: var(--sombre);
  font-family: var(--titre); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--feu), 0 0 18px color-mix(in srgb, var(--feu) 45%, transparent);
  animation: respire 2.6s ease-in-out infinite;
}
/* Le halo rose qui respire : un calque à part dont on n'anime que l'opacité (composité, sans repeindre) */
.bouton::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--nuit), 0 0 0 4px var(--neon), 0 0 34px color-mix(in srgb, var(--neon) 70%, transparent);
  opacity: 0; animation: halo 2.6s ease-in-out infinite;
}
@keyframes respire { 50% { scale: 1.04; } }
@keyframes halo { 50% { opacity: 1; } }
.bouton:hover { animation: sautille .6s ease-in-out infinite alternate; }
@keyframes sautille { from { translate: 0 0; rotate: -2deg; } to { translate: 0 -4px; rotate: 2deg; } }
.bouton:focus-visible { outline: 3px solid var(--creme); outline-offset: 6px; }
.bouton svg { width: 1.3em; flex: none; }
.bouton-grand { padding: .8rem 1.6rem .8rem 1.3rem; font-size: 1.6rem; line-height: 1; }
.bouton-grand small { display: block; font-size: .95rem; letter-spacing: .08em; margin-bottom: .2rem; }
.bouton-grand strong { font-weight: 900; }
.lien-fleche { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--creme); text-decoration-color: var(--neon); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lien-fleche:hover { color: var(--soleil); }

/* ---------- Accroche : l'enseigne au néon ---------- */
.accroche {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; align-content: center; gap: 1.2rem;
  min-height: min(88svh, 52rem);
  padding: 3rem var(--marge) 4.5rem; text-align: center;
  max-width: none !important;
}
.faisceaux { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.faisceaux span {
  position: absolute; bottom: -10%; left: 50%; width: 30rem; height: 140%;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--neon) 30%, transparent), transparent 75%);
  clip-path: polygon(48% 100%, 52% 100%, 100% 0, 0 0);
  opacity: .35; filter: blur(6px);
  animation: balaye 9s ease-in-out infinite alternate;
}
.faisceaux span:nth-child(1) { margin-left: -15rem; transform: rotate(-28deg); }
.faisceaux span:nth-child(2) { margin-left: -15rem; transform: rotate(6deg); background: linear-gradient(to top, color-mix(in srgb, var(--soleil) 28%, transparent), transparent 70%); animation-duration: 11s; animation-delay: -4s; }
.faisceaux span:nth-child(3) { margin-left: -15rem; transform: rotate(30deg); background: linear-gradient(to top, color-mix(in srgb, var(--violet) 40%, transparent), transparent 75%); animation-duration: 13s; animation-delay: -7s; }
@keyframes balaye { from { rotate: -14deg; } to { rotate: 14deg; } }

/* Étincelles autour de l'enseigne : étoiles à 4 branches qui scintillent */
.etincelles { position: absolute; inset: -6% -14%; pointer-events: none; }
.etincelles i, .section-tete h2::after {
  position: absolute; width: 1.6rem; aspect-ratio: 1;
  background: var(--creme);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px var(--soleil));
  animation: scintille 2.4s ease-in-out infinite;
}
.etincelles i:nth-child(1) { top: 4%; left: 8%; }
.etincelles i:nth-child(2) { top: 18%; right: 4%; width: 2.2rem; animation-delay: -.8s; }
.etincelles i:nth-child(3) { top: 48%; left: 0; width: 1.1rem; animation-delay: -1.5s; }
.etincelles i:nth-child(4) { bottom: 6%; right: 10%; animation-delay: -.4s; }
.etincelles i:nth-child(5) { bottom: 22%; left: 14%; width: 1.3rem; animation-delay: -1.9s; background: var(--soleil); }
.etincelles i:nth-child(6) { top: -2%; right: 28%; width: 1rem; animation-delay: -1.1s; background: var(--neon); }
@keyframes scintille { 0%, 100% { transform: scale(.15) rotate(0deg); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.5) rotate(90deg); opacity: .6; } }

/* La jungle : palmiers fixes en fond sur les côtés, en contre-jour d'une lueur néon */
.jungle { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.jungle-cote {
  position: absolute; top: 0; bottom: 0; width: clamp(7rem, 24vw, 24rem);
  color: color-mix(in srgb, var(--sombre) 94%, var(--neon));
}
.jungle-g { left: 0; background: radial-gradient(ellipse 70% 45% at 0% 55%, color-mix(in srgb, var(--neon) 30%, transparent), transparent); }
.jungle-d { right: 0; transform: scaleX(-1); background: radial-gradient(ellipse 70% 45% at 0% 35%, color-mix(in srgb, var(--violet) 42%, transparent), transparent); }
.jungle svg { position: absolute; overflow: visible; }
.j-arbre { bottom: -3vh; left: -38%; height: 78vh; width: auto; aspect-ratio: 300 / 520; }
.jungle-d .j-arbre { height: 64vh; bottom: -6vh; left: -48%; }
.j-fronde { left: -12%; width: 125%; height: auto; aspect-ratio: 4 / 3; transform-origin: 0 43%; transform: rotate(var(--a)); animation: balance 7s ease-in-out infinite alternate; }
.j1 { top: -6vh; --a: 28deg; }
.j2 { top: 22vh; --a: -6deg; width: 105%; animation-delay: -2s; }
.j3 { top: 46vh; --a: 14deg; width: 90%; animation-delay: -4s; }
.j4 { top: 70vh; --a: -18deg; animation-delay: -1s; }
.jungle-d .j1 { top: 4vh; --a: 18deg; }
.jungle-d .j2 { top: 34vh; --a: -14deg; width: 118%; }
.jungle-d .j3 { top: 58vh; --a: 22deg; }
.jungle-d .j4 { top: 80vh; --a: -4deg; width: 100%; }
@keyframes balance { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@media (max-width: 700px) {
  .jungle-cote { width: 32vw; }
  .j-arbre { height: 52vh; left: -55%; }
  .jungle-d .j-arbre { display: none; }
}

.surtitre { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; letter-spacing: .22em; text-transform: uppercase; color: var(--soleil); }
.enseigne { position: relative; display: grid; justify-items: center; font-weight: 900; text-transform: uppercase; }
.enseigne-cana, .enseigne-musica {
  display: block; font-size: clamp(4.6rem, 22vw, 11rem); line-height: .82; letter-spacing: .01em;
  animation: allume 5s linear infinite;   /* couleur et lueur propres à chaque mot, plus bas */
}
@keyframes allume { 0%, 40%, 44%, 47%, 100% { opacity: 1; } 42%, 45.5% { opacity: .55; } }
.enseigne-cana { padding-top: .14em; color: var(--lilas); text-shadow: 0 0 5px var(--lilas), 0 0 16px color-mix(in srgb, var(--neon) 85%, transparent), 0 0 36px color-mix(in srgb, var(--neon) 75%, transparent), 0 0 70px color-mix(in srgb, var(--neon) 45%, transparent); }   /* le tilde du Ñ dépasse au-dessus de la ligne : il ne touche plus « Le Boulou » */
.enseigne-musica { animation-duration: 7s; animation-delay: -2s; color: var(--soleil); text-shadow: 0 0 6px var(--soleil), 0 0 22px var(--feu), 0 0 60px color-mix(in srgb, var(--feu) 70%, transparent); }
.enseigne-et {
  font-family: var(--main); font-weight: 400; text-transform: none; font-size: clamp(4.5rem, 18vw, 8rem); line-height: .5; margin: .12em 0 .02em;
  color: var(--neon); text-shadow: 0 0 10px var(--neon), 0 0 30px var(--neon);
  animation: gresille 6s steps(1) infinite;
}
@keyframes gresille { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .35; } }
.devise { font-family: var(--titre); font-weight: 600; font-size: clamp(1.15rem, 4.5vw, 1.6rem); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.devise span { color: var(--neon); }
.accroche-actions { display: grid; justify-items: center; gap: .8rem; margin-top: .8rem; }
.accroche-horaires { margin: 0; text-align: center; font-size: .95rem; color: var(--doux); }

/* ---------- Ruban qui défile ---------- */
.ruban {
  position: relative; z-index: 2; background: var(--feu); color: var(--sombre);
  transform: rotate(-1.5deg); margin: 0 -1rem 3rem; border-block: 3px solid var(--soleil);
  overflow-x: clip;   /* coupe le texte qui défile mais laisse dépasser l'ombre en hauteur */
}
/* Navigateurs sans overflow: clip (Safari < 16) : on coupe tout, tant pis pour l'ombre */
@supports not (overflow-x: clip) {
  .ruban { overflow: hidden; }
  .ruban::after { display: none; }
  body { overflow-x: hidden; }
}
/* Ombre portée : une bande sombre décalée sous le ruban, qui se dégrade vers le bas */
.ruban::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(100% + 3px); height: 4rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ombre) 65%, transparent), color-mix(in srgb, var(--ombre) 30%, transparent) 45%, transparent);
  pointer-events: none;
}
.ruban p { display: flex; width: max-content; padding: .55rem 0; animation: defile 38s linear infinite; }
.ruban:hover p { animation-play-state: paused; }
.ruban span { font-family: var(--titre); font-weight: 900; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ruban span::after { content: "✦"; margin: 0 1.2rem; color: var(--soleil); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Les pages en grands boutons (sous le ruban) ---------- */
.portes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
  max-width: var(--large); margin: -.6rem auto 0; padding: 0 var(--marge);
}
@media (min-width: 700px) { .portes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.portes a {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4.2rem; padding: .7rem .8rem;
  border-radius: var(--rayon); background: var(--verre); border: 2px solid color-mix(in srgb, var(--neon) 55%, transparent);
  text-decoration: none; font-family: var(--titre); font-weight: 800; font-size: clamp(1.3rem, 5.4vw, 1.6rem); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  transition: border-color .2s, transform .2s, color .2s;
}
.portes svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--soleil); }
.portes a:hover { border-color: var(--soleil); transform: translateY(-2px); }
.portes a[aria-current="page"] { color: var(--sombre); background: var(--soleil); border-color: var(--soleil); box-shadow: 0 0 18px color-mix(in srgb, var(--soleil) 55%, transparent); }
.portes a[aria-current="page"] svg { color: var(--sombre); }
.portes a:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .portes a { transition: none; } .portes a:hover { transform: none; } }

/* ---------- Sections ---------- */
main { overflow-x: clip; }   /* bords inclinés du ruban */
main > section { max-width: var(--large); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge) 0; }
.section-tete { display: flex; justify-content: center; align-items: baseline; gap: 1rem; margin-bottom: 1.8rem; text-align: center; }   /* tous les grands titres centrés */
.section-tete h2 {
  position: relative; font-size: clamp(2.8rem, 10vw, 5.2rem); text-transform: uppercase; color: var(--soleil);
  background: linear-gradient(100deg, var(--soleil) 42%, var(--creme) 50%, var(--soleil) 58%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--feu) 55%, transparent));
  animation: reflet 4.5s ease-in-out infinite paused;
}
.section-tete h2.a-l-ecran { animation-play-state: running; }   /* hors écran : rien ne se repeint */
@keyframes reflet { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.section-tete h2::after { content: ""; top: -1rem; right: -.6rem; animation-delay: -1.2s; }

/* Le néon d'un cadre pulse (opacité d'un halo, sans repeindre). Halo INTÉRIEUR : les cadres coupent ce qui
   dépasse, un halo extérieur serait invisible. */
.affiche-phare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--neon), inset 0 0 22px color-mix(in srgb, var(--neon) 45%, transparent);
  opacity: 0; animation: pulse-neon 3.2s ease-in-out infinite;
}
@keyframes pulse-neon { 50% { opacity: .9; } }

/* À l'affiche (accueil) : la semaine qui vient, même format que le programme */
.a-l-affiche .lien-fleche { display: flex; width: fit-content; margin: 1rem auto 0; }


/* Programme et « À l'affiche » : une ligne par date (la date à gauche, les infos à droite) */
.affiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
/* Deux colonnes en décalé (et non en rangées) : chaque date garde sa hauteur, une affiche n'étire pas sa voisine.
   Lecture de haut en bas, colonne de gauche puis de droite. */
@media (min-width: 720px) {
  .affiche { display: block; column-count: 2; column-gap: .9rem; }
  .affiche li { break-inside: avoid; margin-bottom: .9rem; }
}
.affiche li {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center;
  min-height: 6.5rem; border-radius: 14px; overflow: hidden;
  background: var(--verre); border: 1px solid var(--filet);
}
.affiche .date { display: grid; place-content: center; justify-items: center; align-self: stretch; padding: .5rem; border-right: 1px solid var(--filet); text-align: center; }
.affiche .date span { font-family: var(--titre); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; line-height: 1.1; color: var(--creme); }
.affiche .date span + strong + span { margin-top: .15rem; font-size: .85rem; color: var(--doux); }
.affiche .date strong { font-family: var(--titre); font-weight: 900; font-size: 3rem; line-height: .95; color: var(--soleil); white-space: nowrap; }
.affiche li > div { padding: .8rem 1.1rem; min-width: 0; }
.affiche h4 { margin: 0; font-family: var(--titre); line-height: .95; font-size: 1.75rem; text-transform: uppercase; font-weight: 800; }
.affiche li > div p { margin-top: .3rem; font-family: var(--titre); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; color: var(--soleil); }
.affiche li > div .heure { color: var(--creme); font-size: 1.15rem; }   /* heure de début, quand on la connaît */
.accroche-horaires a { display: inline-block; padding: .4rem 0; color: var(--creme); text-underline-offset: 3px; text-decoration-color: var(--neon); }
/* Une date avec son affiche (matchs) : l'affiche sous les infos, dans la case, bord à bord et entière */
.affiche li.avec-affiche { grid-template-columns: 5.6rem minmax(0, 1fr); align-items: start; }
.avec-affiche .date { grid-row: 1 / span 2; }
.affiche-vignette { display: block; grid-column: 2; overflow: hidden; border-top: 1px solid var(--filet); }
.affiche-vignette img { display: block; width: 100%; height: auto; transition: transform .4s; }
.affiche-vignette:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .affiche-vignette img { transition: none; } .affiche-vignette:hover img { transform: none; } }
.affiche-phare { position: relative; border-color: var(--neon) !important; box-shadow: 0 0 22px color-mix(in srgb, var(--neon) 30%, transparent); }
.affiche .passe { display: none; }
.programme-sous-titre { margin: 0 0 1.2rem; font-size: clamp(2rem, 7vw, 2.6rem); text-transform: uppercase; text-align: center; color: var(--creme); }
.programme-groupe + .programme-groupe { margin-top: 2.5rem; }
.programme-groupe[hidden] { display: none; }
.programme-fin { font-size: 1.15rem; }
.programme-fin a { color: var(--soleil); font-weight: 700; display: inline-block; padding: .7rem 0; margin: -.7rem 0; }
.programme-note { margin-top: 1.5rem; font-size: 1.15rem; }
.programme-note a { display: inline-block; padding: .7rem 0; margin: -.7rem 0; color: var(--soleil); font-weight: 700; }

/* Les DJ : line-up façon affiche de festival */
.line-up { list-style: none; margin: 0; padding: 2.4rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2.6rem; text-align: center; border-block: 2px solid var(--violet); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%); }
.line-up li { display: grid; gap: .3rem; min-width: 0; }
.line-up strong { font-family: var(--titre); font-weight: 900; text-transform: uppercase; line-height: .9; overflow-wrap: anywhere; }
.line-up span { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.taille-1 strong { font-size: clamp(3rem, 13vw, 6.5rem); color: var(--creme); text-shadow: 0 0 20px var(--neon); }
.taille-2 strong { font-size: clamp(2.6rem, 10vw, 5rem); color: var(--soleil); }
.taille-3 strong { font-size: clamp(2.1rem, 8vw, 3.6rem); color: var(--neon); }
@media (min-width: 760px) { .taille-2 { flex-basis: 100%; } }

/* À table */
.carte-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 52rem; margin-inline: auto; }
/* Onglets : une ardoise à la fois (sans JS, elles se suivent toutes) */
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 52rem; margin: 0 auto 1.4rem; }
.onglets[hidden] { display: none; }
.onglets button {
  min-height: 44px; padding: .35rem 1rem; cursor: pointer;
  font: 400 1.35rem/1 var(--craie); letter-spacing: .02em;
  background: var(--ardoise); border: 3px solid var(--bois); border-radius: 6px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ombre) 40%, transparent);
  transition: transform .2s, background-color .2s;
}
.onglets button:hover { transform: translateY(-2px); }
.onglets button[aria-selected="true"] { border-color: currentColor; box-shadow: 0 0 14px color-mix(in srgb, currentColor 40%, transparent); }
.onglets button:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .onglets button { transition: none; } .onglets button:hover { transform: none; } }

/* Les ardoises : tableaux noirs écrits à la craie, comme au bar.
   Matière : traces d'effaçage (dégradés) + poussière de craie (bruit fixe) dans un cadre en bois. */
.ardoise {
  min-width: 0; padding: 1.4rem 1.3rem 1.5rem;
  border: 7px solid var(--bois); border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ombre) 60%, transparent), inset 0 0 40px color-mix(in srgb, var(--ombre) 55%, transparent), 0 10px 26px color-mix(in srgb, var(--ombre) 45%, transparent);
  background:
    radial-gradient(ellipse 60% 35% at 25% 18%, color-mix(in srgb, var(--craie-blanche) 7%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 30% at 78% 72%, color-mix(in srgb, var(--craie-blanche) 5%, transparent), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    var(--ardoise);
  color: var(--craie-blanche); font-family: var(--craie); font-size: 1.45rem; line-height: 1.3;
}
.ardoise h3, .ardoise h4 { font-family: var(--craie); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 0 .5px currentColor, 0 0 6px color-mix(in srgb, currentColor 35%, transparent); }
.ardoise h3 { font-size: 2.7rem; line-height: 1; margin-bottom: .9rem; }
.ardoise h3 + * { margin-top: 0; }
.ardoise h3 ~ h3 { margin-top: 1.6rem; }
.ardoise h4 { font-size: 1.75rem; margin: 1.2rem 0 .4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ardoise i { font-style: normal; font-size: .8em; opacity: .75; text-transform: none; }
.ardoise ul { list-style: none; margin: 0; padding: 0; }
/* Une ligne : nom, pointillés à la craie, prix */
.lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .6rem; padding: .25rem 0; }
.lignes li > span { display: flex; align-items: baseline; gap: .6rem; }
.lignes li > span::after { content: ""; flex: 1; min-width: 1.2rem; border-bottom: 2px dotted color-mix(in srgb, var(--craie-blanche) 35%, transparent); transform: translateY(-.25em); }
.ardoise b { font-weight: 400; color: var(--craie-jaune); white-space: nowrap; }
.lignes small { grid-column: 1 / -1; font-size: 1.15rem; line-height: 1.3; color: color-mix(in srgb, var(--craie-blanche) 72%, transparent); }
.lignes-deux-prix li { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; }
.lignes-deux-prix li > b { text-align: right; }
.lignes .entete-prix > span::after { content: none; }
.entete-prix b { color: color-mix(in srgb, var(--craie-blanche) 65%, transparent); font-size: .9em; }
.ardoise .mention { margin-top: .9rem; font-size: 1.15rem; color: color-mix(in srgb, var(--craie-blanche) 70%, transparent); }
/* L'offre du bar : une petite ardoise au-dessus des onglets */
.promos { display: flex; justify-content: center; gap: .6rem; max-width: 52rem; margin: 0 auto 1.4rem; }
.promos .promo { flex: 0 1 26rem; }
.promo { min-width: 0; padding: .8rem .6rem; border-width: 5px; text-align: center; font-size: clamp(1rem, 3.6vw, 1.3rem); }
.promo strong { display: block; font-weight: 400; font-size: clamp(1.45rem, 6vw, 2.1rem); line-height: 1; text-transform: uppercase; margin-bottom: .3rem; text-shadow: 0 0 .5px currentColor, 0 0 6px color-mix(in srgb, currentColor 35%, transparent); }
/* Bières bouteilles : familles en colonnes, comme le grand tableau */
.bieres { columns: 14rem; column-gap: 2rem; }
.bieres section { break-inside: avoid; padding-bottom: 1.1rem; }
.bieres h4 { margin-top: 0; }
.bieres li { padding: .1rem 0; }
.craie-blanche { color: var(--craie-blanche); } .craie-jaune { color: var(--craie-jaune); } .craie-rouge { color: var(--craie-rouge); }
.craie-orange { color: var(--craie-orange); } .craie-verte { color: var(--craie-verte); } .craie-bleue { color: var(--craie-bleue); }
.craie-violette { color: var(--craie-violette); } .craie-rose { color: var(--craie-rose); }

/* Infos : le gros numéro */
.infos-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 900px) { .infos-grille { grid-template-columns: 1.3fr 1fr 1fr; } }
.bloc-appel { display: grid; justify-items: start; gap: 1rem; padding: 1.8rem 1.5rem; border-radius: var(--rayon); background: linear-gradient(140deg, var(--feu), color-mix(in srgb, var(--feu) 55%, var(--violet))); color: var(--sombre); }
.bloc-appel > p { font-weight: 600; font-size: 1.1rem; }
.numero-geant { font-family: var(--titre); font-weight: 900; font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 1; text-decoration: none; white-space: nowrap; color: var(--sombre); }
.bloc-appel .bouton { background: var(--sombre); color: var(--soleil); box-shadow: none; }
.bloc-appel .bouton::before { display: none; }
.bloc { padding: 1.6rem 1.4rem; border-radius: var(--rayon); background: var(--verre); }
.bloc h3 { font-size: 2rem; text-transform: uppercase; color: var(--soleil); margin-bottom: .8rem; }
.bloc .lien-fleche { display: flex; }
.horaires { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { padding: .55rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); }
.horaires th { padding-right: 1rem; font-weight: 700; white-space: nowrap; }
.horaires .aujourdhui th { color: var(--neon); }
.horaires-soiree { display: block; font-size: .9rem; color: var(--doux); }
.horaires .ferme td { color: var(--doux); }
.adresse { margin-bottom: .6rem; font-size: 1.15rem; }
/* Liens vers les réseaux : le logo devant le nom */
.lien-reseau, .pied .lien-reseau { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; }
.lien-reseau svg { width: 1.65em; height: 1.65em; flex: none; }
.reseaux-titre { margin: 1rem 0 .2rem; font-weight: 700; color: var(--soleil); }

/* ---------- Pied ---------- */
.pied { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding: 0 var(--marge) 2.5rem; text-align: center; background: var(--sombre); color: var(--doux); }
.pied-horizon {
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(2rem, 14vw, 10rem);
  height: 11rem; margin: 0 calc(-1 * var(--marge)) 2rem; overflow: hidden;
  background: linear-gradient(to bottom, var(--nuit), color-mix(in srgb, var(--neon) 55%, var(--nuit)) 55%, var(--feu) 85%, var(--soleil));
  color: var(--sombre);
}
.pied-horizon svg { height: 10rem; width: auto; aspect-ratio: 300 / 520; margin-bottom: -.5rem; }
.pied-horizon svg:nth-child(2) { height: 12rem; transform: scaleX(-1); }
.pied-horizon svg:nth-child(3) { height: 8rem; }
.pied p { margin-bottom: .6rem; }
.pied-logo { width: clamp(6.5rem, 22vw, 8.5rem); height: auto; margin: 0 auto 1rem; mix-blend-mode: screen; }   /* fond noir de l'image effacé par « écran » */
.pied-reseaux { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem clamp(1rem, 4vw, 1.8rem); margin: .4rem 0 1rem; font-size: 1.05rem; }
.pied-legal, .pied-maquette { font-size: .85rem; }
/* Page des mentions légales : une colonne de lecture */
.legale { max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) var(--marge) 0; }
.legale h1 { font-size: clamp(2.8rem, 10vw, 4.2rem); text-transform: uppercase; color: var(--soleil); margin-bottom: 2rem; }
.legale section { margin: 0 0 2.2rem; padding: 0; }
.legale h2 { font-size: 1.9rem; text-transform: uppercase; color: var(--creme); margin-bottom: .8rem; }
.legale p { margin: 0 0 .8rem; color: var(--doux); }
.legale a { color: var(--soleil); text-underline-offset: 3px; }
.page-legale .pied { padding-top: 2.5rem; }


/* ---------- Visionneuse (photo en plein écran, fondu) ---------- */
.visionneuse { padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: rgb(0 0 0 / .9); display: grid; place-items: center; opacity: 1; transition: opacity .32s; }
.visionneuse:not([open]) { display: none; }
.visionneuse[open] { animation: fondu .32s; }
.visionneuse.se-ferme { opacity: 0; }
.visionneuse::backdrop { background: transparent; }
@keyframes fondu { from { opacity: 0; } }
.visionneuse img { max-width: 94vw; max-height: 86vh; object-fit: contain; cursor: zoom-out; transition: opacity .25s; }
.visionneuse img.chargement { opacity: 0; }
.visionneuse button { position: absolute; min-width: 48px; min-height: 48px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.visionneuse-fermer { top: 1rem; right: 1rem; }
.visionneuse-precedente { left: .6rem; top: 50%; transform: translateY(-50%); }
.visionneuse-suivante { right: .6rem; top: 50%; transform: translateY(-50%); }
.visionneuse-compteur { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; }

/* Mouvement réduit : tout ce qui bouge en boucle s'arrête */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Ambiance de fête ---------- */

/* Ciel étoilé sur tout le fond : trois couches de points (tuiles de tailles différentes, sans motif
   visible) qui scintillent à des rythmes différents, et une étoile filante de temps en temps */
.ciel { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.ciel span { position: absolute; inset: 0; }
.ciel span:nth-child(1) {
  background:
    radial-gradient(1.3px 1.3px at 36px 79px, var(--creme), transparent),
    radial-gradient(1.3px 1.3px at 126px 201px, var(--creme), transparent),
    radial-gradient(1.5px 1.5px at 131px 220px, var(--creme), transparent),
    radial-gradient(1.5px 1.5px at 48px 190px, var(--creme), transparent),
    radial-gradient(1.3px 1.3px at 253px 47px, var(--creme), transparent),
    radial-gradient(1.5px 1.5px at 65px 234px, var(--creme), transparent),
    radial-gradient(1.2px 1.2px at 35px 182px, var(--creme), transparent),
    radial-gradient(1.4px 1.4px at 85px 104px, var(--creme), transparent),
    radial-gradient(1.3px 1.3px at 234px 163px, var(--creme), transparent);
  background-size: 260px 240px;
  opacity: .55; animation: brille-etoiles 5s ease-in-out infinite alternate;
}
.ciel span:nth-child(2) {
  background:
    radial-gradient(2.1px 2.1px at 270px 57px, var(--creme), transparent),
    radial-gradient(1.4px 1.4px at 69px 189px, color-mix(in srgb, var(--soleil) 70%, var(--creme)), transparent),
    radial-gradient(1.6px 1.6px at 4px 363px, var(--creme), transparent),
    radial-gradient(1.6px 1.6px at 239px 314px, color-mix(in srgb, var(--soleil) 70%, var(--creme)), transparent),
    radial-gradient(1.8px 1.8px at 163px 309px, var(--creme), transparent),
    radial-gradient(1.6px 1.6px at 156px 103px, color-mix(in srgb, var(--soleil) 70%, var(--creme)), transparent),
    radial-gradient(2.2px 2.2px at 102px 164px, var(--creme), transparent),
    radial-gradient(1.5px 1.5px at 180px 207px, color-mix(in srgb, var(--soleil) 70%, var(--creme)), transparent);
  background-size: 410px 370px;
  opacity: .7; animation: brille-etoiles 3.4s ease-in-out infinite alternate-reverse;
}
.ciel span:nth-child(3) {
  background:
    radial-gradient(2.3px 2.3px at 89px 413px, var(--creme), transparent),
    radial-gradient(2.5px 2.5px at 120px 359px, color-mix(in srgb, var(--neon) 55%, var(--creme)), transparent),
    radial-gradient(2.7px 2.7px at 424px 57px, var(--creme), transparent),
    radial-gradient(2.3px 2.3px at 101px 436px, color-mix(in srgb, var(--neon) 55%, var(--creme)), transparent),
    radial-gradient(2.9px 2.9px at 380px 375px, var(--creme), transparent),
    radial-gradient(2.0px 2.0px at 223px 188px, color-mix(in srgb, var(--neon) 55%, var(--creme)), transparent);
  background-size: 570px 520px;
  animation: brille-etoiles 2.3s ease-in-out infinite alternate; animation-delay: -1s;
}
@keyframes brille-etoiles { from { opacity: .25; } to { opacity: 1; } }
.filante {
  position: absolute; top: 12%; left: 70%; width: 9rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--creme), transparent);
  rotate: -25deg; opacity: 0;
  animation: filante 11s ease-in 3s infinite;
}
@keyframes filante {
  0% { translate: 0 0; opacity: 0; }
  2% { opacity: 1; }
  9% { translate: -40vw 20vw; opacity: 0; }
  100% { translate: -40vw 20vw; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .filante { display: none; } }

/* Fumée de soirée : un canvas WebGL basse résolution étiré sur l'écran (script.js) */
.fumee { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }

/* Grain photo très léger, par-dessus tout (une tuile de bruit SVG, aucune image téléchargée) */
.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Bokeh : disques de lumière floue qui dérivent, comme les lumières hors champ d'une photo de soirée */
.bokeh { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bokeh i {
  position: absolute; width: var(--t, 6rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent) 30%, color-mix(in srgb, var(--c) 20%, transparent) 55%, color-mix(in srgb, var(--c) 9%, transparent) 78%, transparent);
  animation: derive var(--d, 30s) ease-in-out infinite alternate;
}
.bokeh i:nth-child(1) { --c: var(--neon); --t: 7rem; left: 6%; top: 18%; --d: 34s; }
.bokeh i:nth-child(2) { --c: var(--soleil); --t: 4rem; left: 22%; top: 64%; --d: 27s; animation-delay: -9s; }
.bokeh i:nth-child(3) { --c: var(--violet); --t: 9rem; left: 78%; top: 12%; --d: 38s; animation-delay: -4s; }
.bokeh i:nth-child(4) { --c: var(--feu); --t: 5rem; left: 88%; top: 58%; --d: 31s; animation-delay: -15s; }
.bokeh i:nth-child(5) { --c: var(--neon); --t: 3.5rem; left: 62%; top: 82%; --d: 25s; animation-delay: -7s; }
.bokeh i:nth-child(6) { --c: var(--soleil); --t: 6rem; left: 40%; top: 6%; --d: 36s; animation-delay: -20s; }
.bokeh i:nth-child(7) { --c: var(--violet); --t: 4.5rem; left: 3%; top: 78%; --d: 29s; animation-delay: -12s; }
.bokeh i:nth-child(8) { --c: var(--creme); --t: 3rem; left: 70%; top: 40%; --d: 33s; animation-delay: -3s; }
.bokeh i:nth-child(9) { --c: var(--neon); --t: 8rem; left: 30%; top: 40%; --d: 40s; animation-delay: -25s; }
@keyframes derive { from { transform: translate(0, 0); } to { transform: translate(6vw, -8vh); } }

/* « Boum » : éclairs doux sur les bords, déclenchés au hasard par script.js (côté, couleur, moment,
   parfois un double coup « boum-boum »). Monte d'un coup, retombe en fondu. Jamais plein écran,
   bien moins de 3 éclairs par seconde (sécurité photosensible), rien en mouvement réduit. */
.boum { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.boum span { position: absolute; top: 0; bottom: 0; width: 45vw; opacity: 0; }   /* pas de will-change : calques libérés entre deux éclairs */
.boum span:nth-child(odd) { left: 0; }
.boum span:nth-child(even) { right: 0; }
.boum span:nth-child(1) { background: radial-gradient(ellipse 80% 70% at 0% 50%, color-mix(in srgb, var(--neon) 34%, transparent), transparent 70%); }
.boum span:nth-child(2) { background: radial-gradient(ellipse 80% 70% at 100% 50%, color-mix(in srgb, var(--violet) 40%, transparent), transparent 70%); }
.boum span:nth-child(3) { background: radial-gradient(ellipse 90% 60% at 0% 30%, color-mix(in srgb, var(--soleil) 30%, transparent), transparent 70%); }
.boum span:nth-child(4) { background: radial-gradient(ellipse 90% 60% at 100% 70%, color-mix(in srgb, var(--feu) 34%, transparent), transparent 70%); }

/* Pictos néon en contour */
.picto { color: var(--neon); overflow: visible; filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor); }
.p-neon { color: var(--neon); } .p-soleil { color: var(--soleil); } .p-violet { color: var(--violet); }
main > section { position: relative; }
.pictos { position: absolute; top: clamp(1rem, 3vw, 2.2rem); right: var(--marge); display: flex; gap: .9rem; pointer-events: none; }
.pictos .picto { width: clamp(2.1rem, 6vw, 3.2rem); animation: flotte 4s ease-in-out infinite alternate; }
.pictos .picto:nth-child(2) { animation-delay: -1.3s; rotate: 12deg; }
.pictos .picto:nth-child(3) { animation-delay: -2.6s; rotate: -10deg; width: clamp(1.6rem, 4vw, 2.2rem); }
@keyframes flotte { from { translate: 0 -4px; } to { translate: 0 6px; } }
.picto-accroche { position: absolute; z-index: -1; width: clamp(2.6rem, 7vw, 4.4rem); animation: flotte 5s ease-in-out infinite alternate; }
.pa1 { left: 12%; top: 34%; rotate: -14deg; }
.pa2 { right: 11%; top: 46%; rotate: 12deg; animation-delay: -2s; }
.pa3 { left: 18%; top: 62%; rotate: 18deg; animation-delay: -3.5s; }
@media (max-width: 700px) { .pa1 { left: 3%; top: 26%; } .pa2 { right: 6%; top: .6rem; } .pa3 { display: none; } }

/* Confettis qui tombent doucement dans l'accroche */
.confettis { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.confettis i { position: absolute; top: -2rem; width: .5rem; height: .9rem; border-radius: 2px; background: var(--neon); opacity: .8; animation: tombe var(--d, 9s) linear infinite; animation-delay: var(--r, 0s); }
.confettis i:nth-child(3n+1) { background: var(--soleil); }
.confettis i:nth-child(3n+2) { background: var(--violet); width: .4rem; height: .4rem; border-radius: 50%; }
.confettis i:nth-child(4n) { background: var(--feu); }
.confettis i:nth-child(1) { left: 4%; --d: 11s; --r: -2s; } .confettis i:nth-child(2) { left: 11%; --d: 8s; --r: -6s; }
.confettis i:nth-child(3) { left: 19%; --d: 13s; --r: -1s; } .confettis i:nth-child(4) { left: 26%; --d: 10s; --r: -8s; }
.confettis i:nth-child(5) { left: 33%; --d: 12s; --r: -4s; } .confettis i:nth-child(6) { left: 41%; --d: 9s; --r: -7s; }
.confettis i:nth-child(7) { left: 58%; --d: 14s; --r: -3s; } .confettis i:nth-child(8) { left: 65%; --d: 10s; --r: -9s; }
.confettis i:nth-child(9) { left: 72%; --d: 11s; --r: -5s; } .confettis i:nth-child(10) { left: 79%; --d: 8s; --r: -1s; }
.confettis i:nth-child(11) { left: 86%; --d: 13s; --r: -10s; } .confettis i:nth-child(12) { left: 93%; --d: 9s; --r: -4s; }
.confettis i:nth-child(13) { left: 49%; --d: 15s; --r: -12s; } .confettis i:nth-child(14) { left: 97%; --d: 12s; --r: -6s; }
@keyframes tombe { to { transform: translate(3rem, 110vh) rotate(720deg); } }

/* La soirée du jour dans le programme */
.affiche .ce-soir { position: relative; border-color: var(--soleil); box-shadow: 0 0 26px color-mix(in srgb, var(--soleil) 40%, transparent); }
.affiche .demain { border-color: color-mix(in srgb, var(--soleil) 70%, transparent); }
.affiche .ce-soir h4::before, .affiche .demain h4::before { display: inline-block; margin: 0 .5rem .3rem 0; padding: .1rem .5rem; border-radius: 4px; color: var(--sombre); font-size: .7em; vertical-align: middle; }
.affiche .ce-soir h4::before { content: "Ce soir"; background: var(--feu); animation: allume 1.6s linear infinite; }
.affiche .demain h4::before { content: "Demain"; background: var(--soleil); }

/* Mouvement réduit (les animations sont déjà coupées par la règle générale) : pas de confettis figés */
@media (prefers-reduced-motion: reduce) { .confettis { display: none; } }
@media (max-width: 360px) { .portes { gap: .5rem; } .portes a { padding-inline: .4rem; gap: .4rem; font-size: 1.2rem; } .portes svg { width: 1.3rem; height: 1.3rem; } }