/* ═══════════════════════════════════════════════════════════════
   LifeSide RP — Design System
   Dark Cinematic GTA RP Theme
   ═══════════════════════════════════════════════════════════════ */

/* Fonts (Outfit / Space Grotesk / JetBrains Mono) are loaded by <link> in
   index.html: a CSS @import here would only be discovered after this file
   downloaded, delaying the first text paint. */

/* ── Custom Properties ───────────────────────────────────────── */
:root {
  /* Palette */
  --bg-void:         #050508;
  --bg-deep:         #0a0a10;
  --bg-surface:      #111118;
  --bg-elevated:     #1a1a24;
  --bg-card:         rgba(15, 15, 25, 0.65);
  --bg-glass:        rgba(20, 20, 35, 0.45);

  --border-dim:      rgba(255, 255, 255, 0.06);
  --border-subtle:   rgba(255, 255, 255, 0.10);
  --border-accent:   rgba(201, 185, 138, 0.3);

  --text-primary:    #f0f0f5;
  --text-secondary:  rgba(240, 240, 245, 0.65);
  --text-muted:      rgba(240, 240, 245, 0.35);

  /* Accent – Champagne Gold (sampled from the real LifeSide logo/branding) */
  --accent:          #c9b98a;
  --accent-soft:     rgba(201, 185, 138, 0.15);
  --accent-glow:     rgba(201, 185, 138, 0.4);

  /* Secondary accent – warmer amber-gold, same brand family */
  --amber:           #d4a84a;
  --amber-soft:      rgba(212, 168, 74, 0.15);

  /* Chapter accents – color-coded sections (illégal / discord).
     Same hues as before, saturation pulled under ~45% (was 65-91%) so the
     chapter colors sit on the near-black + champagne palette instead of
     fighting it. Blurple stays at Discord's own brand value on purpose. */
  --violet:          #a88fd4;
  --violet-soft:     rgba(168, 143, 212, 0.15);
  --violet-border:   rgba(168, 143, 212, 0.35);

  --blurple:         #5865f2;
  --blurple-soft:    rgba(88, 101, 242, 0.15);
  --blurple-border:  rgba(88, 101, 242, 0.35);
  --blurple-text:    #98a1f9;

  --teal:            #5cc4b3;
  --teal-soft:       rgba(92, 196, 179, 0.15);
  --teal-border:     rgba(92, 196, 179, 0.35);

  --emerald:         #74c69d;
  --emerald-soft:    rgba(116, 198, 157, 0.15);
  --emerald-border:  rgba(116, 198, 157, 0.35);

  /* Typography */
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Outfit', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs:        0.5rem;
  --space-sm:        0.75rem;
  --space-md:        1rem;
  --space-lg:        1.5rem;
  --space-xl:        2.5rem;
  --space-2xl:       4rem;
  --space-3xl:       6rem;
  --space-4xl:       10rem;

  /* Radius */
  --radius-sm:       3px;
  --radius-md:       4px;
  --radius-lg:       6px;
  --radius-xl:       8px;
  --radius-pill:     6px;

  /* Transitions */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:     cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Chapter Accents ──────────────────────────────────────────
   Each rule chapter (and the transition that introduces it) gets
   its own accent color, reinforcing the scrolltelling narrative
   as you move deeper into the city. Components fall back to the
   global --accent (ruby) when no chapter scope applies. ───────── */
#general, .chapter-general {
  --section-accent:      var(--teal);
  --section-accent-soft: var(--teal-soft);
  --section-border:      var(--teal-border);
}

#legal, .chapter-legal {
  --section-accent:      var(--accent);
  --section-accent-soft: var(--accent-soft);
  --section-border:      var(--border-accent);
}

#illegal, .chapter-illegal {
  --section-accent:      var(--violet);
  --section-accent-soft: var(--violet-soft);
  --section-border:      var(--violet-border);
}

#lexique, .chapter-lexique {
  --section-accent:      var(--emerald);
  --section-accent-soft: var(--emerald-soft);
  --section-border:      var(--emerald-border);
}

#gallery, .chapter-communaute {
  --section-accent:      var(--amber);
  --section-accent-soft: var(--amber-soft);
  --section-border:      rgba(212, 168, 74, 0.35);
}

#discord, .chapter-discord {
  --section-accent:      var(--blurple);
  --section-accent-soft: var(--blurple-soft);
  --section-border:      var(--blurple-border);
  /* Discord's own blue is ~3.9:1 as small text on this background, under
     the AA floor. Tinted lighter for text only; fills and borders keep the
     brand value. */
  --section-accent-text: var(--blurple-text);
}

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-void);
  overflow-x: hidden;
  line-height: 1.6;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ── Typography polish ─────────────────────────────────────────
   No more one-word last lines on titles, and tabular figures so
   counters (member count, chapter numbers, lightbox 3 / 8) don't
   jitter width as digits change. */
h2, h3, .transition-title {
  text-wrap: balance;
}

p, .rule-list li, .projection-desc, .transition-quote span:last-child {
  text-wrap: pretty;
}

.transition-number,
.label-number,
.discord-widget-count,
.gallery-lightbox-count {
  font-variant-numeric: tabular-nums;
}

/* ── Skip link (keyboard users bypass the floating nav) ───────── */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 300;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #0a0a10;
  background: var(--accent);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform 0.3s var(--ease-spring);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ── Icons ─────────────────────────────────────────────────────
   Phosphor (regular, MIT) SVGs stored in assets/icons and drawn as
   CSS masks, so each icon takes the color of its chapter via
   currentColor. One family, one stroke weight, replaces the
   multicolor system emojis that clashed with the palette. */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.ico-smiley-nervous   { --icon: url('../assets/icons/smiley-nervous.svg'); }
.ico-mask-happy       { --icon: url('../assets/icons/mask-happy.svg'); }
.ico-first-aid        { --icon: url('../assets/icons/first-aid.svg'); }
.ico-buildings        { --icon: url('../assets/icons/buildings.svg'); }
.ico-siren            { --icon: url('../assets/icons/siren.svg'); }
.ico-scales           { --icon: url('../assets/icons/scales.svg'); }
.ico-flag-banner      { --icon: url('../assets/icons/flag-banner.svg'); }
.ico-package          { --icon: url('../assets/icons/package.svg'); }
.ico-bank             { --icon: url('../assets/icons/bank.svg'); }
.ico-chat-circle-text { --icon: url('../assets/icons/chat-circle-text.svg'); }
.ico-prohibit         { --icon: url('../assets/icons/prohibit.svg'); }
.ico-clipboard-text   { --icon: url('../assets/icons/clipboard-text.svg'); }
.ico-microphone-stage { --icon: url('../assets/icons/microphone-stage.svg'); }
.ico-ticket           { --icon: url('../assets/icons/ticket.svg'); }
.ico-trophy           { --icon: url('../assets/icons/trophy.svg'); }
.ico-quotes           { --icon: url('../assets/icons/quotes.svg'); }
.ico-gear             { --icon: url('../assets/icons/gear.svg'); }
.ico-arrows-out       { --icon: url('../assets/icons/arrows-out.svg'); }
.ico-x                { --icon: url('../assets/icons/x.svg'); }
.ico-caret-left       { --icon: url('../assets/icons/caret-left.svg'); }
.ico-caret-right      { --icon: url('../assets/icons/caret-right.svg'); }

/* ── Focus States (keyboard navigation) ─────────────────────────
   Visible only for keyboard users (:focus-visible) so mouse/touch
   interaction stays clean — but Tab-ing through the site always
   shows a clear, on-brand ring. ────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.nav-cta:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-link:focus-visible,
.footer-nav-link:focus-visible,
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible {
  border-radius: var(--radius-pill);
}

.gallery-card:focus-visible,
.rule-card:focus-visible,
.discord-widget:focus-visible {
  border-radius: var(--radius-lg);
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 185, 138, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Loading Screen ──────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  transition: opacity 0.8s var(--ease-out-expo), visibility 0.8s;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader .loader-logo {
  width: clamp(56px, 12vw, 88px);
  height: clamp(56px, 12vw, 88px);
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  animation: loader-breathe 2.2s ease-in-out infinite;
}

@keyframes loader-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.06); opacity: 1; }
}

#loader .loader-bar-track {
  width: min(300px, 70vw);
  height: 3px;
  background: var(--border-dim);
  border-radius: 2px;
  overflow: hidden;
}

#loader .loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #e8dcb8);
  border-radius: 2px;
  transition: width 0.15s linear;
}

#loader .loader-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

#loader .loader-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  opacity: 0;
  animation: loader-cta-in 0.6s ease 1.4s forwards;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease-spring);
}

#loader .loader-cta:hover {
  color: var(--text-primary);
  border-color: var(--accent-glow);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

#loader .loader-cta-arrow {
  transition: transform 0.3s var(--ease-spring);
}

#loader .loader-cta:hover .loader-cta-arrow {
  transform: translateX(2px);
}

@keyframes loader-cta-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Canvas (Scrolltelling Background) ───────────────────────── */
#scrolltelling-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  object-fit: cover;
}

