/*
  site.css — layout et composants du site vitrine.
  Mobile-first partout SAUF le hero, qui est le seul endroit trippant/chargé.
  Le reste du site reste sobre : palette + un motif décoratif en séparateur.
*/

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ==========================================================================
   HALO ATMOSPHÉRIQUE — deux calques fixes en fond de page (hors hero) qui
   se fondent l'un dans l'autre selon la section visible (voir
   initAmbientHalo() dans site.js), et dansent en continu l'un autour de
   l'autre comme une double hélice (@keyframes halo-helix-a/b) — un
   mouvement lent et discret, jamais un déplacement franc.

   Chaque calque est nettement plus grand que le viewport (inset négatif) :
   comme la danse le déplace légèrement, il faut cette marge pour qu'aucun
   bord du calque ne devienne jamais visible (sans ça, on voit le
   dégradé se faire "couper" net pendant le mouvement).
   ========================================================================== */
.ambient-halo {
  position: fixed;
  inset: -15vh -15vw;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.ambient-halo.is-active { opacity: 1; }

#ambient-halo-a { animation: halo-helix-a 46s ease-in-out infinite; }
#ambient-halo-b { animation: halo-helix-b 46s ease-in-out infinite; }

/* Deux orbites elliptiques en opposition de phase — le même mouvement,
   décalé, donne l'impression de deux brins qui s'enroulent l'un autour
   de l'autre plutôt que deux calques qui dérivent au hasard. */
@keyframes halo-helix-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1.5vw, -1.2vh); }
  50%  { transform: translate(0, -2.4vh); }
  75%  { transform: translate(-1.5vw, -1.2vh); }
  100% { transform: translate(0, 0); }
}
@keyframes halo-helix-b {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5vw, 1.2vh); }
  50%  { transform: translate(0, 2.4vh); }
  75%  { transform: translate(1.5vw, 1.2vh); }
  100% { transform: translate(0, 0); }
}


.halo-manifeste {
  background:
    radial-gradient(ellipse at 22% 15%, rgba(201, 123, 135, .16), transparent 35%),
    radial-gradient(ellipse at 78% 30%, rgba(232, 169, 17, .06), transparent 25%),
    radial-gradient(ellipse at 50% 95%, rgba(29, 117, 154, .14), transparent 40%);
}
.halo-programmation {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(87, 71, 93, .18), transparent 35%),
    radial-gradient(ellipse at 80% 30%, rgba(4, 125, 255, .09), transparent 28%),
    radial-gradient(ellipse at 50% 95%, rgba(242, 68, 5, .10), transparent 40%);
}
.halo-espaces {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(242, 183, 7, .09), transparent 32%),
    radial-gradient(ellipse at 80% 25%, rgba(4, 125, 255, .10), transparent 28%),
    radial-gradient(ellipse at 50% 95%, rgba(82, 73, 140, .16), transparent 40%);
}
.halo-comment-se-rendre {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(183, 77, 22, .13), transparent 35%),
    radial-gradient(ellipse at 75% 25%, rgba(66, 92, 57, .10), transparent 28%),
    radial-gradient(ellipse at 50% 90%, rgba(29, 117, 154, .12), transparent 40%);
}
.halo-faq {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(66, 92, 57, .12), transparent 32%),
    radial-gradient(ellipse at 75% 30%, rgba(213, 203, 223, .06), transparent 25%),
    radial-gradient(ellipse at 50% 92%, rgba(29, 117, 154, .10), transparent 40%);
}
.halo-accessibilite,
.halo-contact {
  background:
    radial-gradient(ellipse at 22% 15%, rgba(201, 123, 135, .12), transparent 35%),
    radial-gradient(ellipse at 78% 30%, rgba(232, 169, 17, .05), transparent 25%),
    radial-gradient(ellipse at 50% 95%, rgba(29, 117, 154, .13), transparent 40%);
}

@media (prefers-reduced-motion: reduce) {
  .ambient-halo { transition-duration: 0.01ms; }
  #ambient-halo-a,
  #ambient-halo-b {
    animation: none;
  }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
}

