/* =========================================================================
   Dogmazic.net — feuille de style de la page d'accueil (refonte)
   -------------------------------------------------------------------------
   Ce fichier remplace style.css POUR LA PAGE D'ACCUEIL UNIQUEMENT.
   style.css est conserve tel quel : irc/index.php s'en sert encore.
   ========================================================================= */

/* --- Polices ------------------------------------------------------------
   Trois polices variables sous licence libre (SIL OFL 1.1), auto-hebergees :
   pas de Google Fonts, donc pas de requete vers un tiers ni de question RGPD.
   Les .woff2 ne sont pas dans le depot ; la commande pour les telecharger est
   dans le README. Tant qu'ils sont absents, le navigateur retombe sur la pile
   systeme et la page reste parfaitement lisible. */
@font-face{
  font-family:'Archivo';
  src:url('../font/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../font/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../font/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  --encre:#0F0F11;        /* le fond de page, inchange */
  /* Les cartes se detachaient a peine du fond (rapport de contraste 1,07).
     Elles sont remontees de deux crans : 1,17, ce qui suffit a lire un bord
     de cadre sans eclaircir l'ensemble ni toucher au fond de page.
     Les bordures suivent, sinon elles disparaitraient dans le nouveau gris. */
  --panneau:#1F1F26;
  --panneau-clair:#292930;
  --sillon:#3A3A44;
  --orange:#FF9D00;      /* la couleur historique du site */
  --braise:#FF5E3A;      /* le rouge de la mascotte */
  --craie:#EDE7DE;
  --craie-basse:#9A968F;

  --display:'Archivo','Archivo Expanded','Helvetica Neue',Helvetica,Arial,sans-serif;
  --texte:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --data:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --large:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--encre);color:var(--craie);
  font-family:var(--texte);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--craie)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
h2{font-size:clamp(28px,4vw,44px)}
.wrap{max-width:var(--large);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--craie-basse);margin-bottom:12px;display:block;
}
.invisible{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* =============================== BARRE HAUTE =============================== */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(15,15,17,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--sillon);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:58px}
.marque{font-family:var(--display);font-weight:900;font-size:19px;color:var(--craie);letter-spacing:-.03em}
.marque:hover{color:var(--craie)}
.marque span{color:var(--orange)}
.galaxie-liens{display:flex;gap:4px}
.galaxie-liens a{font-size:14px;padding:6px 12px;border-radius:999px;color:var(--craie-basse)}
.galaxie-liens a:hover{background:var(--panneau-clair);color:var(--craie)}
.galaxie-liens a.ici{color:var(--craie);background:var(--panneau-clair)}

#stats_bandeau{
  margin-left:auto;font-family:var(--data);font-size:12px;color:var(--craie-basse);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
#stats_bandeau b{color:var(--orange);font-weight:700}
#stats_bandeau .sep{opacity:.45;padding:0 6px}

.langues{display:flex;gap:2px;background:var(--panneau);border:1px solid var(--sillon);
  border-radius:999px;padding:2px;flex:none}
