/* SPDX-License-Identifier: LicenseRef-CMSD-1.0
   Copyright (c) 2026 CyberMind — Gérald Kerma <devel@cybermind.fr>
   AletheiaVox — l'accueil « rédaction sur papier » (#1056 stage 1).
   Feuille AUTONOME : la page newsroom ne charge PAS bbs.css. Aucune règle ici
   ne fuit vers les autres pages, et réciproquement. */
@font-face{font-family:"Cinzel";src:url("/static/fonts/cinzel.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Inter";src:url("/static/fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/static/fonts/jetbrainsmono.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/static/fonts/fraunces.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --ink:#17232d; --paper:#f5f3ec; --panel:#ffffff; --line:#d9e0e4; --line-2:#c5cdd3;
  --soft:#efeadd; --dim:#697985;
  --coral:#a73d42; --coral-s:#f6e7e8; --mint:#28765e; --mint-s:#e4f2eb;
  --amber:#c87832; --amber-s:#fbf0e4; --cyan:#00a8c8; --cyan-s:#dff5f7;
  --sky:#104a88; --sky-s:#e8f2f8; --gold:#b8912f; --gold-s:#f5ecd2;
  --shadow:0 1px 2px rgba(20,45,60,.05),0 6px 22px rgba(20,45,60,.09);
  --lift:0 2px 4px rgba(20,45,60,.08),0 14px 34px -12px rgba(20,45,60,.22);
  --r:14px; --stamp:rgba(23,35,45,.9);
}
:root[data-theme="dark"]{
  --ink:#eef3f6; --paper:#0c141c; --panel:#14212d; --line:#2a3b49; --line-2:#33475a;
  --soft:#16242f; --dim:#8598a5;
  --coral:#e07d82; --coral-s:#3a1d1e; --mint:#5fce9f; --mint-s:#14302a;
  --amber:#e0b06a; --amber-s:#3a2a12; --cyan:#33c4de; --cyan-s:#123642;
  --sky:#6aa8e6; --sky-s:#173049; --gold:#d9bd6a; --gold-s:#2b2718;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  --lift:0 2px 6px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);
  --stamp:rgba(238,243,246,.85);
}
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;background-color:var(--paper);
  background-image:radial-gradient(var(--line) .5px,transparent .5px),radial-gradient(var(--line) .5px,var(--paper) .5px);
  background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold-s)}
.serif{font-family:"Fraunces","Cinzel",Georgia,serif} .mono{font-family:"JetBrains Mono",monospace}

