/*
 * SPDX-License-Identifier: LicenseRef-CMSD-1.0
 * Copyright (c) 2026 CyberMind — Gérald Kerma <devel@cybermind.fr>
 * Source-Disclosed License — All rights reserved except as expressly granted.
 * See LICENCE-CMSD-1.0.md for terms.
 */

/* SecuBox Radio — surface de MEMBRE.
 *
 * Reprend la maquette validee : pochette a gauche, etiquette « en lecture »,
 * titre en gros, barre de progression violette, commandes rondes, file
 * numerotee avec durees a droite.
 *
 * Palette bbs.css : la radio parle le meme langage que le BBS. Le panneau
 * d'administration, lui, suit la charte cyan — deux publics, deux langages. */
:root{
  --paper:#0a1016; --panel:#121c26; --panel2:#16222e; --line:#233444;
  --text:#e8eef4; --dim:#8ba0b3;
  --violet:#7c5cff; --violet-clair:#a48cff; --violet-sourd:#241c44;
  --mint:#3ddba7; --pink:#ff7ac0; --amber:#f5b445; --coral:#ff7a63;
  --rayon:16px;
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
}
/* CLAIR EXPLICITE (#1334) — le Hall pose `data-theme="light"`, et aucun bloc
   ne le captait : seul le clair SYSTEME (prefers-color-scheme) s'appliquait,
   si bien qu'un choix « clair » dans le Hall restait sombre sur un OS sombre.
   Meme palette, ecrite pour les deux etats. */
:root[data-theme="light"]{
  --paper:#eef3f7; --panel:#fff; --panel2:#f4f7fa; --line:#dbe3ea;
  --text:#12212e; --dim:#5d7386;
  --violet:#6d4aff; --violet-clair:#7c5cff; --violet-sourd:#ece7ff;
  --mint:#0fa47a; --pink:#d8318a; --amber:#c07c00; --coral:#e0503c;
  --ombre:0 1px 2px rgba(18,33,46,.07), 0 14px 34px -20px rgba(18,33,46,.35);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --paper:#eef3f7; --panel:#fff; --panel2:#f4f7fa; --line:#dbe3ea;
  --text:#12212e; --dim:#5d7386;
  --violet:#6d4aff; --violet-clair:#7c5cff; --violet-sourd:#ece7ff;
  --mint:#0fa47a; --pink:#d8318a; --amber:#c07c00; --coral:#e0503c;
  --ombre:0 1px 2px rgba(18,33,46,.07), 0 14px 34px -20px rgba(18,33,46,.35);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:56rem;margin:0 auto;padding:1.6rem 1rem 4rem}

/* ── tete ─────────────────────────────────────────────────────────────── */
.tete{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
h1{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:1.75rem;margin:0;
  letter-spacing:-.02em}
.sst{color:var(--dim);margin:.2rem 0 0;font-size:.92rem}
.direct{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint);
  border:1px solid var(--mint);border-radius:999px;padding:4px 12px;
  font-size:12px;font-weight:650;white-space:nowrap}
.pt{width:8px;height:8px;border-radius:50%;background:var(--mint);
  animation:bat 2s ease-in-out infinite}
@keyframes bat{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.pt{animation:none}}

/* ── cartes ───────────────────────────────────────────────────────────── */
.carte{background:var(--panel);border:1px solid var(--line);border-radius:var(--rayon);
  box-shadow:var(--ombre);overflow:hidden;margin-bottom:1rem}
.entete{margin:0;padding:.85rem 1.1rem;font-size:.92rem;font-weight:650;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.pied{margin:0;padding:.7rem 1.1rem 1rem;color:var(--dim);font-size:12px}

/* ── lecteur ──────────────────────────────────────────────────────────── */
/* SILENCE = PAS D'ECRAN : un rectangle noir sans rien dedans fait croire a un
   lecteur casse. */
/* Le clip occupe EXACTEMENT le cadre de la vignette — meme taille, meme
   format, meme coin arrondi. Il se superpose a elle plutot que de la
   remplacer : l'image reste dessous, visible le temps que la video charge. */
#ecran{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
       display:block;background:#000;border:0}
#ecran.muet{display:none}

.bloc{display:flex;gap:1.1rem;padding:1.1rem;align-items:flex-start}
@media (max-width:34rem){.bloc{flex-direction:column;align-items:stretch}}
.cadre{position:relative;width:7.5rem;height:7.5rem;flex:0 0 auto;
       border-radius:12px;overflow:hidden}
.pochette{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;font-size:2.2rem;
  background:linear-gradient(135deg,var(--violet-sourd),var(--panel2));
  border:1px solid var(--line)}
.pochette img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:34rem){.cadre{width:100%;height:auto;aspect-ratio:1/1}}
.infos{min-width:0;flex:1}
.etiq{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-clair)}
.titre{font-size:1.28rem;margin:.15rem 0 .1rem;line-height:1.25;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.par{color:var(--dim);font-size:12.5px}
.barre{height:5px;background:var(--panel2);border-radius:999px;margin:.9rem 0 .35rem;
  overflow:hidden;border:1px solid var(--line)}
.barre i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--violet-clair));
  transition:width .8s linear}