/* Scrim over the video background. Without it, text legibility is a
   lottery decided by whichever frame happens to be behind it: measured
   contrast swung from 9.5:1 on night frames down to 1.9:1 on the bright
   daytime ones, well under the 4.5:1 AA floor. Sits between the canvas
   (z-index 0) and the content (z-index 2), so only the video is dimmed —
   cards, gallery shots and buttons keep their full punch.
   Stronger at the top and bottom: frames the shot, and buys back
   contrast for the nav pill and the footer. */
#canvas-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Aucun voile : la vidéo de fond s'affiche telle quelle (choix du propriétaire).
     La lisibilité des textes posés dessus est assurée localement (halo derrière
     les titres, fonds des cartes). Ancienne valeur, si besoin de revenir en arrière :
     linear-gradient(180deg, rgba(5,5,8,.62) 0%, rgba(5,5,8,.32) 22%, rgba(5,5,8,.32) 78%, rgba(5,5,8,.68) 100%) */
  background: none;
}

/* Halo sombre et flou derrière les titres de section : le voile ci-dessus est léger
   (la vidéo reste bien visible), ce halo garde les titres et sous-titres lisibles même
   sur les scènes claires. Ne déborde pas sur les côtés (pas de défilement horizontal
   sur téléphone). Vérifié par check-contrast.js. */
.section-header {
  isolation: isolate;
}

.section-header::before {
  content: '';
  position: absolute;
  inset: -3rem -1rem;
  z-index: -1;
  pointer-events: none;
  /* Ellipse qui touche 0 avant les bords de la zone : aucun bord rectangulaire visible */
  background: radial-gradient(ellipse 62% 50% at 32% 50%, rgba(5, 5, 8, 0.7) 0%, rgba(5, 5, 8, 0.42) 55%, rgba(5, 5, 8, 0) 100%);
}

#changelog .section-header::before {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 5, 8, 0.6) 0%, rgba(5, 5, 8, 0.35) 55%, rgba(5, 5, 8, 0) 100%);
}

/* ── Scroll Progress ─────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 101;
  background: rgba(255, 255, 255, 0.06);
}

#scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--accent), var(--violet), var(--emerald), var(--blurple), var(--amber));
  transition: width 0.1s linear;
}

/* ── Floating Nav ────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

#nav.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#nav .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-primary);
}

#nav .nav-brand .nav-accent {
  color: var(--accent);
}

/* Le logo est un lien vers l'accueil (sur l'accueil : remonte en haut) */
#nav a.nav-brand {
  text-decoration: none;
  transition: opacity 0.3s ease;
}

#nav a.nav-brand:hover {
  opacity: 0.8;
}

#nav a.nav-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

#nav .nav-mark {
  display: inline-block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

#nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
}

#nav .nav-link {
  position: relative;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo);
  cursor: pointer;
}

#nav .nav-link:hover,
#nav .nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

#nav .nav-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  margin-left: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: #0a0a10;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Metallic sheen sweep on hover, echoing the logo's brushed-gold bevel
   instead of a neon glow halo. */
#nav .nav-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

#nav .nav-cta:hover::before {
  left: 130%;
}

#nav .nav-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

#nav .nav-cta:active {
  transform: scale(0.97);
}

#nav .nav-cta .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 0.65rem;
  transition: transform 0.3s var(--ease-spring);
}

#nav .nav-cta:hover .cta-arrow {
  transform: translate(2px, -1px) scale(1.1);
}

/* ── Mobile Nav Toggle ───────────────────────────────────────── */
#nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  position: relative;
  width: 32px;
  height: 32px;
}

#nav-toggle span {
  display: block;
  position: absolute;
  left: 6px;
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.4s var(--ease-spring);
}

#nav-toggle span:nth-child(1) { top: 10px; }
#nav-toggle span:nth-child(2) { top: 15px; }
#nav-toggle span:nth-child(3) { top: 20px; }

#nav-toggle.open span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
#nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}
#nav-toggle.open span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* ── Main Content Wrapper ────────────────────────────────────── */
#content-wrapper {
  position: relative;
  z-index: 2;
}

/* ── Section Base ────────────────────────────────────────────── */
.section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
}

.section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Section Transition (Cinematic Chapters) ──────────────────── */
.section-transition {
  min-height: 75vh;
  padding: var(--space-4xl) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.transition-content {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(10, 10, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--section-accent, var(--accent));
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.transition-content::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--section-accent, var(--accent));
  border-right: 2px solid var(--section-accent, var(--accent));
  opacity: 0.5;
  pointer-events: none;
}

.transition-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.transition-number {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  opacity: 0.95;
  letter-spacing: -0.05em;
  display: inline-block;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.transition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  /* Plain text, no pill: the big chapter number and the accent border
     already carry the chapter identity; a third boxed element was noise. */
}

.transition-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.transition-text {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 860px;
}

/* Grille de projection : trois colonnes séparées par des filets, plus
   trois petites cartes posées dans une grande carte (cards inside a card).
   Le cadre du chapitre porte déjà la hiérarchie. */
.transition-projections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--space-xl) 0 var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.projection-card {
  position: relative;
  padding: 0 var(--space-lg);
}

.projection-card:first-child {
  padding-left: 0;
}

.projection-card:last-child {
  padding-right: 0;
}

.projection-card + .projection-card {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.projection-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-sm);
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  transition: transform 0.5s var(--ease-spring);
}

.projection-card:hover .projection-icon {
  transform: translateY(-3px);
}

.projection-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.projection-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Citation / Punchline d'immersion */
.transition-quote {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(90deg, var(--section-accent-soft, rgba(201, 185, 138, 0.09)), rgba(255, 255, 255, 0.02));
  border-left: 2px solid var(--section-accent, var(--accent));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.transition-quote-icon {
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Hero Section ────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 var(--space-xl) var(--space-4xl);
  position: relative;
}

.hero-splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 100%;
  padding: var(--space-4xl) 0 var(--space-2xl);
}

.hero-features-inner {
  width: 100%;
  max-width: 1100px;
  margin: var(--space-xl) auto 0;
  text-align: left;
}

#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  background: rgba(8, 8, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: #e3d6ac;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* (the decorative pulsing dot that lived here is gone: only the Discord
   widget keeps one, because there it means something: "members online") */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

#hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.55),
    0 20px 50px rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.25);
}

#hero h1 .accent {
  color: var(--accent);
  position: relative;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.55),
    0 20px 50px rgba(0, 0, 0, 0.85);
}

#hero h1 .accent::after {
  content: '';
  position: absolute;
  bottom: 0.08em;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 15%, #f0e6c8 50%, var(--accent) 85%, transparent);
  background-size: 200% 100%;
  animation: metallic-sheen 4s ease-in-out infinite;
  border-radius: 2px;
  opacity: 0.85;
}

@keyframes metallic-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

#hero h1 .hero-rp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.6em;
  color: var(--text-primary);
  margin-top: 0.55em;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.85);
}

#hero h1 .hero-rp::before,
#hero h1 .hero-rp::after {
  content: '';
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-muted));
}

#hero h1 .hero-rp::after {
  background: linear-gradient(90deg, var(--text-muted), transparent);
}

#hero .hero-sub {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 400;
  color: var(--text-primary);
  max-width: 550px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 10px 30px rgba(0, 0, 0, 0.85);
}

#hero .hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0a0a10;
  background: linear-gradient(135deg, #e3d6ac, var(--accent) 60%, #a8905c);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-spring);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.btn-primary:hover::before {
  left: 130%;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  font-size: 0.7rem;
  transition: transform 0.3s var(--ease-spring);
}

