/* SPDX-License-Identifier: LicenseRef-CMSD-1.0
   Vue billet (#1268) — la COUCHE « ouverture », par-dessus immersif.css dont on
   hérite tokens, masthead, pastilles et écran. Forme = celle du popup théâtre :
   un écran, et les messages / réactions EN SOUS-TITRES CRT PAR-DESSUS l'image,
   interactifs (survol = le message entier au curseur, clic = la console). */

.vue .retour{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--edge);border-radius:999px;padding:7px 14px;transition:.18s}
.vue .retour:hover{color:var(--tx);border-color:var(--edge-2)}

.vue-wrap{max-width:1020px;margin:0 auto;padding:0 clamp(12px,3vw,28px) 80px}

/* la tonalité de catégorie, comme sur les cartes du fil */
.vue-billet{--tone:var(--sky);position:relative}
.vue-billet[data-cat="auth"]{--tone:#f0a020} .vue-billet[data-cat="wall"]{--tone:#e8c637}
.vue-billet[data-cat="boot"]{--tone:#e8556e} .vue-billet[data-cat="mind"]{--tone:#9b6ff0}
.vue-billet[data-cat="root"]{--tone:#2fcf6a} .vue-billet[data-cat="mesh"]{--tone:#22c8e8}

/* ── L'ECRAN ───────────────────────────────────────────────────────────────── */
.vue-stage{margin:22px 0 0;border:1px solid var(--edge);border-radius:18px;overflow:hidden;
  box-shadow:var(--lift);cursor:default;background:#05080c;
  /* LA SCENE CESSE DE MANGER LA PAGE (#1372). Elle herite d'un 16/9 : sur un
     ecran large, elle prenait presque toute la hauteur utile et repoussait les
     commentaires sous la ligne de flottaison — on ne savait meme pas qu'il y
     en avait.

     ON PLAFONNE LA HAUTEUR, ON NE TOUCHE PAS AU RATIO. Changer le rapport
     d'image deformerait ou bordurerait les embeds video, qui sont en 16/9 chez
     la source. Le plafond, lui, ne s'applique QUE quand la scene deviendrait
     trop haute : sur un ecran etroit ou en portrait, ou le 16/9 tient deja
     dans peu de hauteur, il ne change rigoureusement rien. */
  max-height:58vh}
.vue-stage.flat{aspect-ratio:21/8}
.vue-stage::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--tone);opacity:.9;z-index:9}
.vue .frame{opacity:1}                        /* hors carte : l'embed est visible d'emblée */
.vue .frame.live{z-index:2}

/* MODE SOUVERAIN (#1372). Le cadre d'un embed TIERS existe dans le DOM mais
   son iframe ne porte pas de `src` : rien n'est charge. Il doit donc rester
   INVISIBLE et NON CLIQUABLE, sinon il recouvrirait l'instantane local et
   avalerait le clic qui, justement, sert de consentement.

   `visibility` et non `display:none` : un iframe en display:none que l'on
   revele ensuite est re-cree par certains navigateurs, ce qui ferait repartir
   la lecture depuis zero au lieu de reprendre. */
.vue .frame.differe{visibility:hidden;pointer-events:none;z-index:0}
.vue-stage:has(.frame.differe) .glyph{cursor:pointer}
.vue .glyph{opacity:.85}
.vue-stage .poster{filter:saturate(.95)}
.vue-stage.playing .poster,.vue-stage.playing .glyph{opacity:0;transition:opacity .35s}

/* Couche CRT : balayage + vignette SOMBRE. Surtout PAS de mix-blend-mode ici —
   un `screen` sur une vignette claire lavait toute l'image en blanc. Le grain
   d'un tube, c'est des lignes noires et des COINS assombris, jamais un voile. */
.crt{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.55}
.crt .sl{position:absolute;inset:0;background:repeating-linear-gradient(180deg,
  rgba(0,0,0,.11) 0 1px, rgba(0,0,0,0) 1px 3px);animation:crtroll 9s linear infinite}
.crt .vig{position:absolute;inset:0;
  background:radial-gradient(125% 105% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.42) 100%)}
@keyframes crtroll{from{background-position-y:0}to{background-position-y:60px}}
.vue-stage.nocrt .crt{display:none}