.tps{display:flex;font-size:11.5px;color:var(--dim);
  font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.tps .sp,.cmd .sp{flex:1}
.cmd{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.rond{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);display:grid;place-items:center;
  font-size:14px;cursor:pointer}
.rond:hover{border-color:var(--violet-clair)}
.rond.gros{width:52px;height:52px;font-size:18px;background:var(--violet);
  border-color:var(--violet);color:#fff;box-shadow:0 6px 18px -6px var(--violet)}
.rond.aime.on{color:var(--pink);border-color:var(--pink)}
.rond.muet{color:var(--dim)}
/* Curseur de volume (#1131c) : discret, à la teinte de l'antenne. */
.vol{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:2px;
  background:var(--line);outline:none;cursor:pointer;flex:0 0 auto}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--violet);border:0;box-shadow:0 1px 4px -1px var(--violet)}
.vol::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--violet);border:0}
.vol:hover{background:var(--violet-clair)}
.derive{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.avert{background:color-mix(in srgb,var(--amber) 12%,transparent);
  border-top:1px solid var(--amber);padding:.7rem 1.1rem;font-size:13px}

/* ── file : numerotee, duree a droite, comme la maquette ──────────────── */
.file{list-style:none;margin:0;padding:0;counter-reset:rang}
.file li{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.1rem;
  border-bottom:1px solid var(--line);font-size:13.5px}
.file li:last-child{border-bottom:0}
.file li .rg{width:1.2rem;text-align:right;color:var(--dim);font-size:12px;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.file li .vg{width:2.6rem;height:2.6rem;border-radius:8px;flex:0 0 auto;overflow:hidden;
  background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;
  font-size:1rem;color:var(--dim)}
.file li .vg img{width:100%;height:100%;object-fit:cover;display:block}
.file li .nm{min-width:0;flex:1}
.file li .nm b{display:block;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.file li .nm small{color:var(--dim);font-size:11.5px}
.file li .dr{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Menlo,monospace;flex:0 0 auto}
.file li.joue{background:var(--violet-sourd)}
.file li.joue .dr{color:var(--violet-clair)}
.file li.ecarte .nm b{color:var(--coral)}
.file .vide{padding:1rem 1.1rem;color:var(--dim);font-size:13px}
/* Playlist semi-rotative (#1131i) : passé estompé, EN COURS en gras renforcé,
   à venir normal. */
.file li.passe{opacity:.5}
.file li.passe .rg{color:var(--dim)}
.file li.encours{background:var(--violet-sourd)}
.file li.encours .rg{color:var(--violet-clair)}
.file li.encours .nm b{font-weight:800;color:var(--violet-clair)}
.file li.avenir .rg{color:var(--violet-clair);font-variant-numeric:tabular-nums}
/* En attente : propositions à voter (#1131g). */
.attente{list-style:none;margin:0;padding:0}
/* Compacte (#1131j) : 3 titres en rotation, rangées resserrées. */
.attente li{display:flex;align-items:center;gap:.7rem;padding:.4rem 1.1rem;
  border-bottom:1px solid var(--line)}
.attente li .nm small{display:none}
.attente .plusattente{padding:.35rem 1.1rem;color:var(--dim);font-size:11px;
  border-bottom:0;font-style:italic}
.attente li:last-child{border-bottom:0}
.attente li .nm{min-width:0;flex:1}
.attente li .nm b{display:block;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.attente li .nm small{color:var(--dim);font-size:11.5px}
.attente .vide{padding:1rem 1.1rem;color:var(--dim);font-size:13px}
.attente .vote{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;
  background:var(--panel2);color:var(--text);font-size:12.5px;padding:.35rem .8rem;
  cursor:pointer;font-variant-numeric:tabular-nums}
.attente .vote:hover{border-color:var(--pink)}
.attente .vote.on{color:var(--pink);border-color:var(--pink)}

/* ── chat ─────────────────────────────────────────────────────────────── */
#chat{max-height:15rem;overflow:hidden;padding:.3rem 1.1rem}
.antenne-messages{padding-top:.35rem}
.antenne-messages:empty{display:none}
.ph{padding:.35rem 0;font-size:13.5px;animation:phfade 15s ease-out forwards}
@keyframes phfade{0%,18%{opacity:1}100%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.ph{animation:none}}
.ph b{color:var(--violet-clair)}
.rangee{display:flex;gap:.5rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--line)}
.rangee input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:8px 12px;font:inherit;font-size:13.5px}
.rangee input:focus{outline:none;border-color:var(--violet-clair)}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);
  border-radius:10px;padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer}