h2 { font-size: clamp(28px, 5vw, 42px); }

p { margin: 0 0 var(--space-2); color: var(--ink); }

a { color: var(--moon); }
a:hover { color: var(--pink-bright); }

/* Reveal au scroll — appliqué via JS (site.js) aux sections et cartes
   d'espaces. Fondu + léger décalage vers le haut, rien de plus. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

section {
  padding: var(--space-5) var(--space-2);
  max-width: var(--wide-width);
  margin: 0 auto;
}

section > .inner {
  max-width: var(--content-width);
}

section.wide > .inner { max-width: var(--wide-width); }

/* ==========================================================================
   PLACEHOLDER — asset manquant : boîte visible tant que le fichier réel
   n'est pas déposé au chemin indiqué. Retirer .placeholder une fois l'image
   en place ne casse rien : c'est un état purement visuel, pas fonctionnel.
   ========================================================================== */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line);
  background: var(--bg-panel);
  color: var(--ink-muted);
  font-family: var(--font-label);
  font-size: 11.5px;
  line-height: 1.5;
  padding: var(--space-2);
}

/* ==========================================================================
   HERO — seul endroit avec parallax + registre maximaliste.
   3 calques : ciel/lune (fond), bordures latérales, logo.
   ========================================================================== */
#hero {
  /* taille réelle affichée de la lune : réduite de moitié par rapport à
     l'original (--moon-w-full), qui sert uniquement de référence pour
     conserver le même décalage vertical (en pixels) qu'avant la réduction. */
  --moon-w-full: min(760px, 80vw);
  --moon-h-full: calc(var(--moon-w-full) * 0.4931); /* ratio réel 998/2024 */
  --moon-w: calc(var(--moon-w-full) / 2);
  --moon-h: calc(var(--moon-h-full) / 2);
  /* la lune est décalée vers le haut (voir .hero-sky) : décalage calculé sur
     la taille d'origine (--moon-h-full) pour rester identique en pixels
     malgré la réduction de taille. */
  --moon-offset: calc(-0.4 * var(--moon-h-full));
  --moon-visible-h: calc(var(--moon-h) * 0.6);
  /* largeur des bordures (voir .hero-border) : dérivée du ratio réel de
     CHAQUE illustration (elles ne sont pas identiques) appliqué à la
     hauteur du hero, sans plafond arbitraire — les bordures sont fines,
     donc à cette largeur exacte elles ne rognent jamais l'image, même en
     portrait mobile. .hero-content s'appuie sur la plus large des deux
     pour garder le logo à distance d'elles. */
  --border-w-l: calc(100svh * 1807 / 9090);
  --border-w-r: calc(100svh * 1705 / 9090);
  --border-w: max(var(--border-w-l), var(--border-w-r));
  position: relative;
  min-height: 100svh;
  max-width: none;
  /* un peu d'air sous les bordures avant que la section suivante commence */
  padding: 0 0 var(--space-3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* fond unique du hero, identique desktop/mobile (voir .hero-sky, qui ne
     porte plus que la lune — le dégradé mauve/bleu a été retiré pour que
     rien ne recouvre cette couleur) */
  background: #05142b;
}

/* grain discret sur tout le hero — technique feTurbulence + feColorMatrix
   (désature le bruit pour un grain gris propre plutôt que coloré, voir
   https://css-tricks.com/grainy-gradients/), posé en mix-blend-mode pour
   s'intégrer au fond sans l'assombrir ni gêner la lecture du texte. */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im5vaXNlIi8+PGZlQ29sb3JNYXRyaXggaW49Im5vaXNlIiB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+');
  background-size: 200px 200px;
}

.hero-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero-sky {
  background-image: url('../img/lune-hero.png');
  background-repeat: no-repeat;
  background-size: var(--moon-w) var(--moon-h);
  /* décale la lune vers le haut (hors cadre), voir --moon-offset */
  background-position: center var(--moon-offset);
}