.btn-primary:hover .btn-icon {
  transform: translate(2px, -1px) scale(1.1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background: rgba(8, 8, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s var(--ease-spring);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.btn-secondary:hover {
  background: rgba(8, 8, 14, 0.72);
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

/* ── Scroll Indicator ────────────────────────────────────────── */
#hero .scroll-indicator {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

#hero .scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator .scroll-line {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  position: relative;
  background: rgba(8, 8, 14, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.scroll-indicator .scroll-line::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  animation: scroll-dot 1.8s ease-in-out infinite;
}

@keyframes scroll-dot {
  0% { transform: translate(-50%, 0); opacity: 1; }
  65% { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

.scroll-indicator .scroll-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ── Rule Section Layout ─────────────────────────────────────── */
.rule-section {
  padding: var(--space-4xl) var(--space-xl);
  min-height: 100vh;
}

.rule-section .section-inner {
  max-width: 1100px;
}

.section-header {
  margin-bottom: var(--space-3xl);
  position: relative;
}


/* Chapter label: number, hairline, name. No pill, no border and no
   backdrop blur (eight more blurred layers over a repainting canvas for a
   tag). Legibility on bright frames comes from a dark band whose right end
   fades to transparent: it reads as a soft strip, not a boxed pill (tune
   the 0.72 alpha below to taste; check-contrast needs it above ~0.5). It only extends left, into
   the section padding: growing it to the right would widen the page on
   phones (the horizontal scroll that check-mobile.js guards against). */
.section-header .section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: -1.5rem;
  padding: 0.4rem 2.5rem 0.4rem 1.5rem;
  background: linear-gradient(90deg, rgba(5, 5, 8, 0) 0%, rgba(5, 5, 8, 0.72) 9%, rgba(5, 5, 8, 0.72) 72%, rgba(5, 5, 8, 0) 100%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 4px 14px rgba(0, 0, 0, 0.85);
  margin-bottom: var(--space-md);
}

.section-header .label-number {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.section-header .label-number::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.section-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.section-header .section-subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  /* Sits straight on the video, so it can't afford --text-secondary's 65%:
     depending on the frame behind it, contrast landed between 3.6 and 6.8
     — either side of the 4.5:1 AA floor. The h2 above stays fully opaque
     and much larger, so the hierarchy holds. */
  /* Blanc plein : la vidéo n'a plus de voile sombre derrière (voir #canvas-overlay) */
  color: var(--text-primary);
  max-width: 500px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* ── Rule Cards (Glass Panels) ───────────────────────────────── */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.rule-card {
  /* Outer shell (double-bezel) */
  padding: 2px;
  background: linear-gradient(135deg, var(--section-border, var(--border-subtle)), transparent 60%);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rule-card-inner {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: calc(var(--radius-lg) - 2px);
  padding: var(--space-xl);
  height: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}

.rule-card-inner::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--section-accent, var(--accent));
  border-left: 2px solid var(--section-accent, var(--accent));
  opacity: 0.55;
  pointer-events: none;
}

.rule-card:hover .rule-card-inner {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--section-border, var(--border-accent));
}

/* ── Gallery Grid ────────────────────────────────────────────── */
/* Fixed 4 columns rather than auto-fit: there are 8 photos, so this
   lands them as two full rows instead of 3+3+2 with a hole at the end. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring), border-color 0.4s ease;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-expo), filter 0.6s ease;
  filter: saturate(0.94);
}

/* Rotation des photos du haut : l'ancienne photo s'efface par-dessus la nouvelle, puis disparaît
   (voir startTopRotation dans app.js). Hors du flux pour ne pas agrandir la case. */
.gallery-card img.is-leaving {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.9s ease, transform 0.6s var(--ease-out-expo), filter 0.6s ease;
}

.gallery-card::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--section-accent, var(--amber));
  border-left: 2px solid var(--section-accent, var(--amber));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 5, 8, 0.75) 100%);
  opacity: 0.6;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--section-border, var(--amber-soft));
  border-color: var(--section-border, var(--amber-soft));
}

.gallery-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.gallery-card:hover::after {
  opacity: 0.7;
}

/* Nothing previously signalled that these open a lightbox. */
.gallery-card-zoom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-primary);
  background: rgba(8, 8, 14, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.35s var(--ease-out-quart), transform 0.35s var(--ease-spring);
  pointer-events: none;
}

.gallery-card:hover .gallery-card-zoom,
.gallery-card:focus-visible .gallery-card-zoom {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Touch devices never hover, so show it permanently there instead. */
@media (hover: none) {
  .gallery-card-zoom {
    opacity: 0.85;
    transform: none;
  }
}

/* ── Mosaïque de 8 cases (repli) ────────────────────────────────
   Utilisée seulement tant qu'il y a moins de 12 photos au total (classe
   .gallery-mosaic--8, posée par app.js). Rythme : 2 hautes, 2 larges,
   4 standard, exactement 12 cellules, sans trou :

     col:   1     2     3     4
     row1  [ 1 ] [   2   ] [ 3 ]      1 et 8 = hautes (1 x 2)
     row2  [ 1 ] [   4   ] [ 8 ]      2 et 4 = larges (2 x 1)
     row3  [ 5 ] [ 6 ] [ 7 ] [ 8 ]    3, 5, 6, 7 = standard

   Sous 1025 px : grille 2 colonnes (plus bas). */
@media (min-width: 1025px) {
  .gallery-grid {
    grid-auto-rows: clamp(120px, 16.5vw, 200px);
  }

  .gallery-card {
    aspect-ratio: auto;
    height: 100%;
  }

  .gallery-mosaic--8 .gallery-card:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .gallery-mosaic--8 .gallery-card:nth-child(2) { grid-area: 1 / 2 / 2 / 4; }
  .gallery-mosaic--8 .gallery-card:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
  .gallery-mosaic--8 .gallery-card:nth-child(4) { grid-area: 2 / 2 / 3 / 4; }
  .gallery-mosaic--8 .gallery-card:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
  .gallery-mosaic--8 .gallery-card:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
  .gallery-mosaic--8 .gallery-card:nth-child(7) { grid-area: 3 / 3 / 4 / 4; }
  .gallery-mosaic--8 .gallery-card:nth-child(8) { grid-area: 2 / 4 / 4 / 5; }

  /* Wide crops lose height, so bias toward the upper third where the
     faces are instead of dead center. */
  .gallery-mosaic--8 .gallery-card:nth-child(2) img { object-position: center 30%; }
}

/* ── Mosaïque de 12 cases (« bento ») ────────────────────────────
   Grille de 6 colonnes x 4 rangées = 24 cellules, 12 photos de tailles variées :
   2 grandes carrées (2x2), 4 hautes (1x2), 3 larges (2x1) et 3 petites (1x1).
   Les deux grandes sont aux coins opposés (haut gauche, bas droite) : l'œil
   parcourt la mosaïque en diagonale.

     col:   1     2     3     4     5     6
     row1  [ A     A ] [ B     B ] [ C ] [ D ]
     row2  [ A     A ] [ E ] [ F     F ] [ D ]
     row3  [ G ] [ H     H ] [ I ] [ J     J ]
     row4  [ G ] [ K ] [ L ] [ I ] [ J     J ]

   A à L = 1re à 12e case dans le HTML. Sous 1025 px : grille 2 colonnes (plus bas). */
@media (min-width: 1025px) {
  .gallery-mosaic:not(.gallery-mosaic--8) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(96px, 11.2vw, 168px);
    gap: var(--space-md);
  }

  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }  /* A  2x2 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(2)  { grid-area: 1 / 3 / 2 / 5; }  /* B  2x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(3)  { grid-area: 1 / 5 / 2 / 6; }  /* C  1x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(4)  { grid-area: 1 / 6 / 3 / 7; }  /* D  1x2 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(5)  { grid-area: 2 / 3 / 3 / 4; }  /* E  1x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(6)  { grid-area: 2 / 4 / 3 / 6; }  /* F  2x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(7)  { grid-area: 3 / 1 / 5 / 2; }  /* G  1x2 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(8)  { grid-area: 3 / 2 / 4 / 4; }  /* H  2x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(9)  { grid-area: 3 / 4 / 5 / 5; }  /* I  1x2 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(10) { grid-area: 3 / 5 / 5 / 7; }  /* J  2x2 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(11) { grid-area: 4 / 2 / 5 / 3; }  /* K  1x1 */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(12) { grid-area: 4 / 3 / 5 / 4; }  /* L  1x1 */

  /* Cases larges : on cadre un peu plus haut, là où sont les visages */
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(2) img,
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(6) img,
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(8) img { object-position: center 30%; }
}

/* Tablette (561-1024 px) : 3 colonnes, la 1re photo en grand (2x2) et les 11 autres en carrés :
   4 + 11 = 15 cellules = 5 rangées de 3, sans trou. */
