/* ============================================================================
 * The FroggleRocks — design system + styles
 * Thème sombre "affiche de concert", mobile-first, sans dépendance externe.
 * Tout se règle depuis les variables de :root.
 * ==========================================================================*/

/* --------------------------- Design tokens ------------------------------- */
:root {
  /* Palette — vert profond (snakeskin) + or (guitare) + crème, accents chauds */
  --c-bg:        #0c110b;
  --c-bg-alt:    #121810;
  --c-surface:   #182015;
  --c-surface-2: #212c1c;
  --c-border:    #2e3a27;
  --c-text:      #f2eede;   /* crème */
  --c-muted:     #a9b199;   /* vert-gris clair */
  --c-accent:    #e0a72e;   /* or / sunburst guitare */
  --c-accent-2:  #cf2b1d;   /* rouge œil de grenouille (punch) */
  --c-accent-ink:#12140c;

  /* Typo — Anton (affiche/titres) + Archivo (corps, graisses variables) */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-4:  clamp(3rem, 2rem + 6vw, 7rem);

  /* Espacements / rayons */
  --space: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1080px;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(255,87,34,.45);
}

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.02; margin: 0; }

/* --------------------------- Utilitaires -------------------------------- */
.container { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: .6rem 1rem; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, summary):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ------------------------------ Boutons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.5rem; border-radius: 999px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: var(--step--1); border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--lg { padding: 1rem 2rem; font-size: var(--step-0); }
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { transform: translateY(-2px); background: var(--c-accent-2); }
.btn--ghost { border-color: var(--c-border); color: var(--c-text); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--c-accent); color: var(--c-accent); }

/* ------------------------------ Header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.nav__brand { display: flex; align-items: center; gap: .6rem; }
.nav__logo {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--c-border); flex: 0 0 auto;
}
.nav__brand-text {
  font-family: var(--font-display);
  font-size: var(--step-1); text-transform: uppercase; letter-spacing: .06em; font-weight: 400;
}
.nav__brand-text strong { color: var(--c-accent); font-weight: 400; }

.nav__menu { display: flex; align-items: center; gap: 1.5rem; }
.nav__menu > a {
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: var(--step--1); padding: .4rem 0; position: relative;
}
.nav__menu > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav__menu > a:hover::after { transform: scaleX(1); }
.nav__socials { display: flex; gap: .6rem; }
.soc {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-border);
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.soc svg { width: 18px; height: 18px; fill: currentColor; }
.soc--fb { color: #1877F2; }
.soc--ig { color: #E4405F; }
.soc--yt { color: #FF0000; }
.soc:hover { color: #fff; border-color: transparent; transform: translateY(-2px); }
.soc--fb:hover { background: #1877F2; }
.soc--ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%); }
.soc--yt:hover { background: #FF0000; }

.nav__toggle {
  display: none; position: relative; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--c-border); border-radius: 10px; cursor: pointer;
}
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: var(--c-text); transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle-bar::before { transform: translate(-50%, -8px); }
.nav__toggle-bar::after  { transform: translate(-50%, 6px); }

/* ------------------------------- Hero ----------------------------------- */
.hero {
  position: relative; min-height: 92svh; display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(224,167,46,.18), transparent 60%),
    radial-gradient(90% 70% at 80% 115%, rgba(90,120,50,.30), transparent 55%),
    linear-gradient(180deg, #0f160d, var(--c-bg));
}
.hero__inner { text-align: center; padding: 4.5rem 0; }
.hero__tagline {
  margin: 0 0 1.5rem; font-weight: 800; letter-spacing: .35em; text-transform: uppercase;
  font-size: var(--step--1); color: var(--c-accent);
}
.hero__logo {
  width: min(100%, 820px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
  border-radius: 10px;
}
.hero__sub { margin: 1.6rem auto 2rem; max-width: 34ch; color: var(--c-muted); font-size: var(--step-1); }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--c-muted); border-radius: 14px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px;
  background: var(--c-accent); transform: translateX(-50%); animation: scrolldot 1.6s infinite;
}
@keyframes scrolldot { 0% { opacity: 0; top: 8px; } 40% { opacity: 1; } 80% { opacity: 0; top: 22px; } 100% { opacity: 0; } }

/* ------------------------------ Sections -------------------------------- */
.section { padding: clamp(3.5rem, 2rem + 8vw, 7rem) 0; }
.section--dates { background: var(--c-bg-alt); }
.section--contact { background: linear-gradient(180deg, var(--c-bg-alt), var(--c-bg)); text-align: center; }
.section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: var(--step-3); font-weight: 400; display: inline-block;
  padding-bottom: .18em; border-bottom: 5px solid var(--c-accent);
  text-wrap: balance;
}