/* masthead */
.mast{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
/* Embarquement Hall (#1175) : la barre du Hall remplace l'entête BBS → on la
   masque quand le BBS est encadré (classe posée par coquille.js). Vhost réel
   inchangé. */
:root.sbx-embed .mast{display:none}
/* En embed, on masque LES DEUX rails : la droite (widget radio imbriqué qui casse
   hall>bbs>radio + Derniers billets en doublon) ET la gauche (rubriques — désormais
   remontées dans le mégamenu du Hall, sous-menu BBS). Reste UNIQUEMENT le contenu,
   pleine largeur. */
:root.sbx-embed .rail{display:none}
:root.sbx-embed .wrap{grid-template-columns:minmax(0,1fr)}
/* DEUX volets à défilement INDÉPENDANT dans l'embed (navigation double-couche :
   Hall host + rubriques BBS). Les rubriques sont DÉJÀ sticky avec leur propre
   scroll ; on corrige juste l'offset (l'entête est masquée en embed) — le fil
   défile dans l'iframe. Pas de height:100vh forcée (qui écrasait le contenu). */
:root.sbx-embed .wrap{padding-top:14px}
:root.sbx-embed .rail{top:14px;max-height:calc(100vh - 28px)}
.mast-top{display:flex;align-items:baseline;gap:14px;justify-content:center;padding:8px 20px 4px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
.mast-top .r{color:var(--coral)} .mast-top .l{color:var(--sky)}
.mast-main{display:flex;align-items:center;gap:16px;padding:10px clamp(14px,3vw,26px);max-width:1500px;margin:0 auto}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo .mark{width:44px;height:44px;border-radius:12px;border:2px solid var(--ink);display:grid;place-items:center;
  font-family:"Fraunces","Cinzel";font-weight:700;font-size:1.3rem;background:var(--gold-s);position:relative}
.logo .mark::after{content:"◆";position:absolute;bottom:-6px;right:-6px;font-size:.7rem;color:var(--gold)}
/* Le médaillon SVG porte déjà son anneau : pas de cadre, pas de fond, pas de
   losange (#1114). */
.logo img.medaille{border:none;background:none;border-radius:50%;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(12,32,64,.35))}
.logo img.medaille::after{content:none}

/* ── Médaillon animé de l'entête ──────────────────────────────────────────
   Les faces se superposent AU MÊME endroit que le logo et se relaient en
   fondu. Le logo fixe reste dessous : c'est lui qu'on voit si les faces ne
   sont pas embarquées, si elles n'ont pas encore chargé, ou si le visiteur
   demande moins d'animation. Rien ne saute, rien ne se décale.

   --n vient du gabarit (nombre de faces), --dur est le tour complet : chaque
   face occupe donc 1/n du tour, quel que soit le nombre de fichiers déposés. */
.medaillon{display:inline-grid;width:44px;height:44px;flex:none;--dur:18s}
/* L'index et le nombre de faces passent par des CLASSES, jamais par un
   attribut `style` : la CSP du BBS est `style-src 'self'`, donc tout style
   inline est IGNORÉ par le navigateur — silencieusement. Un `animation-delay`
   calculé sur une variable absente retombe à 0s, et les six faces défilaient
   toutes en même temps. Le logo (1er <img>) décale les faces d'un rang, d'où
   le nth-of-type qui commence à 2. */
.medaillon .mface:nth-of-type(2){--i:0}
.medaillon .mface:nth-of-type(3){--i:1}
.medaillon .mface:nth-of-type(4){--i:2}
.medaillon .mface:nth-of-type(5){--i:3}
.medaillon .mface:nth-of-type(6){--i:4}
.medaillon .mface:nth-of-type(7){--i:5}
.medaillon .mface:nth-of-type(8){--i:6}
.medaillon .mface:nth-of-type(9){--i:7}
.medaillon .mface:nth-of-type(10){--i:8}
.medaillon .mface:nth-of-type(11){--i:9}
.medaillon .mface:nth-of-type(12){--i:10}
.medaillon .mface:nth-of-type(13){--i:11}
.medaillon.n2{--n:2}
.medaillon.n3{--n:3}
.medaillon.n4{--n:4}
.medaillon.n5{--n:5}
.medaillon.n6{--n:6}
.medaillon.n7{--n:7}
.medaillon.n8{--n:8}
.medaillon.n9{--n:9}
.medaillon.n10{--n:10}
.medaillon.n11{--n:11}
.medaillon.n12{--n:12}
.medaillon>*{grid-area:1/1}
.medaillon .mface{width:44px;height:44px;border-radius:50%;object-fit:contain;opacity:0;
  filter:drop-shadow(0 1px 3px rgba(12,32,64,.35));pointer-events:none}
/* Chaque propriété est déclarée SÉPARÉMENT et en !important. Séparément parce
   que le raccourci `animation:` remet animation-delay à zéro : en !important,
   il écrasait les décalages et les six faces se rallumaient ensemble.
   En !important parce que la feuille porte plus bas un coupe-circuit global
   `*{animation:none!important}` qui éteignait le relais — le médaillon est
   justement ce qu'on veut voir vivre. */
.medaillon.anime .mface{
  animation-name:medcycle!important;
  animation-duration:var(--dur)!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  animation-delay:calc(var(--i) * var(--dur) / var(--n))!important}
/* Le survol suspend : on peut regarder une face, et le mouvement ne suit pas
   l'œil de qui lit le titre juste à côté. */
.logo:hover .medaillon.anime .mface{animation-play-state:paused}
@keyframes medcycle{
  0%{opacity:0} 2%{opacity:1} 16%{opacity:1} 20%{opacity:0} 100%{opacity:0}
}
}
.logo h1{margin:0;font-family:"Fraunces","Cinzel";font-size:1.45rem;font-weight:700;letter-spacing:.02em;line-height:1}
.logo .sub{font-family:"JetBrains Mono";font-size:.56rem;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}
.drop{flex:1;max-width:520px;margin:0 auto;position:relative}
.drop input{width:100%;padding:11px 14px 11px 40px;border-radius:11px;border:1.5px dashed var(--line-2);
  background:var(--panel);color:var(--ink);font-family:"JetBrains Mono";font-size:.78rem;outline:none;transition:.2s}
.drop input:focus{border-color:var(--cyan);border-style:solid;box-shadow:0 0 0 3px var(--cyan-s)}
.drop .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.6}
.drop .hintk{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:"JetBrains Mono";font-size:.58rem;color:var(--dim);background:var(--soft);padding:3px 7px;border-radius:5px;border:1px solid var(--line)}
.mast-actions{display:flex;align-items:center;gap:9px;flex:none}
.me-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.me-chip .av{width:28px;height:28px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;font-family:"Fraunces","Cinzel";font-weight:700;font-size:.72rem;overflow:hidden}
.me-chip .av img{width:100%;height:100%;object-fit:cover}
.me-chip small{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim)}
.ibtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:.2s;box-shadow:var(--shadow)}
.ibtn:hover{border-color:var(--cyan);color:var(--cyan)}
/* Alerte messagerie privée (#1114) : point d'entrée /mp en haut à droite du
   masthead. Au repos = un bouton d'icône ordinaire ; en « mode alerte » (.on,
   des non-lus) = liseré coral + pastille de compteur. */
.mpal{position:relative;text-decoration:none}
.mpal.on{border-color:var(--coral);color:var(--coral)}
.mpal .mpct{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--coral);color:#fff;font-family:"JetBrains Mono";font-size:.62rem;font-weight:700;line-height:17px;
  text-align:center;box-shadow:0 0 0 2px var(--panel)}
