/* =============================================================================
   RetroHouse.net — feuille de style principale
   Intégration fidèle de la maquette. Les zones photo sont des emplacements :
   il suffit de poser --img: url(...) sur l'élément pour y mettre la vraie image.
   ========================================================================== */
:root{
  --black:#000;
  --ink:#0d0d0f;
  --panel:#17171a;
  --panel-2:#1e1e22;
  --line:#2e2e34;
  --acid:#f5e528;
  --acid-2:#ffe600;
  --magenta:#ff1e9b;
  /* Couleurs de XBeat Radio, relevées sur son logo : le bloc de
     l'en-tête porte les siennes, pas celles du site. */
  --xbeat:#d81f26;
  --xbeat-vif:#ff3b41;
  --white:#fff;
  --text:#e8e8e4;
  --muted:#a5a5a0;
  --muted-2:#7c7c78;
  --c-club:#f5e528;
  --c-dj:#4f5bd5;
  --c-shop:#ff8a2b;
  --c-bar:#ff1e9b;
  --c-radio:#12c9a4;
  --c-event:#e5344f;
  --c-org:#f5e528;
  --wrap:1480px;
  --line-soft:#26262b;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
/* `hidden` doit l'emporter sur tout display: sinon les blocs masqués réapparaissent */
[hidden]{display:none!important}
/* Le lien d'évitement. Hors de l'écran tant qu'il n'a pas le focus, puis bien
   visible : c'est une aide, pas une décoration, et elle doit se voir quand elle
   sert. « clip-path » plutôt que « display:none », qui le retirerait aussi du
   parcours au clavier — et le rendrait donc inutile. */
.sauter{position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--acid);color:#111;font-weight:600;
  text-decoration:none;border-radius:0 0 4px 0}
.sauter:focus{left:0}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
/* fond de page : photo floutée (remplacer par --page-img) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:#3a3a40 var(--page-img, url("/assets/img/page-bg.webp")) center top/cover no-repeat;
  filter:blur(2px);transform:scale(1.03);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.09;mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
img{max-width:100%}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px}
/* le bloc du site occupe au moins l'écran : le pied de page ne remonte pas
   au milieu sur les pages courtes */
.site{max-width:var(--wrap);margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.7);
  /* --player-h vaut 0 tant que le lecteur est fermé ; dès qu'il s'ouvre, le
     bloc du site raccourcit d'autant et le pied de page remonte au-dessus. */
  min-height:calc(100vh - var(--player-h,0px));display:flex;flex-direction:column}
body{padding-bottom:var(--player-h,0px)}
.site > main,.site > .stage{flex:0 0 auto}
.site > main.page{flex:1 0 auto}
.site > footer.site-foot{margin-top:auto}

/* ---------- emplacements photo ------------------------------------------- */
.ph{display:block;position:relative;overflow:hidden;background:#0a0a0c}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:var(--img,none);background-size:cover;background-position:center;
}
.ph > *{position:relative}

/* ========================= BARRE UTILITAIRE ============================== */
.topbar{background:rgba(10,10,12,.86);border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px}
.topbar-left{display:flex;align-items:center;gap:8px;color:var(--muted)}
/* « depuis 2018 » : l'ancienneté du site, mise en évidence sans crier —
   même jaune que le reste de l'identité, en petit et en majuscules. */
.depuis{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:2px 9px;border:1px solid rgba(245,229,40,.45);border-radius:999px;
  background:rgba(245,229,40,.10);color:var(--acid-2);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.depuis::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acid-2);flex:none}