/* ----------------------------- Liste concerts --------------------------- */
.gigs { display: flex; flex-direction: column; }

.gig {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "date info cta";
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.1rem, 2.6vw, 1.9rem) .5rem;
  border-top: 1px solid var(--c-border);
  transition: background .25s ease;
}
.gigs .gig:last-child { border-bottom: 1px solid var(--c-border); }
.gig:hover { background: var(--c-surface); }
.gig:hover .gig__day { color: var(--c-accent); }

/* bloc date — grande date façon affiche */
.gig__date {
  grid-area: date;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "wd wd" "day my";
  align-items: end; column-gap: .55rem;
}
.gig__weekday {
  grid-area: wd; font-family: var(--font-body); font-weight: 700;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent);
  margin-bottom: .25rem;
}
.gig__day {
  grid-area: day; font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: .74; color: var(--c-text);
  transition: color .25s ease;
}
.gig__my { grid-area: my; display: flex; flex-direction: column; line-height: 1; padding-bottom: .2rem; }
.gig__month { font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.55rem); text-transform: uppercase; color: var(--c-text); }
.gig__year { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--c-muted); }

/* infos lieu */
.gig__info { grid-area: info; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.gig__venue {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 2rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1; color: var(--c-text);
}
.gig__city { color: var(--c-muted); font-size: var(--step-0); }
.gig__time {
  align-self: flex-start; margin-top: .1rem;
  font-weight: 700; font-size: var(--step--1); letter-spacing: .04em; color: var(--c-accent);
}
.gig__time::before { content: "\1F550\00A0"; } /* 🕐 */

/* action */
.gig__cta { grid-area: cta; justify-self: end; display: flex; align-items: center; gap: .5rem; }
.gig__action {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-accent-ink); background: var(--c-accent);
  padding: .55rem 1rem; border-radius: 999px;
  transition: transform .15s ease, background .2s ease;
}
.gig__action:hover { transform: translateY(-2px); background: #f2c552; }
.gig__tag {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-border); border-radius: 999px; padding: .35rem .75rem;
}