/* ── POPS : réactions qui montent par-dessus l'image ───────────────────────── */
.pops{position:absolute;right:12px;top:44px;bottom:64px;z-index:8;width:190px;pointer-events:none;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:5px;overflow:hidden}
.pop{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  color:#e6eef4;background:rgba(6,10,15,.6);border-right:2px solid var(--tone);border-radius:5px 0 0 5px;
  padding:4px 9px;text-shadow:0 1px 2px rgba(0,0,0,.9);animation:monte 4.6s ease-out forwards;white-space:nowrap}
.pop .emo{font-size:14px;text-shadow:none}
.pop .n{color:var(--gold);font-variant-numeric:tabular-nums}
@keyframes monte{
  0%{opacity:0;transform:translateY(14px) scale(.94)}
  12%{opacity:1;transform:none}
  72%{opacity:1;transform:translateY(-10px)}
  100%{opacity:0;transform:translateY(-26px)}
}

/* ── SOUS-TITRES : lignes monospace tronquées, par-dessus l'image ──────────── */
.track{position:absolute;left:0;right:0;bottom:58px;z-index:8;display:flex;flex-direction:column;
  gap:3px;padding:0 14px;pointer-events:none;align-items:flex-start}
.track .line{pointer-events:auto;max-width:min(760px,86%);display:flex;align-items:baseline;gap:9px;
  background:rgba(6,10,15,.66);backdrop-filter:blur(2px);
  border-left:2px solid var(--tone);border-radius:0 5px 5px 0;padding:4px 11px;cursor:pointer;
  font-family:var(--mono);font-size:12px;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.9);
  animation:subin .28s cubic-bezier(.2,.7,.2,1) both;transition:background .15s,border-color .15s}
.track .line.out{animation:subout .3s ease forwards}
.track .line:hover{background:rgba(10,16,24,.92);border-left-color:var(--gold)}
.line .k{color:var(--tone);opacity:.8;flex:none}
/* la puce d'INSTANT : ce message parle de CE moment de la vidéo */
.line .at,.cline .at{flex:none;font-family:var(--mono);font-size:9.5px;font-variant-numeric:tabular-nums;
  color:var(--gold);background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);
  border-radius:4px;padding:1px 5px;letter-spacing:.02em}
.cline .at{cursor:pointer;transition:.15s}
.cline .at:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.line .nm{color:#eaf1f6;font-weight:600;font-size:11px;flex:none;letter-spacing:.02em}
.line .msg{color:#c9d5df;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line .tm{color:var(--faint);font-size:9px;flex:none;font-variant-numeric:tabular-nums}
@keyframes subin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes subout{to{opacity:0;transform:translateY(-6px)}}
.vue-stage.nosubs .track{display:none}

/* ── SAISIE INCRUSTEE : une ligne de console, dans l'écran ─────────────────── */
.ctrls{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.msgbox{display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--edge);
  border-left:2px solid var(--tone);border-radius:0 10px 10px 0;padding:7px 12px;
  font-family:var(--mono);font-size:12px;transition:border-color .15s,background .15s}
.msgbox:focus-within{background:var(--panel);border-color:var(--gold);border-left-color:var(--gold)}
.msgbox .k{color:var(--tone);opacity:.85;flex:none}
.msgbox input{font:inherit;color:var(--tx);background:transparent;border:0;padding:4px 2px;min-width:0}
.msgbox input:focus{outline:none}
.msgbox input::placeholder{color:var(--faint)}
.msgbox .qui{flex:none;width:96px;color:#eaf1f6;font-weight:600;border-right:1px solid var(--edge)}
.msgbox .quoi{flex:1}
.msgbox .emos{display:flex;gap:1px;flex:none}
.emo{background:none;border:0;cursor:pointer;font-size:14px;line-height:1;padding:3px;opacity:.6;transition:.12s;border-radius:5px}
.emo:hover{opacity:1;transform:translateY(-1px);background:rgba(255,255,255,.07)}
.msgbox .send{flex:none;font:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:transparent;border:1px solid var(--edge-2);border-radius:999px;
  padding:4px 11px;cursor:pointer;transition:.15s}
.msgbox .send:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.msgbox .send[disabled]{opacity:.45;cursor:default}
.msgbox .etat{flex:none;font-size:9.5px;letter-spacing:.08em;color:var(--faint);max-width:190px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgbox .etat.ok{color:var(--green)} .msgbox .etat.err{color:var(--coral)}

/* la ligne qu'on vient d'écrire se distingue dans le défilé */
.track .line.mienne{border-left-color:var(--gold);background:rgba(14,21,30,.88)}
.track .line .att{color:var(--gold);font-size:9px;flex:none}

/* ── OSD : la barre console en bas de l'écran ──────────────────────────────── */
.osd{display:flex;align-items:center;gap:8px;padding:0 2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)}
.ob{font:inherit;letter-spacing:inherit;color:var(--dim);background:transparent;
  border:1px solid var(--edge-2);border-radius:999px;padding:4px 10px;cursor:pointer;transition:.15s;text-transform:uppercase}
.ob:hover{color:var(--tx);border-color:var(--dim)}
.ob.on{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,var(--edge-2))}
.osd .sep{flex:1}
.osd .cnt b{color:var(--tx);font-variant-numeric:tabular-nums}
.osd .go{margin-left:4px}

/* ── LE BANDEAU (barre du théâtre) ─────────────────────────────────────────── */
.vue-pin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 2px 13px;border-bottom:1px solid var(--edge)}
.vue-pin .ic{font-size:15px}
.vue-pin .date{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em}
.vue-pin .title{flex-basis:100%;font-family:var(--serif);font-weight:600;color:#eff4f8;
  font-size:clamp(23px,3.3vw,33px);line-height:1.18;margin:2px 0 0;text-wrap:balance}
.vue-pin .ref-chip{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim);
  border:1px solid var(--edge);border-radius:999px;padding:5px 11px}