.langues a{
  font-family:var(--data);font-size:11px;letter-spacing:.06em;padding:4px 9px;
  border-radius:999px;color:var(--craie-basse);
}
.langues a:hover{color:var(--craie)}
.langues a.ici{background:var(--orange);color:#231000;font-weight:700}
.connexion{font-size:14px;white-space:nowrap;flex:none}
.recherche-mini{flex:none;display:flex;align-items:center}
.recherche-mini img{width:18px;height:18px;opacity:.7}
.recherche-mini:hover img{opacity:1}

/* =============================== HERO / GALAXIE =============================== */
.hero{padding:60px 0 40px;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;left:6%;top:-40px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,94,58,.16),transparent 62%);pointer-events:none;
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,5.4vw,64px)}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--orange),var(--braise));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chapeau{font-size:18px;color:var(--craie-basse);margin:20px 0 28px;max-width:46ch}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:10px;border:1px solid var(--sillon);
  background:var(--panneau);color:var(--craie);cursor:pointer;transition:.18s;
}
.btn:hover{border-color:var(--orange);color:var(--craie);transform:translateY(-1px)}
.btn.plein{background:linear-gradient(100deg,var(--orange),var(--braise));border-color:transparent;color:#231000}
.btn.plein:hover{filter:brightness(1.08);color:#231000}

/* --- l'orbite : anneaux CSS, astres en liens, disque au centre --- */
.orbite{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.anneau{position:absolute;border-radius:50%;border:1px solid var(--sillon);pointer-events:none}
.anneau.a1{inset:18%}
.anneau.a2{inset:2%;border-style:dashed;border-color:rgba(255,157,0,.35)}

.platine{
  position:absolute;left:50%;top:50%;width:41%;aspect-ratio:1;margin:-20.5% 0 0 -20.5%;
  border:none;background:none;padding:0;cursor:pointer;border-radius:50%;
}
.platine img{width:100%;height:100%;display:block;border-radius:50%}
.platine::after{ /* le halo, pour que le vinyle noir ne se fonde pas dans le fond */
  content:'';position:absolute;inset:-7%;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,157,0,.22);pointer-events:none;
}
.platine .badge{
  position:absolute;right:-6%;top:2%;width:26%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(100deg,var(--orange),var(--braise));color:#231000;
  display:grid;place-items:center;font-size:14px;transition:.18s;
}
.platine:hover .badge{transform:scale(1.1)}
.orbite .legende{
  position:absolute;left:0;right:0;bottom:11%;text-align:center;
  font-family:var(--data);font-size:11px;letter-spacing:.14em;color:var(--craie-basse);
}
/* Le disque tourne doucement en permanence, et accelere pendant la lecture. */
@media (prefers-reduced-motion:no-preference){
  .platine img{animation:tourne 24s linear infinite}
  body.joue .platine img{animation-duration:5s}
  @keyframes tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
}

.astre{
  position:absolute;width:17%;height:17%;border-radius:50%;
  background:var(--panneau);border:1px solid var(--sillon);
  display:grid;place-items:center;text-align:center;line-height:1.15;transition:.18s;
  /* le libelle deborde du cercle sans le deformer : sinon un retour a la
     ligne transforme la pastille ronde en rectangle */
  overflow:visible;white-space:nowrap;
}
.astre:hover{border-color:var(--orange);background:var(--panneau-clair)}
.astre b{font-family:var(--display);font-size:13px;color:var(--craie);display:block}
.astre > span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.astre:hover b{color:var(--orange)}
.astre .sous{font-family:var(--data);font-size:9px;color:var(--craie-basse);display:block;margin-top:2px}
.astre > span{display:block}
/* prefixe orb- : « .asso » tout court entrerait en collision avec la carte
   de la section association plus bas dans ce fichier. */
.astre.orb-archive{left:42%;top:1%}
.astre.orb-radio{left:73%;top:60%}
.astre.orb-asso{left:11%;top:60%}

/* =============================== LECTEUR RADIO =============================== */
.radio-bar{border-top:1px solid var(--sillon);border-bottom:1px solid var(--sillon);background:var(--panneau)}
.radio-bar .wrap{display:flex;align-items:center;gap:18px;padding:14px 24px;flex-wrap:wrap}
.radio-bar audio{display:none}
.play{
  width:46px;height:46px;flex:none;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(100deg,var(--orange),var(--braise));color:#231000;
  font-size:15px;display:grid;place-items:center;
}
.onde{display:flex;gap:3px;align-items:flex-end;height:22px;flex:none}
.onde i{width:3px;height:6px;background:var(--orange);border-radius:2px;opacity:.5}
@media (prefers-reduced-motion:no-preference){
  body.joue .onde i{animation:vu 1.1s ease-in-out infinite;opacity:.85}
  body.joue .onde i:nth-child(2){animation-delay:.15s}
  body.joue .onde i:nth-child(3){animation-delay:.3s}
  body.joue .onde i:nth-child(4){animation-delay:.45s}
  body.joue .onde i:nth-child(5){animation-delay:.6s}
  @keyframes vu{0%,100%{height:5px}50%{height:20px}}
}
.piste{min-width:0}
.piste .titre{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piste .titre a{color:var(--craie)}
.piste .titre a:hover{color:var(--orange)}
.piste .meta{font-family:var(--data);font-size:12px;color:var(--craie-basse)}
.radio-bar .pochette-radio{width:46px;height:46px;border-radius:6px;flex:none;object-fit:cover}
.chip{
  font-family:var(--data);font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--sillon);color:var(--craie-basse);white-space:nowrap;
}
.chip.libre{border-color:rgba(255,157,0,.4);color:var(--orange)}
/* La puce porte une infobulle (la licence exacte du morceau en cours) :
   le pointeur « help » et le souligne pointille le signalent. */
a.chip.libre{
  cursor:help;text-decoration:underline dotted rgba(255,157,0,.5);text-underline-offset:3px;
  margin-left:auto;
  /* Rien ne joue : la licence n'a aucun sens, on la cache plutot que
     d'afficher un libelle generique qu'on prendrait pour celle de la radio. */
  display:none;
}
body.joue a.chip.libre{display:inline-block}
a.chip.libre:hover{background:rgba(255,157,0,.12);color:var(--orange)}

/* =============================== SECTIONS =============================== */
main > section{padding:66px 0;border-top:1px solid var(--sillon)}
main > section:first-of-type{border-top:none}
.titre-rang{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.titre-rang a{font-size:14px;font-family:var(--data)}

/* --- grille d'albums --- */
.grille-albums{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;
  list-style:none;padding:0;margin:0;
}
.grille-albums .album a{display:block;color:inherit}
.grille-albums .pochette{
  aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--panneau-clair);
  display:block;transition:.2s;
}
.grille-albums img{width:100%;height:100%;object-fit:cover;display:block}
.grille-albums .album a:hover .pochette{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.grille-albums p{
  font-size:14.5px;margin:10px 0 0;font-weight:600;color:var(--craie);line-height:1.3;
}
.grille-albums .par{
  display:block;font-size:13px;color:var(--craie-basse);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.grille-albums .album a:hover p{color:var(--orange)}

/* --- liste de morceaux --- */
.pistes{display:grid;gap:2px;list-style:none;padding:0;margin:0}
.pistes a{
  display:grid;grid-template-columns:34px 44px 1fr auto 40px;align-items:center;gap:14px;
  padding:8px 12px;border-radius:10px;color:inherit;transition:.14s;
}
.pistes a:hover{background:var(--panneau);color:inherit}
.pistes .rang{font-family:var(--data);font-size:12px;color:var(--craie-basse);text-align:right}
.pistes a:hover .rang{color:var(--orange)}
.pistes .vignette{width:44px;height:44px;border-radius:6px;overflow:hidden;background:var(--panneau-clair)}
.pistes .vignette img{width:100%;height:100%;object-fit:cover;display:block}
.pistes .quoi{min-width:0}
.pistes .quoi b{display:block;font-weight:600;font-size:15px;color:var(--craie);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pistes a:hover .quoi b{color:var(--orange)}
.pistes .ecouter{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--panneau-clair);color:var(--craie-basse);font-size:11px;opacity:0;transition:.14s;
}
.pistes a:hover .ecouter{opacity:1;background:var(--orange);color:#231000}

/* --- trois cartes --- */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.carte{background:var(--panneau);border:1px solid var(--sillon);border-radius:14px;padding:26px;transition:.2s}
.carte:hover{border-color:rgba(255,157,0,.45);transform:translateY(-2px)}
.carte h3{font-size:20px;margin-bottom:8px}
.carte p{color:var(--craie-basse);font-size:15px;margin:0 0 16px}
.carte .num{font-family:var(--data);font-size:12px;color:var(--orange);display:block;margin-bottom:14px;
  letter-spacing:.1em;text-transform:uppercase}
.carte code{font-family:var(--data);color:var(--craie)}
.carte button{
  background:none;border:none;padding:0;font:inherit;color:var(--orange);cursor:pointer;
}
.carte button:hover{color:var(--craie)}

/* --- chiffres --- */
#stats .dedans{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
#stats_phrase{
  font-family:var(--display);font-size:clamp(19px,2.3vw,26px);font-weight:600;line-height:1.35;margin:0;
}
#stats_phrase strong{background:linear-gradient(100deg,var(--orange),var(--braise));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
#stats_licences{list-style:none;padding:0;margin:0}
#stats_licences a{
  display:grid;grid-template-columns:10.5em 1fr 6.5em;align-items:center;gap:12px;
  padding:4px 0;color:var(--craie);
}
#stats_licences .stats_valeur{white-space:nowrap}
#stats_licences a:hover .stats_barre_pleine{background:linear-gradient(90deg,var(--orange),var(--braise))}
#stats_licences .stats_nom{font-family:var(--data);font-size:12px}
#stats_licences .stats_barre{height:9px;background:var(--sillon);border-radius:99px;overflow:hidden}
#stats_licences .stats_barre_pleine{display:block;height:100%;background:var(--orange);border-radius:99px}
#stats_licences .stats_valeur{font-family:var(--data);font-size:12px;color:var(--craie-basse);text-align:right}
.stats_note{font-size:80%;color:var(--craie-basse);margin-top:14px}
/* Le spectre des licences : le texte explique ce que le graphe d'a cote
   montre, il doit donc rester lisible sans voler la vedette a la phrase. */
.spectre{margin-top:22px;font-size:15px;color:var(--craie-basse);max-width:52ch}
.spectre p{margin:0 0 12px}
.spectre p:last-child{margin-bottom:0}
.spectre strong{color:var(--craie);font-family:var(--data);font-size:14px;font-weight:700}
.spectre em{color:var(--craie);font-style:normal}

/* --- vie de l'asso : blog + forum --- */
.vie{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
.colonne{background:var(--panneau);border:1px solid var(--sillon);border-radius:16px;overflow:hidden}
.colonne > header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--sillon);
}
.colonne > header h3{font-size:17px}
.colonne > header .source{font-family:var(--data);font-size:11px;color:var(--craie-basse)}
.colonne .pied-colonne{padding:16px 22px;font-size:13.5px}

.billet-une{display:block;padding:22px;border-bottom:1px solid var(--sillon);transition:.15s}
.billet-une:hover{background:var(--panneau-clair)}
.billet-une .date{font-family:var(--data);font-size:11px;color:var(--orange);letter-spacing:.08em}
.billet-une h4{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;
  margin:8px 0 10px;color:var(--craie);line-height:1.15}
.billet-une p{margin:0;font-size:14px;color:var(--craie-basse);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.billet{display:flex;gap:14px;align-items:baseline;padding:13px 22px;
  border-bottom:1px solid var(--sillon);transition:.15s}
.billet:hover{background:var(--panneau-clair)}
.billet .date{font-family:var(--data);font-size:11px;color:var(--craie-basse);flex:none;width:5.4em}
.billet .titre{font-size:14.5px;color:var(--craie);font-weight:500}
.billet:hover .titre{color:var(--orange)}

.sujet{display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:13px 22px;
  border-bottom:1px solid var(--sillon);transition:.15s}
.sujet:hover{background:var(--panneau-clair)}
.sujet .titre{font-size:14.5px;color:var(--craie);font-weight:500}
.sujet:hover .titre{color:var(--orange)}
.sujet .quand{font-family:var(--data);font-size:11px;color:var(--craie-basse);white-space:nowrap}
.sujet .qui{font-size:12.5px;color:var(--craie-basse);grid-column:1/-1}

/* --- association --- */
.asso{
  background:var(--panneau);border:1px solid var(--sillon);border-radius:18px;padding:42px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:42px;align-items:center;
}
.asso p{color:var(--craie-basse)}
.asso strong{color:var(--craie)}
.soutien{display:flex;flex-direction:column;gap:10px}
.soutien .btn{text-align:center}
.soutien .fiscal{font-size:13px;margin:6px 0 0;text-align:center;color:var(--craie-basse)}
.social-rang{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.social-rang a{
  font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--sillon);
  color:var(--craie-basse);
}
.social-rang a:hover{border-color:var(--orange);color:var(--orange)}

/* --- publier --- */
.publier{background:var(--panneau);border:1px solid var(--sillon);border-radius:16px;padding:30px}
.publier .note{display:block;font-size:13px;color:var(--craie-basse);margin-top:14px;
  border-top:1px solid var(--sillon);padding-top:14px}

/* =============================== PIED DE PAGE =============================== */
footer{border-top:1px solid var(--sillon);padding:46px 0 60px}
.plan{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:34px}
.plan h4{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--craie-basse);margin:0 0 12px;font-weight:400}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.plan a{font-size:14px;color:var(--craie)}
.plan a:hover{color:var(--orange)}
.neuf{
  font-family:var(--data);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--orange);color:#231000;padding:2px 6px;border-radius:99px;margin-left:8px;
}
.legal{font-size:12px;color:var(--craie-basse);border-top:1px solid var(--sillon);padding-top:20px}
.legal p{margin:0 0 10px;max-width:100ch}
.legal p:last-child{margin-bottom:0}
.legal .mentions{opacity:.8;line-height:1.7}

/* =============================== POPUP APPLIS =============================== */
#apps_mobiles_popup{
  position:fixed;left:50%;top:50%;z-index:100;
  width:min(560px,92vw);background:var(--panneau);border:1px solid var(--sillon);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  /* fermee par defaut : invisible, hors du flux des clics et du clavier */
  opacity:0;visibility:hidden;transform:translate(-50%,-46%);
  transition:opacity .18s,transform .18s,visibility .18s;
}
#apps_mobiles_popup.ouvert{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
/* Le 2e box-shadow fait office de voile plein ecran : evite d'ajouter
   un <div> d'arriere-plan juste pour assombrir la page. */