@media (min-width: 561px) and (max-width: 1024px) {
  .gallery-grid.gallery-mosaic:not(.gallery-mosaic--8) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card {
    aspect-ratio: 1 / 1;
  }

  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Téléphone (jusqu'à 560 px) : 2 colonnes (les autres grilles passent à 1 colonne), cases carrées,
   la 1re et la dernière photo en pleine largeur : 1 large + 5 rangées de 2 + 1 large, sans trou. */
@media (max-width: 560px) {
  .gallery-grid.gallery-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .gallery-mosaic .gallery-card {
    aspect-ratio: 1 / 1;
  }

  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(1),
  .gallery-mosaic:not(.gallery-mosaic--8) .gallery-card:nth-child(12) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

/* ── Gallery Lightbox ────────────────────────────────────────── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox.is-open {
  opacity: 1;
}

.gallery-lightbox-stage {
  max-width: min(1200px, 90vw);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 0.35s var(--ease-spring);
}

.gallery-lightbox.is-open .gallery-lightbox-stage {
  transform: scale(1);
}

.gallery-lightbox-stage img {
  max-width: min(1200px, 90vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: fixed;
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s var(--ease-spring), border-color 0.3s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover {
  background: var(--amber-soft);
  border-color: rgba(212, 168, 74, 0.4);
  transform: scale(1.08);
}

.gallery-lightbox-close {
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.gallery-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 1.8rem;
  line-height: 1;
}

.gallery-lightbox-nav:hover {
  transform: translateY(-50%) scale(1.08);
}

.gallery-lightbox-prev {
  left: var(--space-lg);
}

.gallery-lightbox-next {
  right: var(--space-lg);
}

.gallery-lightbox-count {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
  .gallery-lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }

  .gallery-lightbox-prev {
    left: var(--space-xs);
  }

  .gallery-lightbox-next {
    right: var(--space-xs);
  }

  .gallery-lightbox-close {
    top: var(--space-md);
    right: var(--space-md);
    width: 38px;
    height: 38px;
  }
}

.rule-card-header {
  margin-bottom: var(--space-sm);
}

.rule-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  margin-bottom: var(--space-xs);
}

.rule-card-inner h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rule-card-inner h3::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--section-accent, var(--accent));
  border-radius: 2px;
  flex-shrink: 0;
}

.rule-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-dim);
}

.rule-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rule-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.97rem;
  line-height: 1.65;
  max-width: 72ch; /* lignes de 65 à 80 caractères : plus confortable à lire, même sur les cartes pleine largeur */
  color: var(--text-secondary);
}

.rule-list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--section-accent, var(--accent));
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.75;
}

.rule-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

.rule-list a {
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rule-list a:hover {
  color: var(--text-primary);
}

/* ── Discord Live Widget (fixed corner, persistent on scroll) ── */
@keyframes discord-skel-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

.discord-widget {
  --lift: 0px;
  --scale: 1;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: fixed;
  right: var(--space-lg);
  top: 5.25rem;
  z-index: 90;
  display: block;
  width: 208px;
  padding: 0.9rem 1rem;
  background: rgba(8, 8, 14, 0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--blurple-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-16px) scale(0.92);
  transition: transform 0.6s var(--ease-spring), box-shadow 0.4s var(--ease-spring), background 0.4s ease, opacity 0.6s var(--ease-spring);
}

/* Entrance: JS adds .is-mounted a frame after load, independent of data fetch */
.discord-widget.is-mounted {
  opacity: 1;
  transform: translateY(var(--lift)) scale(var(--scale)) perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
}

.discord-widget.is-mounted:hover {
  --lift: -3px;
  --scale: 1.015;
  background: rgba(88, 101, 242, 0.18);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* Graceful fade-out when the widget API is unreachable */
.discord-widget.is-hidden {
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
  pointer-events: none;
}

.discord-widget[hidden] {
  display: none;
}

/* HUD corner bracket, matching .rule-card-inner's motif */
.discord-widget::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--blurple);
  border-left: 2px solid var(--blurple);
  opacity: 0.55;
  pointer-events: none;
}

/* Cursor-tracked sheen — light catching a metallic surface, not a color glow */
.discord-widget::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.discord-widget:hover::after {
  opacity: 1;
}

.discord-widget-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}

.discord-widget:not(.is-loading) .discord-widget-content {
  opacity: 1;
  transform: translateY(0);
}

.discord-widget-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.discord-widget-icon {
  color: var(--blurple);
  flex-shrink: 0;
}

.discord-widget-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.discord-widget-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.discord-widget-status {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.discord-widget-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #23a55a;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
  align-self: center;
}

.discord-widget-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text-primary);
}

.discord-widget-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.discord-widget-avatars {
  display: flex;
}

.discord-widget-avatars:empty {
  display: none;
}

.discord-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blurple), #4752c4);
  border: 2px solid var(--bg-deep);
  margin-left: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  color: #fff;
}

.discord-avatar:first-child {
  margin-left: 0;
}

.discord-avatar:nth-child(2) { background: linear-gradient(135deg, var(--teal), var(--blurple)); }
.discord-avatar:nth-child(3) { background: linear-gradient(135deg, var(--amber), var(--blurple)); }
.discord-avatar:nth-child(4) { background: linear-gradient(135deg, var(--emerald), var(--blurple)); }
.discord-avatar:nth-child(5) { background: linear-gradient(135deg, var(--violet), var(--blurple)); }
.discord-avatar:nth-child(6) { background: linear-gradient(135deg, var(--accent), var(--blurple)); }

.discord-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading skeleton, overlaid on the same footprint as the real content */
.discord-widget-skeleton {
  position: absolute;
  inset: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.discord-widget.is-loading .discord-widget-skeleton {
  opacity: 1;
}

.discord-widget-skel-bar {
  display: block;
  height: 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  animation: discord-skel-pulse 1.6s ease-in-out infinite;
}

.discord-widget-skel-bar--eyebrow { width: 55%; height: 0.4rem; }
.discord-widget-skel-bar--name { width: 75%; height: 0.85rem; margin-top: 0.3rem; }
.discord-widget-skel-bar--count { width: 40%; animation-delay: 0.15s; }

.discord-widget-skel-avatars {
  display: flex;
  gap: 0.3rem;
  margin-top: auto;
}

.discord-widget-skel-avatars span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: discord-skel-pulse 1.6s ease-in-out infinite;
}

.discord-widget-skel-avatars span:nth-child(2) { animation-delay: 0.15s; }
.discord-widget-skel-avatars span:nth-child(3) { animation-delay: 0.3s; }

/* On a phone the full 176px card covers half the screen width and lands
   straight on top of the hero badge and the LIFESIDE wordmark. Collapse
   it to a compact bottom-right pill: Discord mark + live member count,
   which is the part that actually earns its place. */
@media (max-width: 768px) {
  .discord-widget {
    top: auto;
    bottom: var(--space-md);
    right: var(--space-md);
    width: auto;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
  }

  /* HUD corner bracket reads as a broken edge on a pill shape */
  .discord-widget::before {
    display: none;
  }

  .discord-widget-content {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .discord-widget-eyebrow,
  .discord-widget-name,
  .discord-widget-avatars,
  .discord-widget-label {
    display: none;
  }

  .discord-widget-count {
    font-size: 1rem;
  }

  /* Too small to be worth a skeleton — show the pill straight away,
     the count fills in from "—" once the API answers. */
  .discord-widget.is-loading .discord-widget-content {
    opacity: 1;
    transform: none;
  }

  .discord-widget-skeleton {
    display: none;
  }
}

/* ── Hero Pillars (bespoke variant of .rule-card, home-grid only) ── */
#home-grid {
  counter-reset: pillar;
}

#home-grid .rule-card {
  counter-increment: pillar;
  background: linear-gradient(135deg, var(--border-accent), transparent 60%);
}

#home-grid .rule-card:nth-child(even) {
  background: linear-gradient(135deg, rgba(212, 168, 74, 0.35), transparent 60%);
}

#home-grid .rule-card-inner {
  position: relative;
  overflow: hidden;
}

#home-grid .rule-card-inner::before {
  content: counter(pillar, decimal-leading-zero);
  position: absolute;
  top: -0.28em;
  right: 0.15em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 0;
}

#home-grid .rule-card:nth-child(even) .rule-card-inner::before {
  color: rgba(212, 168, 74, 0.06);
}

#home-grid .rule-badge {
  display: none;
}

#home-grid .rule-card-header,
#home-grid .rule-card-desc,
#home-grid .rule-list {
  position: relative;
  z-index: 1;
}

#home-grid .rule-card-inner h3 {
  font-size: 1.3rem;
}

#home-grid .rule-card:nth-child(even) .rule-card-inner h3::before {
  background: var(--amber);
}

#home-grid .rule-list li::before {
  background: var(--accent);
}

#home-grid .rule-card:nth-child(even) .rule-list li::before {
  background: var(--amber);
}

/* ── Comment nous rejoindre ────────────────────────────────────
   Le parcours d'entrée. Volontairement sans bouton de connexion :
   le seul point d'action du site est la pastille dorée de la nav,
   visible en permanence sur toutes les sections. */
#rejoindre {
  --section-accent:      var(--accent);
  --section-accent-soft: var(--accent-soft);
  --section-border:      var(--border-accent);
}

.join-steps {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  max-width: 860px;
  counter-reset: none;
}

.join-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--section-accent);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s var(--ease-spring), border-color 0.4s ease;
}

.join-step:hover {
  transform: translateY(-3px);
  border-color: var(--section-border);
  border-left-color: var(--section-accent);
}

.join-step-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: #05050a;
  background: linear-gradient(135deg, #e3d6ac, var(--accent) 65%, #a8905c);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.join-step-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.join-step-body p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.join-step-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.join-step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--blurple-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(88, 101, 242, 0.4);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.join-step-link:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.join-step-arrow {
  transition: transform 0.3s var(--ease-spring);
}

.join-step-link:hover .join-step-arrow {
  transform: translateX(3px);
}