.vue-pin .ref-chip:hover{color:var(--tx);border-color:var(--edge-2)}

/* ── AGRANDISSEMENT DES IMAGES ─────────────────────────────────────────────
   L'habillage vivait dans billets.css, que cette vue ne charge pas : le
   recouvrement s'ouvrait donc NU. Le comportement, lui, est celui de
   billets.js — on ne réimplémente rien, on rhabille. */
.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(5,8,12,.95);backdrop-filter:blur(6px)}
.lightbox.open{display:flex;animation:lbin .2s ease both}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-img{max-width:94vw;max-height:90vh;object-fit:contain;cursor:zoom-in;
  border:1px solid var(--edge-2);border-radius:10px;box-shadow:0 40px 90px -20px rgba(0,0,0,.9)}
.lb-img.zoomed{cursor:zoom-out;max-width:none;max-height:none;border-radius:0}
.lb-close,.lb-nav{position:absolute;font-family:var(--mono);color:var(--tx);
  background:rgba(6,10,15,.7);border:1px solid var(--edge-2);border-radius:999px;
  cursor:pointer;line-height:1;transition:.15s}
.lb-close:hover,.lb-nav:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.lb-close{top:18px;right:18px;width:38px;height:38px;font-size:15px}
.lb-nav{top:50%;transform:translateY(-50%);width:42px;height:42px;font-size:22px}
.lb-prev{left:18px} .lb-next{right:18px}
body.lb-lock{overflow:hidden}
/* ce qui s'agrandit se signale */
.prose img[data-zoom]{cursor:zoom-in;transition:filter .15s}
.prose a.gallery-item:hover img[data-zoom]{filter:brightness(1.08)}