.btn{padding:8px 15px;border-radius:10px;font-family:"Fraunces","Cinzel";font-weight:600;font-size:.78rem;cursor:pointer;border:1px solid var(--line);background:var(--panel);transition:.16s;display:inline-flex;align-items:center;gap:7px;color:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--sky);color:#fff;border-color:var(--sky)} .btn.primary:hover{background:var(--cyan);border-color:var(--cyan)}
.btn.discuss{border-color:var(--cyan);color:var(--cyan)}

/* layout */
.wrap{display:grid;grid-template-columns:220px minmax(0,1fr) 310px;gap:20px;max-width:1500px;margin:0 auto;padding:18px clamp(14px,3vw,26px) 100px}
.rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:118px;align-self:start;max-height:calc(100vh - 134px);overflow:auto}
.rail::-webkit-scrollbar{width:0}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pnl h3{margin:0;padding:12px 16px 9px;font-family:"Fraunces","Cinzel";font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.pnl h3 .n{margin-left:auto;font-family:"JetBrains Mono";font-size:.64rem;color:var(--dim);font-weight:400;letter-spacing:0}

.rub{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;transition:.15s;border-left:3px solid transparent}
.rub:hover{background:var(--soft)} .rub.on{border-left-color:var(--sky);background:var(--sky-s)}
.rub .g{width:24px;text-align:center;font-size:1rem;flex:none} .rub .nm{flex:1;font-weight:600;font-size:.86rem}
.rub .ct{font-family:"JetBrains Mono";font-size:.66rem;color:var(--dim)} .rub.on .ct{color:var(--sky);font-weight:700}
/* Conversation privee dans le rail (#1114) : avatar + nom + dernier extrait. */
.rub.conv{align-items:center}
.rub.conv .av{width:30px;height:30px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;
  font-family:"Fraunces","Cinzel";font-weight:700;font-size:.74rem;overflow:hidden;flex:none}
.rub.conv .av img{width:100%;height:100%;object-fit:cover}
.rub.conv .nm{display:flex;flex-direction:column;min-width:0;font-weight:600}
.rub.conv .nm .ap{font-weight:400;font-size:.7rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rub.conv .ct{background:var(--coral);color:#fff;border-radius:999px;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 4px}
.types{display:flex;flex-wrap:wrap;gap:7px;padding:11px 14px}
.type{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:.73rem;font-weight:600;transition:.15s}
.type:hover{border-color:var(--line-2);transform:translateY(-1px)} .type.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* feed */
.feed{display:flex;flex-direction:column;gap:16px;min-width:0}
.feedhead{display:flex;align-items:baseline;gap:12px;padding:2px 4px}
.feedhead h2{margin:0;font-family:"Fraunces","Cinzel";font-size:1.15rem} .feedhead .sub{color:var(--dim);font-size:.82rem}
.empty{padding:26px;text-align:center;color:var(--dim);font-family:"Fraunces","Cinzel"}

.dossier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:.2s;position:relative}
/* Mascotte zanimalos AUTO par type (#1131aa) : à GAUCHE du tampon de statut
   (public/local), au MÊME niveau (barre titre). Art v3 cadré serré → un cadre
   modéré suffit à la rendre bien visible sans écraser le contenu. */
.dossier .zani-stamp{position:absolute;top:-10px;right:66px;width:76px;height:76px;object-fit:contain;
  pointer-events:none;z-index:3;filter:drop-shadow(0 3px 6px rgba(0,0,0,.30))}
@media (max-width:520px){.dossier .zani-stamp{width:60px;height:60px;right:58px;top:-6px}}
.dossier:hover{box-shadow:var(--lift);transform:translateY(-2px);border-color:var(--line-2)}
/* #1180 : le dernier média image du fil en fond ambiant de la carte. Voile
   discret (14 %) pour laisser le texte lisible par-dessus ; tout le contenu
   passe au-dessus via z-index. */
.dossier.hasbg .dbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.14;pointer-events:none}
/* Remonter les enfants AU-DESSUS du fond — sauf ceux qui sont déjà placés.
   `position:relative` appliqué sans discernement écrasait le `position:absolute`
   du tampon et de la mascotte : sur toute carte À FOND ils retombaient dans le
   flux, donc en haut à gauche, par-dessus le contenu (#1203). Ils montent par
   le z-index, pas en changeant de mode de positionnement. */
.dossier.hasbg > *:not(.dbg):not(.stamp):not(.zani-stamp){position:relative;z-index:1}
.dossier.hasbg > .stamp,.dossier.hasbg > .zani-stamp{z-index:2}
.src{display:flex;border-bottom:1px dashed var(--line-2)}
.src .kind{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:13px 6px;border-right:1px dashed var(--line-2);background:var(--soft)}
.src .kind .em{font-size:1.45rem;line-height:1} .src .kind .lb{font-family:"JetBrains Mono";font-size:.52rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);text-align:center}
.src .body{flex:1;min-width:0;padding:12px 16px}
.src .origin{font-family:"JetBrains Mono";font-size:.65rem;color:var(--cyan);display:flex;align-items:center;gap:6px}
.src h2{margin:.26rem 0 .1rem;line-height:1.24} .src h2 a{font-family:"Fraunces","Cinzel";font-size:1.1rem;font-weight:600;text-wrap:balance}
.src h2 a:hover{color:var(--sky)}
/* MÉDIA « très petit » : une vignette embarquée discrète dans la carte, pas un
   grand lecteur. L'audio reste jouable en ligne ; la vidéo mène à son fil. */