.btn.primaire{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:600}
.btn.primaire:hover{background:var(--violet-clair)}

/* ═══ MODE COMPACT /mini (#1131m) : widget du rail BBS + fenêtre détachée. ═══
   Même page, mise en page resserrée, focalisée sur l'écoute. */
.mini body, body.mini { background: var(--panel); }
body.mini .wrap { max-width: none; padding: .5rem .5rem 1rem; }
body.mini .tete { display: none; }               /* pas de gros en-tête */
body.mini [data-mini-hide] { display: none; }     /* ni propositions ni formulaire */
body.mini .carte { border-radius: 10px; margin: 0 0 .5rem; }
body.mini .entete { padding: .5rem .75rem; font-size: .82rem; }
body.mini .lecteur .bloc { gap: .6rem; }
body.mini .cadre { width: 4.5rem; height: 4.5rem; }
body.mini .titre { font-size: 1rem; }
body.mini .cmd { gap: .5rem; margin-top: .6rem; }
body.mini .rond { width: 32px; height: 32px; font-size: 13px; }
body.mini .rond.gros { width: 42px; height: 42px; font-size: 15px; }
body.mini .vol { width: 72px; }
body.mini #chat { max-height: 9rem; }             /* quelques lignes de messages */
body.mini .file li { padding: .35rem .75rem; }
body.mini .file li .vg { width: 2rem; height: 2rem; }

/* ═══ MODE MICRO /micro (#1131o) : lecteur SEUL, taille d'une carte du
   carrousel (~170px), pour le widget du rail BBS. body.micro s'ajoute à
   body.mini : on ne garde que le lecteur et on le réduit à une cardlet. ═══ */
/* PAS D'ASCENSEUR EN MICRO (#1233). Encadré, le lecteur affichait une barre de
   défilement le long de sa bordure : dans une cardlet de 252 px, elle signale un
   débordement qu'on ne veut pas voir et casse le liseré. Le contenu du mode
   micro est taillé pour tenir ; la barre est donc masquée sans empêcher la
   molette, qui reste le recours si une traduction longue déborde. */
html.micro, body.micro { scrollbar-width: none; -ms-overflow-style: none; }
html.micro::-webkit-scrollbar, body.micro::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.micro .wrap { padding: 0; }

/* ── DEUX COLONNES QUAND LA LARGEUR LE PERMET (#1244) ──────────────────────
   Encadré dans une carte étroite, le lecteur seul suffit. Mais dès que le
   cadre s'élargit — une fenêtre détachée, une carte de mosaïque large — il
   reste une bande vide à droite, et deux blocs qui auraient tout à y gagner :
   l'antenne et la playlist.

   La bascule se fait sur la largeur RÉELLE du document encadré, pas sur celle
   de l'écran : c'est la place dont le lecteur dispose qui décide, et elle n'a
   rien à voir avec la taille du moniteur.

   La playlist est RENDUE au mode micro à cette occasion : elle y était masquée
   faute de place, ce qui n'est plus vrai. */