/* ── LA FICHE : les liens deviennent des PASTILLES, plus des URLs nues ─────── */
.fiche{max-width:68ch;margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
.fmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;color:var(--dim);letter-spacing:.04em}
.fmeta .fdur{color:var(--gold)}
.fstats{margin-left:auto;display:flex;gap:13px;color:var(--faint)}
.fstats .st{display:inline-flex;align-items:center;gap:5px}
.fstats b{color:var(--tx);font-variant-numeric:tabular-nums;font-weight:600}
.fliens{display:flex;gap:9px;flex-wrap:wrap}
.fl{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--edge);transition:.16s;min-width:0}
.fl:hover{transform:translateY(-1px);border-color:var(--edge-2);background:var(--panel)}
.fl .fi{font-size:15px;flex:none}
.fl .ft{font-family:var(--body);font-size:13px;font-weight:500;color:var(--tx);white-space:nowrap}
.fl .fh{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
/* l'hôte dit la nature : souverain en vert, tiers en sourdine */
.fl.pt{border-color:color-mix(in srgb,var(--green) 34%,var(--edge))}
.fl.pt:hover{border-color:var(--green)} .fl.pt .ft{color:#cfeadd}
.fl.box{border-color:color-mix(in srgb,var(--gold) 34%,var(--edge))}
.fl.box:hover{border-color:var(--gold)} .fl.box .ft{color:#f0e2bb}
.fl.yt .ft{color:var(--dim)}
.prose.zani-seul{margin-top:8px;min-height:0}
.prose.zani-seul::after{content:"";display:block;clear:both}

/* ── LE CORPS ──────────────────────────────────────────────────────────────── */
.prose{max-width:68ch;margin:26px auto 0;font-size:16.5px;line-height:1.74;color:#ccd6e0}
.prose>*+*{margin-top:1.05em}
.prose h2,.prose h3{font-family:var(--serif);color:#eef3f7;line-height:1.25;margin-top:1.9em;font-weight:600}
.prose h2{font-size:23px} .prose h3{font-size:19px}
.prose a{color:var(--tone);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold)}
.prose blockquote{margin-left:0;padding:2px 0 2px 18px;border-left:2px solid var(--gold);color:var(--dim);font-style:italic}
.prose code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:5px;padding:1px 5px}
.prose pre{background:var(--panel-2);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0}
.prose img,.prose video,.prose audio{border-radius:12px;display:block;max-width:100%}
.prose hr{border:0;border-top:1px solid var(--edge)}
.zani-stamp{float:right;margin:0 0 10px 16px;opacity:.9}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:26px auto 0;max-width:68ch}
.gallery-item{display:block;border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.gallery-item img{display:block;width:100%;height:130px;object-fit:cover;transition:transform .3s}
.gallery-item:hover img{transform:scale(1.05)}

.vue-embed{margin:26px auto 0;max-width:68ch;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--panel-2)}
.vue-embed iframe{width:100%;border:0;display:block}

.sbx-mediaobj-bar,.reactions,.share-quick,.billet-meta{max-width:68ch;margin-left:auto;margin-right:auto}
.sbx-mediaobj-bar{display:flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:10.5px}
.mo-id{color:var(--faint);letter-spacing:.1em}
.mo-act{color:var(--dim);border:1px solid var(--edge);border-radius:999px;padding:5px 11px;transition:.15s}
.mo-act:hover{color:var(--tx);border-color:var(--edge-2)}
.mo-diff:hover{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 45%,var(--edge))}

/* réactions : afficheur CRT (mono + lueur), et non des boutons d'appli */
.reactions{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.reactions .react{margin:0}
.react-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--dim);
  background:rgba(255,255,255,.03);border:1px solid var(--edge);border-radius:999px;padding:5px 12px;cursor:pointer;transition:.15s}
.react-btn:hover{border-color:var(--edge-2);color:var(--tx);transform:translateY(-1px)}
.react-btn .emoji{font-size:15px}
.react-btn .count{font-variant-numeric:tabular-nums;color:var(--faint)}
.react-btn.on{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--edge));
  background:color-mix(in srgb,var(--gold) 9%,transparent);text-shadow:0 0 12px color-mix(in srgb,var(--gold) 55%,transparent)}
.react-btn.on .count{color:var(--gold)}

.share-quick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--edge);font-size:17px}
.share-quick .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-right:4px}
.share-quick a,.share-quick button{background:none;border:0;cursor:pointer;font-size:17px;opacity:.72;transition:.15s;padding:2px}
.share-quick a:hover,.share-quick button:hover{opacity:1;transform:translateY(-2px)}
.billet-meta{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.billet-meta a:hover{color:var(--dim)}

/* ── LA CONSOLE : le relevé des lignes, en entier ──────────────────────────── */
.console{max-width:840px;margin:44px auto 0;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--edge);border-radius:16px;padding:0 0 4px;box-shadow:var(--lift);position:relative;overflow:hidden}
.console::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px)}
.console::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--tone);opacity:.75}

.chead{position:relative;display:flex;align-items:center;gap:10px;padding:14px 20px 12px;
  border-bottom:1px solid var(--edge);font-family:var(--mono)}