/* menu déroulant "Ajouter à l'agenda" (natif <details>, sans dépendance) */
.gig__cal { position: relative; }
.gig__cal > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-accent-ink); background: var(--c-accent);
  padding: .55rem 1rem; border-radius: 999px;
  transition: transform .15s ease, background .2s ease;
}
.gig__cal > summary::-webkit-details-marker { display: none; }
.gig__cal > summary::marker { content: ""; }
.gig__cal > summary:hover { transform: translateY(-2px); background: #f2c552; }
.gig__cal[open] > summary { background: #f2c552; }
.gig__cal-menu {
  position: absolute; right: 0; left: auto; top: calc(100% + .5rem); z-index: 40;
  display: flex; flex-direction: column; min-width: 200px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden;
}
.gig__cal-menu a {
  padding: .7rem 1rem; font-size: var(--step--1); font-weight: 600; color: var(--c-text); white-space: nowrap;
}
.gig__cal-menu a + a { border-top: 1px solid var(--c-border); }
.gig__cal-menu a:hover { background: var(--c-surface); color: var(--c-accent); }

/* pastille "Affiche" — ajoutée dynamiquement si assets/img/posters/<date>-<slug>.jpg existe.
   Pastille "Medley/Vidéo" — ajoutée si videoUrl est renseigné sur un concert passé. */
.gig__poster, .gig__video {
  font: inherit; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-size: var(--step--1); letter-spacing: .04em;
  color: var(--c-muted); background: transparent;
  border: 1px solid var(--c-border); border-radius: 999px; padding: .5rem .9rem;
  transition: color .2s ease, border-color .2s ease;
}
.gig__poster:hover, .gig__video:hover { color: var(--c-accent); border-color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .gig__poster:hover, .gig__video:hover { transform: translateY(-2px); }
}
.gig__poster-thumb { width: 28px; height: 38px; object-fit: cover; border-radius: 4px; }

.gig--past { opacity: .5; }
.gig--past .gig__day, .gig--past .gig__venue { color: var(--c-muted); }

@media (max-width: 560px) {
  .gig {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date info" "date cta";
    gap: .3rem 1.2rem; align-items: center;
  }
  .gig__cta { justify-self: start; margin-top: .4rem; }
}

.dates-empty { text-align: center; color: var(--c-muted); font-size: var(--step-1); padding: 2rem 0; }

.past { margin-top: 2.5rem; }
.past__details summary {
  cursor: pointer; text-align: center; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-muted); font-size: var(--step--1);
  list-style: none; padding: .6rem;
}
.past__details summary::-webkit-details-marker { display: none; }
.past__details summary::before { content: "▸ "; color: var(--c-accent); }
.past__details[open] summary::before { content: "▾ "; }
.past__details[open] .gigs--past { margin-top: .5rem; }

/* ------------------------------ À propos -------------------------------- */
.about { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 820px) { .about { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.about__media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  /* Fond de secours : si l'image manque, une texture rayée s'affiche (pas de JS). */
  background: repeating-linear-gradient(45deg, var(--c-surface) 0 12px, var(--c-surface-2) 12px 24px);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__text p { color: var(--c-muted); }
.about__text p + p { margin-top: 1rem; }
.about__text strong { color: var(--c-text); }
.about .section__title { margin-bottom: 1rem; }

/* ------------------------------ Galerie ---------------------------------- */
/* Grille asymétrique "mur de scène" — variété de tailles + légère rotation par
   photo, en pur CSS (nth-child), robuste à n'importe quel nombre de photos. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: clamp(.8rem, 2vw, 1.4rem);
}
.gallery__item {
  font: inherit; cursor: pointer; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--c-surface); overflow: hidden; position: relative;
  /* Rotation toujours déclarée ici, jamais dans les règles .reveal — la
     révélation au scroll ne joue que sur l'opacité (voir plus bas) pour ne
     jamais entrer en concurrence de cascade avec cette valeur permanente. */
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease,
    box-shadow .25s ease, opacity .6s ease;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (scripting: enabled) {
  .gallery__item.reveal { opacity: 0; }
  .gallery__item.reveal.is-visible { opacity: 1; }
  /* .reveal / .reveal.is-visible (générique, plus bas dans la feuille) déclarent
     aussi transform (translateY / none) avec une spécificité qui peut l'emporter
     sur .gallery__item seul selon l'état — ces deux sélecteurs composés forcent
     la rotation en toutes circonstances, pour que transform ne varie JAMAIS au
     fil de la révélation (seule opacity change) et ne déclenche donc jamais de
     transition sur transform (source de l'ancien bug : une valeur qui reste
     bloquée en cours d'interpolation entre deux listes de fonctions différentes).*/
  .gallery__item.reveal, .gallery__item.reveal.is-visible { transform: rotate(var(--tilt, 0deg)); }
}
.gallery__item:hover, .gallery__item:focus-visible {
  transform: rotate(0deg) scale(1.04);
  border-color: var(--c-accent);
  box-shadow: var(--shadow);
  z-index: 2;
}
.gallery__item:nth-child(4n+1) { --tilt: -1.4deg; }
.gallery__item:nth-child(4n+2) { --tilt: 1deg; }
.gallery__item:nth-child(4n+3) { --tilt: -.6deg; }
.gallery__item:nth-child(4n+4) { --tilt: 1.6deg; }
.gallery__item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(7n+4) { grid-row: span 2; }

/* ------------------------------ Contact --------------------------------- */
.contact { max-width: 620px; margin-inline: auto; }
.contact__lead { color: var(--c-muted); margin: .5rem 0 1.8rem; }
.contact .section__title { margin-bottom: .3rem; }

/* formulaire de contact */
.contact-form { text-align: left; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form__row { display: flex; flex-direction: column; gap: .4rem; }
.field-label {
  font-weight: 700; font-size: var(--step--1); letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-muted);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%; font: inherit; font-size: var(--step-0); color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: .8rem 1rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: none; border-color: var(--c-accent); box-shadow: var(--ring);
}
.contact-form .hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.contact-form__submit { align-self: flex-start; }
.contact-form__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.contact-form__status { margin: 0; font-weight: 700; font-size: var(--step--1); min-height: 1.2em; }
.contact-form__status[data-state="ok"] { color: #7cc78a; }
.contact-form__status[data-state="err"] { color: #ff8a7a; }

.contact__or {
  margin: 2rem 0 .8rem; color: var(--c-muted);
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

.contact__socials {
  list-style: none; display: flex; gap: 1.5rem; justify-content: center;
  padding: 0; margin: 2rem 0 0; flex-wrap: wrap;
}
.contact__socials a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--step--1);
  color: var(--c-text); border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.contact__socials a svg { width: 20px; height: 20px; }
.soc-fb svg { fill: #1877F2; }
.soc-ig svg { fill: #E4405F; }
.soc-yt svg { fill: #FF0000; }
.soc-fb:hover { color: #1877F2; border-color: #1877F2; }
.soc-ig:hover { color: #E4405F; border-color: #E4405F; }
.soc-yt:hover { color: #FF0000; border-color: #FF0000; }

/* ------------------------------ Footer ---------------------------------- */
.site-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); padding: 2rem 0; }
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-footer__brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: var(--step-1); }
.site-footer__copy { color: var(--c-muted); font-size: var(--step--1); }

/* ------------------------- Modale "Affiche" ------------------------------ */
.poster-modal {
  padding: 0; border: none; border-radius: var(--radius); background: var(--c-surface);
  box-shadow: var(--shadow); max-width: min(92vw, 720px); max-height: 88vh;
}
.poster-modal::backdrop { background: rgba(6, 8, 5, .78); }
.poster-modal__close {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-text); cursor: pointer;
  font: inherit; transition: color .2s ease, border-color .2s ease;
}
.poster-modal__close:hover { color: var(--c-accent); border-color: var(--c-accent); }
.poster-modal__img { display: block; width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }

/* Modale vidéo : même habillage que l'affiche, mais dimensionnée selon la
   résolution réelle plutôt qu'une largeur fixe — grand écran (jusqu'à 1200px),
   petit écran (92vw), et surtout un écran bas (mobile en paysage, petite
   fenêtre) où une largeur généreuse ferait dépasser 88vh en hauteur une fois
   le ratio 16:9 appliqué : le 3ᵉ terme convertit cette limite de hauteur en
   largeur équivalente pour que min() la prenne en compte. */
/* width:100% donne une largeur définie (celle du viewport, la modale étant en
   "top layer") : sans ça, l'iframe (contrairement à une image) n'a pas de
   taille intrinsèque propre, et le calcul d'auto-largeur de la <dialog>
   retombait sur les 300px par défaut d'un <iframe>, d'où une vidéo minuscule
   quelle que soit la résolution. max-width applique ensuite la vraie limite. */
.video-modal { width: 100%; max-width: min(92vw, 1200px, calc(84vh * 16 / 9)); }
.video-modal__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* Modale album photo : même famille que .poster-modal, avec légende/compteur/
   navigation précédent-suivant en plus. */
.gallery-modal { max-width: min(92vw, 1100px); }
.gallery-modal__img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); }
.gallery-modal__caption {
  margin: .8rem 1.2rem 0; color: var(--c-muted); font-size: var(--step--1); text-align: center;
}
.gallery-modal__caption:empty { display: none; }
.gallery-modal__counter {
  position: absolute; left: 1rem; bottom: .8rem; z-index: 1;
  font-family: var(--font-display); letter-spacing: .04em; color: var(--c-accent); font-size: var(--step--1);
}
.gallery-modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1;
  border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-text); cursor: pointer; font: inherit; transition: color .2s ease, border-color .2s ease;
}
.gallery-modal__nav:hover { color: var(--c-accent); border-color: var(--c-accent); }
.gallery-modal__prev { left: .6rem; }
.gallery-modal__next { right: .6rem; }

@media (scripting: enabled) {
  .poster-modal { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s ease; }
  .poster-modal[open] { opacity: 1; transform: scale(1); }
  .poster-modal::backdrop { opacity: 0; transition: opacity .2s ease; }
  .poster-modal[open]::backdrop { opacity: 1; }
}

/* --------------------------- Reveal on scroll --------------------------- */
/* Masqué UNIQUEMENT quand le scripting est actif → sans JS, tout reste visible.
   Aucun script inline requis (compatible CSP stricte). Un filet de sécurité JS
   révèle aussi tout au cas où l'observer ne se déclenche pas. */
@media (scripting: enabled) {
  .reveal, .gig {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.is-visible, .gig.is-visible { opacity: 1; transform: none; }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 760px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 0; padding: 1rem; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
    transform: translateY(-120%); transition: transform .25s ease; box-shadow: var(--shadow);
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__menu > a { width: 100%; padding: .8rem .2rem; border-bottom: 1px solid var(--c-border); }
  .nav__socials { padding: .8rem .2rem; }
}

/* -------------------------- Préférences système ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* Prioritaire sur le masquage au-dessus : jamais de contenu caché ni de mouvement. */
  .reveal, .gig { opacity: 1 !important; transform: none !important; }
  /* Exception : la rotation des photos de la galerie est un choix de design
     statique (jamais animée en soi), pas un mouvement à réduire — seule
     l'entrée en fondu doit rester instantanée. */
  .gallery__item.reveal { opacity: 1 !important; transform: rotate(var(--tilt, 0deg)) !important; }
}