@media (min-width: 520px) {
  body.mini .wrap, body.micro .wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: start;
  }
  /* Le lecteur garde toute la largeur : le couper en deux le rendrait illisible. */
  body.mini .wrap > .carte.lecteur, body.micro .wrap > .carte.lecteur { grid-column: 1 / -1; }
  body.micro .wrap > .carte.playlist { display: block; }
  body.mini .wrap > .carte, body.micro .wrap > .carte { margin: 0; }
}
body.micro .carte:not(.lecteur):not(.antenne) { display: none; } /* lecteur + antenne */
/* PROPOSER — BARRE MICRO (#1266). Cachee partout sauf en micro, ou elle ferme
   la cardlet : une saisie d'URL + un bouton, pour glisser un titre sans quitter
   le rail. La regle ci-dessus la masquerait (elle n'est ni lecteur ni antenne) ;
   on la reactive ici, meme specificite mais posee apres, donc elle gagne. */
.proposer-micro { display: none; }
body.micro .wrap > .carte.proposer-micro { display: block; margin: .35rem 0 0;
  border-radius: 10px; }
body.micro .proposer-micro .rangee { padding: .45rem .55rem; border-bottom: 0;
  display: flex; gap: .45rem; align-items: stretch; }
body.micro .proposer-micro input { flex: 1 1 auto; min-width: 0; padding: .42rem .55rem;
  font-size: .76rem; }
body.micro .proposer-micro .btn { flex: 0 0 auto; padding: .42rem .7rem; font-size: .85rem;
  line-height: 1; }
/* LES MESSAGES SONT LE SECOND VOLET DE L'ANTENNE (#1201). Detaches de la saisie
   pour laisser la playlist se glisser entre les deux sur la page pleine, ils
   restent solidaires d'elle en micro : la regle ci-dessus les garde par la
   classe `antenne` qu'ils partagent, et celle-ci recolle leur mise en forme —
   sans entete, sans marge propre, comme s'ils n'avaient jamais ete separes. */
body.micro .antenne-messages { margin: 0; border-radius: 0 0 10px 10px;
                               border-top: 0; }
body.micro .antenne { border-radius: 10px 10px 0 0; }
/* Mini-antenne sous le lecteur (#1131aj) : une ligne pour saisir, 2 dernières
   lignes de messages — le message unique du haut disparaît au profit de ça. */
body.micro .antenne { margin: .35rem 0 0; border-radius: 10px; }
body.micro .antenne .entete { display: none; }
body.micro .antenne .rangee { padding: .35rem .55rem; border-bottom: 0; }
body.micro .antenne .rangee input { padding: .3rem .5rem; font-size: .72rem; }
body.micro #chat { max-height: 2.9rem; overflow: hidden; padding: .1rem .55rem .3rem; }
body.micro #chat .ph { font-size: .68rem; padding: .04rem 0; line-height: 1.25; }
body.micro .microlast { display: none; }             /* plus de message unique en haut */
/* PAS DE LEGENDE DECORATIVE EN MICRO (#1266). Les `.pied` (« La playlist se
   repete… », la note des propositions) n'apprennent rien dans une cardlet et,
   faute de place, se font couper au ras du liseré — un texte estompé, tronqué,
   qui salit le bas de la carte et repousse la barre « Proposer » hors du champ.
   On les retire tous en micro : le geste (proposer) reste, la legende part. */
body.micro .pied { display: none; }

/* ROTATION ANTENNE / PLAYLIST (#1263).
   Sous 520 px il n'y a de la place que pour UN panneau : la carte montrait
   donc toujours l'antenne, et la playlist n'existait pas pour qui regarde
   depuis l'accueil. On alterne — un temps ce qui se dit, un temps ce qui
   vient. Au-dessus de 520 px les deux colonnes tiennent cote a cote et la
   rotation n'a pas lieu d'etre : elle ferait disparaitre un panneau visible,
   ce qui serait une perte, pas un gain. */