.topbar-right{display:flex;align-items:center;gap:14px;color:var(--muted)}
.topbar-right a:hover{color:var(--acid)}
.tsep{width:1px;height:13px;background:#3a3a3e}
.tsearch{display:flex;align-items:center;gap:7px}
.langsw{display:flex;align-items:center;gap:8px}
.langsw button{
  background:none;border:0;padding:2px 1px;font:inherit;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
}
.langsw button:hover{color:var(--acid)}
.langsw button[aria-pressed="true"]{color:var(--acid);border-bottom-color:var(--acid)}
.socials{display:flex;align-items:center;gap:12px;margin-left:6px}
.socials a{color:#fff;opacity:.92;display:grid;place-items:center}
.socials a:hover{color:var(--acid);opacity:1}

/* ============================== EN-TÊTE ================================= */
.masthead{position:relative;background:linear-gradient(180deg,rgba(8,8,10,.78),rgba(8,8,10,.9))}
.masthead .wrap{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:0 26px;min-height:160px;padding-block:14px;
}
/* Marque : smiley bombé + logotype, tels quels. Les deux forment un seul lien
   vers l'accueil, et le logotype porte déjà la ligne « Made in Belgium ». */
.brandlink{display:flex;align-items:center;gap:clamp(10px,2vw,26px);text-decoration:none;
  grid-column:1/3;min-width:0}
.smiley{width:clamp(86px,9vw,142px);height:auto;flex:none;
  filter:drop-shadow(0 0 26px rgba(245,229,40,.22))}
.wordmark{width:clamp(210px,31vw,470px);height:auto;display:block}

/* (l'ancien logotype en texte a été remplacé par l'image de la maquette) */

/* --- bloc XBeat ---------------------------------------------------------
   Une seule pastille dans l'en-tête, aux couleurs de la radio : un petit
   équaliseur qui vibre pendant l'antenne, et le nom. Cliquer lance l'écoute
   dans le lecteur du bas — le même que les tapes, donc le son survit au
   changement de page. Horaires, histoire et photos vivent sur la fiche. */
/* L'écart avec l'encadré des mots-clés est doublé : la grille de l'en-tête
   espace les colonnes de 26 px, cette marge en ajoute autant. Les deux blocs
   se lisent comme deux choses distinctes, pas comme un seul pavé. */
.xbeat{display:flex;align-items:center;min-width:0;justify-self:end;margin-right:26px}
.xb-pill{
  display:inline-flex;align-items:center;gap:9px;padding:5px 16px 5px 12px;
  border:1px solid rgba(216,31,38,.6);border-radius:999px;background:rgba(216,31,38,.12);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
a.xb-pill:hover{background:rgba(216,31,38,.28);border-color:var(--xbeat-vif);
  box-shadow:0 0 18px rgba(216,31,38,.4)}

/* L'équaliseur : quatre barres décalées, on comprend « ça joue » sans lire. */
.xb-eq{display:flex;align-items:flex-end;gap:2px;height:13px;flex:none}
.xb-eq b{width:3px;border-radius:1px;background:var(--xbeat-vif);height:4px;
  animation:xbeq .9s ease-in-out infinite}
.xb-eq b:nth-child(2){animation-delay:.15s}
.xb-eq b:nth-child(3){animation-delay:.30s}
.xb-eq b:nth-child(4){animation-delay:.45s}
@keyframes xbeq{0%,100%{height:4px}50%{height:13px}}
/* Sans animation (réglage système), les barres gardent des hauteurs lisibles. */
@media (prefers-reduced-motion:reduce){
  .xb-eq b{height:7px}
  .xb-eq b:nth-child(2){height:12px}
  .xb-eq b:nth-child(4){height:10px}
}

/* --- états de la grille rétro : le bloc suit la programmation -------------
   « hide » est traité côté serveur : hors antenne, la pastille n'est pas écrite
   du tout, elle ne laisse donc aucun trou dans l'en-tête. La règle ci-dessous
   n'est qu'un filet, si une page vient d'un cache plus ancien. */
.xbeat[data-state="off"][data-offair="hide"]{display:none}
/* Hors antenne mais affichée : la pastille s'éteint sans disparaître. */
.xbeat[data-state="off"] .xb-pill{border-color:#4a4a52;background:transparent;color:#cfcfca}
.xbeat[data-state="off"] a.xb-pill:hover{border-color:var(--xbeat);background:rgba(216,31,38,.14);color:#fff}

/* --- encadré mots-clés --- */
.keywords{
  position:relative;border:1px solid #55555c;padding:8px 22px 8px 14px;align-self:center;
  display:flex;flex-direction:column;gap:1px;
}
.keywords span{font-size:13px;letter-spacing:.14em;color:#d7d7d2;text-transform:uppercase}
.keywords::before,.keywords::after{content:"";position:absolute;background:var(--acid);width:2px;height:26px}
.keywords::before{left:-1px;top:-1px}
.keywords::after{right:-1px;bottom:-1px}

/* =============================== NAV ==================================== */
.mainnav{
  background:linear-gradient(180deg,#55555c,#3a3a41 40%,#1d1d21 92%,#131316);
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.mainnav .wrap{display:flex;justify-content:center;gap:clamp(14px,3vw,46px);overflow-x:auto;scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{
  display:block;padding:17px 2px 14px;font-size:15px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#f0f0ec;white-space:nowrap;border-bottom:3px solid transparent;
}
.mainnav a:hover{color:var(--acid)}
.mainnav a[aria-current]{color:var(--acid);border-bottom-color:var(--acid)}

/* ============================== HERO ==================================== */
.stage{padding:22px 28px 0}
.hero{
  position:relative;overflow:hidden;min-height:330px;display:flex;align-items:center;
  background:#050506;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 34px rgba(0,0,0,.6);
}
/* faisceaux + foule, remplaçables par une vraie photo via --img */
.hero-bg{position:absolute;inset:0}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  /* cadrage à droite : le texte du site occupe la gauche, la foule et le
     smiley mural restent visibles quelle que soit la largeur */
  background-image:var(--img,none);background-size:cover;background-position:right bottom;
}
.hero-copy{position:relative;padding:40px clamp(20px,4vw,52px);max-width:640px}
.hero h1{
  font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5vw,62px);line-height:.95;letter-spacing:.5px;margin:0;
  text-shadow:0 4px 18px rgba(0,0,0,.9);text-wrap:balance;
}
.hero h1 .y{color:var(--acid-2)}
.hero p{margin:18px 0 26px;font-size:clamp(15px,1.3vw,17.5px);line-height:1.5;color:#e2e2dd;max-width:26em;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}
.btn-acid{
  display:inline-flex;align-items:center;gap:14px;border:2px solid var(--acid-2);
  padding:13px 22px;color:var(--acid-2);font-weight:700;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .18s,color .18s;
}
.btn-acid:hover{background:var(--acid-2);color:#000}
.vibe{
  position:absolute;right:3%;bottom:14px;font-family:"Caveat",cursive;font-size:clamp(20px,2.4vw,32px);
  color:var(--acid-2);transform:rotate(-3deg);text-shadow:0 2px 12px rgba(0,0,0,.9);
}

/* ========================== CATÉGORIES ================================== */
.cats{
  display:grid;grid-template-columns:repeat(7,1fr);gap:13px;
  padding:22px 36px;
}
.cat{
  position:relative;display:block;min-height:215px;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(0,0,0,.6);overflow:hidden;
  background:#111;isolation:isolate;
}
.cat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c,var(--acid));z-index:3;
}
/* La photo occupe toute la largeur de la vignette et se cale en haut ; le bas
   reste noir et reçoit le titre. Sans ça, « BAR » et « STAFF » se font couper
   sur les côtés — la vignette est plus haute que la photo. */
.cat.ph::before{background-size:100% auto;background-position:center top;background-repeat:no-repeat}
.cat .shade{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.93));
}
.cat .txt{position:absolute;left:14px;right:12px;bottom:16px;z-index:3}
.cat h2{margin:0;font-size:clamp(12.5px,1.15vw,19px);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;text-wrap:balance;
  text-shadow:0 2px 8px rgba(0,0,0,.9)}
.cat p{margin:3px 0 0;font-size:13.5px;color:#c9c9c4}
.cat:hover .shade{background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.9))}
.cat:hover h2{color:var(--c,var(--acid))}

/* ===================== DERNIERS AJOUTS / À LA UNE ======================= */
.lower{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:16px;padding:10px 36px 40px}
.block{
  background:linear-gradient(180deg,rgba(30,30,34,.94),rgba(17,17,20,.96));
  border:1px solid rgba(255,255,255,.14);padding:18px 20px 24px;
  box-shadow:0 8px 26px rgba(0,0,0,.55);
}
.block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.block-head h2{
  margin:0;font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding-bottom:9px;border-bottom:4px solid var(--acid-2);
}
.seeall{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;padding-bottom:9px}
.seeall:hover{color:var(--acid)}
.arrows{display:flex;gap:6px;padding-bottom:6px}
.arrows button{
  width:26px;height:26px;border:1px solid #3a3a40;background:transparent;color:#c9c9c4;
  display:grid;place-items:center;cursor:pointer;border-radius:2px;
}
.arrows button:hover{border-color:var(--acid);color:var(--acid)}

.latest{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{display:block;border:1px solid rgba(255,255,255,.16);background:#0c0c0e;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.tile .ph{aspect-ratio:4/3}
.tile .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.tile .cap{display:block;padding:11px 13px 13px}
.tile h3{margin:0;font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.tile small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase}
.tile:hover h3{color:var(--acid)}

/* « À la une » : une affiche, pas une vignette.

   La hauteur du bloc est imposée par la colonne de gauche ; la scène prend
   tout ce qui reste et la photo la remplit. Sans ça, une vignette de 150 px
   flottait en haut d'un cadre de 400. */
.block-une{display:flex;flex-direction:column}
.spot-scene{position:relative;flex:1;min-height:300px;overflow:hidden;
  border:1px solid #26262b;background:#0a0a0c}
.spot{position:absolute;inset:0;display:block}
.spot .ph{position:absolute;inset:0;border:0}
/* Le voile : c'est lui qui garantit la lisibilité quelle que soit la photo —
   une image claire ou chargée rendrait le texte illisible sans lui. */
.spot-voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 22%,rgba(0,0,0,.55) 52%,
                             rgba(0,0,0,.86) 78%,rgba(0,0,0,.95))}
.spot-corps{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px 22px;
  pointer-events:none}
/* Le texte laisse passer le clic vers le lien de la carte ; seul le titre,
   lui, reste cliquable pour le clavier. */
.spot-corps a{pointer-events:auto}
.spot .kind{margin:0 0 5px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--acid-2)}
.spot h3{margin:0;font-size:clamp(20px,2vw,25px);font-weight:700;color:#fff;line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.75)}
.spot h3 a{color:inherit}
.spot:hover h3 a{color:var(--acid)}
/* Le lien qui couvre la carte : on clique où l'on veut sur l'image. Il passe
   au-dessus du voile, sous le texte — qui reste sélectionnable. */
.spot-toute{position:absolute;inset:0;z-index:1}
.spot dl{margin:11px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:#e2e2dd}
.spot dl div{display:flex;align-items:center;gap:8px}
.spot dl svg{width:14px;height:14px;flex:none;color:var(--acid-2)}
/* « spot-res » et non « res » : « .res » appartient déjà aux résultats de
   recherche, et son filet du bas se serait invité sous ce résumé. */
.spot-res{margin:11px 0 0;font-size:13.5px;line-height:1.6;color:#d6d6d1;max-width:46ch;
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* Le passage d'une fiche à l'autre : un fondu court, juste de quoi éviter le
   clignotement d'une substitution sèche. */
.spot.entre{animation:spot-entre .35s ease}
@keyframes spot-entre{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Les pastilles : combien de fiches, et où l'on en est. */
.spot-dots{display:flex;gap:7px;margin-top:14px;flex:none}
.spot-dots button{
  width:26px;height:4px;padding:0;border:0;border-radius:2px;background:#3a3a40;
  cursor:pointer;transition:background .2s,width .2s;
}
.spot-dots button:hover{background:#6a6a70}
.spot-dots button[aria-current="true"]{background:var(--acid);width:38px}

/* ============================== PIED DE PAGE ============================
   Trois bandes : l'appel à proposer, les liens, puis la ligne de bas de page.
   Le filet jaune du haut le détache du contenu sans ajouter de bloc. */
footer.site-foot{background:rgba(8,8,10,.94);border-top:2px solid var(--acid);
  color:var(--muted-2);font-size:13px}
/* La marge du bas est généreuse : depuis que les réseaux sont de vrais
   boutons, 24 px les collaient au bord de la page. */
.foot-in{max-width:var(--wrap);margin:0 auto;padding:30px 16px 34px}

.foot-appel{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.07)}
.foot-appel > img{width:44px;height:auto;flex:none}
.foot-appel-txt{flex:1;min-width:240px}
.foot-appel-txt b{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;font-size:17px;color:#fff;margin-bottom:3px}
.foot-appel-txt span{font-size:14px;color:var(--muted)}
.foot-btn{display:inline-block;background:var(--acid);color:#111;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;border-radius:2px;flex:none}
.foot-btn:hover{background:var(--acid-2)}

/* Les liens séparés par des filets : une rangée pour les rubriques, une pour
   les pages de service. Le premier n'a pas de marge à gauche, le dernier pas
   de filet à droite — sinon la ligne paraît tronquée. */
.foot-liens{display:flex;flex-wrap:wrap;gap:6px 0;padding:20px 0 4px;align-items:center}
.foot-liens-2{padding-top:8px}
.foot-liens a{font-size:14px;color:var(--muted);padding:0 14px;border-right:1px solid var(--line);
  line-height:1.3}
.foot-liens a:first-child{padding-left:0}
.foot-liens a:last-child{border-right:0}
.foot-liens a:hover{color:var(--acid)}
.foot-liens a.fort{color:var(--acid-2)}

.foot-bas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  justify-content:space-between;padding-top:20px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.07);font-size:14.5px;line-height:1.5}
.foot-bas a{color:var(--muted)}
.foot-bas a:hover{color:var(--acid)}
/* Les réseaux : de vrais boutons ronds. En simple glyphe de 16 px, ils se
   perdaient entre le copyright et le crédit — personne ne les voyait. */
.foot-soc{display:flex;gap:10px;align-items:center}
.foot-soc a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:#e0e0dc;background:rgba(255,255,255,.03);
  transition:background .15s,border-color .15s,color .15s,transform .12s}
.foot-soc a:hover{background:var(--acid);border-color:var(--acid);color:#111;transform:translateY(-2px)}
.foot-soc svg{width:19px;height:19px}
.foot-par b{color:var(--acid-2);font-weight:700}
.foot-par a:hover b{color:var(--acid)}
@media (max-width:640px){
  .foot-appel{gap:14px}
  /* Les filets disparaissent : sur deux ou trois lignes, il en resterait un en
     bout de ligne, qui donne l'impression d'une liste coupée. */
  .foot-liens{gap:9px 20px}
  .foot-liens a{padding:0;border-right:0}
  .foot-bas{justify-content:flex-start;gap:16px 18px}
}

/* « + Proposer » à la fin du menu principal : même forme que les rubriques,
   couleur différente — une invitation, pas une rubrique de plus. */
.mainnav a.nav-prop{color:var(--acid-2)}
.mainnav a.nav-prop::before{content:"+";margin-right:7px;font-weight:700}
.mainnav a.nav-prop:hover{color:var(--acid)}

/* ============================ RESPONSIVE ================================ */
@media (max-width:1180px){
  .lower{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(4,1fr)}
  .masthead .wrap{grid-template-columns:auto 1fr;row-gap:18px}
  /* L'encadré des mots-clés disparaît : la marge qui l'écartait n'a plus lieu d'être. */
  .xbeat{grid-column:1/-1;margin-right:0}
  .keywords{display:none}
}
@media (max-width:820px){
  /* la barre utilitaire passe sur deux lignes plutôt que de déborder */
  .topbar .wrap{height:auto;flex-wrap:wrap;justify-content:center;gap:6px 12px;padding-block:7px}
  .topbar-right{flex-wrap:wrap;justify-content:center;gap:6px 12px}
  .stage{padding:16px 16px 0}
  .cats{grid-template-columns:repeat(2,1fr);padding:16px}
  .lower{padding:6px 16px 30px}
  .latest{grid-template-columns:repeat(2,1fr)}
  /* La baseline prend trop de place ici, mais « depuis 2018 » reste : la
     mention garde sa place en haut, elle ne descend jamais près du logo. */
  .topbar-left > svg,
  .topbar-left > span{display:none}
  .mainnav .wrap{justify-content:flex-start}
}
@media (max-width:560px){
  .masthead .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  /* Sur téléphone, le logotype se suffit : le smiley mangerait la moitié de
     la hauteur de l'écran pour ne rien dire de plus. */
  .brandlink{grid-column:1;justify-content:center}
  .smiley{display:none}
  .wordmark{width:min(92vw,340px)}
  .xbeat{justify-content:center;justify-self:center;gap:8px}
  .xb-pill{font-size:11px;padding:4px 12px 4px 9px}
  .spot{grid-template-columns:110px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =============================================================================
   Pages intérieures : index de rubrique, fiche, recherche
   ========================================================================== */
.page{padding:26px 28px 60px;background:rgba(12,12,14,.55)}
.crumb{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted-2);margin-bottom:14px}
.crumb a{color:var(--muted)}
.page h1{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,52px);line-height:1;letter-spacing:.5px;margin:0 0 6px;text-wrap:balance}
.page .lede{color:var(--muted);font-size:16px;margin:0 0 24px;max-width:70ch}

/* --- grille de fiches --- */
/* Cinq colonnes en grand écran : avec 15 fiches par page, la grille tombe
   juste — trois rangées pleines, jamais une ligne orpheline. */
.cards-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:1250px){ .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1000px){ .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px) { .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
@media (max-width:420px) { .cards-grid{grid-template-columns:1fr} }
.card-item{display:block;background:var(--panel);border:1px solid rgba(255,255,255,.13);overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.5);transition:border-color .16s}
.card-item:hover{border-color:var(--acid-2)}
.card-item .shot{display:block;aspect-ratio:4/3;background:#111;position:relative;overflow:hidden}
.card-item .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Vignette dessinée pour les fiches sans photo : initiales sur un fond teinté
   par le nom. Chaque fiche a la sienne, toujours la même, et rien ne ressemble
   à une image manquante. */
.card-item .shot .none,
.tile .none,
/* Les articles aussi : la liste et « à lire aussi ». Sans ces deux sélecteurs,
   un article sans image de couverture montrait un rectangle noir au lieu de sa
   vignette dessinée. */
.art-vign .none,
.aa-vign .none,
.spot .none{
  position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(110% 80% at 22% 0%, hsl(var(--vh,210) 55% 26%/.85), transparent 62%),
    repeating-linear-gradient(var(--va,40deg),
      rgba(255,255,255,.04) 0 2px, rgba(255,255,255,0) 2px 7px),
    linear-gradient(155deg,#17171c 0%,#0b0b0d 100%);
}
.card-item .shot .none::before,
.tile .none::before,
.art-vign .none::before,
.aa-vign .none::before,
.spot .none::before{
  content:attr(data-initiales);
  font-family:"Anton",Impact,"Arial Black",sans-serif;
  font-size:clamp(38px,5.4vw,66px);letter-spacing:.03em;line-height:1;
  color:hsl(var(--vh,210) 62% 66%/.30);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
/* Le smiley en filigrane, discret : la vignette reste « RetroHouse ». */
.card-item .shot .none::after,
.tile .none::after,
.art-vign .none::after,
.aa-vign .none::after,
.spot .none::after{
  content:"";position:absolute;right:-14%;bottom:-22%;width:64%;aspect-ratio:1;
  background:url("/assets/img/smiley.png") center/contain no-repeat;
  opacity:.07;filter:grayscale(1);
}
/* La vignette de remplacement porte sa mention : personne ne doit croire que
   c'est une photo du lieu. Elle est petite, en bas, et disparaît sur les
   toutes petites vignettes où elle ne serait pas lisible. */
.none > .dit{position:absolute;left:0;right:0;bottom:8px;text-align:center;z-index:2;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.spot .none > .dit{bottom:auto;top:14px;font-size:11.5px}
@media(max-width:560px){.none > .dit{display:none}}
.card-item:hover .shot .none::before,
.tile:hover .none::before{color:hsl(var(--vh,210) 68% 72%/.42)}
/* `body` et `cap` sont des <span> dans un <a> : sans display:block, le titre
   qu'ils contiennent sort de la boîte en ligne et colle aux bords de la carte. */
.card-item .body{display:block;padding:13px 15px 15px}
.card-item h3{margin:0;font-size:16px;font-weight:700;color:#fff;line-height:1.25}
.card-item .meta{margin:4px 0 0;font-size:13px;color:var(--muted)}
.card-item:hover h3{color:var(--acid-2)}

/* --- filtres alphabet / décennies --- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.chip-f{padding:5px 12px;border:1px solid var(--line);color:var(--muted);font-size:13px;
  background:var(--panel-2);text-decoration:none;border-radius:2px}
.chip-f:hover{border-color:var(--acid-2);color:var(--acid-2)}
.chip-f.on{background:var(--acid-2);border-color:var(--acid-2);color:#111;font-weight:600}

/* --- fiche --- */
/* Le sommaire d'une fiche : ce qu'elle contient, et le chemin pour y aller. */
.fiche-somm{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.fiche-somm a{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:13px;text-decoration:none;border-radius:2px}
.fiche-somm a:hover{border-color:var(--acid-2);color:var(--acid-2)}
.fiche-somm a span{font-size:12px;color:var(--acid-2);font-variant-numeric:tabular-nums}
/* Un saut d'ancre ne doit pas glisser le titre sous l'en-tête. */
.sect[id]{scroll-margin-top:84px}
.fiche{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.fiche .hero-shot{aspect-ratio:16/9;background:#111;overflow:hidden;border:1px solid rgba(255,255,255,.13);margin-bottom:22px}
.fiche .hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* --- flux d'écoute d'une radio -------------------------------------------
   Une rangée de boutons sous la photo : le premier en évidence, les autres
   en retrait. Chacun ouvre le lecteur du bas, comme une tape. */
.flux-bloc{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.flux-bouton{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 7px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.flux-bouton:hover{border-color:var(--acid-2);background:var(--panel-2)}
.flux-bouton em{font-style:normal;font-size:11.5px;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.08em}
.flux-play{width:26px;height:26px;border-radius:50%;background:#3a3a42;display:grid;
  place-items:center;flex:none}
.flux-play svg{width:10px;height:10px;fill:#fff;margin-left:2px}
/* Deux mises en avant, et une seule à la fois :
   .principal = le flux proposé par défaut, tant que rien n'a été lancé ;
   .joue      = le flux réellement en train de passer dans le lecteur.
   Dès qu'on lance quelque chose, le script retire .principal partout : le
   jaune ne désigne plus une suggestion mais ce qu'on entend. */
.flux-bouton.principal,
.flux-bouton.joue{border-color:var(--acid-2);background:rgba(245,229,40,.08)}
.flux-bouton.principal .flux-play,
.flux-bouton.joue .flux-play{background:var(--acid-2)}
.flux-bouton.principal .flux-play svg,
.flux-bouton.joue .flux-play svg{fill:#111}
.flux-bouton.joue{font-weight:600}
/* En lecture, le triangle laisse la place à trois barres qui bougent :
   on voit d'un coup d'œil lequel des flux sort des enceintes. */
.flux-eq{display:none;align-items:flex-end;gap:2px;height:11px}
.flux-eq b{width:2.5px;border-radius:1px;background:#111;height:3px;
  animation:fluxeq .9s ease-in-out infinite}
.flux-eq b:nth-child(2){animation-delay:.15s}
.flux-eq b:nth-child(3){animation-delay:.30s}
@keyframes fluxeq{0%,100%{height:3px}50%{height:11px}}
.flux-bouton.joue:not(.en-pause) .flux-play svg{display:none}
.flux-bouton.joue:not(.en-pause) .flux-eq{display:flex}
@media (prefers-reduced-motion:reduce){
  .flux-eq b{animation:none;height:7px}
  .flux-eq b:nth-child(2){height:11px}
}

.prose{font-size:16px;line-height:1.75;color:#dcdcd6;max-width:72ch}
.prose p{margin:0 0 1em}
.sect{margin-top:34px}
.sect h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:22px;
  letter-spacing:.05em;margin:0 0 14px;padding-bottom:8px;border-bottom:3px solid var(--acid-2);display:inline-block}
.facts{background:var(--panel);border:1px solid rgba(255,255,255,.13);padding:16px 18px}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:14px}
.facts dt{color:var(--muted-2)}
.facts dd{margin:0;color:#e8e8e3}
.linkchips{display:flex;flex-wrap:wrap;gap:7px}
.linkchips a{padding:5px 12px;border:1px solid var(--line);background:var(--panel-2);
  font-size:13.5px;color:#e8e8e3;text-decoration:none}
.linkchips a:hover{border-color:var(--acid-2);color:var(--acid-2)}
.linkchips a .yr{color:var(--muted-2);font-size:12px;margin-left:5px}

/* Le reste d'une galerie, replié. Le navigateur ne charge pas les images
   cachées : une fiche à quatre cents photos n'en demande plus que douze. */
.gal-plus{margin-top:10px}
.gal-plus>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:13px;letter-spacing:.02em}
.gal-plus>summary::-webkit-details-marker{display:none}
.gal-plus>summary::after{content:"▾";font-size:10px;opacity:.7}
.gal-plus>summary:hover{border-color:var(--acid-2);color:var(--acid-2)}
.gal-plus[open]>summary::after{content:"▴"}
.gal-plus .moins,.gal-plus[open] .plus{display:none}
.gal-plus[open] .moins{display:inline}
.gal-plus .gal{margin-top:10px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gal a{display:block;aspect-ratio:1;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.1)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.gal a:hover img{transform:scale(1.05)}

.tapes-year{margin-bottom:18px}
.tapes-year h3{font-size:15px;color:var(--acid-2);margin:0 0 8px;letter-spacing:.08em}
.tape-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel);
  border:1px solid rgba(255,255,255,.1);margin-bottom:6px}
.tape-row b{font-weight:500;font-size:14.5px;flex:1;min-width:0}
.tape-row .dur{color:var(--muted-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.tape-row button{background:var(--acid-2);border:0;color:#111;width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:12px;flex:none}
/* La tape qu'on est en train d'écouter se repère dans la liste, et son
   bouton montre où on en est : deux barres quand ça joue, le triangle
   quand c'est en pause. Un navigateur qui ignore :has() affiche la liste
   comme avant — on perd le liseré, rien d'autre. */
.tape-row:has(button.joue){border-color:var(--acid-2);background:var(--panel-2)}
.tape-row button.joue:not(.en-pause){font-size:0}
.tape-row button.joue:not(.en-pause)::before{content:"❚❚";font-size:10px;letter-spacing:1px}

/* --- les tapes d'une fiche, repliées par année ---
   Une année ouverte à la fois : les <details> d'une même fiche partagent un
   « name ». Le résumé dit combien il y a de sets et qui joue, pour choisir
   sans ouvrir. */
details.an{margin-bottom:8px;border:1px solid rgba(255,255,255,.1);background:var(--panel)}
details.an > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:12px 14px;user-select:none}
details.an > summary::-webkit-details-marker{display:none}
details.an > summary:hover .chev{border-color:var(--acid-2)}
details.an > summary:focus-visible{outline:2px solid var(--acid-2);outline-offset:-2px}
details.an > summary .y{font-family:"Anton",Impact,sans-serif;font-size:22px;letter-spacing:.04em;
  color:var(--acid-2);min-width:58px;line-height:1}
details.an > summary .y.inconnue{font-size:17px;white-space:nowrap}
details.an > summary .n{color:var(--muted-2);font-size:13px;white-space:nowrap}
details.an > summary .djs{color:#bdbdb8;font-size:13px;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
details.an > summary .chev{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:var(--acid-2);font-size:11px;flex:none;
  transition:transform .2s,border-color .2s}
details.an[open] > summary .chev{transform:rotate(180deg)}
details.an[open] > summary{border-bottom:1px solid rgba(255,255,255,.08)}
details.an .corps{padding:8px 8px 2px}
details.an .tape-row{background:var(--panel-2)}
/* Le flyer d'une soirée, au bout de la ligne du set : petit, net, cliquable. */
/* Un set dont le fichier ne répond pas ne sort plus pour l'internaute : la
   requête l'écarte. Ce qui suit n'est donc visible que connecté à
   l'administration — d'où le ton orangé, qui dit « à réparer » et non
   « désolé ». Le lien mène droit à la fiche. */
.tape-row.muet{opacity:.78;border-style:dashed;border-color:rgba(255,176,32,.38)}
.tape-row .muet-ico{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px dashed rgba(255,176,32,.5);color:#ffb020;font-size:13px}
.tape-row.muet .dur{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.tape-row .reparer{color:#ffb020;text-decoration:none;white-space:nowrap}
.tape-row .reparer:hover{text-decoration:underline}
/* Le bandeau qui compte ce que le public ne voit pas. */
.rh-masques{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:9px 13px;
  border:1px dashed rgba(255,176,32,.45);border-radius:8px;background:rgba(255,176,32,.06);
  color:#ffb020;font-size:13px}
.rh-masques a{color:#ffb020}
.tape-row .fly{flex:none;width:42px;height:42px;border-radius:4px;overflow:hidden;display:block;
  border:1px solid rgba(255,255,255,.14);background:#0a0a0c}
.tape-row .fly img{width:100%;height:100%;object-fit:cover;display:block}
.tape-row .fly:hover{border-color:var(--acid-2)}
@media(max-width:560px){.tape-row .fly{width:34px;height:34px}}
.tape-row .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tape-row .txt b{flex:none;overflow-wrap:anywhere}
.tape-row .qui{font-size:12.5px;color:#9a9a95}
.tape-row .qui a{color:var(--acid-2);text-decoration:none}
.tape-row .qui a:hover{text-decoration:underline}
/* ------------------------------------------ le menu du téléphone (icônes) */
.navmob{display:none}
@media (max-width:820px){
  /* Le menu écrit disparaît, le rail le remplace : deux menus à l'écran
     seraient deux fois le même choix. */
  .mainnav{display:none}
  .navmob{display:flex;align-items:stretch;background:#141418;
    border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid #000;padding:6px 2px}
  .navmob > a,
  .navmob-plus > summary{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;padding:6px 2px;color:var(--muted);text-decoration:none;
    font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;text-align:center;
    list-style:none;cursor:pointer}
  .navmob-plus > summary::-webkit-details-marker{display:none}
  .navmob svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .navmob > a span,
  .navmob-plus > summary span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navmob > a[aria-current],
  .navmob-plus.ici > summary,
  .navmob-plus[open] > summary{color:var(--acid-2)}
  .navmob-plus{position:relative;flex:1 1 0;min-width:0;display:flex}

  /* Le panneau « Plus » : le reste des rubriques, sous la main. */
  .navmob-liste{position:absolute;right:0;top:100%;z-index:60;width:min(78vw,280px);
    margin-top:6px;padding:6px;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.6)}
  .navmob-liste a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:7px;
    color:var(--text);text-decoration:none;font-size:13.5px}
  .navmob-liste a:hover,.navmob-liste a[aria-current]{background:var(--panel-2);color:var(--acid-2)}
  .navmob-langues{display:flex;gap:6px;margin-top:6px;padding-top:8px;
    border-top:1px solid rgba(255,255,255,.08)}
  .navmob-langues a{flex:1;justify-content:center;padding:8px 0;font-size:12.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .navmob-langues a.on{color:var(--acid-2)}

  /* La barre du haut faisait doublon avec le rail : sur téléphone, ses liens
     et le sélecteur de langue vivent désormais dans « Plus ». */
  .topbar-right > a,
  .topbar-right > .tsep,
  .topbar-right .langsw{display:none}
}
@media (max-width:360px){
  .navmob > a span,.navmob-plus > summary span{font-size:9px}
}

/* ------------------------------------------- le mur des sets, par soirée */
.mur-rech{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.mur-rech .champ{flex:1;min-width:250px;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.mur-rech .champ svg{width:17px;height:17px;fill:none;stroke:var(--muted-2);stroke-width:2;flex:none}
.mur-rech .champ input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:400 15px/1.2 inherit;outline:none}
.mur-rech select{padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:400 14px/1.2 inherit;max-width:230px}
.mur-rech .btn-acid{padding:10px 18px}
.mur-etat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 18px}
.mur-etat .tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:rgba(255,230,0,.12);border:1px solid rgba(255,230,0,.35);color:var(--acid-2);
  font-size:12.5px;text-decoration:none}
.mur-etat .tag.creux{background:none;border-color:rgba(255,255,255,.16);color:var(--muted)}
.mur-etat .tag.creux:hover{border-color:var(--acid-2);color:var(--acid-2)}
.mur-etat .tag i{opacity:.7;font-style:normal}
.mur-etat .compte{font-size:13px;color:var(--muted-2);margin-left:auto}
.mur-an{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.mur-an b{font-family:"Anton",Impact,sans-serif;font-size:21px;color:var(--acid-2);letter-spacing:.04em}
.mur-an hr{flex:1;border:0;border-top:1px solid rgba(255,255,255,.09)}

/* Pas d'« overflow:hidden » ici, et c'est délibéré. Il servait à faire découper
   le contenu par les coins arrondis — sauf qu'il ne protégeait rien : les
   lignes sont en retrait de 8 px par le padding du corps et portent déjà leur
   propre arrondi, elles n'approchent jamais les coins. En revanche il découpait
   le menu de partage d'un set, positionné en absolu, qui déborde sous la
   dernière ligne : le menu s'arrêtait net au bord du bloc. Mesuré le
   29 septembre sur la page des sets. */
details.soiree{border:1px solid rgba(255,255,255,.1);background:var(--panel);
  border-radius:10px;margin-bottom:8px}
details.soiree > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:11px 14px}
details.soiree > summary::-webkit-details-marker{display:none}
details.soiree > summary:hover .chev{border-color:var(--acid-2)}
details.soiree > summary:focus-visible{outline:2px solid var(--acid-2);outline-offset:-2px}
details.soiree .vign{width:52px;height:52px;border-radius:6px;flex:none;object-fit:cover;
  background:linear-gradient(140deg,#1d1d22,#101014);border:1px solid rgba(255,255,255,.1)}
/* Une soirée sans flyer ni photo de club : le smiley, plutôt qu'un carré noir
   que l'œil lit comme une image qui n'a pas chargé. L'image est une copie à sa
   taille — 10 Ko au lieu des 262 Ko de l'originale, qui sert au bandeau et
   n'avait aucune raison d'être téléchargée pour une marque de 29 pixels.
   Le sélecteur porte « details.soiree » : sans lui, la règle générale de la
   vignette, plus spécifique, écraserait ce fond. */
details.soiree .vign.vide{background:url('../img/smiley-vign.webp') center/56% no-repeat,
  linear-gradient(140deg,#1d1d22,#101014)}
details.soiree .titre{flex:1;min-width:0}
details.soiree .titre b{display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere}
details.soiree .titre span{display:block;font-size:13px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.soiree .chev{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.18);color:var(--acid-2);font-size:11px;transition:transform .2s,border-color .2s}
details.soiree[open] > summary .chev{transform:rotate(180deg)}
details.soiree[open] > summary{border-bottom:1px solid rgba(255,255,255,.08)}
details.soiree .corps{padding:6px 8px 8px}
details.soiree .tape-row{background:var(--panel-2);border-radius:6px}
details.soiree .tape-row b a{color:var(--text);text-decoration:none}
details.soiree .tape-row b a:hover{color:var(--acid-2)}

.mur-plus{display:block;text-align:center;margin-top:16px;padding:13px;border-radius:10px;
  border:1px dashed rgba(255,255,255,.2);color:var(--muted);text-decoration:none;font-size:14px}
.mur-plus:hover{border-color:var(--acid-2);color:var(--acid-2)}
.mur-page{text-align:center;font-size:12.5px;color:var(--muted-2);margin:10px 0 0}
.mur-page a{color:var(--acid-2)}
@media(max-width:700px){
  .mur-rech select{flex:1;max-width:none}
  .mur-etat .compte{margin-left:0;width:100%}
  details.soiree .vign{width:42px;height:42px}
}

/* --------------------------------------------------- qui est là, maintenant */
.rh-live{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:0 auto 18px;padding:8px 16px;width:fit-content;max-width:100%;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:13.5px;color:var(--muted)}
.rh-live b{color:var(--text);font-weight:700}
.rh-live .pt{display:inline-flex;align-items:center;gap:7px}
.rh-live .pt + .pt{padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.rh-live .led{width:8px;height:8px;border-radius:50%;background:#38d39f;animation:rhpulse 2.4s infinite}
.rh-live svg{width:15px;height:15px;fill:none;stroke:var(--acid-2);stroke-width:1.7}
@keyframes rhpulse{0%{box-shadow:0 0 0 0 rgba(56,211,159,.5)}
  70%{box-shadow:0 0 0 7px rgba(56,211,159,0)}100%{box-shadow:0 0 0 0 rgba(56,211,159,0)}}
@media(prefers-reduced-motion:reduce){.rh-live .led{animation:none}}

/* ------------------------------------------------------------ partage */
.pf-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 18px}
.pf-share .lbl{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-right:2px}
.pf-share a,.pf-share button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:var(--panel);color:var(--text);
  font:500 13px/1 inherit;text-decoration:none;cursor:pointer}
.pf-share a:hover,.pf-share button:hover{border-color:var(--acid-2);color:var(--acid-2)}
.pf-share svg{width:15px;height:15px;fill:currentColor;flex:none}
.pf-share button.natif{border-color:var(--acid-2);color:var(--acid-2)}
.pf-share .fait{border-color:var(--acid-2);color:var(--acid-2)}
/* Le menu de partage d'une ligne : une pastille, et la liste qui s'ouvre
   au-dessus du reste. Sans script, le <details> suffit. */
.pf-menu{position:relative;flex:none}
.pf-menu > summary{list-style:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:var(--acid-2);cursor:pointer}
.pf-menu > summary::-webkit-details-marker{display:none}
.pf-menu > summary:hover{border-color:var(--acid-2);background:rgba(255,255,255,.05)}
.pf-menu > summary svg{width:13px;height:13px;fill:currentColor}
.pf-menu[open] > summary{border-color:var(--acid-2);background:var(--acid-2);color:#111}
.pf-liste{position:absolute;right:0;top:36px;z-index:30;display:flex;flex-direction:column;gap:2px;
  padding:6px;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.55)}
.pf-liste a,.pf-liste button{display:flex;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:6px;
  background:none;color:var(--text);font:500 13px/1 inherit;text-decoration:none;cursor:pointer;text-align:left}
.pf-liste a:hover,.pf-liste button:hover{background:var(--panel-2);color:var(--acid-2)}
.pf-liste svg{width:15px;height:15px;fill:currentColor;flex:none}
.tape-row .pf-part1,.pf-part1{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);background:none;color:var(--acid-2);cursor:pointer;padding:0}
.tape-row .pf-part1 svg,.pf-part1 svg{width:13px;height:13px;fill:currentColor}
.tape-row .pf-part1:hover,.pf-part1:hover{border-color:var(--acid-2);background:rgba(255,255,255,.05)}
.tape-row .pf-part1.fait,.pf-part1.fait{background:var(--acid-2);color:#111}
@media(max-width:700px){.pf-share .lbl{display:none}}
.tape-row .dl{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:var(--acid-2);text-decoration:none;font-size:13px}
.tape-row .dl:hover{border-color:var(--acid-2);background:rgba(255,255,255,.05)}
.btn-dl{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 16px;border:1px solid var(--acid-2);
  color:var(--acid-2);text-decoration:none;font-size:14px;font-weight:500}
.btn-dl:hover{background:var(--acid-2);color:#111}
.btn-dl small{font-size:12px;opacity:.75;font-weight:400}
.tape-row .face{font-size:11.5px;font-weight:400;color:#8a8a86;margin-left:6px;white-space:nowrap}
@media (max-width:560px){
  details.an > summary{gap:10px;padding:11px 12px}
  details.an > summary .djs{display:none}
}

/* --- résultats de recherche --- */
.res{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.res .shot{width:92px;height:70px;flex:none;background:#111;overflow:hidden}
.res .shot img{width:100%;height:100%;object-fit:cover}
.res h3{margin:0 0 3px;font-size:16px}
.res .kind{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acid-2)}
.res p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.res mark{background:rgba(245,229,40,.25);color:var(--acid-2);padding:0 2px}

/* --- lecteur persistant --- */
/* ============================== LE LECTEUR ==============================
   Nos commandes, pas celles du navigateur : pochette, titre, second niveau
   d'information, spectre, qualités de flux. L'élément <audio> natif n'offrait
   rien de tout ça et changeait d'apparence d'un navigateur à l'autre. */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,rgba(20,20,24,.98),rgba(10,10,13,.99));
  border-top:1px solid #2a2a30;padding:11px 18px;display:flex;align-items:center;gap:14px;
  backdrop-filter:blur(10px)}
#bar audio{display:none}

/* Le filet de progression, posé sur l'arête supérieure.

   Au repos c'est un simple témoin d'avancement, discret, qui ne coûte pas une
   ligne de hauteur. Dès qu'on l'approche il s'épaissit, sort une poignée et
   annonce le temps visé : un set de deux heures se parcourt alors au doigt,
   sans écran supplémentaire. « touch-action:none » est indispensable — sans
   lui, un glissement sur téléphone ferait défiler la page au lieu de déplacer
   la lecture. */
#bar-fil{position:absolute;left:0;right:0;top:0;height:3px;background:#26262b;cursor:pointer;
  touch-action:none}
#bar-fil::after{content:"";position:absolute;left:0;right:0;top:-9px;height:20px}  /* zone de clic élargie */
#bar-fil i{display:block;height:100%;width:0;background:var(--acid);
  transition:width .2s linear;position:relative}
#bar-fil:hover,#bar-fil:focus-visible,#bar-fil.tire{height:6px;margin-top:-1px}
/* Pendant qu'on fait glisser, plus d'amortissement : le filet suit le doigt. */
#bar-fil.tire i{transition:none}

/* La poignée et la bulle n'apparaissent que si le déplacement est possible —
   un direct n'a pas de position, un fichier dont la durée n'est pas encore
   connue non plus. */
#bar-fil b{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-7px 0 0 -6.5px;
  border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(245,229,40,.22);
  opacity:0;pointer-events:none;transition:opacity .14s}
#bar-fil.actif:hover b,#bar-fil.actif:focus-visible b,#bar-fil.actif.tire b{opacity:1}
#bar-fil.actif.tire b{transform:scale(1.15)}

.bar-bulle{position:absolute;bottom:12px;transform:translateX(-50%);z-index:2;
  background:#101013;border:1px solid var(--line);color:var(--text);font-size:11.5px;
  padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;
  font-variant-numeric:tabular-nums;transition:opacity .12s;box-shadow:0 4px 14px rgba(0,0,0,.6)}
#bar-fil.actif:hover .bar-bulle,#bar-fil.actif.tire .bar-bulle{opacity:1}

/* Sur un écran tactile il n'y a pas de survol : la poignée reste donc visible,
   et la zone de préhension est nettement plus haute qu'à la souris. */
@media (hover:none){
  #bar-fil{height:5px}
  #bar-fil::after{top:-13px;height:30px}
  #bar-fil.actif b{opacity:1}
}

.bar-lire{width:46px;height:46px;flex:none;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--acid);color:#111;
  box-shadow:0 0 0 5px rgba(245,229,40,.12);transition:transform .12s,box-shadow .18s}
.bar-lire:hover{transform:scale(1.05);box-shadow:0 0 0 7px rgba(245,229,40,.18)}
.bar-lire svg{width:15px;height:15px;fill:currentColor}

#bar-cover{width:46px;height:46px;flex:none;border-radius:8px;object-fit:cover;
  border:1px solid rgba(255,255,255,.14);background:#000}

.bar-titres{min-width:0;flex:1}
#bar-title{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-sub{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden}
.bar-sub span{overflow:hidden;text-overflow:ellipsis}
.bar-pt{width:7px;height:7px;border-radius:50%;background:var(--acid-2);flex:none;opacity:.35}
#bar.joue .bar-pt{opacity:1;animation:bar-bat 1.4s infinite}
#bar.direct .bar-pt{background:var(--xbeat-vif)}
@keyframes bar-bat{0%,100%{opacity:1}50%{opacity:.2}}

/* Le spectre ne mesure pas le son (les MP3 sont ailleurs, et l'analyser
   exigerait l'autorisation de ce serveur) : il bat pendant la lecture et se
   couche à la pause — ce qu'on attend de lui à cette taille. */
#bar-spectre{display:flex;align-items:flex-end;gap:2px;height:26px;flex:none}
#bar-spectre b{width:4px;height:5px;border-radius:1px;background:var(--acid);transition:height .3s}
#bar.joue #bar-spectre b{animation:bar-sp 1.1s ease-in-out infinite}
#bar-spectre b:nth-child(3n){background:var(--acid-2)}
@keyframes bar-sp{0%,100%{height:5px}50%{height:24px}}
#bar.joue #bar-spectre b:nth-child(1){animation-delay:0s}    #bar.joue #bar-spectre b:nth-child(2){animation-delay:.09s}
#bar.joue #bar-spectre b:nth-child(3){animation-delay:.18s}  #bar.joue #bar-spectre b:nth-child(4){animation-delay:.27s}
#bar.joue #bar-spectre b:nth-child(5){animation-delay:.36s}  #bar.joue #bar-spectre b:nth-child(6){animation-delay:.45s}
#bar.joue #bar-spectre b:nth-child(7){animation-delay:.54s}  #bar.joue #bar-spectre b:nth-child(8){animation-delay:.63s}
#bar.joue #bar-spectre b:nth-child(9){animation-delay:.72s}  #bar.joue #bar-spectre b:nth-child(10){animation-delay:.81s}
#bar.joue #bar-spectre b:nth-child(11){animation-delay:.90s} #bar.joue #bar-spectre b:nth-child(12){animation-delay:.99s}
#bar.joue #bar-spectre b:nth-child(13){animation-delay:.20s} #bar.joue #bar-spectre b:nth-child(14){animation-delay:.40s}
#bar.joue #bar-spectre b:nth-child(15){animation-delay:.60s} #bar.joue #bar-spectre b:nth-child(16){animation-delay:.30s}

#bar-temps{font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;flex:none}

/* les qualités d'une radio : on change de flux sans quitter la page */
#bar-qual{display:flex;align-items:center;gap:2px;background:#191920;border:1px solid #2c2c33;
  border-radius:999px;padding:3px;flex:none}
#bar-qual button{border:0;background:none;color:var(--muted-2);font:inherit;font-size:11.5px;
  font-weight:700;letter-spacing:.06em;padding:4px 13px;border-radius:999px;cursor:pointer;line-height:1.4}
#bar-qual button.on{background:var(--acid);color:#111}
#bar-qual button:hover:not(.on){color:var(--text)}

#bar-vol{display:flex;align-items:center;gap:8px;flex:none}
#bar-muet{background:none;border:0;padding:0;color:var(--muted-2);cursor:pointer;display:grid;place-items:center}
#bar-muet svg{width:17px;height:17px;fill:currentColor}
#bar-muet:hover{color:var(--acid-2)}
#bar-muet.coupe{color:#5b5b60;position:relative}
#bar-muet.coupe::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:2px;
  background:currentColor;transform:rotate(-28deg)}
#bar-jauge{width:84px;height:5px;border-radius:3px;background:#303038;position:relative;cursor:pointer;flex:none}
#bar-jauge i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--acid);border-radius:3px}
#bar-jauge b{position:absolute;left:100%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.7)}

#bar-close{background:none;border:0;color:var(--muted-2);font-size:21px;cursor:pointer;line-height:1;
  padding:4px 2px;flex:none}
#bar-close:hover{color:var(--acid-2)}

/* Lecture impossible : toute la barre devient la porte de sortie. */
#bar.rejouable{cursor:pointer;border-top-color:var(--acid-2)}
#bar.rejouable .bar-sub{color:var(--acid-2)}

/* Sur téléphone : le volume passe par les boutons de l'appareil, et le spectre
   n'a plus la place. Restent l'essentiel et la progression. */
@media (max-width:760px){
  #bar{gap:11px;padding:10px 12px}
  #bar-spectre,#bar-vol{display:none}
  #bar-qual button{padding:4px 9px}
}
@media (max-width:520px){
  #bar-qual{display:none}
  #bar-temps{font-size:11px}
  #bar-cover{width:42px;height:42px}
  .bar-lire{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  #bar.joue #bar-spectre b{animation:none;height:14px}
  #bar.joue #bar-spectre b:nth-child(2n){height:20px}
}
/* Navigation sans rechargement : un voile discret pendant que la page arrive,
   sinon un clic sur un lien lent donne l'impression que rien ne s'est passé.
   Il n'est posé qu'au bout d'un quart de seconde (voir le script du gabarit) :
   une page rapide ne doit rien montrer du tout.

   Le voile est plus léger qu'avant — 45 % d'opacité, c'était une page à moitié
   effacée, et le retour à l'opacité pleine était sec, faute de transition en
   sens inverse. Ici les deux sens durent le même temps, et le texte reste
   parfaitement lisible pendant l'attente. */
#page{transition:opacity .16s ease}
.rh-chargement #page{opacity:.72}
.rh-chargement{cursor:progress}
@media (max-width:560px){
  #bar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  /* Visait le titre, et lui seul : « #bar b » attrapait aussi la poignée du
     filet de progression et les barres du spectre. */
  #bar-title{max-width:100%}
}

.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pager a,.pager > span{min-width:40px;padding:8px 12px;border:1px solid var(--line);color:#e8e8e3;
  text-decoration:none;font-size:13.5px;text-align:center;transition:border-color .15s,color .15s}
.pager a:hover{border-color:var(--acid-2);color:var(--acid-2)}
.pager .on{background:var(--acid-2);border-color:var(--acid-2);color:#111;font-weight:700}
/* « précédent » et « suivant » : plus larges, et repliés en petit écran où les
   numéros suffisent. */
.pager .pg-side{white-space:nowrap;color:var(--muted)}
.pager .pg-gap{border:0;min-width:0;padding:8px 2px;color:var(--muted-2)}
@media (max-width:560px){ .pager .pg-side{display:none} }

@media (max-width:900px){
  .fiche{grid-template-columns:1fr}
  .page{padding:18px 16px 50px}
}

/* ========================= VISIONNEUSE DE PHOTOS =========================
   Un flyer s'ouvre par-dessus la fiche, pas dans un autre onglet : on reste
   sur le site, la page est toujours là derrière, et on circule dans la
   galerie aux flèches, au clavier ou au doigt. */
html.v-ouverte{overflow:hidden}          /* la page ne défile plus derrière */
#visionneuse{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  /* Le fond est presque opaque et légèrement flouté : la page reste là,
     derrière, mais elle ne dispute plus la photo du regard. */
  background:rgba(5,5,7,.97);backdrop-filter:blur(7px);padding:clamp(12px,3vw,40px);
  animation:v-entre .18s ease;
}
@keyframes v-entre{from{opacity:0}to{opacity:1}}
#visionneuse figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%}
#visionneuse img{
  max-width:min(1500px,92vw);max-height:78vh;width:auto;height:auto;display:block;
  border:1px solid rgba(255,255,255,.16);background:#0a0a0c;
  box-shadow:0 20px 70px rgba(0,0,0,.75);
}
#visionneuse figcaption{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:min(1100px,90vw);text-align:center;color:#d6d6d2;font-size:14.5px;
}
#visionneuse figcaption em{font-style:normal;font-size:12.5px;color:var(--muted-2)}
#visionneuse figcaption b{font-size:12px;letter-spacing:.12em;color:var(--acid-2);font-weight:700;
  font-variant-numeric:tabular-nums}
#visionneuse button{
  position:absolute;background:rgba(20,20,24,.82);border:1px solid rgba(255,255,255,.18);
  color:#e8e8e4;cursor:pointer;display:grid;place-items:center;border-radius:50%;
  transition:background .15s,border-color .15s,color .15s;
}
#visionneuse button:hover{background:var(--acid);border-color:var(--acid);color:#111}
.v-fermer{top:14px;right:16px;width:44px;height:44px;font-size:26px;line-height:1;padding-bottom:4px}
.v-prec,.v-suiv{top:50%;transform:translateY(-50%);width:52px;height:52px}
.v-prec{left:14px}
.v-suiv{right:14px}
/* Une seule photo dans la galerie : les flèches n'ont rien à proposer. */
#visionneuse.seule .v-prec,#visionneuse.seule .v-suiv{display:none}
/* Sur téléphone, la photo prend la place et les flèches descendent en bas,
   là où le pouce les atteint. */
@media (max-width:620px){
  #visionneuse img{max-height:64vh}
  .v-prec,.v-suiv{top:auto;bottom:18px;transform:none;width:46px;height:46px}
  .v-prec{left:22px}
  .v-suiv{right:22px}
  #visionneuse figcaption{padding-bottom:70px}
}

/* ==========================================================================
   Proposer un événement — le seul formulaire public du site
   Repris de la maquette validée : des blocs empilés, un sous-titre par bloc,
   et des champs qui se replient tout seuls sur téléphone.
   ========================================================================== */
.pf .form-bloc{background:var(--panel);border:1px solid rgba(255,255,255,.13);
  padding:22px 24px;margin-bottom:16px}
.pf .form-bloc h2{
  font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:19px;
  letter-spacing:.05em;margin:0 0 4px;padding-bottom:8px;border-bottom:3px solid var(--acid-2);
  display:inline-block;
}
.pf .aide{color:var(--muted);font-size:13px;margin:10px 0 18px;max-width:75ch;line-height:1.6}
.pf .rangee{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:14px}
.pf .ch{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf .ch label{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pf .ch label i{color:var(--acid-2);font-style:normal}
.pf .ch input,.pf .ch select,.pf .ch textarea{
  background:#101013;border:1px solid var(--line);color:var(--text);
  padding:10px 12px;font:inherit;font-size:14px;border-radius:2px;max-width:100%;
}
.pf .ch textarea{min-height:120px;resize:vertical}
.pf .ch small{color:var(--muted-2);font-size:11.5px}

/* Zone de dépôt du flyer : c'est l'étiquette qui porte le champ, invisible. */
.pf .depot{
  display:block;border:1px dashed #3a3a42;background:#101013;padding:22px;text-align:center;
  color:var(--muted-2);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s;
}
.pf .depot:hover{border-color:var(--acid-2);color:var(--muted)}
.pf .depot.plein{border-style:solid;border-color:var(--acid-2)}
.pf .depot b{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.pf .depot input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf .depot:focus-within{outline:2px solid var(--acid);outline-offset:2px}

.pf .check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);
  line-height:1.5;margin-bottom:16px;cursor:pointer}
.pf .check input{margin-top:3px;flex:none;accent-color:var(--acid)}
.pf .envoyer{
  background:var(--acid);color:#111;border:0;padding:13px 28px;font:inherit;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:13px;cursor:pointer;border-radius:2px;
}
.pf .envoyer:hover{background:var(--acid-2)}
.pf .note{font-size:12.5px;color:var(--muted-2);margin:12px 0 0;line-height:1.6}

/* Le champ-piège : hors écran, jamais masqué par « display:none » — certains
   robots ignorent justement ce qui est masqué de cette façon. */
.pf-piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.bandeau{
  display:block;background:rgba(245,229,40,.07);border:1px solid rgba(245,229,40,.3);
  padding:14px 18px;margin:0 0 22px;font-size:13.5px;color:#e8e8e4;line-height:1.6;max-width:78ch;
}
.bandeau b{color:var(--acid-2)}

.pf-erreurs{
  background:rgba(229,52,79,.1);border:1px solid rgba(229,52,79,.45);
  padding:14px 18px;margin:0 0 20px;font-size:13.5px;max-width:78ch;
}
.pf-erreurs p{margin:0 0 8px;color:#ff8d9c;font-weight:600}
.pf-erreurs ul{margin:0;padding-left:20px;color:#e8e8e4}
.pf-erreurs li{margin:3px 0}

.pf-merci{
  background:var(--panel);border:1px solid rgba(255,255,255,.13);border-left:4px solid var(--acid);
  padding:26px 28px;max-width:70ch;color:var(--muted);line-height:1.7;
}
.pf-merci-t{margin:0 0 10px;font-size:19px;color:#fff;font-weight:700}

/* Bouton d'appel sur la page des soirées, à côté du titre. */
.pf-appel{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 22px}
.pf-appel span{font-size:13px;color:var(--muted-2)}

@media (max-width:620px){
  .pf .form-bloc{padding:18px 16px}
  .pf .rangee{grid-template-columns:1fr;gap:13px}
  .pf .envoyer{width:100%}
}

/* Événement sans flyer : l'image d'attente, un peu en retrait pour qu'on la
   distingue au premier coup d'œil d'un vrai visuel de soirée. */
.fiche .hero-shot.flyer-vide{border-style:dashed;border-color:rgba(255,255,255,.18)}
.fiche .hero-shot.flyer-vide img{opacity:.72}

/* Le choix de la rubrique, sur la page « Proposer une fiche ». */
.pf-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:8px}
.pf-carte{display:block;background:var(--panel);border:1px solid rgba(255,255,255,.13);
  padding:18px 20px;border-left:4px solid var(--c);
  transition:border-color .15s,transform .12s}
.pf-carte:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3);border-left-color:var(--c)}
.pf-carte h3{margin:0 0 5px;font-size:16px;color:#fff;font-weight:700}
.pf-carte:hover h3{color:var(--c)}
.pf-carte p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

/* Un champ qui prend toute la largeur : description, tracklist, adresse d'un
   fichier. La grille reste la même, le champ occupe simplement toutes ses
   colonnes. */
.pf .ch.large{grid-column:1 / -1}
.pf .ch.demi{grid-column:span 2}
@media (max-width:620px){.pf .ch.demi{grid-column:auto}}
.pf-autre{margin-left:16px;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.pf-autre:hover{color:var(--acid-2);border-bottom-color:var(--acid-2)}

/* --- formulaire de contact -------------------------------------------------
   Quatre champs sous le texte de la page. Rien d'exotique : des champs larges,
   lisibles, et un piège à robots hors de l'écran — jamais display:none, que
   certains automates savent justement repérer. */
.ct-form{margin-top:4px}
.ct-form p{margin:0 0 14px}
.ct-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.ct-form input[type=text],.ct-form input[type=email],.ct-form select,.ct-form textarea{
  width:100%;padding:10px 12px;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:3px;font:inherit;font-size:14.5px}
.ct-form textarea{resize:vertical;min-height:140px;line-height:1.55}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  outline:none;border-color:var(--acid-2)}
.ct-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.ct-duo{grid-template-columns:1fr}}
.ct-envoi{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ct-envoi span{font-size:12.5px;color:var(--muted-2)}
.ct-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-erreurs{margin:0 0 16px;padding:12px 16px 12px 34px;border:1px solid rgba(229,52,79,.45);
  background:rgba(229,52,79,.08);color:#ff9aa8;font-size:14px;border-radius:4px}
.ct-merci{padding:14px 18px;border:1px solid rgba(56,211,159,.45);background:rgba(56,211,159,.08);
  color:#7ce0bd;font-size:15px;border-radius:4px;margin:0}

/* La colonne de droite de la page Contact : ce qui aide, ce qu'on peut
   proposer, et ce que l'archive contient déjà. Sur téléphone, elle passe sous
   le formulaire — la grille .fiche s'en charge. */
/* La page Contact a sa propre grille. Réutiliser celle des fiches étirait la
   colonne de gauche sur toute la largeur, alors que le texte s'arrête à 72
   caractères et le formulaire s'arrêtait plus tôt encore : il restait un trou
   au milieu. Ici le formulaire occupe toute sa colonne, et la colonne de
   droite tient le reste — plus de vide entre les deux ni sur le côté. */
.ct-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start}
.ct-cote{display:flex;flex-direction:column;gap:14px}
.ct-bloc{border:1px solid var(--line);background:var(--panel);padding:16px 18px}
.ct-bloc h3{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--acid)}
.ct-bloc p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.6}
.ct-bloc ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.65}
.ct-bloc li+li{margin-top:7px}
.ct-chiffres dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin:0}
.ct-chiffres dt{font-size:22px;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.1}
.ct-chiffres dd{margin:2px 0 0;font-size:12px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.ct-manque{margin:14px 0 0 !important;font-size:12.5px;font-style:italic}

/* Sur écran étroit, la colonne de droite passe sous le formulaire. La règle
   vit ici, après la grille : une feuille se lit de haut en bas, et la dernière
   règle de même poids l'emporte. */
@media (max-width:900px){ .ct-page{grid-template-columns:1fr} }

/* ------------------------------------------------------------------ vidéos
   Les vidéos d'une fiche se regardent sur la fiche. Deux cas : un fichier du
   serveur, qui reçoit un lecteur posé là ; une vidéo de plateforme, qui reçoit
   une vignette cliquable devenant le lecteur — rien n'est chargé chez YouTube
   avant le clic. Deux par rangée en grand écran, une sur téléphone. */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
/* Bornée : sur une fiche qui ne compte qu'une vidéo, la grille lui donnait
   toute la largeur — soit, pour une source en 4/3, un lecteur de huit cents
   pixels de haut qui écrasait le reste de la page. */
.vid{margin:0;min-width:0;max-width:680px}
/* Pas de rapport d'image imposé : une VHS des années 90 est en 4/3, et la
   forcer en 16/9 l'encadrait de deux larges bandes noires qui mangeaient un
   tiers de la largeur. Le navigateur prend les dimensions réelles du fichier
   dès qu'il a lu l'en-tête. La hauteur minimale évite que la case se replie à
   rien pendant cette seconde-là, ce qui ferait sauter la page. */
/* Pas de rapport d'image imposé, c'est un choix assumé : une VHS des années 90
   est en 4/3, et la forcer en 16/9 l'encadre de deux larges bandes noires. Le
   navigateur prend les dimensions réelles du fichier dès qu'il a lu l'en-tête.

   Le prix de ce choix : la case fait d'abord 320 px, puis prend sa vraie
   hauteur — un léger décalage de ce qui suit, une fois, au chargement. C'est
   moins gênant que des bandes noires en permanence sur chaque vidéo. La hauteur
   plafond garde à sa taille une vidéo verticale filmée au téléphone. */
.vid video{width:100%;height:auto;min-height:320px;max-height:70vh;background:#000;
           border:1px solid var(--line);border-radius:4px;display:block}
/* Le bouton porte le rapport d'image lui-même : l'iframe qui le remplace hérite
   du même cadre, donc la page ne saute pas au clic. */
.vid-lancer{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);
            border-radius:4px;display:flex;flex-direction:column;align-items:center;
            justify-content:center;gap:8px;cursor:pointer;color:var(--acid-2);
            font:inherit;transition:border-color .15s}
.vid-lancer:hover,.vid-lancer:focus-visible{border-color:var(--acid-2)}
.vid-play{font-size:34px;line-height:1}
.vid-src{color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.vid iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:4px;display:block}
.vid-hors{display:inline-block;padding:5px 12px;border:1px solid var(--line);
          background:var(--panel-2);border-radius:3px;font-size:13px}
/* La légende porte le titre, pas une note de bas de page : sous une vidéo qui
   fait toute la largeur, du petit gris se perdait complètement. */
.vid figcaption{margin-top:10px;line-height:1.4}
.vid figcaption b{display:block;font-weight:600;font-size:15px;color:var(--text)}
.vid-meta{display:block;margin-top:3px;color:var(--muted-2);font-size:12px;
          text-transform:uppercase;letter-spacing:.07em}

/* ------------------------------------------------ compléter une fiche
   L'appel à contribution, en bas de fiche : celui qui a tout lu est celui qui
   sait ce qui manque. Discret — un encart, pas une bannière. */
.contrib-appel{border:1px dashed var(--line);border-radius:4px;padding:18px 20px;
               background:rgba(255,255,255,.015)}
.contrib-appel h2{margin-top:0}
.contrib-appel p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 14px}

/* ===========================================================================
   LES ARTICLES
   Documentaires, récits, dossiers. Trois endroits : le bloc de l'accueil, la
   page de liste, et l'article lui-même. Rien ici ne touche au reste du site :
   toutes les règles sont préfixées « art- » ou « bloc-articles ».
   =========================================================================== */

/* -------------------------------------------------- le bloc de l'accueil */
.bloc-articles{padding:10px 36px 0}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.art{display:block;border:1px solid rgba(255,255,255,.16);background:#0c0c0e;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.art .ph{aspect-ratio:16/9}
.art .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.art .cap{display:block;padding:12px 14px 15px}
.art h3{margin:0;font-size:15.5px;font-weight:600;color:#fff;line-height:1.32}
.art p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.art:hover h3{color:var(--acid)}
.art:hover .shade{background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.9))}

/* L'étiquette de genre et la date, communes aux trois endroits. */
.art-meta{display:flex;align-items:center;gap:9px;margin:0 0 7px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.art-genre{display:inline-block;padding:2px 7px;border:1px solid rgba(245,229,40,.4);
  color:var(--acid);letter-spacing:.06em}

/* La pastille « vidéo », posée sur la vignette. */
.art-film{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;
  gap:6px;padding:3px 8px;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.22);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff}

/* --------------------------------------------------- la page de la liste */
.zone-articles{padding:10px 36px 40px}
.art-liste{display:grid;gap:14px}
.art-ligne{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;
  border:1px solid rgba(255,255,255,.14);background:#0c0c0e;padding:14px}
.art-ligne .art-vign{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:#141419}
.art-ligne .art-vign .ph{position:absolute;inset:0;border:0}
.art-ligne h3{margin:0;font-size:19px;color:#fff;font-weight:600;line-height:1.25}
.art-ligne p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.art-ligne:hover h3{color:var(--acid)}
.art-ligne:hover{border-color:rgba(245,229,40,.35)}

/* ------------------------------------------------------------ un article */
.art-page{max-width:none}
.art-tete{max-width:820px;margin:0 auto;padding:6px 0 22px}
.art-tete h1{font-family:"Anton",Impact,sans-serif;font-weight:400;
  margin:10px 0 0;font-size:clamp(28px,3.6vw,44px);line-height:1.1;color:#fff;
  letter-spacing:.01em}
.art-chapeau{margin:14px 0 0;font-size:17px;line-height:1.6;color:#d6d6d0}
.art-video,.art-couverture{max-width:960px;margin:0 auto 26px}
.art-couverture img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.art-lien-video{max-width:820px;margin:0 auto 24px}
.art-corps{max-width:820px;margin:0 auto;font-size:16.5px;line-height:1.78;color:#cfcfc9}
.art-corps p{margin:0 0 18px}
.art-photos{max-width:960px;margin:10px auto 26px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px}
.art-photos figure{margin:0}
.art-photos img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.12)}
.art-photos figcaption{margin:6px 0 0;font-size:12.5px;color:var(--muted-2);line-height:1.45}
.art-photos .credit{display:block;color:var(--muted-2);opacity:.8}
.art-citees{max-width:820px;margin:28px auto 0;padding-top:20px;border-top:1px solid var(--line)}
.art-citees h2{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.art-puces{display:flex;flex-wrap:wrap;gap:8px}
.art-puces a{display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;color:#e4e4de}
.art-puces a:hover{border-color:var(--acid);color:var(--acid)}
.art-retour{max-width:820px;margin:26px auto 0;font-size:14px}
.art-brouillon{max-width:820px;margin:0 auto 18px;padding:9px 13px;
  border-left:3px solid #ffb020;background:rgba(255,176,32,.08);color:#e9e9e4;font-size:13.5px}

/* ------------------------------------------------------- « à lire aussi » */
/* Bloc volontairement doté de ses propres classes : il vit à l'intérieur de
   l'article, où « .art-corps » impose une largeur de 820 px centrée. */
.art-aussi{max-width:820px;margin:34px auto 0;padding-top:22px;
  border-top:1px solid var(--line)}
.art-aussi h2{margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600}
.art-aussi-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.art-aussi-item{display:block;border:1px solid rgba(255,255,255,.12);background:#0c0c0e}
.art-aussi-item:hover{border-color:rgba(245,229,40,.35)}
.aa-vign{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#141419}
.aa-vign img{width:100%;height:100%;object-fit:cover;display:block}
/* Les initiales, à l'échelle de ces petites vignettes : la taille générale
   (jusqu'à 66 px) les ferait déborder. */
.aa-vign .none::before{font-size:clamp(24px,3vw,34px)}
.aa-film{position:absolute;bottom:6px;right:6px;display:inline-flex;align-items:center;
  padding:2px 5px;background:rgba(0,0,0,.72);color:#fff}
.aa-texte{display:block;padding:9px 10px 11px}
.aa-genre{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}
.aa-texte strong{display:block;color:#fff;font-size:14.5px;font-weight:600;line-height:1.3}
.art-aussi-item:hover .aa-texte strong{color:var(--acid)}

/* ----------------------------------------------- les articles d'une fiche */
.fiche-articles{display:grid;gap:10px}
.fiche-articles a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;
  align-items:center;border:1px solid rgba(255,255,255,.12);padding:9px;background:#0c0c0e}
.fiche-articles .ph{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#141419}
.fiche-articles b{display:block;color:#fff;font-weight:600;font-size:14.5px;line-height:1.3}
.fiche-articles small{display:block;margin-top:3px;color:var(--muted-2);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase}
.fiche-articles a:hover{border-color:rgba(245,229,40,.35)}
.fiche-articles a:hover b{color:var(--acid)}

@media (max-width:900px){
  .bloc-articles{padding:10px 16px 0}
  .arts{grid-template-columns:1fr;gap:12px}
  .zone-articles{padding:10px 16px 30px}
  .art-ligne{grid-template-columns:1fr;gap:12px}
  .art-photos{grid-template-columns:repeat(2,1fr)}
  /* Trois vignettes de 100 px ne se lisent pas : sur téléphone, on les empile
     en lignes, vignette à gauche. */
  .art-aussi-liste{grid-template-columns:1fr;gap:10px}
  .art-aussi-item{display:grid;grid-template-columns:110px minmax(0,1fr);
    gap:12px;align-items:center;padding:8px}
  .art-aussi-item .aa-texte{padding:0}
}

/* ========================= COMMENTAIRES DES VISITEURS ===================== */
/* Le bloc vit en bas d'une fiche ou d'un article, dans la même largeur de
   lecture que le texte — 820 px, comme « à lire aussi ». */
.cm{max-width:820px;margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line)}
.cm-tete{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.cm-tete h2{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600}
.cm-tete .n{color:var(--muted-2);font-size:13px}

.cm-liste{display:grid;gap:16px;margin-bottom:28px}
.cm-un{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 16px;
  border:1px solid rgba(255,255,255,.1);background:#0c0c0e}
/* La pastille reprend la teinte tirée du nom, comme les vignettes sans photo :
   deux personnes différentes n'ont jamais la même couleur. */
.cm-pastille{width:44px;height:44px;display:grid;place-items:center;
  font-family:"Anton",Impact,sans-serif;font-size:17px;color:#0b0b0d;
  background:hsl(var(--vh,210) 62% 62%)}
.cm-qui{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.cm-qui b{color:#fff;font-size:14.5px;font-weight:600}
.cm-qui time{color:var(--muted-2);font-size:12.5px}
.cm-un p{margin:0 0 10px;color:#cfcfc9;font-size:15px;line-height:1.65}
.cm-un p:last-child{margin-bottom:0}

/* La réponse du site : en retrait, dans le jaune. C'est ce qui fait la
   différence entre une liste de commentaires et une conversation. */
.cm-reponse{margin-top:12px;padding:11px 14px;border-left:2px solid var(--acid);
  background:rgba(245,229,40,.05)}
.cm-reponse .cm-qui b{color:var(--acid)}

.cm-form{padding:18px 20px;border:1px solid rgba(255,255,255,.12);background:#0a0a0c;
  position:relative}
.cm-form h3{margin:0 0 4px;font-size:15px;color:#fff}
.cm-form .aide{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.55}
.cm-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cm-form label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.cm-form input[type=text],.cm-form input[type=email],.cm-form textarea{
  width:100%;box-sizing:border-box;background:#141418;color:#e8e8e2;
  border:1px solid rgba(255,255,255,.16);padding:9px 11px;font:inherit;font-size:14px}
.cm-form textarea{min-height:110px;resize:vertical}
.cm-form input:focus,.cm-form textarea:focus{outline:2px solid var(--acid);outline-offset:1px}
/* Le piège : hors de l'écran, mais pas « display:none » — certains robots
   savent qu'un champ caché ainsi ne se remplit pas. */
.cm-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cm-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.cm-pied .mention{color:var(--muted-2);font-size:12.5px;line-height:1.5;max-width:52ch}
.cm-envoyer{background:var(--acid);color:#111;border:0;padding:10px 20px;font:inherit;
  font-weight:700;font-size:14px;cursor:pointer;margin-left:auto}
.cm-envoyer:hover{background:#fff}

.cm-avis{padding:12px 15px;margin-bottom:18px;border-left:3px solid #5fd39b;
  background:rgba(95,211,155,.1);color:#e9e9e4;font-size:13.5px;line-height:1.55}
.cm-avis.erreur{border-left-color:#e5344f;background:rgba(229,52,79,.1)}
.cm-ferme{padding:12px 15px;color:var(--muted);font-size:13.5px;
  border:1px dashed rgba(255,255,255,.14)}

@media(max-width:700px){
  .cm-grille{grid-template-columns:1fr}
  .cm-envoyer{margin-left:0;width:100%}
}