.hero-border {
  top: 0;
  bottom: 0;
  /* Aucun padding : la boîte colle au bord du hero. Sa largeur (voir
     --border-w-l/-r ci-dessus) correspond exactement au ratio réel de SON
     image pour une hauteur de 100% — donc ni vide sous l'image, ni
     rognage, y compris en portrait mobile étroit. */
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: 0.9;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 28px rgba(0, 0, 0, 0.4));
}
/* bordure soleil : illustration dédiée, ancrée au bord gauche */
.hero-border-left {
  left: 0;
  right: auto;
  width: var(--border-w-l);
  background-image: url('../img/hero_border_L.png');
  background-position: top left;
}
/* bordure lune : illustration dédiée (pas un miroir de la gauche), ancrée au bord droit */
.hero-border-right {
  left: auto;
  right: 0;
  width: var(--border-w-r);
  background-image: url('../img/hero_border_R.png');
  background-position: top right;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  text-align: center;
  /* padding horizontal : au moins 20% (desktop), ou la largeur des
     bordures + une marge de respiration si celles-ci sont plus larges
     (portrait mobile, où elles s'élargissent avec la hauteur) */
  padding: var(--space-3) max(20%, calc(var(--border-w) + var(--space-3)));
  color: var(--ink);
  /* centré verticalement dans le hero (voir #hero align-items: center),
     puis remonté légèrement pour rester un peu au-dessus du centre. */
  transform: translateY(-8svh);
}

.hero-logo {
  max-width: min(420px, 100%);
  margin: 0 auto var(--space-3);
  display: block;
  /* halo doré (--moutarde) autour du tracé du logo — pas une boîte :
     drop-shadow suit la forme réelle, transparence comprise */
  filter:
    drop-shadow(0 0 18px rgba(217, 164, 65, 0.55))
    drop-shadow(0 0 46px rgba(217, 164, 65, 0.35));
}
/* [À REMPLIR : img/nuitphilo_logo.png doit être fourni déjà à l'endroit —
   pas de rotation appliquée côté code. Si le fichier livré est tourné,
   corriger l'orientation à la source (export) plutôt qu'en CSS.] */

.hero-meta {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moon);
  margin-bottom: var(--space-1);
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

/* seconde ligne, plus discrète — descendue sous l'accroche principale */
.hero-subtagline {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}

/* point fixe presque en bas du hero, indépendant de la hauteur du texte
   au-dessus (voir index.html : sorti de .hero-content) */