@media (max-width: 519.98px) {
  /* BARRE « PROPOSER » ANCREE EN BAS (#1266). La cardlet est une colonne : on
     la met en flex vertical sur toute la hauteur du cadre, et la barre prend une
     marge haute automatique. Quel que soit le panneau du dessus — antenne courte
     ou playlist plus longue — la saisie et le bouton restent collés au bas,
     toujours alignés au même endroit, au lieu de flotter sous un contenu de
     hauteur variable. */
  body.micro .wrap { display: flex; flex-direction: column; min-height: 100vh; }
  body.micro .wrap > .carte.proposer-micro { margin: 0; }
  /* PLUS DE VIDE ENTRE LES MESSAGES ET LA BARRE (#1266). Le panneau du milieu —
     messages en vue antenne, file en vue playlist — prend tout l'espace libre au
     lieu de le laisser en blanc sous une barre « Proposer » flottante. Les
     messages se collent au BAS du panneau, juste au-dessus de la saisie d'URL :
     le fil respire vers le haut comme une vraie messagerie, sans trou mort. */
  body.micro .antenne-messages { flex: 1 1 auto; display: flex;
    flex-direction: column; justify-content: flex-end; min-height: 0; }
  body.micro #chat { max-height: none; }
  body.micro.vue-playlist .carte.playlist { flex: 1 1 auto; }

  body.micro.vue-playlist .carte.antenne,
  body.micro.vue-playlist .carte.antenne-messages { display: none; }
  body.micro.vue-playlist .carte.playlist { display: block; margin: .35rem 0 0; border-radius: 10px; }
  body.micro.vue-playlist .carte.playlist .entete { display: none; }
  body.micro.vue-playlist .carte.playlist ol,
  body.micro.vue-playlist .carte.playlist ul { max-height: none; overflow: hidden; }
  body.micro.vue-playlist .carte.playlist li { font-size: .68rem; padding: .12rem .55rem;
    gap: .45rem; }
  /* Vignette a l'echelle de la carte : 2,6rem ecrasait tout le reste. */
  body.micro.vue-playlist .carte.playlist li .vg { width: 1.5rem; height: 1.5rem;
    border-radius: 5px; }
  body.micro.vue-playlist .carte.playlist li .rg { width: .9rem; font-size: 10px; }
  body.micro.vue-playlist .carte.playlist li .nm small { font-size: 9.5px; }
  body.micro.vue-playlist .carte.playlist li .dr { font-size: 10px; }

  /* LE BACK EST REDUIT DE MOITIE (#1201). Il n'est la que pour le contexte —
     « ce qu'on vient d'entendre » — et ne doit pas peser autant que ce qui
     vient. On l'ecrase a mi-hauteur et on l'estompe : present, mais en retrait,
     pour que les deux titres a venir gardent le regard. */
  body.micro.vue-playlist .carte.playlist li.passe { opacity: .5;
    transform: scale(.82); transform-origin: left center;
    padding-top: 0; padding-bottom: 0; }
  body.micro.vue-playlist .carte.playlist li.passe .vg { width: 1.1rem; height: 1.1rem; }
  body.micro.vue-playlist .carte.playlist li.passe .dr { display: none; }

  /* LES DEUX NEXT AUSSI, A MI-HAUTEUR (#1201). Une fois le back reduit et le
     courant retire, les deux lignes a venir restaient hautes et la carte
     paraissait deux fois trop grande pour ce qu'elle dit. On les compacte :
     meme information, moitie moins de place, et l'ensemble tient d'un regard.
     Elles gardent leur pleine opacite — ce sont elles qu'on lit. */
  body.micro.vue-playlist .carte.playlist li.avenir { padding-top: .02rem;
    padding-bottom: .02rem; line-height: 1.15; }
  body.micro.vue-playlist .carte.playlist li.avenir .vg { width: 1.15rem; height: 1.15rem; }
  body.micro.vue-playlist .carte.playlist li.avenir .nm b { font-size: .66rem; }
}
body.micro .lecteur { margin: 0; border-radius: 10px; }
body.micro .lecteur .bloc { gap: .55rem; padding: .55rem .6rem; align-items: center; }
body.micro .cadre { width: 3.4rem; height: 3.4rem; }
body.micro .etiq, body.micro .barre, body.micro .tps, body.micro .derive { display: none; }
/* TITRE : DEUX LIGNES AU PLUS, PUIS « … » (#1266). Un titre long poussait tout
   le bloc vers le bas et decalait la mise en page ; on le borne a deux lignes et
   on coupe proprement a l'ellipse. La hauteur du lecteur redevient previsible. */
