/* direct.css — Twitch sur Lobbik (04/10/2026) : « Kripy en direct » sur l'accueil, bande « En direct », « Compte Twitch » des
   Paramètres, badge « Présent au stream » du profil. Code : assets/direct.js. Préfixe adr- (aucune classe existante). */
:root{--adr-rouge:#eb0400;--adr-tw:#9146ff}
.adr-tw{width:16px;height:16px;flex:none;vertical-align:-3px}
/* l'accueil pendant le direct de la vedette : la carte prend la place de « À la une » */
#acc.acc-en-direct .acc-une{display:none}
.acc-direct{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:12px;padding:12px;flex:none;height:clamp(270px,42vh,540px);min-width:0}
.adr-lecteur{position:relative;min-width:0;min-height:0;border-radius:14px;overflow:hidden;background:#000}
.adr-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;color:#fff;cursor:pointer;font:inherit}
.adr-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .25s ease}
.adr-poster:hover img,.adr-poster:focus-visible img{opacity:1}
.adr-poster:focus-visible{outline:2px solid var(--id);outline-offset:-2px}
.adr-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,11,12,.62);box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;transition:transform .2s ease,background .2s ease}
.adr-play svg{width:34px;height:34px;margin-left:4px}
.adr-poster:hover .adr-play{transform:scale(1.07);background:var(--adr-tw)}
.adr-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:var(--adr-rouge);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em}
.adr-badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:accPouls 1.6s ease-in-out infinite}
.adr-poster > .adr-badge{position:absolute;left:12px;top:12px}
.adr-badge.petit{padding:2px 6px;font-size:10px}
.adr-clic{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:12.5px;color:rgba(255,255,255,.86);text-align:left;
  background:linear-gradient(180deg,transparent,rgba(5,6,8,.78))}
