/* =========================================================================
   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);max-width:15ch}
/* Chaque phrase du titre reste d'un bloc : sans cela « Partagez-la. » se
   coupe sur son trait d'union en fin de ligne. */
.hero h1 span{white-space:nowrap}
.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}
/* Sur large ecran, la liste passe sur deux colonnes : chaque ligne etait
   deux fois trop large pour son contenu, d'ou le grand vide entre le titre
   et la pastille de droite. On en voit aussi deux fois plus d'un coup.
   Multi-colonnes plutot que grid : la repartition reste correcte quel que
   soit le nombre de morceaux renvoyes par le flux, et la lecture se fait
   de haut en bas colonne par colonne, ce qui respecte l'ordre des rangs. */
@media (min-width:900px){
  .pistes{display:block;column-count:2;column-gap:30px}
  .pistes li{break-inside:avoid}
}
.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)}
/* Bouton en forme de lien dans les cartes (« Voir les applis compatibles »).
   On exclut .btn, sinon un vrai bouton place dans une carte serait aplati. */
.carte button:not(.btn){
  background:none;border:none;padding:0;font:inherit;color:var(--orange);cursor:pointer;
}
.carte button:not(.btn):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}
}

/* =========================================================================
   PAGE IRC (irc/index.php)
   Reprend les cartes et la typographie du reste du site ; seule la zone de
   chat a besoin de regles propres.
   ========================================================================= */
#irc-tete{padding:52px 0 26px;border:none}
#irc-tete h1{font-family:var(--display);font-size:clamp(30px,4.4vw,48px);font-weight:800;
  letter-spacing:-.02em;line-height:1.05;margin:0}
#irc-tete .chapeau{max-width:70ch;margin-top:18px}

#irc-acces{padding:0 0 70px;border:none}
.irc-deux{grid-template-columns:1fr 1fr}
.coordonnees{
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;
  border-top:1px solid var(--sillon);padding-top:16px;
}
.coordonnees dt{font-size:13px;color:var(--craie-basse)}
.coordonnees dd{margin:0}
.coordonnees code{font-family:var(--data);font-size:13.5px;color:var(--craie)}

.chat-cadre{
  margin-top:26px;border:1px solid var(--sillon);border-radius:14px;overflow:hidden;
  background:var(--panneau);height:min(70vh,560px);display:grid;place-items:center;
}
.chat-cadre iframe{border:0;width:100%;height:100%;display:block}
.chat-attente{font-family:var(--data);font-size:13px;color:var(--craie-basse)}
.chat-note{font-size:12.5px;color:var(--craie-basse);margin:10px 0 0}
.irc-patience{
  margin-top:26px;font-size:14.5px;color:var(--craie-basse);max-width:70ch;
  border-left:2px solid var(--sillon);padding-left:16px;
}

@media (max-width:900px){
  .irc-deux{grid-template-columns:1fr}
  .chat-cadre{height:min(80vh,480px)}
}

/* =========================================================================
   SIGNATURE DU SITE
   Le nom en Pacifico, l'ecriture historique de Dogmazic. Sans elle, la page
   ne disait plus jamais comment le site s'appelle, et le « DOGMAZIC » en
   capitales de la barre du haut faisait raison sociale.
   ========================================================================= */
@font-face{
  font-family:'Pacifico';
  src:url('../font/Pacifico.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
.signature{
  display:block;font-family:'Pacifico','Brush Script MT',cursive;font-weight:400;
  font-size:clamp(38px,4.6vw,52px);line-height:1;color:var(--craie);
  /* l'ombre orange reprend celle du logo d'origine */
  text-shadow:0 3px 0 rgba(251,119,0,.85);
}
.signature-sous{
  display:block;font-family:var(--data);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-basse);
  /* 22px : la boucle du « g » de Dogmazic descend sous la ligne de base et
     venait sinon mordre sur cette ligne. */
  margin:22px 0 18px;
}

/* =========================================================================
   NOUS REJOINDRE
   Les liens de contact, remontes en haut de page : ils avaient disparu de
   l'accueil lors de la refonte, releguees sous les boutons de don.
   ========================================================================= */
#rejoindre .rejoindre-liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  list-style:none;padding:0;margin:0;
}
#rejoindre .rejoindre-liste a{
  display:block;height:100%;padding:18px 20px;border-radius:12px;
  background:var(--panneau);border:1px solid var(--sillon);transition:.18s;color:inherit;
}
#rejoindre .rejoindre-liste a:hover{
  border-color:rgba(255,157,0,.45);transform:translateY(-2px);
}
#rejoindre .rejoindre-liste b{
  display:block;font-family:var(--display);font-size:17px;font-weight:700;color:var(--craie);
}
#rejoindre .rejoindre-liste a:hover b{color:var(--orange)}
/* « a > span » et non « span » : sinon la pastille « nouveau », qui vit dans
   le <b>, passerait en display:block et s'etirerait sur toute la carte. */
#rejoindre .rejoindre-liste a > span{
  display:block;margin-top:5px;font-size:13.5px;color:var(--craie-basse);line-height:1.45;
}