body.micro .titre { font-size: .9rem; margin: 0; display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
body.micro .meta { font-size: .72rem; }
body.micro .cmd { margin-top: .35rem; gap: .4rem; }
body.micro .rond { width: 27px; height: 27px; font-size: 12px; }
body.micro .rond.gros { width: 33px; height: 33px; font-size: 13px; }
body.micro .vol { width: 52px; }
body.micro .avert { font-size: 11px; padding: .4rem .5rem; }

/* ═══ MICRO affiné (#1131u) : transport en tête, texte réduit, prochain titre
   + dernier message. Le bandeau de santé ne s'y injecte plus (#1131t). ═══ */
.microline { display: none; }
body.micro .infos { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
body.micro .lecteur .bloc { align-items: flex-start; }
body.micro .meta { display: none; }                 /* texte réduit */
/* Boutons média DANS LE BANDEAU (en-tête) de la cardlet (#1131w) : la barre
   de transport coiffe le lecteur sur toute la largeur, le contenu descend
   dessous. */
body.micro .lecteur { position: relative; padding-top: 2.5rem; }
body.micro .cmd { position: absolute; top: 0; left: 0; right: 0; margin: 0;
  padding: .3rem .55rem; gap: .4rem; background: var(--panel2);
  border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0;
  align-items: center; z-index: 2; }
body.micro .cmd .derive { display: none; }
/* Titre À DROITE de la vignette, sur 2–3 lignes, texte plus petit (#1131ac) —
   au lieu d'une seule ligne tronquée. */
body.micro .titre { font-size: .74rem; line-height: 1.2; margin: 0; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; }  /* normal : sinon `nowrap` de base
  garde le titre sur UNE ligne malgré line-clamp (#1131ai) */
body.micro .cadre { width: 6rem; height: 6rem; }
body.micro .microline { display: block; font-size: .7rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body.micro .micronext { color: var(--violet-clair); }
body.micro .microlast { color: var(--dim); }

/* ⧉ « détacher » : uniquement dans le lecteur incorporé /micro (#1131ae). */
.detach { display: none; }
body.micro .detach { display: grid; place-items: center; }

/* Titre À DROITE de la vignette, même ligne (#1131af) — dans TOUT mode compact
   (/mini ET /micro) : ces vues sont étroites, mais on FORCE la rangée, sinon la
   media query `max-width:34rem` empile vignette puis titre. */
body.mini .lecteur .bloc { flex-direction: row; align-items: flex-start; }
body.mini .cadre { aspect-ratio: auto; }
body.micro .cadre { width: 6rem; height: 6rem; }

/* Ligne de STATUT emoji dans l'espace libre du micro (#1131ag). */
body.micro .microstatus { color: var(--mint); font-size: .68rem; }

/* SPICY (#1360) — filet dégradé sous l'en-tête + aide reverse-design. */
.tete{position:relative}
.tete::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#e07d82,#28d6ff,#f0b429);opacity:.85}
.sbxaide-ring{position:absolute;border:2px solid #e07d82;border-radius:8px;z-index:41;
  box-shadow:0 0 0 3px color-mix(in srgb,#e07d82 22%,transparent);pointer-events:none;transition:.18s}
.sbxaide-pin{position:absolute;transform:translate(-50%,-50%);min-width:18px;height:18px;border-radius:10px;z-index:42;
  background:#e07d82;color:#2a0d0e;font-weight:800;font-size:.66rem;display:grid;place-items:center;padding:0 5px;
  box-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:none}

/* SLICER 3 vues micro (#1360) : Messages / Playlist / Propositions + barre à bullets. */
.radio-slbar{display:none}
body.micro .radio-slbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:5px 10px;background:var(--paper);border-top:1px solid var(--line);
  font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
body.micro .wrap{padding-bottom:36px}   /* place pour la barre à bullets fixée en bas */
.radio-slbar .sbx-dots{display:flex;align-items:center;gap:5px}
.radio-slbar .sbx-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:width .2s ease,background .2s ease}
.radio-slbar .sbx-dots button.on{width:17px;border-radius:5px}
.radio-slbar .sbx-dots.auto button.on{background:var(--violet-clair,#28d6ff)}
.radio-slbar .sbx-dots.manuel button.on{background:var(--up,#35d07f)}
.radio-slbar .radio-sllab{margin-left:2px}
/* Messages : cacher playlist + propositions. */
body.micro.vue-messages .carte.playlist,
body.micro.vue-messages .sl-prop{display:none!important}
/* Propositions : révéler la carte d'attente, cacher messages + playlist. */
body.micro.vue-proposals .carte.playlist,
body.micro.vue-proposals .carte.antenne-messages,
body.micro.vue-proposals .carte.antenne:not(.antenne-messages){display:none!important}
body.micro.vue-proposals .sl-prop{display:block!important;margin:.35rem 0 0;border-radius:10px}
body.micro.vue-proposals .sl-prop .entete,body.micro.vue-proposals .sl-prop .pied{display:none}
body.micro.vue-proposals .sl-prop .attente{max-height:none;overflow:hidden}

/* IN-POP HELP (#1360) : survol d'un item (playlist / proposition / message) → détail + conseil. */
.radiopop{position:fixed;z-index:30;max-width:220px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--ombre);padding:8px 10px;font-size:12px;line-height:1.4;color:var(--text);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:.15s}
.radiopop.on{opacity:1;transform:none}
.radiopop b{color:var(--violet-clair)} .radiopop .adv{display:block;color:var(--dim);margin-top:4px;font-size:11px}

/* ═══ SKIN SPICY (#radio-spicy) ════════════════════════════════════════════
   Filet dégradé sous les en-têtes, halos sur le titre / la jauge / le direct,
   pastilles de slice vivantes (« expanded »), piste en cours liserée, pop-in
   helper accentué. 100% thème-aware : n'utilise que les variables de palette,
   donc juste en clair comme en sombre. */
.entete{position:relative}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--violet-clair),var(--mint));
  opacity:.9;pointer-events:none}
/* Titre & étiquette : un halo discret qui les fait vivre. */
.titre{text-shadow:0 0 22px color-mix(in srgb,var(--violet-clair) 30%,transparent)}
.etiq{text-shadow:0 0 14px color-mix(in srgb,var(--violet-clair) 45%,transparent)}
/* « En direct » respire en dégradé. */
.direct{background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 18%,transparent),
    color-mix(in srgb,var(--violet) 16%,transparent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mint) 30%,transparent),0 6px 16px -8px var(--mint)}
.pt{box-shadow:0 0 8px var(--mint)}
/* Le gros bouton lecture : dégradé + halo. */
.rond.gros{background:linear-gradient(135deg,var(--violet),var(--violet-clair));
  box-shadow:0 8px 22px -8px var(--violet),0 0 0 1px color-mix(in srgb,var(--violet-clair) 40%,transparent)}
/* Jauge de progression : un léger halo. */
.barre i{box-shadow:0 0 12px -2px var(--violet-clair)}
/* Piste en cours : liseré dégradé à gauche. */
.file li.encours,.file li.joue{position:relative}
.file li.encours::before,.file li.joue::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),var(--violet-clair),var(--mint))}