.join-prereq {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 860px;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  /* Fond sombre comme les cartes : lisible quelle que soit l'image de la vidéo derrière */
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
}

.join-prereq strong {
  color: var(--text-primary);
  font-weight: 600;
}

.join-prereq-icon {
  color: var(--accent);
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* ── Changelog (chronological, so never side-by-side) ──────────
   It inherits .rule-grid, which is a 2-column layout — fine for
   règlements, wrong for a timeline: entries would read left-to-right
   and the chronology would zigzag as more are added. */
#changelog-grid {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  gap: var(--space-md);
}

#changelog-grid > .rule-card[hidden] {
  display: none;
}

/* « Voir les X patch notes plus anciens » : sous les 3 derniers, même largeur que les cartes */
.changelog-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 760px;
  min-height: 48px;
  margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-lg);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px dashed var(--border-accent);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.changelog-more:hover,
.changelog-more:focus-visible {
  border-style: solid;
  border-color: var(--accent);
  background: var(--panel-bg, var(--bg-card));
}

.changelog-more:active {
  transform: translateY(1px);
}

/* Flèche : vers le bas quand c'est fermé, vers le haut quand c'est ouvert */
.changelog-more-icon {
  color: var(--accent);
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.changelog-more[aria-expanded="true"] .changelog-more-icon {
  transform: rotate(-90deg);
}

#changelog-grid .rule-badge {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

/* En-tête du Changelog centré, comme ses cartes. L'étiquette « 07 — Changelog »
   est pensée pour un alignement à gauche (bande qui déborde à gauche) : ici, bande
   symétrique qui s'efface des deux côtés. */
#changelog .section-header {
  text-align: center;
}

#changelog .section-header .section-label {
  margin-left: 0;
  padding: 0.4rem 2.5rem;
  background: linear-gradient(90deg, rgba(5, 5, 8, 0) 0%, rgba(5, 5, 8, 0.72) 18%, rgba(5, 5, 8, 0.72) 82%, rgba(5, 5, 8, 0) 100%);
}

#changelog .section-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Pas de numéro fantôme (01, 02...) sur les cartes, nulle part sur le site
   (règlement, accueil, changelog, entreprises). Le ::before de ces cartes ne sert qu'à ça. */
.rule-card-inner::before,
#home-grid .rule-card-inner::before {
  display: none;
}

/* ── Entreprises et groupes illégaux (accueil, remplis par le bot Discord) ──
   .section est en display:flex, qui l'emporterait sur [hidden]. */
#entreprises[hidden],
#groupes[hidden] {
  display: none;
}

#entreprises {
  --section-accent:      var(--teal);
  --section-accent-soft: var(--teal-soft);
  --section-border:      var(--teal-border);
}

/* Violet : la couleur de l'illégal sur tout le site (règlement « Illégal ») */
#groupes {
  --section-accent:      var(--violet);
  --section-accent-soft: var(--violet-soft);
  --section-border:      var(--violet-border);
}

/* .rule-grid.status-grid : doit l'emporter sur .rule-grid (2 colonnes, puis 1 sous 1024 px) */
.rule-grid.status-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}

/* « Nous sommes ouverts à toute création... » sous la liste (même encadré que .join-prereq) */
.status-open {
  max-width: none;
  margin-top: var(--space-xl);
  line-height: 1.6;
}

.status-open a {
  color: var(--section-accent-text, var(--section-accent, var(--accent)));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Titre de catégorie (« Gangs de Rue », « Motorcycle Clubs - MC »...) */
.status-group-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  margin: var(--space-xl) 0 var(--space-md);
}

.status-group-title:first-child {
  margin-top: 0;
}

.company-card .rule-card-inner {
  padding: var(--space-lg);
}

.company-card .rule-card-header {
  margin-bottom: 0;
}

.company-card .rule-card-inner h3 {
  margin-bottom: 0;
}

/* Téléphone : 2 cartes par ligne, plus compactes (sinon 12 cartes pleine largeur l'une sous l'autre) */
@media (max-width: 560px) {
  .rule-grid.status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .status-grid .rule-card-inner {
    padding: var(--space-md) var(--space-sm);
  }

  .status-grid .rule-card-inner h3 {
    font-size: 0.95rem;
    gap: 0.4rem;
    overflow-wrap: anywhere;
  }

  .status-grid .rule-badge {
    font-size: 0.58rem;
  }
}

/* Émoji de l'entreprise tel qu'écrit sur Discord (🦄 Unicorn) */
.company-emoji {
  font-size: 1.1em;
  line-height: 1;
}

/* Couleur du statut (voyant Discord) : vert = ✅, neutre et atténué = ❌, ambre = autre (🟠...) */
.company-card--ok    { --section-accent: var(--emerald); --section-border: var(--emerald-border); }
.company-card--autre { --section-accent: var(--amber);   --section-border: rgba(212, 168, 74, 0.35); }
.company-card--non   { --section-accent: var(--text-secondary); --section-border: var(--border-dim); }
.company-card--non .rule-card-inner { opacity: 0.75; } /* sur .rule-card, GSAP écraserait l'opacité */

/* ── Footer ──────────────────────────────────────────────────── */
#footer {
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  text-align: center;
  min-height: auto;
}

#footer .footer-inner {
  max-width: 700px;
  margin: 0 auto;
}

#footer h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

#footer .footer-sub {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

#footer .footer-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
}

#footer .footer-divider {
  width: 60px;
  height: 1px;
  background: var(--border-subtle);
  margin: 0 auto var(--space-xl);
}

#footer .footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  position: relative;
  isolation: isolate;
}

/* Petits liens posés sur la fin de la vidéo : halo propre à la ligne (celui du footer ne suffit pas sur un fond éclairé) */
#footer .footer-nav::before {
  content: '';
  position: absolute;
  inset: -1.25rem -6rem;
  z-index: -1;
  pointer-events: none;
  /* Zone sombre élargie à 78 % (65 % avant) : avec 9 liens, ceux des bords restaient sur la partie claire */
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 5, 8, 0.82) 0%, rgba(5, 5, 8, 0.74) 78%, rgba(5, 5, 8, 0) 100%);
}

/* Ce halo dépasse de 6rem de chaque côté : sur téléphone il sortait de l'écran et créait
   un défilement horizontal. On le coupe au bord du footer (pleine largeur : rien ne change à l'écran).
   « clip » et non « hidden » : le footer ne devient pas une zone de défilement. */
#footer {
  overflow-x: clip;
}

#footer .footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

#footer .footer-nav-link:hover {
  color: var(--text-primary);
}

#footer .footer-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--text-muted);
  transition: background 0.3s ease;
}

/* Pastille = couleur du chapitre visé (par cible et non par position : on peut ajouter un lien) */
#footer .footer-nav-link[data-target="general"] .footer-nav-dot { background: var(--teal); }
#footer .footer-nav-link[data-target="legal"] .footer-nav-dot { background: var(--accent); }
#footer .footer-nav-link[data-target="illegal"] .footer-nav-dot { background: var(--violet); }
#footer .footer-nav-link[data-target="code-penal"] .footer-nav-dot { background: var(--ruby); }
#footer .footer-nav-link[data-target="lexique"] .footer-nav-dot { background: var(--emerald); }
#footer .footer-nav-link[data-target="gallery"] .footer-nav-dot { background: var(--blurple); }
#footer .footer-nav-link[data-target="discord"] .footer-nav-dot { background: var(--amber); }
#footer .footer-nav-link[data-target="changelog"] .footer-nav-dot { background: var(--text-secondary); }
#footer .footer-nav-link[data-target="rejoindre"] .footer-nav-dot { background: var(--accent); }

#footer .footer-credits {
  font-size: 0.78rem;
  /* --text-muted (35% opacity) sits directly on the video and measured
     2.97:1 even with the scrim — under the 4.5:1 AA floor. */
  color: var(--text-secondary);
}

#footer .footer-credits a {
  color: var(--accent);
  text-decoration: none;
}

/* ── Utility: Reveal animations ──────────────────────────────── */
.reveal, .reveal-blur {
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed, .reveal-blur.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

/* ── Noise / Grain Overlay ───────────────────────────────────── */
#grain-overlay {
  display: none;
}

/* ── Grands écrans ────────────────────────────────────────────
   Les conteneurs plafonnent à 980–1200px : sur un 2560px le contenu
   n'occupait qu'environ un tiers de la largeur et flottait au milieu
   du fond vidéo. On élargit sans aller jusqu'à des lignes de texte
   trop longues (les cartes restent sur 2 colonnes). */