.prev{margin:2px 16px 2px}
.player{margin:0;border-radius:9px;border:1px solid var(--line);background:var(--soft);padding:5px 8px;display:inline-flex;align-items:center;gap:8px;max-width:100%}
.play{width:30px;height:30px;border-radius:50%;flex:none;border:none;cursor:pointer;background:var(--sky);color:#fff;font-size:.72rem;display:grid;place-items:center;box-shadow:var(--shadow);transition:.15s}
.play:hover{transform:scale(1.08);background:var(--cyan)} .play:active{transform:scale(.95)}
.wave{width:88px;height:20px;display:flex;align-items:center;gap:1px;overflow:hidden;flex:none}
.wave i{flex:1;background:var(--line-2);border-radius:1px;min-width:1px;height:30%;transition:.15s}
.playing .wave i{background:var(--cyan)}
.ptime{font-family:"JetBrains Mono";font-size:.64rem;color:var(--dim);flex:none}
.vthumb{margin:0;width:150px;max-width:100%;border-radius:9px;aspect-ratio:16/9;position:relative;overflow:hidden;cursor:pointer;border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 9px,var(--panel) 9px,var(--panel) 18px)}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .pl{position:absolute;inset:0;display:grid;place-items:center}
.vthumb .pl span{width:34px;height:34px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:.85rem;color:var(--sky);border:2px solid var(--sky);transition:.2s;box-shadow:var(--shadow)}
.vthumb:hover .pl span{transform:scale(1.12);background:var(--sky);color:#fff}
/* Embed chargé au clic dans la carte (#1131x). */
.prev .cardframe{width:100%;max-width:360px;aspect-ratio:16/9;border:0;border-radius:9px;display:block;background:#000}
.vthumb .pop{position:absolute;left:5px;top:5px;font-family:"Fraunces","Cinzel";font-size:.5rem;letter-spacing:.04em;background:var(--panel);color:var(--ink);padding:2px 6px;border-radius:999px;border:1px solid var(--line)}

.stamp{position:absolute;top:12px;right:12px;font-family:"Fraunces","Cinzel";font-weight:700;font-size:.62rem;letter-spacing:.09em;padding:4px 10px;border-radius:6px;border:2px solid;transform:rotate(4deg);text-transform:uppercase;pointer-events:none;opacity:.92}
.stamp.pub{color:var(--mint);border-color:var(--mint);background:var(--mint-s);transform:rotate(-4deg)}
.stamp.loc{color:var(--amber);border-color:var(--amber);background:var(--amber-s)}

.dfoot{padding:10px 16px 13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Cartes de SALON (#1092/#1093) : aperçu du premier message + dernier commentaire. */
.dossier .dek{margin:2px 16px 6px;color:var(--dim);font-size:.92rem;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.dossier .lastc{margin:0 16px 14px;padding:8px 12px;border-left:2px solid var(--line-2);background:var(--soft);border-radius:0 6px 6px 0;font-size:.88rem;line-height:1.45;color:var(--ink)}
.dossier .lastc .who{font-family:"JetBrains Mono";font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);display:block;margin-bottom:2px}
/* Mini-médias embarqués du fil (#1092) : les pièces jointes en miniatures, plus
   jamais « /f/12.png » en texte brut. */
.dossier .cmedias{display:flex;flex-wrap:wrap;gap:6px;margin:0 16px 10px}
.dossier .cmini{width:56px;height:56px;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--soft);display:grid;place-items:center;flex:0 0 auto;text-decoration:none}
.dossier .cmini img{width:100%;height:100%;object-fit:cover;display:block}
.dossier .cmini.ic{font-size:1.3rem}
.dossier .cmini.ic.vid{background:var(--ink);color:var(--paper)}
.dossier .cplay{max-width:230px;height:34px;flex:0 0 auto}
.dossier .cvid{max-width:280px;max-height:180px;border-radius:6px;border:1px solid var(--line);background:var(--ink);flex:0 0 auto}
.dossier .cmini:hover{border-color:var(--cyan)}
.dossier .dek a,.dossier .lastc a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyan-s);word-break:break-word}
.dossier .dek a:hover,.dossier .lastc a:hover{border-bottom-color:var(--cyan)}
/* Conversation vive de la carte (#1131q) : messages du plus récent au premier,
   au-dessus des boutons ; le plus récent est accentué. */
.dossier .cthread{margin:2px 16px 12px;display:flex;flex-direction:column;gap:6px}
.dossier .cmsg{padding:6px 12px;border-left:2px solid var(--line-2);background:var(--soft);border-radius:0 6px 6px 0;font-size:.85rem;line-height:1.4;color:var(--ink)}
.dossier .cmsg:first-child{border-left-color:var(--cyan-s)}
.dossier .cmsg .who{font-family:"JetBrains Mono";font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);display:block;margin-bottom:1px}
.dossier .cmsg a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyan-s);word-break:break-word}
.dossier .cmsg a:hover{border-bottom-color:var(--cyan)}
/* Mini-vignettes des billets dans la vitrine (#1092). */
.billet .bmedias{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.billet .bmini{width:38px;height:38px;object-fit:cover;border-radius:3px;border:1px solid var(--line);background:var(--soft)}
.billet .ex a{color:var(--cyan);text-decoration:none}
/* Billets de même titre regroupés (#1131ab) : le dernier montré, les autres liés. */
.billet-autres{margin:-4px 16px 10px;font-size:.72rem;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.billet-autres .ba-lien{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:5px;color:var(--cyan);text-decoration:none;background:var(--soft)}
.billet-autres .ba-lien:hover{border-color:var(--cyan)}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim)}
.pill{font-family:"JetBrains Mono";font-size:.6rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.pill.pub{color:var(--mint);border-color:var(--mint)} .pill.loc{color:var(--amber);border-color:var(--amber)}
.grow{flex:1}
.mini{display:flex;align-items:center;gap:5px;font-family:"JetBrains Mono";font-size:.7rem;color:var(--dim)}

/* ---- article collaboratif (éditeur) ---- */
.art-wrap{max-width:760px;margin:0 auto;padding:18px clamp(14px,3vw,26px) 90px;display:flex;flex-direction:column;gap:16px}
.art-head{padding:16px;position:relative}
.art-head h1{margin:.2rem 0 .5rem;font-size:1.5rem;line-height:1.2;text-wrap:balance}
.art-head .stamp{position:static;display:inline-block;margin-bottom:4px}
.stamp.draft{color:var(--amber);border-color:var(--amber);background:var(--amber-s);transform:rotate(-2deg)}
.writers{display:flex;align-items:center;gap:10px}
.writers .stack{display:flex} .writers .stack .a{width:28px;height:28px;border-radius:50%;border:2px solid var(--panel);display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#fff;background:var(--sky);margin-left:-8px}
.writers .stack .a:first-child{margin-left:0}
.writers small{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim)}
.art-link{display:inline-block;margin-top:8px;font-family:"JetBrains Mono";font-size:.72rem;color:var(--cyan)}
.art-doc{display:flex;flex-direction:column;gap:12px}
.para{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:0 12px 12px 0;padding:12px 16px;box-shadow:var(--shadow)}
.para .by{display:block;font-family:"JetBrains Mono";font-size:.62rem;color:var(--dim);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.para p{margin:.3rem 0} .para p:first-child{margin-top:0}
.art-add,.art-pub{padding:16px}
.art-add h3{margin:0 0 10px;font-family:"Fraunces","Cinzel";font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.art-title{width:100%;padding:11px 14px;margin-bottom:10px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2,var(--soft));color:var(--ink);font-family:"Fraunces","Cinzel";font-size:1.05rem;outline:none}
.art-title:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-s)}
.art-area{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-family:"Inter",sans-serif;font-size:.95rem;line-height:1.5;outline:none;resize:vertical}
.art-area:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-s)}
.art-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.btn.pub{background:var(--mint);color:#fff;border-color:var(--mint)} .btn.pub:hover{filter:brightness(1.07)}

/* ---- lecteur détaché (fenêtre pop-out) ---- */
.player-body{padding:0}
.pl-wrap{max-width:520px;margin:0 auto;padding:16px 16px 90px;display:flex;flex-direction:column;gap:14px}
.pl-head{display:flex;gap:12px;align-items:center}
.pl-head .pfcover.sm{width:60px;height:60px}
.pl-meta{min-width:0} .pl-meta h1{margin:.15rem 0 .1rem;font-size:1.15rem;line-height:1.2}
.pl-meta .sub{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim)}
.pl-now{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow)}
.pl-now b{display:block;font-family:"Fraunces","Cinzel";font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-now .sub{font-family:"JetBrains Mono";font-size:.66rem;color:var(--dim)}
.pl-controls{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line-2)}
.pl-controls .play{width:48px;height:48px;font-size:1.05rem}
.pl-controls .prog{flex:1;height:7px;cursor:pointer}
.pl-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.pl-ep{display:flex;align-items:center;gap:10px;padding:9px 13px;border-top:1px solid var(--line);cursor:pointer}
.pl-ep:first-child{border-top:none} .pl-ep:hover{background:var(--soft)}
.pl-ep.on{background:var(--cyan-s)} .pl-ep.on .eptitle{color:var(--sky);font-weight:600}
.pl-ep .epnum{font-family:"JetBrains Mono";font-size:.66rem;color:var(--dim);width:24px;text-align:right;flex:none}
.pl-ep .eptitle{flex:1;min-width:0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ep .epdur{font-size:.66rem;color:var(--dim);flex:none}

/* ---- dossier « flux groupé » dans la rédaction ---- */
.feedrow{display:flex;align-items:center;gap:10px;padding:2px 0}
.pfcover.sm{width:46px;height:46px;flex:none}
.pfcover.sm .pfglyph{font-size:1.15rem}
.epone{flex:1;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}

.inline-f{display:inline}

/* ---- médiathèque : flux = sous-dossiers ---- */
.podfeed{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.podfeed+.podfeed{margin-top:0}
.pfhead{display:flex;gap:14px;padding:14px 16px;align-items:center;border-bottom:1px dashed var(--line-2)}
.pfcover{position:relative;width:72px;height:72px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--soft);display:grid;place-items:center}
.pfglyph{position:absolute;font-size:1.7rem;opacity:.55}
.pfimg{position:relative;width:100%;height:100%;object-fit:cover}
.pfmeta{flex:1;min-width:0}
.pfmeta h3{margin:.15rem 0 .1rem;font-family:"Fraunces","Cinzel";font-size:1.08rem;font-weight:600;line-height:1.2}
.pfmeta .sub{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim)}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:"Fraunces","Cinzel";font-weight:600;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.tag.audiobook{color:var(--amber);border-color:var(--amber)} .tag.podcast{color:var(--cyan);border-color:var(--cyan)} .tag.serie{color:var(--sky);border-color:var(--sky)}
.pfhead .btn{flex:none}
.eplist{list-style:none;margin:0;padding:4px 0;max-height:420px;overflow:auto}
.ep{display:flex;align-items:center;gap:11px;padding:8px 16px;border-top:1px solid var(--line)}
.ep:first-child{border-top:none} .ep:hover{background:var(--soft)}
.ep.playing{background:var(--cyan-s)}
.ep .play.sm{width:28px;height:28px;font-size:.68rem}
.ep .epnum{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim);width:26px;text-align:right;flex:none}
.ep .eptitle{flex:1;min-width:0;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep.playing .eptitle{color:var(--sky);font-weight:600}
.ep .epdur{font-family:"JetBrains Mono";font-size:.68rem;color:var(--dim);flex:none}

/* right rail */
.billet{display:block;padding:11px 14px;border-top:1px solid var(--line);transition:.15s}
.billet:first-of-type{border-top:none} .billet:hover{background:var(--soft)}
.billet b{font-family:"Fraunces","Cinzel";font-size:.9rem;font-weight:600;display:block} .billet .ex{color:var(--dim);font-size:.8rem;margin:2px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.billet .lk{font-family:"JetBrains Mono";font-size:.62rem;color:var(--cyan)} .billet .lk::before{content:"↗ "}
.teaser{padding:14px 16px;font-size:.84rem;color:var(--dim);line-height:1.5}
.teaser b{color:var(--ink);font-family:"Fraunces","Cinzel"}
.errline{padding:11px 14px;font-size:.78rem;color:var(--coral);font-family:"JetBrains Mono"}

/* docks / overlays */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;pointer-events:none;padding:0 14px 16px}
.mplayer{pointer-events:auto;display:none;align-items:center;gap:12px;max-width:960px;width:100%;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:var(--lift)}
.mplayer.show{display:flex} .mplayer .play{width:38px;height:38px;font-size:.9rem}
.ibtn.tiny{width:32px;height:32px;font-size:.82rem;border-radius:9px;flex:none}
.mplayer .info{min-width:0} .mplayer .info b{font-size:.84rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Fraunces","Cinzel"}
.mplayer .info small{color:var(--dim);font-family:"JetBrains Mono";font-size:.66rem}
.prog{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:70px} .prog i{display:block;height:100%;width:0;background:var(--cyan)}
.fab{position:fixed;right:20px;bottom:20px;z-index:46;height:52px;padding:0 20px;border:none;cursor:pointer;border-radius:999px;background:var(--sky);color:#fff;font-family:"Fraunces","Cinzel";font-weight:700;font-size:.86rem;display:flex;align-items:center;gap:8px;box-shadow:var(--lift)}
.fab:hover{transform:translateY(-2px);background:var(--cyan)} .fab .p{font-size:1.25rem;line-height:1}

.lb{position:fixed;inset:0;z-index:70;background:rgba(23,35,45,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.lb.show{display:flex}
.lb .frame{width:min(920px,94vw);border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--panel);box-shadow:var(--lift)}
.lb .stage{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
.lb .stage iframe,.lb .stage video{width:100%;height:100%;border:0}
.lb .cap{padding:14px 20px;display:flex;align-items:center;gap:12px} .lb .cap b{font-family:"Fraunces","Cinzel";font-size:1.05rem}
.lbclose{position:absolute;top:16px;right:18px;z-index:71;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(23,35,45,.5);color:#fff;cursor:pointer;font-size:1.1rem}

.status{max-width:1500px;margin:0 auto;padding:0 clamp(14px,3vw,26px);font-family:"JetBrains Mono";font-size:.64rem;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap;align-items:center;height:0;overflow:visible}

@media(max-width:1120px){ .wrap{grid-template-columns:minmax(0,1fr)} .rail{position:static;max-height:none;order:2} .feed{order:1} .rail.rr{order:0} }
@media(max-width:720px){ .drop{display:none} .logo h1{font-size:1.2rem} .logo .sub{display:none} .me-chip small{display:none} .src .kind{width:54px} }
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ── Carrousel « À la une » (#1104) — bande horizontale des derniers dossiers.
   Réutilise les jetons de thème ci-dessus, donc suit le clair/sombre. ── */
.caroussel{margin:0 0 26px}
.carhead{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.carhead h2{margin:0;font-size:1.15rem}
.carhead .sub{color:var(--dim);font-size:.8rem}
.carnav{margin-left:auto;display:flex;gap:8px}
/* Le « remonter » est d'une autre nature que les flèches du carrousel : il
   porte sur la PAGE, pas sur la piste. Un filet le sépare pour qu'on ne le
   prenne pas pour un troisième pas de défilement. */
.carnav .cartop{margin-right:6px;padding-right:9px;border-right:1px solid var(--line-2);border-radius:9px 0 0 9px}
.carbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-size:.9rem;display:grid;place-items:center;box-shadow:var(--shadow);transition:.15s}
.carbtn:hover{border-color:var(--sky);color:var(--sky)}
.carbtn:disabled{opacity:.35;cursor:default}
.cartrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.cartrack::-webkit-scrollbar{display:none}
.cartrack:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:12px}
/* CARDLET PLEIN-CADRE (#reseaux) : le média est le FOND de la carte, le texte
   est posé DESSUS sur un voile dégradé. Plus compact, plus dense — on lit le
   titre et la source à même l'image. Repli mosaïque quand il n'y a pas d'image. */
.ccard{--tone:var(--sky);position:relative;flex:0 0 auto;width:190px;height:150px;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--tone);border-radius:13px;padding:0;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.ccard:focus-visible{outline:2px solid var(--tone);outline-offset:2px}
.ccard[data-k="fil"]{--tone:var(--sky)}
.ccard[data-k="url"]{--tone:var(--cyan)}
.ccard[data-k="podcast"]{--tone:var(--amber)}
.ccard[data-k="video"]{--tone:var(--coral)}
/* couverture = FOND plein-cadre (absolu, sous le texte) */
.cccover{position:absolute;inset:0;z-index:0;display:block;background:var(--soft);overflow:hidden}
.cccover img,.cccover video{width:100%;height:100%;object-fit:cover;display:block}
/* Une vidéo en couverture est du DÉCOR : elle ne prend pas le clic, qui
   appartient à la carte. Sans ça, viser la vignette ouvrait le lecteur au lieu
   du fil. */
.cccover video,video.rbg{pointer-events:none}
.cccover.vid::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.7rem;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* Vignette de REPLI (#1114) : une carte sans image reçoit une mosaïque teintée
   par son type (data-k → --tone) plutôt qu'une tuile vide. */
.cccover.ph{display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--tone) 16%, var(--panel)), var(--soft))}
.cccover.ph .phg{font-size:3rem;opacity:.42;filter:saturate(.85)}
/* corps = posé sur l'image, sur un voile dégradé du bas vers le haut */
.ccbody{position:relative;z-index:1;margin-top:auto;padding:26px 12px 11px;color:#f4f7fa;
  background:linear-gradient(to top,rgba(7,11,15,.93) 0%,rgba(7,11,15,.78) 42%,rgba(7,11,15,.30) 78%,rgba(7,11,15,0) 100%)}
.cctop{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ccic{font-size:1rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.cctype{font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tone) 55%,#fff);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ccmed{margin-left:auto;display:inline-flex;gap:3px;font-size:.82rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ccard h3{margin:0;font-size:.9rem;line-height:1.18;letter-spacing:-.01em;font-family:inherit;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* aperçu masqué en cardlet plein-cadre : on garde la carte compacte */
.cartrack .ccdek{display:none}
.ccdek{margin:6px 0 0;font-size:.78rem;line-height:1.35;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccdek a{color:var(--sky);text-decoration:none}
.ccwho{display:flex;align-items:center;gap:6px;margin-top:5px;padding-top:0;color:rgba(244,247,250,.82);font-size:.7rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ccav{width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--tone) 26%,var(--panel));border:1px solid var(--line);flex:none}
.cardots{display:flex;gap:6px;justify-content:center;margin-top:2px;flex-wrap:wrap}
.cardots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:.15s}
.cardots button.on{background:var(--sky);transform:scale(1.3)}
@media(max-width:560px){.carnav{display:none}}

/* Widget radio incorporé dans le rail (#1131m). */
/* Widget radio SANS en-tête (#1131ac) : le lecteur /micro remplit la cardlet.
   `position:relative` UNIQUEMENT pour ancrer ⧉ — on ne touche pas padding ni
   overflow (ce qui avait rendu le widget invisible auparavant). */
.radiowidget{position:relative}
.radiowidget .radiopop-float{position:absolute;top:6px;right:6px;z-index:3;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);border-radius:6px;width:22px;height:22px;line-height:1;
  cursor:pointer;font-size:.8rem;opacity:.8}
.radiowidget .radiopop-float:hover{border-color:var(--accent,#c9a84c);opacity:1}
/* Cardlet un peu plus haute (#1131ac) : de quoi montrer barre + vignette +
   titre (2–3 lignes) + prochain titre + dernier message. */
.radioframe{display:block;width:100%;height:252px;border:0;border-radius:var(--r);background:var(--panel)}

/* Cartouche MetaNews (#metanews) : bande d'événements à VIGNETTE. Le multi-source
   corrélé est mis en avant (badge + bord cyan). Défilement horizontal. */
.metanews,.metasrc{margin:18px 0 8px}
.mnhead{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;margin-bottom:10px}
.mnhead h2{margin:0;font-size:1.15rem}
.mnhead .sub{color:var(--ink);opacity:.55;font-size:.8rem;font-family:ui-monospace,monospace}
.mnhead .mnall{margin-left:auto;color:var(--cyan);font-family:ui-monospace,monospace;font-size:.8rem;text-decoration:none}
.mnhead .mnall:hover{text-decoration:underline}
.mntrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;scrollbar-width:thin}
.mncard{scroll-snap-align:start;flex:0 0 244px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.mncard:hover{border-color:var(--cyan);transform:translateY(-2px)}
.mncard.multi{border-color:var(--cyan)}
.mncover{position:relative;display:block;aspect-ratio:16/9;background:var(--paper);overflow:hidden}
.mncover img{width:100%;height:100%;object-fit:cover;display:block}
/* Repli SANS image : une tuile TEINTÉE et intentionnelle (pas une case grise
   « cassée ») — certaines sources (Libération, France 24, RFI…) bloquent l'accès
   automatisé à leurs images ; on l'assume proprement plutôt que de le contourner. */
.mncover.ph{display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--sky) 13%, var(--paper)), var(--paper))}
.mncover.ph .phg{font-size:2.6rem;opacity:.42;filter:saturate(.9)}
.mnbadge{position:absolute;top:8px;right:8px;font-family:ui-monospace,monospace;font-size:11px;font-weight:700;
  background:rgba(0,0,0,.55);color:#fff;border-radius:20px;padding:2px 8px;backdrop-filter:blur(2px)}
.mnbadge.on{background:var(--cyan);color:#04222a}
.mnbody{display:flex;flex-direction:column;gap:5px;padding:10px 12px}
.mntop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mnsrc{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:20px;padding:2px 8px;color:var(--ink);opacity:.7}
.mnsrc.on{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-s);opacity:1;font-weight:700}
.mntag{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--mint)}
.mncard h3{margin:0;font-size:.98rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mnnoms{display:flex;gap:6px;flex-wrap:wrap;font-family:ui-monospace,monospace;font-size:10px;opacity:.6}
.mnnoms span:not(:last-child)::after{content:" ·";opacity:.5}
/* Listing par source : cartes plus petites, titre seul. */
.msgroup{margin-bottom:14px}
.mstitle{font-size:.9rem;margin:0 0 6px}
.mstitle .mscat{font-family:ui-monospace,monospace;font-size:10px;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;margin-left:6px}
.mncard.news{flex:0 0 176px}
.mncard.news .mnbody{padding:8px 10px}
.mncard.news h3{font-size:.85rem;-webkit-line-clamp:3}

/* Présence : visiteurs en ligne + membres uniques, à gauche de l'avatar (#presence). */
.pres-chip{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,monospace;font-size:11.5px;
  color:var(--ink);padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.pres-chip b{font-weight:700}
.pres-chip small{opacity:.6;font-size:10px}
.pres-chip .pmemb{color:var(--cyan)}
.pres-chip .psep{opacity:.35;margin:0 1px}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none;animation:prespulse 2s infinite}
@keyframes prespulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pdot{animation:none}}
@media (max-width:680px){.pres-chip small{display:none}.pres-chip{gap:4px;padding:4px 8px}}

/* ── #1167 · MUR RÉSEAUX ────────────────────────────────────────────────────
   Le salon « reseaux » se rend en mur de cardlets compactes : le média en FOND,
   le texte par-dessus sur un voile lisible. Média absent → carte pleine de texte
   sur --soft. Grille dense et responsive, plus serrée que « Tous les dossiers ».
   Aucune couleur définie hors des variables de thème : le mur suit clair/sombre. */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:6px}
.rcard{position:relative;display:block;min-height:150px;border-radius:var(--r);overflow:hidden;
  background:var(--soft);border:1px solid var(--line);box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.rcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.rcard.hasbg{color:#fff}
.rbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Voile : illisible sinon, blanc sur photo claire. Dégradé bas→haut pour asseoir
   le texte, transparent en haut pour laisser respirer l'image. */
.rcard.hasbg .rin{background:linear-gradient(to top,rgba(8,14,20,.86) 0%,rgba(8,14,20,.55) 45%,rgba(8,14,20,.12) 100%)}
.rin{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;height:100%;
  min-height:150px;padding:12px 13px;box-sizing:border-box;justify-content:flex-end}
.rhd{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.92}
.rau{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.rdt{margin-left:auto;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtx{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.rcard:not(.hasbg) .rtx{color:var(--ink)}
.rvid{width:100%;border-radius:10px;margin-top:4px;background:#000;max-height:180px}
.rgo{font-size:12px;font-weight:600;opacity:.85;margin-top:2px}

/* AVATAR DE SOURCE (#1266b) : la miniature du média remplace la mascotte, en
   tuile arrondie — distincte pour chaque fil vidéo. */
.zani-stamp.src-vig { object-fit: cover; border-radius: 10px; background: #0a0a0f; }