/* ── Barre à bullets « expanded & spicy » ─────────────────────────────────── */
body.micro .radio-slbar{padding:7px 12px;font-size:.6rem;
  background:linear-gradient(180deg,var(--panel2),var(--paper));
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,var(--violet),var(--violet-clair),var(--mint)) 1;
  box-shadow:0 -8px 20px -14px rgba(0,0,0,.55)}
body.micro .wrap{padding-bottom:42px}   /* place pour la barre plus haute */
.radio-slbar .sbx-dots button{width:8px;height:8px;background:var(--line);
  box-shadow:0 0 0 0 transparent;transition:width .22s ease,background .22s ease,box-shadow .22s ease}
.radio-slbar .sbx-dots button.on{width:20px;border-radius:6px}
.radio-slbar .sbx-dots.auto button.on{background:linear-gradient(90deg,var(--violet),var(--violet-clair));
  box-shadow:0 0 10px -1px var(--violet-clair)}
.radio-slbar .sbx-dots.manuel button.on{background:linear-gradient(90deg,var(--mint),var(--violet-clair));
  box-shadow:0 0 10px -1px var(--mint)}
.radio-slbar .radio-sllab{margin-left:4px;font-weight:700;letter-spacing:.08em;color:var(--violet-clair)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .radio-slbar .radio-sllab{background:linear-gradient(90deg,var(--violet-clair),var(--mint));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ── Pop-in helper accentué ───────────────────────────────────────────────── */
.radiopop{max-width:244px;border-color:color-mix(in srgb,var(--violet-clair) 40%,var(--line));
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--violet-clair) 18%,transparent)}
.radiopop::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--violet-clair),var(--mint))}