.hero-cta-row {
  position: absolute;
  left: 50%;
  /* aligné sur le point où l'orangé de la bordure démarre en remontant
     depuis le bas (mesuré sur les deux images : ~24% de leur hauteur),
     ajusté un peu plus bas au jugé */
  bottom: 20%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-owl {
  width: 64px;
  height: auto;
  flex: none;
}
/* chouette de gauche retournée pour regarder vers le bouton, comme celle
   de droite */
.hero-owl:first-child { transform: scaleX(-1); }

.cta {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid var(--moutarde);
  border-radius: var(--radius);
  color: var(--moutarde);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.cta:hover { background: var(--moutarde); color: var(--bleu-nuit); }

/* ==========================================================================
   HERO — mobile : les bordures restent pleine hauteur, telles quelles —
   juste très légèrement étirées (5% max) pour grappiller un peu de
   largeur. Le texte n'est plus repoussé en dehors d'elles : il chevauche
   volontairement leur moitié intérieure (padding = moitié de leur
   largeur), pour une composition plus dense plutôt que deux colonnes
   strictement séparées. La lune remontée hors cadre est redescendue en
   bas ; le logo remonte légèrement au-dessus du centre.
   ========================================================================== */
@media (max-width: 719px) {
  #hero {
    --border-w-l: calc(100svh * 1807 / 9090 * 0.95);
    --border-w-r: calc(100svh * 1705 / 9090 * 0.95);
  }

  /* étirement horizontal 5% max : l'illustration complète reste visible
     (pas de rognage), juste un chouïa resserrée plutôt qu'à son ratio réel */
  .hero-border { background-size: 100% 100%; }

  /* la lune reprend le même traitement qu'en desktop : remontée hors
     cadre, seul son bord inférieur dépasse en haut du hero (voir la
     règle de base .hero-sky, plus de surcharge ici). */

  .hero-content {
    /* padding = moitié de la largeur des bordures : le texte chevauche
       volontairement leur moitié intérieure au lieu de s'arrêter avant */
    padding: var(--space-3) calc(var(--border-w) / 2) var(--space-5);
    text-align: center;
    /* logo/contenu légèrement au-dessus du centre vertical (moins qu'avant :
       le logo peut redescendre un peu) */
    transform: translateY(-3svh);
  }

  /* ×1.5 par rapport aux 220px/65% initiaux, à l'essai */
  .hero-logo {
    max-width: min(330px, 97.5%);
    margin-top: var(--space-2);
  }

  .hero-meta { font-size: 12px; }

  .hero-tagline {
    font-size: 17px;
    margin-bottom: var(--space-1);
  }

  .hero-subtagline { font-size: 12px; }

  .hero-cta-row { gap: var(--space-1); }
  .hero-owl { width: 44px; }
  .cta { padding: 10px 20px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-layer { transform: none !important; }
}

/* ==========================================================================
   SÉPARATEUR DE SECTION — motif géométrique répétable, seul élément
   décoratif hors du hero.
   ========================================================================== */
.section-divider {
  height: 28px;
  max-width: none;
  padding: 0;
  background: url('../img/aztek_texture.png') repeat-x center / auto 28px;
}

/* ==========================================================================
   PROGRAMMATION — liste générée par assets/js/programmation.js depuis la
   table Supabase `events` (source unique de vérité, partagée avec
   horaire/index.html). Mise à jour en direct via Supabase Realtime.
   ========================================================================== */
#programmation {
  text-align: center;
}
#programmation .inner { margin: 0 auto; }

.programmation-status {
  color: var(--ink-muted);
  font-family: var(--font-label);
  font-size: 13px;
}

/* Flux 100% vertical — identique sur mobile et desktop, jamais de scroll
   horizontal. Une rangée par heure (18h→05h, toujours les 12, même vides)
   pour qu'on voie où on se situe dans la nuit ; les événements de cette
   heure sont listés en dessous, dans l'ordre chronologique. */
.programmation-list {
  display: flex;
  flex-direction: column;
  max-width: var(--content-width);
  margin: var(--space-3) auto 0;
  text-align: left;
}

.prog-hour-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-soft);
}
.prog-hour-row:first-child { border-top: 1px solid var(--line); }

.prog-hour-label {
  flex: 0 0 auto;
  width: 3em;
  padding-top: 2px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--moon);
}

.prog-hour-events {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prog-item {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--moon));
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.prog-time {
  flex: 0 0 auto;
  min-width: 3.5em;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--accent, var(--moon));
}

.prog-body { flex: 1 1 auto; min-width: 0; }

.prog-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
}

.prog-title-icon {
  height: 1.3em;
  width: auto;
  vertical-align: -0.3em;
  margin-left: 6px;
}

.prog-people {
  font-family: var(--font-body);
  color: var(--ink-muted);
  margin: 0 0 4px;
}

.prog-space {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, var(--ink-muted));
  margin: 0;
}

.prog-empty {
  color: var(--ink-muted);
  font-family: var(--font-label);
  font-size: 13px;
  opacity: 0.5;
  margin: 0;
}

.prog-item.has-description {
  cursor: pointer;
  transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}
.prog-item.has-description:hover,
.prog-item.has-description:focus-visible {
  border-left-color: var(--pink-bright);
  box-shadow: -2px 3px 0 0 rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   FICHE ÉVÉNEMENT — modale ouverte au clic sur un événement de la
   programmation ayant une description. Seule modale du site public ;
   backdrop-filter animé (flou qui monte à l'ouverture).
   ========================================================================== */
/* Empêche l'arrière-plan de scroller pendant que la fiche est ouverte —
   souris, trackpad, flèches ou molette. On applique overflow:hidden à
   la fois sur html et body (nécessaire selon les navigateurs) sans
   toucher à la position : la page reste gelée exactement où elle est,
   pas de saut visuel à l'ouverture ni à la fermeture. */
html.modal-open,
html.modal-open body {
  overflow: hidden;
}

.event-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: rgba(4, 7, 15, 0.78);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, visibility 0s linear 0.3s;
}
.event-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.event-modal {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--pink));
  border-radius: var(--radius);
  padding: var(--space-3);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.event-modal-backdrop.is-open .event-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.event-modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  border: none;
  background: none;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}