@media (min-width: 1800px) {
  .section-inner {
    max-width: 1440px;
  }

  .rule-section .section-inner,
  .hero-features-inner {
    max-width: 1400px;
  }

  .transition-content {
    max-width: 1180px;
  }

  .transition-text {
    max-width: 1000px;
  }

  .section-header .section-subtitle {
    max-width: 640px;
  }

  #footer .footer-inner {
    max-width: 820px;
  }

  #changelog-grid {
    max-width: 860px;
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rule-grid {
    grid-template-columns: 1fr;
  }

  /* 2 up on tablets rather than dropping straight to one full-width photo */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .transition-projections {
    grid-template-columns: 1fr;
  }

  /* Stacked: vertical filets become horizontal ones */
  .projection-card,
  .projection-card:first-child,
  .projection-card:last-child {
    padding: var(--space-md) 0;
  }

  .projection-card:first-child {
    padding-top: 0;
  }

  .projection-card:last-child {
    padding-bottom: 0;
  }

  .projection-card + .projection-card {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 768px) {
  :root {
    --space-3xl: 4rem;
    --space-4xl: 6rem;
  }

  /* Nav pill gets an explicit, viewport-aware width instead of
     shrink-wrapping its content — this is what lets the brand,
     the CTA and the hamburger all stay on-screen together, and
     gives the dropdown below a sensible width to inherit. */
  #nav {
    width: calc(100% - 2 * var(--space-lg));
    max-width: 420px;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  }

  #nav .nav-brand {
    order: 1;
    font-size: 0.82rem;
    gap: 0.4rem;
    min-width: 0;
  }

  #nav .nav-mark {
    width: 30px;
    height: 30px;
  }

  #nav .nav-cta {
    order: 2;
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
  }

  #nav .nav-links {
    display: none;
  }

  #nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    /* 44×44 touch target (was 32×32) without disturbing the
       visual hamburger, which stays centered inside via the
       span offsets below. */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  #nav-toggle span {
    left: 12px;
  }

  #nav-toggle span:nth-child(1) { top: 15px; }
  #nav-toggle span:nth-child(2) { top: 20px; }
  #nav-toggle span:nth-child(3) { top: 25px; }

  #nav-toggle.open span:nth-child(1) { top: 20px; }
  #nav-toggle.open span:nth-child(3) { top: 20px; }

  #nav.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    /* Row layout centers items; in a column that shrink-wraps each link
       to its text width. Stretch them so every row is a full-width tap
       target. */
    align-items: stretch;
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    /* Fully opaque on purpose: this panel sits outside #nav's own box,
       and a backdrop-filter nested inside an already-backdrop-filtered
       ancestor has no backdrop to sample out there — the glass look
       silently degrades to plain transparency and the white hero text
       ghosts straight through the menu. */
    background: #0a0a10;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  }

  #nav.mobile-open .nav-link {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
  }

  #hero h1 {
    font-size: clamp(2.2rem, 10vw, 4rem);
  }

  .section {
    padding: var(--space-2xl) var(--space-md);
  }

  .rule-section {
    padding: var(--space-3xl) var(--space-md);
  }

  /* Transitions stacked .section-transition + .transition-content
     padding ate up to 160px of horizontal space combined, leaving
     very little room for text on a phone screen — tighten both. */
  .section-transition {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .transition-content {
    padding: var(--space-xl) var(--space-lg);
  }

  .transition-header-row {
    gap: 0.6rem;
  }

  .transition-projections {
    margin: var(--space-lg) 0 var(--space-md);
    padding-top: var(--space-md);
  }

  .transition-quote {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.88rem;
  }

  .join-step {
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
  }

  #footer .footer-actions {
    flex-direction: column;
    align-items: center;
  }

  #footer .footer-actions .btn-primary,
  #footer .footer-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }

  #hero .hero-eyebrow {
    max-width: calc(100vw - 2 * var(--space-lg));
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .section-header h2 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .rule-card-inner {
    padding: var(--space-lg);
  }

  .section-transition {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .transition-content {
    padding: var(--space-lg) var(--space-md);
  }

  .transition-title {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
  }

  .transition-text {
    font-size: 0.95rem;
  }

  .join-step {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .join-step-num {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* Very narrow phones (older/small Android, iPhone SE 1st gen) —
   drop the brand wordmark so the nav pill never has to clip the
   join button or the hamburger to fit. */
@media (max-width: 380px) {
  #nav {
    max-width: 340px;
    padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  }

  #nav .nav-brand {
    font-size: 0;
    gap: 0;
  }

  #nav .nav-mark {
    width: 28px;
    height: 28px;
  }

  #nav .nav-cta {
    padding: 0.45rem 0.7rem;
    font-size: 0.7rem;
  }

  #nav .nav-cta .cta-arrow {
    width: 17px;
    height: 17px;
  }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal, .reveal-blur {
    opacity: 1;
    transform: none;
    filter: none;
  }

  #hero .scroll-indicator {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   REFONTE VISUELLE
   Direction : affiche de film / GTA. Titres condensés géants, hero
   aligné à gauche, formes tranchées (un seul rayon), cartes décalées,
   chapitres en panneaux cinématiques.
   Couche purement visuelle : aucune classe, aucun ID, aucun texte ni
   règle du moteur de scroll n'est touché. Le fond vidéo (#scrolltelling-
   canvas + #canvas-overlay) n'est pas modifié.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font-poster: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  --panel-bg:    rgba(7, 7, 11, 0.82);
  --hairline:    rgba(255, 255, 255, 0.12);
}

/* ── Hero : aligné à gauche, titre monumental ─────────────────── */
#hero {
  align-items: stretch;
  text-align: left;
}

.hero-splash {
  align-items: flex-start;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

#hero .hero-eyebrow {
  background: linear-gradient(90deg, rgba(5, 5, 8, 0.78), rgba(5, 5, 8, 0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 3rem 0.5rem 1rem;
  font-size: 0.75rem;
  color: #efe3bd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

#hero h1 {
  font-family: var(--font-poster);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(4.5rem, 17vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.005em;
  -webkit-text-stroke: 0;
  margin-bottom: var(--space-lg);
}

#hero h1 .hero-rp {
  justify-content: flex-start;
  font-size: 0.2em;
  letter-spacing: 0.55em;
  margin-top: 0.5em;
}

#hero h1 .hero-rp::before {
  display: none;
}

#hero .hero-sub {
  text-align: left;
  max-width: 520px;
  margin: 0 0 var(--space-xl);
}

#hero .hero-actions {
  justify-content: flex-start;
}

/* ── Titres de section : format affiche ───────────────────────── */
.section-header h2,
#footer h2 {
  font-family: var(--font-poster);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
}

.section-header {
  margin-bottom: var(--space-2xl);
}

/* ── Cartes de règles : sobres, décalées, numéro fantôme ──────── */
.rule-grid {
  align-items: start;
  counter-reset: card;
}

.rule-card {
  counter-increment: card;
  padding: 0;
  background: none;
  overflow: visible;
}

.rule-card-inner {
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--section-accent, var(--accent));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

.rule-card-inner::before {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  top: -0.12em;
  right: 0.12em;
  font-family: var(--font-poster);
  font-weight: 900;
  font-size: 7rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.rule-card-inner::after {
  display: none;
}

.rule-card-header,
.rule-card-desc,
.rule-list {
  position: relative;
  z-index: 1;
}

.rule-card-inner h3 {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.rule-card-inner h3::before {
  height: 1.05em;
}

.rule-list li::before {
  border-radius: 0;
}

/* Cartes alignées en haut (le décalage vertical a été retiré : trop bizarre avec des hauteurs différentes) */

/* Accueil : mêmes numéros que les autres grilles (le compteur de la
   grille d'accueil avait son propre nom) */
#home-grid .rule-card {
  counter-increment: card;
  background: none;
}

#home-grid .rule-card-inner::before {
  content: counter(card, decimal-leading-zero);
  top: -0.12em;
  right: 0.12em;
  font-family: var(--font-poster);
  font-weight: 900;
  font-size: 7rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

#home-grid .rule-card:nth-child(even) .rule-card-inner::before {
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 168, 74, 0.16);
}

#home-grid .rule-card-inner h3 {
  font-size: 1.7rem;
}

/* ── Chapitres : panneau cinématique, numéro monumental ───────── */
.section-transition {
  min-height: 80vh;
}