#apps_mobiles_popup.ouvert{box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 100vmax rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){#apps_mobiles_popup{transition:none}}
#apps_mobiles_popup header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--sillon);
}
#apps_mobiles_popup h4{margin:0;font-family:var(--display);font-size:18px}
#apps_mobiles_popup article{padding:22px}
#apps_mobiles_popup p{margin:0 0 12px;color:var(--craie-basse);font-size:15px}
#apps_mobiles_popup strong{color:var(--craie);font-family:var(--data)}
#apps_mobiles_popup button{
  background:none;border:1px solid var(--sillon);color:var(--craie);border-radius:8px;
  padding:6px 12px;cursor:pointer;font:inherit;
}
#apps_mobiles_popup button:hover{border-color:var(--orange);color:var(--orange)}
#apps_mobiles_popup footer{border:none;padding:0 22px 22px;text-align:right}

/* =============================== RESPONSIVE =============================== */
@media (max-width:1100px){
  #stats_bandeau .long{display:none}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .orbite{order:-1;max-width:300px}
  .trois,.vie,.asso,.plan,#stats .dedans{grid-template-columns:1fr}
  #stats .dedans{gap:34px}
  .asso{padding:26px}
  main > section{padding:48px 0}
  .galaxie-liens{display:none}
}
@media (max-width:760px){
  #stats_bandeau{display:none}

  /* Barre radio : en une seule rangee, le titre du morceau se retrouvait
     comprime a quelques caracteres et se cassait mot par mot. On passe donc
     le titre sur toute la largeur disponible et la licence au rang suivant. */
  .radio-bar .wrap{gap:12px 14px;padding:14px 16px}
  .radio-bar .onde{display:none}
  .radio-bar .piste{flex:1 1 0;min-width:0}
  .radio-bar .piste .titre{white-space:normal;overflow:visible;line-height:1.3}
  .radio-bar .piste .meta{white-space:normal;line-height:1.4}
  .radio-bar a.chip.libre{
    flex:1 1 100%;margin-left:0;text-align:center;order:5;
  }
  body.joue .radio-bar a.chip.libre{display:block}
  .plan{grid-template-columns:1fr 1fr}
  .hero{padding-top:36px}
  .pistes a{grid-template-columns:26px 40px 1fr 36px;gap:10px}
  .pistes .chip{display:none}
}