.event-modal-close:hover,
.event-modal-close:focus-visible {
  color: var(--pink-bright);
}

.event-modal-space {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, var(--ink-muted));
  margin: 0 var(--space-4) var(--space-1) 0;
}

.event-modal-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 4px;
}

.event-modal-time {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--accent, var(--moon));
  margin: 0 0 4px;
}

.event-modal-people {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.event-modal-description-wrap {
  position: relative;
  overflow: hidden;
}

.event-modal-description {
  max-height: 40vh;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
}

/* Fondu indiquant qu'il reste du texte à faire défiler ; masqué en JS
   (classe .no-overflow) une fois le texte entièrement visible ou le
   défilement arrivé en bas. */
.event-modal-description-wrap::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-panel));
  opacity: 1;
  transition: opacity 0.2s ease;
}
.event-modal-description-wrap.no-overflow::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .event-modal-backdrop,
  .event-modal-backdrop.is-open,
  .event-modal,
  .event-modal-backdrop.is-open .event-modal {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   LES QUATRE ESPACES
   ========================================================================== */
#espaces .inner { max-width: var(--wide-width); }

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (min-width: 720px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

.espace-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--pink));
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: var(--space-3);
  /* une carte ne ressemble pas exactement à sa voisine — coin qui accroche
     un soupçon de couleur, comme une affiche photocopiée de travers */
  box-shadow: -2px 3px 0 0 rgba(0, 0, 0, 0.15);
}
.espace-card:nth-child(2n) { box-shadow: 2px -3px 0 0 rgba(0, 0, 0, 0.15); }
.espace-card:nth-child(odd) { transform: rotate(-0.2deg); }
.espace-card:nth-child(even) { transform: rotate(0.25deg); }

.espace-card h3 { color: var(--ink); }

.espace-card .tagline {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--accent, var(--ink-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.espace-card p:last-child { margin-bottom: 0; color: var(--ink-muted); }

/* ==========================================================================
   COMMENT SE RENDRE
   ========================================================================== */
#comment-se-rendre dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 0;
}
#comment-se-rendre dt { font-family: var(--font-label); color: var(--ink-muted); font-size: 12px; text-transform: uppercase; }
#comment-se-rendre dd { margin: 0; }
#comment-se-rendre dl + p { margin-top: var(--space-2); }

/* ==========================================================================
   MANIFESTE — "C'est quoi cette Nuit"
   ========================================================================== */
#manifeste { text-align: left; }
#manifeste blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-style: italic;
  letter-spacing: 0.05em;
  border-left: 2px solid var(--pink);
  margin: var(--space-3) 0;
  padding-left: var(--space-2);
  color: var(--ink);
}
.tradition-note {
  font-size: 14px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-2);
  margin-top: var(--space-3);
}

/* ==========================================================================
   FAQ — <details>/<summary> natifs, zéro JS
   ========================================================================== */
#faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: var(--space-2) 0;
}
#faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after {
  content: '+';
  font-family: var(--font-label);
  color: var(--yellow);
  transition: transform 0.2s, color 0.2s;
}
#faq details[open] summary::after { transform: rotate(45deg); color: var(--pink-bright); }
#faq details p { margin-top: var(--space-1); color: var(--ink-muted); }

/* ==========================================================================
   ACCESSIBILITÉ / CONTACT
   ========================================================================== */
#accessibilite, #contact { text-align: left; }
.social-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}
.social-links a { text-decoration: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  max-width: none;
  text-align: center;
  padding: var(--space-3) var(--space-2) var(--space-4);
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--ink-muted);
}
footer a { color: var(--ink-muted); }