:root {
  --bg: #faf9f7;
  --bg-elevated: #ffffff;
  --bg-elevated-glass: rgba(255, 255, 255, 0.88);
  --text: #17181a;
  --text-muted: #5b5e66;
  --border: #e5e3df;
  --accent: #b34a2c;
  --accent-contrast: #fff8f4;
  --font-body: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131315;
    --bg-elevated: #1c1c1f;
    --bg-elevated-glass: rgba(28, 28, 31, 0.85);
    --text: #f2f1ee;
    --text-muted: #a9a9ad;
    --border: #2c2c30;
    --accent: #e08252;
    --accent-contrast: #1c1108;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* Fond dégradé multicolore animé sur toute la page : un voile sombre fixe
   (1er calque) garde le texte clair lisible, et le dégradé coloré (2e
   calque) dérive lentement en boucle. Les blocs de contenu (cartes
   d'événement, panneau "À propos"…) posent leur propre fond opaque
   par-dessus via var(--bg-elevated), donc leur lisibilité est inchangée. */
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(8, 4, 16, 0.22), rgba(8, 4, 16, 0.22)),
    linear-gradient(120deg, #6d28d9, #db2777, #f9762e, #06b6d4, #6d28d9);
  background-size: auto, 300% 300%;
  animation: sublime-drift 28s ease-in-out infinite;
  color: #fff;
  font-family: var(--font-body);
  line-height: 1.5;
}

@keyframes sublime-drift {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; background-position: 0 0, 30% 50%; }
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--accent); }

/* Anneaux animés (pulse.js) — calque fixe plein écran, sous tout le
   contenu (z-index négatif = sous le fond dégradé du body). Visible en
   transparence à travers les panneaux en verre dépoli. */
.pulse-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-canvas { display: none; }
}

/* Top nav — bandeau blanc opaque, toujours visible en haut au scroll.
   Volontairement fixe (blanc/noir) plutôt que thémé clair/sombre, pour
   rester net et lisible par-dessus le dégradé animé quel que soit
   l'endroit où il en est. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  flex-wrap: wrap;
}

.site-nav-brand {
  font-weight: 700;
  text-decoration: none;
  color: #000;
}

.site-nav-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-icon-link {
  display: inline-flex;
  color: #000;
  transition: color 0.15s ease;
}
.nav-icon-link:hover { color: var(--accent); }

.nav-text-link {
  text-decoration: none;
  color: #000;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav-text-link:hover { color: var(--accent); }

/* Header */
.hero {
  padding: 72px 0 48px;
  text-align: center;
}

.hero-compact { padding: 48px 0 32px; }

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* Cache visuellement le h1 du titre du site sur l'accueil (déjà présent
   dans le bandeau de nav) tout en le gardant pour l'accessibilité/SEO :
   une page doit garder un h1. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tagline {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  max-width: 40em;
  margin: 0 auto 28px;
}

/* Sur l'accueil, l'accroche remplace visuellement le titre : plus grande,
   plus affirmée. */
.tagline-prominent {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  max-width: 16em;
}

.tagline p, .event-desc p, .about-content p {
  margin: 0 0 1em;
}
.tagline p:last-child, .event-desc p:last-child, .about-content p:last-child {
  margin-bottom: 0;
}

.hero-about-link {
  margin: 0;
}
.hero-about-link a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-about-link a:hover { color: #fff; }

.animators {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-bottom: 20px;
}

.animators a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
}

.animators a:hover { border-color: var(--accent); }

/* Events */
.events-section {
  padding: 56px 0;
}

/* Moins d'écart entre "à venir" et "passés" qu'avant/après les deux
   sections (hero au-dessus, footer en dessous). */
#a-venir { padding-bottom: 20px; }
#passes { padding-top: 20px; }

.events-section h2 {
  font-size: 1.6rem;
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.empty {
  color: rgba(255, 255, 255, 0.85);
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Chaque ligne d'événement garde son propre fond quasi-opaque (verre
   dépoli : légèrement transparent + flou) pour rester lisible avec le
   thème habituel, tout en laissant deviner le dégradé animé derrière. */
.event-card {
  background: var(--bg-elevated-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.event-card.past { opacity: 0.85; }

/* <summary> fournit gratuitement l'accessibilité clavier/lecteur d'écran
   du "cliquer pour ouvrir" ; on ne fait que le styler comme une ligne. */
.event-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}
.event-summary::-webkit-details-marker,
.event-summary::marker { display: none; }
.event-summary:hover { background: var(--bg); }

/* Événements à venir : pas de <details>, rien à déplier → pas d'effet
   "cliquable" trompeur. */
.event-summary-static {
  cursor: default;
}
.event-summary-static:hover { background: none; }

.event-thumb {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: var(--border);
}

.event-head {
  min-width: 0;
  flex: 1;
}

.event-head h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.event-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
/* Pointe vers le bas = "cliquer pour ouvrir" ; pivote vers le haut une
   fois ouvert = "cliquer pour refermer". */
.event-card[open] .event-chevron { transform: rotate(180deg); }

.event-details {
  margin: 0 20px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .event-summary { padding: 12px 16px; gap: 14px; }
  .event-thumb { width: 64px; height: 64px; flex-basis: 64px; }
  .event-details { margin: 0 16px 16px; }
}

.event-meta {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: capitalize;
}

.event-desc {
  margin: 0;
  font-size: 0.95rem;
}

/* Texte long : posé sur son propre panneau verre dépoli (comme les
   cartes d'événement, même largeur) pour rester confortable à lire
   par-dessus le dégradé animé, tout en le laissant transparaître. */
.about-content {
  margin: 32px 0 0;
  padding: 36px 32px;
  font-size: 1.05rem;
  background: var(--bg-elevated-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.team-section {
  margin: 24px 0 64px;
  padding: 36px 32px;
  background: var(--bg-elevated-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.team-section h2 {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.team-contact {
  margin: 20px 0 0;
  font-size: 0.9rem;
}
.team-contact a {
  color: var(--text-muted);
  text-decoration: none;
}
.team-contact a:hover { color: var(--accent); }

.rsvp-row {
  margin-top: 16px;
  text-align: right;
}

.rsvp-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent-contrast);
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 2px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}

.rsvp-btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px 0 40px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 480px) {
  .hero { padding: 48px 0 36px; }
}