.adr-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.adr-info{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:hidden}
.adr-tete{display:flex;align-items:center;gap:10px;min-width:0}
.adr-tete .av,.adr-tete img{width:44px;height:44px;border-radius:50%;flex:none}
.adr-qui{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.adr-qui > b,.adr-qui{font-size:16px}
.adr-nom{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adr-clan{font-style:normal;color:var(--id);font-weight:800}
.adr-sous{display:flex;align-items:center;gap:8px;font-size:12px}
.adr-spect{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.adr-spect svg{width:14px;height:14px}
.adr-fermer{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:rgba(var(--neu-rgb),.06);color:var(--muted);cursor:pointer}
.adr-fermer:hover{background:rgba(var(--neu-rgb),.12);color:var(--txt,#eef0ee)}
.adr-fermer svg{width:16px;height:16px}
.adr-titre{margin:0;font-size:14.5px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.adr-jeu{margin:0;font-size:12.5px;color:var(--muted)}
.adr-jeu span{color:rgb(var(--cy-rgb));font-weight:700}
.adr-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;min-width:0}
.adr-rej{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0}
.adr-rej span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adr-partie-l{font-size:12px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adr-liens{display:flex;gap:8px;flex-wrap:wrap}
.adr-liens .bt{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px}
.adr-tw-l .adr-tw{color:var(--adr-tw)}
.adr-autres{display:flex;flex-direction:column;gap:6px;min-width:0}
.adr-autres-t{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.adr-puces{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.adr-puces::-webkit-scrollbar{display:none}
.adr-puce{flex:none;display:flex;align-items:center;gap:8px;max-width:250px;padding:4px 10px 4px 4px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(var(--neu-rgb),.05);color:var(--txt,#eef0ee);font:inherit;font-size:12.5px;text-align:left;transition:background .2s}
.adr-puce:hover{background:rgba(var(--id-rgb),.1)}
.adr-puce .av,.adr-puce img{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--adr-rouge)}
.adr-puce-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.adr-puce-t .adr-nom,.adr-puce-t i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adr-puce-t i{font-style:normal;font-size:11px;color:var(--muted)}
.adr-puce.mini{padding-right:8px}
.adr-puce.mini .adr-spect{display:none}
.adr-av-tw{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--adr-tw);color:#fff;flex:none}
.adr-av-tw .adr-tw{width:14px;height:14px;vertical-align:0}
.adr-tete .adr-av-tw{width:44px;height:44px}
/* membres en direct sans la vedette : une simple bande */
.acc-directs-bande{display:flex;align-items:center;gap:10px;flex:none;min-width:0;padding:6px 8px;border-radius:14px;background:var(--panel,#17181b)}
.adr-bande-t{display:inline-flex;align-items:center;gap:7px;flex:none;padding:0 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--adr-rouge)}
.adr-bande-t i{width:8px;height:8px;border-radius:50%;background:var(--adr-rouge);animation:accPouls 1.6s ease-in-out infinite}
@media (min-width:1100px) and (max-height:900px){ .acc-direct{height:clamp(270px,42vh,390px)} .adr-partie-l{display:none} .adr-titre{-webkit-line-clamp:2} .adr-info{gap:6px} }
@media (max-width:1099px){
  .acc-direct,.acc-directs-bande{order:2}
  .acc-direct{grid-template-columns:1fr;height:auto}
  .adr-lecteur{aspect-ratio:16/9}
  .adr-actions{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){ .adr-badge i,.adr-bande-t i,.adr-rond{animation:none!important} .adr-play{transition:none} }
/* Paramètres : « Compte Twitch » */
.pr-twitch .adr-tw{color:var(--adr-tw)}
.adr-tw-bt{display:inline-flex;align-items:center;gap:7px}
.adr-tw-bt .adr-tw,.adr-code .bt.ok .adr-tw{color:currentColor}
.adr-code{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(var(--neu-rgb),.04)}
.adr-code .bt{display:inline-flex;align-items:center;gap:7px}
.adr-code-v{font:800 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;padding:7px 12px;border-radius:10px;background:rgba(var(--id-rgb),.12);color:var(--id);user-select:all}
.adr-code-e{display:inline-flex;align-items:center;gap:8px;flex-basis:100%}
.adr-rond{width:12px;height:12px;border-radius:50%;border:2px solid rgba(var(--neu-rgb),.25);border-top-color:var(--id);animation:adrTourne .9s linear infinite}
@keyframes adrTourne{to{transform:rotate(360deg)}}
/* Profil : badge « Présent au stream » */
.pu-role.pf-stream-b{display:inline-flex;align-items:center;gap:5px;text-decoration:none;text-transform:none;color:#c9b3ff;background:rgba(145,70,255,.16)}
.pu-role.pf-stream-b .adr-tw{width:13px;height:13px;color:var(--adr-tw);vertical-align:0}
.pu-role.pf-stream-b b{color:#fff;font-weight:800}
:root[data-theme="clair"] .pu-role.pf-stream-b{color:#5b2bb3}
:root[data-theme="clair"] .pu-role.pf-stream-b b{color:#3a1a7a}
/* 04/10/2026 (2) : défilement des directs sur l'accueil (une carte toutes les 25 s, aucun streamer prioritaire) */
.adr-autres-h{display:flex;align-items:center;gap:8px;min-width:0}
.adr-autres-h .adr-autres-t{flex:1;min-width:0}
.adr-rot-n{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.adr-rot-bt{flex:none;width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:rgba(var(--neu-rgb),.06);color:var(--muted);cursor:pointer}
.adr-rot-bt:hover,.adr-rot-bt:focus-visible{background:rgba(var(--id-rgb),.14);color:var(--txt,#eef0ee)}
.adr-rot-bt svg{width:14px;height:14px}
.adr-rot{height:3px;border-radius:2px;background:rgba(var(--neu-rgb),.08);overflow:hidden}
.adr-rot i{display:block;height:100%;width:0;background:var(--id);border-radius:2px;transition:width 1s linear}
.adr-rot.arret i{width:0!important}
@media (prefers-reduced-motion:reduce){ .adr-rot i{transition:none} }
/* Paramètres : « LobbikBot » sur ma chaîne */
.pr-lbb .lbb-bt{display:inline-flex;align-items:center;gap:7px}
.pr-lbb svg{width:17px;height:17px;vertical-align:-3px;flex:none}
.lbb-ce{margin:8px 0 0;padding-left:18px;display:grid;gap:5px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.lbb-ce b{color:var(--txt,#eef0ee)}
.lbb-ce-d{margin:4px 0 2px}
.lbb-ce-d summary{cursor:pointer;font-size:12.5px;color:var(--id);font-weight:700}
.lbb-note{margin:10px 0 0}
.lbb-alerte{margin:6px 0;padding:9px 12px;border-radius:12px;background:rgba(235,4,0,.12);color:#ffb4b0;font-size:12.5px}
:root[data-theme="clair"] .lbb-alerte{color:#9b1c18}
.lbb-gr{display:grid;gap:8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
:root[data-theme="clair"] .lbb-gr{border-top-color:rgba(0,0,0,.08)}
.lbb-gr h3{margin:0;font-size:13px;font-weight:800;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.lbb-gr h3 small,.lbb-l small,.lbb-sw small{font-size:11.5px;font-weight:400;color:var(--muted)}
.lbb-l{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;min-width:0}
.lbb-l > span{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:13.5px}
.lbb-l2 .lbb-sw{flex:1 1 260px}
.lbb-l select{max-width:100%}
.lbb-sw{display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-width:0}
.lbb-sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lbb-sw-b{flex:none;position:relative;width:36px;height:21px;margin-top:1px;border-radius:999px;background:rgba(127,127,127,.32);transition:background .2s}
.lbb-sw-b::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s}
.lbb-sw input:checked + .lbb-sw-b{background:var(--id)}
.lbb-sw input:checked + .lbb-sw-b::after{transform:translateX(15px);background:var(--id-ink)}
.lbb-sw input:focus-visible + .lbb-sw-b{outline:2px solid var(--id);outline-offset:2px}
.lbb-sw-t{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:13.5px}
.lbb-sw-t b{font-weight:600;overflow-wrap:anywhere}
.lbb-ligne{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) auto 30px;gap:6px 8px;align-items:center}
#lbbMins .lbb-ligne{grid-template-columns:minmax(0,1fr) auto auto 30px}
.lbb-ligne input:not([type=checkbox]){width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border-radius:10px;border:1px solid rgba(127,127,127,.25);background:rgba(var(--neu-rgb),.04);color:inherit;font:inherit;font-size:13px}
.lbb-nom{display:flex;align-items:center;gap:2px;min-width:0}
.lbb-nom span{font-weight:800;color:var(--id)}
.lbb-ligne .lbb-nom input{flex:1 1 auto;width:auto;min-width:0}
.lbb-min{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}
.lbb-min input{width:66px!important}
.lbb-mini{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer}
.lbb-x{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:rgba(var(--neu-rgb),.06);color:var(--muted);cursor:pointer}
.lbb-x:hover{background:rgba(235,4,0,.14);color:#ff8a85}
.lbb-x svg{width:14px;height:14px}
.lbb-vide{margin:0}
.lbb-fin{border-top:1px solid rgba(255,255,255,.07)}
@media (max-width:640px){
  .lbb-ligne,#lbbMins .lbb-ligne{grid-template-columns:minmax(0,1fr) auto 30px}
  .lbb-ligne > input[data-lbb-ctxt],.lbb-ligne > input[data-lbb-mtxt]{grid-column:1 / -1;grid-row:2}
  #lbbMins .lbb-ligne > input[data-lbb-mtxt]{grid-row:1;grid-column:1 / -1}
  #lbbMins .lbb-min{grid-column:1}
}
@media (prefers-reduced-motion:reduce){ .lbb-sw-b,.lbb-sw-b::after{transition:none} }