.transition-content {
  max-width: 1180px;
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  background: linear-gradient(100deg, rgba(6, 6, 10, 0.80) 0%, rgba(6, 6, 10, 0.68) 62%, rgba(6, 6, 10, 0.30) 100%);
  border: 0;
  border-left: 4px solid var(--section-accent, var(--accent));
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.transition-content::after {
  display: none;
}

.transition-header-row {
  align-items: flex-end;
  margin-bottom: 0;
}

.transition-number {
  font-family: var(--font-poster);
  font-weight: 900;
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: 0.78;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 2px var(--section-accent, var(--accent));
  text-shadow: none;
  opacity: 1;
}

.transition-badge {
  padding-bottom: 0.6rem;
}

.transition-title {
  font-family: var(--font-poster);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: var(--space-md) 0 var(--space-lg);
}

.transition-text {
  max-width: 780px;
}

.transition-quote {
  margin-top: var(--space-lg);
  padding: var(--space-md) 0 0;
  background: none;
  border-left: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 300;
  gap: var(--space-sm);
  align-items: flex-start;
}

.transition-quote-icon {
  font-size: 1.7rem;
}

/* ── Boutons : rectangulaires, coupe nette ─────────────────────── */
.btn-primary,
.btn-secondary {
  padding: 1.05rem 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

/* ── Galerie ──────────────────────────────────────────────────── */
.gallery-card {
  border-color: var(--hairline);
}

/* ── Comment nous rejoindre : liste éditoriale sur panneau ─────── */
.join-steps {
  max-width: 1000px;
  gap: 0;
  padding: 0 var(--space-xl);
  background: var(--panel-bg);
  border-left: 4px solid var(--accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.join-step {
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.join-step:first-child {
  border-top: 0;
}

.join-step:hover {
  transform: none;
}

.join-step-num {
  width: auto;
  height: auto;
  min-width: 1.1ch;
  font-family: var(--font-poster);
  font-weight: 900;
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.join-step-body h3 {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.join-step-body p {
  font-size: 0.98rem;
  max-width: 62ch;
}

/* ── Footer ───────────────────────────────────────────────────── */
#footer .footer-inner {
  max-width: 900px;
  position: relative;
  isolation: isolate;
}

/* Même halo que derrière les titres de section : le bas de page reste lisible
   sur les scènes claires, sans assombrir toute la vidéo */
#footer .footer-inner::before {
  content: '';
  position: absolute;
  inset: -3rem -1rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5, 5, 8, 0.6) 0%, rgba(5, 5, 8, 0.35) 55%, rgba(5, 5, 8, 0) 100%);
}

#footer h2 {
  font-size: clamp(3.4rem, 10vw, 8.5rem);
  line-height: 0.86;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero {
    padding: 0 var(--space-md) var(--space-3xl);
  }

  #hero h1 {
    font-size: clamp(4rem, 21vw, 7rem);
  }

  .section-header h2 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .transition-content {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .transition-title {
    font-size: clamp(2.2rem, 10.5vw, 3.4rem);
  }

  .transition-number {
    font-size: clamp(4.5rem, 22vw, 7rem);
  }

  .rule-card-inner::before,
  #home-grid .rule-card-inner::before {
    font-size: 5rem;
  }

  .join-steps {
    padding: 0 var(--space-md);
  }

  .join-step {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg) 0;
  }

  .join-step-num {
    font-size: 4rem;
  }

  #footer h2 {
    font-size: clamp(3rem, 15vw, 5rem);
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: clamp(3.6rem, 22vw, 5.4rem);
  }

  .section-header h2 {
    font-size: clamp(2.4rem, 12.5vw, 3.2rem);
  }

  .transition-title {
    font-size: clamp(2rem, 10.5vw, 2.8rem);
  }

  .transition-content {
    padding: var(--space-lg) var(--space-md);
  }

  .rule-card-inner h3,
  #home-grid .rule-card-inner h3 {
    font-size: 1.45rem;
  }
}

/* Ajustements mobiles du hero */
@media (max-width: 768px) {
  #hero h1 {
    font-size: clamp(4.5rem, 27vw, 8rem);
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: clamp(4rem, 27vw, 6.5rem);
  }

  #hero .hero-eyebrow {
    justify-content: flex-start;
    text-align: left;
    padding-right: 1rem;
  }
}

/* ── Rythme de scroll ───────────────────────────────────────────
   La vidéo de fond se déroule sur TOUTE la hauteur de la page : plus
   la page est haute, plus il faut scroller pour avancer d'une image,
   donc plus la vidéo semble lente. --scroll-air ajoute de l'espace
   (fond visible, sans contenu) autour de chaque section de règles,
   et les chapitres deviennent plus hauts. Augmente les valeurs pour
   ralentir encore la vidéo, diminue-les pour l'accélérer. Le moteur
   de scroll (app.js) n'est pas concerné : il s'adapte à la hauteur. */
:root {
  --scroll-air: 26vh;
}

.section-transition {
  min-height: 140vh;
}

.rule-section {
  padding-top: calc(var(--space-4xl) + var(--scroll-air));
  padding-bottom: calc(var(--space-4xl) + var(--scroll-air));
}

/* Accueil : sa vidéo (16 s) est plus longue que la vidéo commune (12 s) et la page
   est courte, donc plus d'air pour qu'elle ne défile pas trop vite. */
body[data-page="accueil"] {
  --scroll-air: 68vh;
}

body[data-page="accueil"] .hero-features-inner {
  margin-top: 60vh;
}

body[data-page="accueil"] #hero {
  padding-bottom: calc(var(--space-4xl) + 38vh);
}

/* ── Débuter : bloc centré sur la page ─────────────────────────── */
#rejoindre .section-header,
#rejoindre .join-steps,
#rejoindre .join-prereq {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Lexique : 2 cartes de même hauteur + la 3e sur toute la largeur ── */
@media (min-width: 1025px) {
  #lexique-grid {
    align-items: stretch;
  }

  #lexique-grid .rule-card,
  #lexique-grid .rule-card-inner {
    height: 100%;
  }

  #lexique-grid .rule-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  #lexique-grid .rule-card:nth-child(3) .rule-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl);
  }

  #lexique-grid .rule-card:nth-child(3) .rule-list li:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Galerie : photos des joueurs (grille régulière sous la mosaïque) ── */
/* ── Albums des joueurs (par mois) ─────────────────────────────── */
.gallery-albums[hidden],
.gallery-album-grid[hidden],
.gallery-month[hidden] {
  display: none;
}

.gallery-albums {
  margin-top: var(--space-2xl);
}

.gallery-albums-title,
.gallery-month-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.gallery-albums-title {
  margin-bottom: var(--space-md);
}

.gallery-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}

/* Un album = un dossier : photo de couverture + nom du mois + nombre de photos */
.gallery-album {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--hairline, var(--border-subtle));
  border-top: 2px solid var(--section-accent, var(--accent));
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s var(--ease-spring), border-color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

.gallery-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}

.gallery-album:hover,
.gallery-album:focus-visible {
  transform: translateY(-4px);
}

.gallery-album:hover img {
  transform: scale(1.05);
}

.gallery-album:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery-album-label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  text-align: left;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.92), rgba(5, 5, 8, 0.6) 60%, transparent);
}

.gallery-album-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.gallery-album-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--section-accent, var(--accent));
}

/* Mois ouvert : bouton retour + grille de miniatures */
.gallery-month-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}

.gallery-month-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease;
}

.gallery-month-back:hover,
.gallery-month-back:focus-visible {
  border-color: var(--section-accent, var(--accent));
}

/* Miniatures : 2 par ligne même sur téléphone (la grille de base passe à 1) */
@media (max-width: 560px) {
  .gallery-live {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

@media (min-width: 1025px) {
  .gallery-live {
    grid-auto-rows: auto;
  }

  /* annule la mosaïque des 8 premières photos (nth-child) pour cette grille */
  .gallery-live .gallery-card:nth-child(n) {
    grid-area: auto;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .gallery-live .gallery-card:nth-child(n) img {
    object-position: center;
  }
}

/* Visionneuse : boutons et compteur toujours AU-DESSUS de l'image
   (sur téléphone l'image couvre presque toute la largeur et bloquait les flèches) */
.gallery-lightbox-close,
.gallery-lightbox-nav,
.gallery-lightbox-count {
  z-index: 2;
}

/* Téléphone : l'indicateur « Découvrir » chevauchait le bouton « Notre Discord » ; le défilement au doigt
   se suffit à lui-même, on le masque sous 768 px. */
@media (max-width: 768px) {
  #hero .scroll-indicator { display: none; }
}

/* Info-bulle du menu : au survol (ou au focus clavier) d'un lien, liste ce que contient la page.
   Purement informative : pointer-events: none, on ne peut pas cliquer dedans. Masquée sur tactile. */
#nav .nav-item { position: relative; }

#nav .nav-tip {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 190px;
  padding: 0.75rem 0.9rem 0.8rem;
  background: rgba(14, 14, 20, 0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out-expo), visibility 0s linear 0.22s;
  pointer-events: none;
  z-index: 2;
}

#nav .nav-tip-title {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

#nav .nav-tip ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }

#nav .nav-tip li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-primary);
  white-space: nowrap;
}

#nav .nav-tip li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.8;
}

@media (hover: hover) and (min-width: 769px) {
  #nav .nav-item:hover .nav-tip,
  #nav .nav-item:focus-within .nav-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0.12s, 0.12s, 0.12s; /* petit délai : pas d'apparition en passant la souris */
  }
}

@media (max-width: 768px), (hover: none) {
  #nav .nav-tip { display: none; }
}