.chead .k{color:var(--tone)}
.chead h2{font:inherit;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:0;font-weight:500}
.chead .cnum{font-size:10px;letter-spacing:.14em;color:var(--faint);margin-left:2px}
.chead .cnum b{color:var(--tx);font-variant-numeric:tabular-nums}
.chead .clive{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.chead .clive i{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(95,185,143,.14);animation:battement 2.4s ease-in-out infinite}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.35}}

.clines{position:relative;list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column}
.cline{display:flex;align-items:baseline;gap:11px;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  padding:8px 20px;border-left:2px solid transparent;transition:background .15s,border-color .15s}
.cline:nth-child(odd){background:rgba(255,255,255,.014)}
.cline:hover,.cline.vu{background:rgba(12,19,28,.9);border-left-color:var(--gold)}
.cline .ix{flex:none;color:var(--faint);font-size:9.5px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.cline:hover .ix,.cline.vu .ix{color:var(--gold)}
.cline .nm{flex:none}
.cline .nm strong{color:var(--tone);font-weight:600;font-size:11.5px;letter-spacing:.02em}
.cline .msg{color:#ccd7e1;flex:1;min-width:0}
.cline .msg p{margin:0} .cline .msg a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cline .tm{color:var(--faint);font-size:9.5px;flex:none;font-variant-numeric:tabular-nums}
.console .vide{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  color:var(--faint);padding:24px 20px;letter-spacing:.04em}
.console .vide .k{color:var(--tone);opacity:.6}
.console .note{position:relative;font-family:var(--mono);font-size:11px;color:var(--green);
  border-left:2px solid var(--green);background:rgba(95,185,143,.07);padding:9px 20px;margin:0}
.console .note.err{color:var(--coral);border-left-color:var(--coral);background:rgba(232,131,107,.07)}
.cfoot{position:relative;display:flex;align-items:center;gap:9px;margin:0;padding:12px 20px 14px;
  border-top:1px solid var(--edge);font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint)}
.cfoot .fk{color:var(--gold);font-size:12px}
.hp{position:absolute;left:-9999px}

.vue-foot{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 0 40px}
.vue-foot a:hover{color:var(--dim)}

@media(max-width:720px){
  .vue-wrap{padding-bottom:56px}
  .vue-stage{border-radius:13px;margin-top:14px}
  .pops{display:none}
  .track{bottom:50px;padding:0 9px}
  /* 16px : en dessous, le navigateur zoome à l'entrée dans le champ */
  .msgbox{flex-wrap:wrap;gap:6px}
  .msgbox .qui{width:92px;font-size:16px}
  .msgbox .quoi{font-size:16px;flex:1 1 100%;order:3}
  .msgbox .emos{margin-left:auto}
  .msgbox .emo{font-size:17px;padding:4px}
  .msgbox .send{order:4;margin-left:auto}
  .msgbox .emos,.msgbox .etat{display:none}
  .msgbox .qui{width:74px}
  .track .line{max-width:94%;font-size:11px}
  .console{padding:15px 14px 18px;border-radius:13px}
  .cline{flex-wrap:wrap;gap:6px}
  .prose{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .crt .sl{animation:none}
  .pop,.track .line{animation:none}
}

/* Vidéo HÉBERGÉE dans la scène (#2397) : plein cadre, sur fond noir, sans rogner l'image. */
.vue .frame video{width:100%;height:100%;display:block;background:#05080c;object-fit:contain}
.vue-stage[data-video]:not(.playing) .glyph{cursor:pointer}

/* Commentaire SYSTÈME : réponse publique du BBS recopiée sous le billet (#2778) */
.cline.systeme{border-left:2px solid var(--gold,#d9a441);padding-left:8px;background:color-mix(in srgb,var(--gold,#d9a441) 6%,transparent)}
.cline .sys{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--gold,#d9a441);border-radius:999px;font-size:9.5px;color:var(--gold,#d9a441);font-family:var(--mono);vertical-align:middle}
.cline .vignette{display:block;max-height:96px;max-width:100%;margin-top:4px;border-radius:6px;border:1px solid var(--edge,#333);object-fit:cover}
.cline .vig,.cline .vid{display:inline-block;text-decoration:none}