/* =========================================================================
   SCENE POST-GENERIQUE
   Tout en bas, apres les mentions legales. Le disque de l'archive traverse
   l'ecran en roulant comme une roue (la rotation est calee sur la largeur
   pour que ca ne patine pas), en semant quelques notes, puis une phrase
   apparait. Cliquer rejoue la scene.
   ========================================================================= */
#bonus{
  position:relative;height:104px;overflow:hidden;cursor:pointer;
  border-top:1px solid var(--sillon);
}
#bonus_disque{
  position:absolute;bottom:14px;left:0;width:52px;height:52px;
  opacity:0;pointer-events:none;
}
#bonus .note{
  position:absolute;bottom:52px;font-size:15px;color:var(--orange);opacity:0;pointer-events:none;
}
#bonus .n1{left:26%}
#bonus .n2{left:48%;bottom:64px}
#bonus .n3{left:70%}
#bonus_phrase{
  position:absolute;left:0;right:0;bottom:20px;margin:0;text-align:center;
  font-family:var(--data);font-size:12px;letter-spacing:.06em;color:var(--craie-basse);
  opacity:0;
}

@media (prefers-reduced-motion:no-preference){
  #bonus.actif #bonus_disque{animation:roule 3.4s cubic-bezier(.3,0,.35,1) forwards}
  #bonus.actif .note{animation:note 1.1s ease-out forwards}
  #bonus.actif .n1{animation-delay:.95s}
  #bonus.actif .n2{animation-delay:1.5s}
  #bonus.actif .n3{animation-delay:2.1s}
  #bonus.actif #bonus_phrase{animation:phrase .9s ease-out 2.9s forwards}

  /* 52px de diametre => une revolution tous les ~163px : 6 tours pour la
     traversee donnent un roulement credible sans effet de patinage. */
  @keyframes roule{
    0%  {transform:translateX(-70px) rotate(0deg);opacity:0}
    6%  {opacity:1}
    94% {opacity:1}
    100%{transform:translateX(calc(100vw + 70px)) rotate(2160deg);opacity:0}
  }
  @keyframes note{
    0%  {opacity:0;transform:translateY(0) rotate(-8deg)}
    30% {opacity:.9}
    100%{opacity:0;transform:translateY(-26px) rotate(10deg)}
  }
  @keyframes phrase{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
/* Animations coupees : on garde la phrase, qui est le vrai contenu. */
@media (prefers-reduced-motion:reduce){
  #bonus{height:64px}
  #bonus_disque,#bonus .note{display:none}
  #bonus_phrase{opacity:1}
}