/* ── Weazel News (communauté, rempli par le bot Discord) ─────────────────
   Rouge journal. .section est en display:flex, qui l'emporterait sur [hidden]. */
#weazel[hidden] { display: none; }

#weazel {
  --section-accent:      #e0565b;
  --section-accent-soft: rgba(224, 86, 91, 0.15);
  --section-border:      rgba(224, 86, 91, 0.38);
}

.weazel-layout {
  display: grid;
  grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.weazel-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.weazel-item[hidden] { display: none; }

/* Pages de journal : portrait, on montre le haut de la page (la « une ») */
.weazel-item .gallery-card { aspect-ratio: 3 / 4; }
.weazel-item .gallery-card img { object-fit: cover; object-position: top center; }

.weazel-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0 0.1rem;
}

.weazel-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--section-accent);
}

.weazel-headline {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  text-wrap: balance;
}

.weazel-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.weazel-item--latest .weazel-label { font-size: 0.78rem; }
.weazel-item--latest .weazel-headline { font-size: 1.05rem; }
.weazel-item--latest .weazel-meta { font-size: 0.85rem; }

.weazel-archive-title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.weazel-archive-title[hidden] { display: none; }

.weazel-archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--space-md);
}

.weazel-more { max-width: none; }

@media (max-width: 900px) {
  .weazel-layout { grid-template-columns: minmax(0, 1fr); }
  .weazel-item--latest { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .weazel-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
}

/* Légendes et titre de l'archive : posés sur la vidéo de fond, donc sur un fond sombre pour rester lisibles */
.weazel-item figcaption {
  padding: 0.55rem 0.7rem 0.6rem;
  background: rgba(10, 10, 16, 0.78);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.weazel-archive-title {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  background: rgba(10, 10, 16, 0.78);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}

/* Weazel : rouge éclairci pour le texte (le rouge d'origine reste pour les filets et les bordures) */
.weazel-label { color: #ff8a8f; }
.weazel-item figcaption { background: rgba(10, 10, 16, 0.88); }

/* Liens du pied de page : un peu plus clairs (le contraste mesuré flottait autour du seuil de 4,5:1 selon l'image du fond) */
#footer .footer-nav-link { color: rgba(240, 240, 245, 0.9); }

/* Accueil : le journal Weazel News est dans le hero, sous le titre. L'espace de 60vh qui laisse voir la vidéo
   passe au journal ; la grille « Découverte » qui le suit reprend un espace normal. */
body[data-page="accueil"] #weazel {
  margin-top: 60vh;
  align-self: stretch;
}

body[data-page="accueil"] #weazel:not([hidden]) ~ .hero-features-inner {
  margin-top: var(--space-2xl);
}

/* Le journal est un simple bloc du hero (comme la grille Découverte), pas une section : l'espace sous le titre
   est porté par le bloc extérieur, pas par son contenu. */
body[data-page="accueil"] #weazel .hero-features-inner {
  margin-top: 0;
}

/* ── Code pénal (règlement, rempli depuis le Google Doc du staff par le bot) ─────
   Même présentation que la page de partage (artifact) : bandeau, préambule à déplier, onglets, lignes d'articles.
   La liste garde une hauteur fixe et défile à l'intérieur (data-lenis-prevent) : la hauteur de la page,
   qui règle la vitesse de la vidéo de fond, ne change pas quand on change d'onglet ou qu'on cherche. */
:root {
  --ruby: #d98a8a;
}

#code-penal, .chapter-codepenal {
  --section-accent:      var(--ruby);
  --section-accent-soft: rgba(217, 138, 138, 0.14);
  --section-border:      rgba(217, 138, 138, 0.40);
}

/* Texte lu par les lecteurs d'écran seulement */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cp-viewer {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--panel-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Bandeau : la silhouette du policier (vidéo du règlement), le titre à gauche */
.cp-band {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background:
    linear-gradient(90deg, rgba(7, 7, 11, 0.94) 0%, rgba(7, 7, 11, 0.78) 45%, rgba(7, 7, 11, 0.25) 100%),
    linear-gradient(0deg, rgba(7, 7, 11, 0.85) 0%, rgba(7, 7, 11, 0) 45%),
    url('../assets/code-penal-bandeau.webp') 70% 35% / cover no-repeat,
    var(--bg-void);
  border-bottom: 2px solid var(--section-accent);
}

.cp-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--section-accent);
}

.cp-cover-title {
  font-family: var(--font-poster);
  font-weight: 900;
  font-size: clamp(3.4rem, 10vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.cp-byline {
  max-width: 58ch;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cp-byline:empty { display: none; }

.cp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0;
  list-style: none;
}

.cp-meta:empty { display: none; }

.cp-meta li {
  padding: 0.3rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(7, 7, 11, 0.55);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}

/* Préambule à déplier (seul élément qui change la hauteur de la page : ScrollTrigger se recale) */
.cp-preamble { border-bottom: 1px solid var(--hairline); }
.cp-preamble[hidden] { display: none; }

.cp-preamble summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem var(--space-lg);
  font-weight: 500;
  color: var(--text-primary);
  list-style: none;
  cursor: pointer;
}

.cp-preamble summary::-webkit-details-marker { display: none; }

.cp-preamble summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--section-accent);
  border-bottom: 2px solid var(--section-accent);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.cp-preamble[open] summary::before { transform: rotate(45deg); }

.cp-preamble summary:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: -2px;
}

.cp-preamble-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 var(--space-lg) var(--space-md) calc(var(--space-lg) + 1.05rem);
}

.cp-preamble-text p {
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Recherche et onglets */
.cp-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--space-md) var(--space-lg) 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.cp-toolbar[hidden] { display: none; }

.cp-search {
  position: relative;
  display: block;
}

.cp-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--section-accent);
  pointer-events: none;
}

.cp-search input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease;
}

.cp-search input::placeholder { color: var(--text-secondary); }
.cp-search input:focus { border-color: var(--section-accent); }

.cp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cp-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cp-tab:hover {
  color: var(--text-primary);
  border-color: var(--section-border);
}

.cp-tab[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--section-accent-soft);
  border-color: var(--section-accent);
}

.cp-tab-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--section-accent);
  font-variant-numeric: tabular-nums;
}

/* Liste des articles : hauteur fixe, défile à l'intérieur */
.cp-list {
  height: min(64vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem var(--space-lg) var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--section-border) transparent;
}

.cp-list::-webkit-scrollbar-track { background: transparent; }
.cp-list::-webkit-scrollbar-thumb { background: var(--section-border); }

.cp-book-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.cp-book-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section-accent);
}

.cp-book-title {
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.cp-book-intro {
  max-width: 68ch;
  margin-top: 0.25rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.cp-empty {
  max-width: 68ch;
  padding-top: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.cp-results-count {
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.cp-article { border-bottom: 1px solid var(--border-dim); }

.cp-article summary {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 13px 8px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.cp-article summary::-webkit-details-marker { display: none; }
.cp-article summary:hover { background: rgba(255, 255, 255, 0.035); }

.cp-article summary:focus-visible {
  outline: 2px solid var(--section-accent);
  outline-offset: -2px;
}

.cp-art-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--section-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cp-art-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cp-art-book {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.cp-art-title {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.cp-article[open] .cp-art-title { color: var(--section-accent); }

.cp-art-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.cp-tag {
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}

.cp-tag--fine {
  max-width: 18rem;
  color: var(--accent);
  border-color: var(--border-accent);
  white-space: normal;
  text-align: right;
}

.cp-tag--time {
  color: var(--section-accent);
  border-color: var(--section-border);
}

.cp-tag-unit { color: var(--text-secondary); }

.cp-art-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 16px calc(4.6rem + 24px);
}

.cp-art-body p {
  max-width: 68ch;
  line-height: 1.7;
  color: var(--text-secondary);
}

.cp-source {
  padding: 0.8rem var(--space-lg);
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cp-source a {
  color: var(--section-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-source a:hover { color: var(--text-primary); }

@media (max-width: 768px) {
  .cp-band,
  .cp-preamble summary,
  .cp-toolbar,
  .cp-list,
  .cp-source {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .cp-band { background-position: 0 0, 0 0, 78% 30%, 0 0; }

  .cp-preamble-text { padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 1.05rem); }

  .cp-list { height: 62vh; }

  /* Onglets sur une ligne qui défile sur le côté ; le fondu à droite le montre */
  .cp-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .cp-tabs::-webkit-scrollbar { display: none; }

  /* Numéro à gauche (largeur fixe : les titres restent alignés), titre à droite, étiquettes dessous */
  .cp-article summary {
    grid-template-columns: 4.1rem minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
  }

  .cp-art-num { padding-top: 3px; }

  .cp-art-tags {
    grid-column: 2;
    justify-content: flex-start;
  }

  .cp-tag--fine { text-align: left; }

  .cp-art-body { padding-left: calc(4.1rem + 18px); }
}