/* ==========================================================================
   lives.css — 🎥 LES LIVES (18/10/2026)

   Page « En direct » (vues/lives.php, mode studio de la maquette A),
   mini-bandeau de la zone centrale (lv_mini_bandeau(), noyau/lives.php) et
   pastille rouge pulsante de l'en-tête (noyau/entete.php). Feuille à part,
   comme salon.css : rien ici ne sert ailleurs. Comportement : assets/lives.js.
   ========================================================================== */

:root{--lv-rouge:#e0303a}

@keyframes lv-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lv-point,.lv-badge::before,.nav-pastille--live{animation:none!important}}

/* ---- Pastille des lives en cours (en-tête, menu ⋮) ---------------------- */
.nav-pastille--live{background:var(--lv-rouge);box-shadow:0 0 0 2px rgba(224,48,58,.35);animation:lv-pulse 1.4s ease-in-out infinite}
.mt-badge--live{background:var(--lv-rouge);color:#fff;animation:lv-pulse 1.4s ease-in-out infinite}
/* Toujours posées, cachées à 0 ; tenues à jour par lives.js à chaque page */
[data-lv-pastille][hidden]{display:none!important}

/* ---- Mini-bandeau « X est en direct · Regarder » ----------------------- */
.lv-mini{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 10px;border-radius:10px;
  background:var(--fond-3);border:1px solid rgba(224,48,58,.5);font-size:.85rem;color:var(--txt)}
.lv-point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lv-rouge);animation:lv-pulse 1.2s infinite}
.lv-mini-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-mini-lien{flex:none;font-weight:800;color:var(--or-txt);text-decoration:none}
.lv-mini-lien:hover{text-decoration:underline}
.lv-mini-fermer{flex:none;width:26px;height:26px;padding:0;margin:0;border:0;border-radius:50%;background:none;color:var(--txt-2);cursor:pointer;font-size:.8rem}
.lv-mini-fermer:hover{background:var(--fond-2)}

/* ---- Page ------------------------------------------------------------- */
.lv-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.lv-tete .bloc-titre{margin:0;min-width:0}
.lv-titre-lien{display:block;text-decoration:none}
.lv-titre-lien::after{content:" · voir tous";font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:0;text-transform:none;color:var(--txt-2)}
/* « 🔴 Lancer mon live » sur la même ligne que le titre, à droite :
   annule le button.bouton{width:100%} général (kalipay.css). */
.lv-tete .lv-go{flex:none;width:auto;margin:0;padding:8px 14px;font-size:.85rem;white-space:nowrap}
.lv-go{background:var(--lv-rouge);border-color:var(--lv-rouge);color:#fff;font-weight:800;border-radius:22px}
.lv-go:hover{filter:brightness(1.08)}
.lv-lancer{margin:0 0 14px;padding:14px;border:1px dashed var(--trait);border-radius:14px;background:var(--fond-3)}
.lv-lancer h3{margin:0 0 10px;font-size:1rem}
.lv-champ{display:block;margin:0 0 10px;font-weight:700;font-size:.88rem}
.lv-champ input{display:block;width:100%;margin-top:4px;box-sizing:border-box}
.lv-info{margin:8px 0;font-size:.84rem;color:var(--txt-1)}
.lv-case{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:700}
.lv-err{min-height:1px;margin:4px 0;color:var(--lv-rouge);font-size:.82rem}

/* Bandeau des lives en cours */
.lv-bandeau{margin:0 0 14px}
.lv-vignettes{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.lv-vig{position:relative;flex:0 0 170px;height:110px;border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#2a0f3a,#8a2a6a);border:2px solid transparent}
.lv-vig--on{border-color:var(--or)}
.lv-vig-em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.6rem;opacity:.8}
.lv-badge{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:12px;
  background:rgba(0,0,0,.6);font-size:.68rem;font-weight:800}
.lv-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lv-rouge);animation:lv-pulse 1.2s infinite}
.lv-vig-nb{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:12px;background:rgba(0,0,0,.6);font-size:.68rem;font-weight:800;white-space:nowrap}
.lv-vig-nb--plein{background:var(--lv-rouge)}
.lv-vig-bas{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-vig-bas b{display:block;font-size:.82rem}

/* ---- Le studio : vidéo au centre, chat à droite ----------------------- */
.lv-studio{display:flex;height:560px;border:1px solid var(--trait);border-radius:14px;overflow:hidden;background:#000}
.lv-scene{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:#000;color:#fff}
.lv-ecran{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.lv-ecran-txt{font-size:1.1rem;color:rgba(255,255,255,.55)}
.lv-hd{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;align-items:center;gap:8px}
.lv-pil{padding:3px 10px;border:1px solid rgba(255,255,255,.6);border-radius:16px;background:rgba(0,0,0,.35);font-size:.75rem;font-weight:700}
.lv-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:.95rem;text-decoration:none;cursor:pointer}
.lv-ico:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.lv-pied{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.lv-nom{font-weight:800;font-size:1.05rem;text-shadow:0 1px 3px #000;min-width:0}
.lv-nom small{display:block;font-weight:600;font-size:.8rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-outils{display:flex;gap:6px;flex:none}
.lv-barre-diff{position:absolute;top:56px;left:10px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--or);border-radius:12px;background:rgba(0,0,0,.6);font-size:.8rem}
.lv-barre-diff b{color:var(--or)}
.lv-couper{padding:4px 10px;margin:0;border:0;border-radius:8px;background:var(--lv-rouge);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.lv-fin{position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%,-50%);padding:16px 20px;border:1px solid var(--or);border-radius:14px;
  background:rgba(0,0,0,.85);font-size:.95rem;text-align:center}
.lv-fin[hidden]{display:none}

.lv-chat{width:340px;flex:none;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--trait);background:var(--fond-3);transition:width .25s}
.lv-studio--replie .lv-chat{width:0;border:0;overflow:hidden}
.lv-chat-tt{padding:10px 14px;font-weight:800;border-bottom:1px solid var(--trait)}
.lv-msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:9px;font-size:.88rem}
.lv-regles{padding:9px 10px;border:1px solid var(--trait);border-radius:10px;background:var(--carte);font-size:.8rem;color:var(--txt-1)}
.lv-regles b{color:var(--txt)}
/* Dans le chat : repliées en une ligne, un clic les ouvre */
.lv-regles--chat{flex:none}
.lv-regles--chat summary{cursor:pointer;list-style:none}
.lv-regles--chat summary::-webkit-details-marker{display:none}
.lv-regles--chat summary::after{content:" ▸";color:var(--txt-2)}
.lv-regles--chat[open] summary::after{content:" ▾"}
.lv-regles--chat:not([open]){padding:5px 10px}
.lv-m{display:flex;gap:8px}
.lv-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--or);color:var(--sur-or);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
/* Photo de profil, sinon picto de catégorie sur sa teinte (18/10/2026) —
   mêmes couleurs que les pastilles de catégorie de l'annuaire. */
.lv-av--photo{overflow:hidden;background:var(--fond-2)}
.lv-av--photo img{width:100%;height:100%;object-fit:cover;display:block}
.lv-av--couple{background:var(--violet-voile);box-shadow:inset 0 0 0 1.5px var(--violet);color:var(--txt)}
.lv-av--femme{background:var(--rose-voile);box-shadow:inset 0 0 0 1.5px var(--rose);color:var(--txt)}
.lv-av--homme{background:var(--violet-voile);box-shadow:inset 0 0 0 1.5px var(--bleu);color:var(--txt)}
.lv-av--trans{background:var(--jaune-voile);box-shadow:inset 0 0 0 1.5px var(--orange-ambre);color:var(--txt)}
.lv-av--photo.lv-av--couple,.lv-av--photo.lv-av--femme,.lv-av--photo.lv-av--homme,.lv-av--photo.lv-av--trans{background:var(--fond-2)}
.lv-x{position:relative;flex:1;min-width:0;overflow-wrap:anywhere}
.lv-x b{font-size:.82rem}
.lv-x small{margin-left:4px;color:var(--txt-2);font-size:.7rem}
.lv-t{display:block}
/* Actions sur un message (🚩 signaler, Exclure) : au survol ; toujours visibles au doigt */
.lv-actions{position:absolute;top:0;right:0;display:none;gap:4px}
.lv-m:hover .lv-actions,.lv-actions:focus-within{display:flex}
.lv-act{padding:1px 6px;margin:0;border:1px solid var(--trait);border-radius:8px;background:var(--fond-3);color:var(--txt);
  font:inherit;font-size:.7rem;cursor:pointer}
.lv-exclure{border-color:var(--lv-rouge);color:var(--lv-rouge)}
@media (hover:none){.lv-actions{display:flex;position:static;margin-top:2px}}

/* Panneaux 🚩 signaler / ⛔ couper, posés sur la vidéo */
.lv-panneau{position:absolute;left:10px;right:10px;bottom:60px;z-index:5;display:flex;flex-direction:column;gap:8px;
  max-height:calc(100% - 70px);overflow:auto;padding:12px;margin:0;border:1px solid var(--or);border-radius:12px;
  background:var(--fond-3);color:var(--txt);font-size:.85rem}
.lv-panneau[hidden]{display:none}
.lv-panneau select,.lv-panneau textarea{width:100%;box-sizing:border-box;margin:0}
.lv-panneau .lv-info{margin:0}
.lv-panneau-btns{display:flex;justify-content:flex-end;gap:8px}
.lv-panneau-btns .bouton{margin:0}
.lv-err.lv-ok{color:#3ccf6e}
.lv-ico--equipe{background:rgba(224,48,58,.75)}
.lv-sys{text-align:center;font-size:.78rem;color:var(--or-txt)}
.lv-saisie{display:flex;gap:8px;padding:10px;margin:0;border-top:1px solid var(--trait)}
.lv-saisie[hidden]{display:none}
.lv-saisie input,.lv-saisie textarea{flex:1;min-width:0;margin:0;border-radius:22px;padding:9px 14px}
.lv-saisie textarea{height:40px;min-height:40px;max-height:40px;box-sizing:border-box;resize:none;overflow:hidden;line-height:1.35;font:inherit;white-space:nowrap}
.lv-saisie button{flex:none;width:38px;height:38px;padding:0;margin:0;border:0;border-radius:50%;background:var(--or);color:var(--sur-or);font-weight:900;cursor:pointer}
.lv-saisie .lv-emoji{background:none;color:inherit;font-size:1.2rem;font-weight:400}
.lv-saisie .lv-emoji:hover{background:var(--fond-2)}
.lv-chat .lv-err{padding:0 14px}
.lv-pil[hidden]{display:none}
.lv-quitter{flex:none;margin-left:auto;padding:5px 12px;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:rgba(0,0,0,.55);
  color:#fff;font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap}
.lv-quitter:hover,.lv-quitter:focus-visible{background:var(--lv-rouge);border-color:var(--lv-rouge);color:#fff}
.lv-hd .lv-ico,.lv-pil{flex:none;white-space:nowrap}
.lv-pil--spect{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---- Vidéo (phase 2) --------------------------------------------------- */
.lv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lv-video[hidden]{display:none}
.lv-video--miroir{transform:scaleX(-1)}   /* ma propre image, comme dans un miroir */
.lv-ecran-txt{position:relative;z-index:1;max-width:80%;text-align:center}
.lv-ecran-txt[hidden]{display:none}
.lv-ecran [data-lv-cam-activer]{position:absolute;z-index:2;top:58%}
.lv-ecran [data-lv-cam-activer][hidden]{display:none}
.lv-son-gros{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 16px;margin:0;
  border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(0,0,0,.65);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.lv-son-gros[hidden]{display:none}
.lv-ico--off{background:var(--lv-rouge)}
.lv-ico[hidden]{display:none}
.lv-stats{display:block;margin-top:2px;font-size:.75rem;font-weight:700;opacity:.9}

/* ❤️ qui s'envolent, côté droit de l'image */
.lv-vols{position:absolute;right:0;bottom:56px;width:90px;height:70%;z-index:3;pointer-events:none;overflow:hidden}
.lv-vol{position:absolute;bottom:0;font-size:1.5rem;opacity:0;animation:lv-vol 2.4s ease-out forwards}
@keyframes lv-vol{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.lv-vol{animation-duration:.01s}}

/* Aperçu avant de démarrer */
.lv-apercu{margin:8px 0}
.lv-apercu-zone{position:relative;margin-top:8px;max-width:320px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#000}
.lv-apercu-zone[hidden]{display:none}
.lv-vu{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;font-size:.8rem}
.lv-vu i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.lv-vu b{display:block;width:0;height:100%;background:#3ccf6e;transition:width .08s}

/* ---- ✊ Toc-toc (18/10/2026) -------------------------------------------- */
.lv-entree{margin:8px 0;padding:8px 10px;border:1px solid var(--trait);border-radius:10px}
.lv-entree legend{padding:0 4px;font-weight:800;font-size:.88rem}
.lv-entree label{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.86rem}
.lv-vig-toc{position:absolute;top:34px;left:8px;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.6);font-size:.66rem;font-weight:800}

/* Derrière la porte : ni chat, ni outils, juste la porte */
.lv-studio--porte .lv-chat,
.lv-studio--porte .lv-pil--spect,
.lv-studio--porte [data-lv-coeur],
.lv-studio--porte .lv-outils [data-lv-son],
.lv-studio--porte [data-lv-replier]{display:none}
.lv-porte{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;text-align:center;background:radial-gradient(circle at 50% 40%,#3a1748,#000 75%)}
.lv-porte[hidden]{display:none}
.lv-porte-em{font-size:3rem;line-height:1}
.lv-porte p{margin:0;max-width:340px;color:rgba(255,255,255,.8);font-size:.9rem}
.lv-porte .bouton{margin:4px 0 0}
.lv-porte .bouton[hidden]{display:none}

/* Diffuseur : les demandes en attente, en haut à droite de l'image */
.lv-tocs{position:absolute;top:56px;right:10px;z-index:4;display:flex;flex-direction:column;gap:6px;max-width:320px}
.lv-tocs:empty{display:none}
.lv-toc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--or);border-radius:12px;
  background:rgba(0,0,0,.85);font-size:.82rem;animation:lv-toc-arrive .35s ease-out}
.lv-toc-txt{flex:1 1 100%}
.lv-toc button{padding:4px 10px;margin:0;border:0;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}
.lv-toc-ok{background:#3ccf6e;color:#06210f}
.lv-toc-ok:disabled{background:#666;color:#ddd;cursor:not-allowed}
.lv-toc-non{background:rgba(255,255,255,.15);color:#fff}
@keyframes lv-toc-arrive{0%{transform:translateX(12px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lv-toc{animation:none}}
.lv-entree-btn{padding:4px 10px;margin:0;border:1px solid rgba(255,255,255,.5);border-radius:8px;background:rgba(255,255,255,.1);
  color:#fff;font:inherit;font-weight:700;cursor:pointer}

/* Plein écran mobile : la page derrière ne défile plus. */
html.lv-plein-ouvert,html.lv-plein-ouvert body{overflow:hidden}

/* Le bouton ⇈ « remonter en haut » (noyau/layout.php) n'a rien à faire sur
   la page des lives : masqué ici, la route est tenue à jour sur
   #zone-centrale par la navigation fluide (kalipay.js). */
body:has(#zone-centrale[data-route="lives"]) #fil-scroll-haut{display:none!important}

/* ---- Mobile : chat SOUS la vidéo, ◫ le masque ------------------------- */
@media (max-width:760px){
  .lv-studio{flex-direction:column;height:auto}
  .lv-scene{flex:none;height:300px}
  .lv-chat{width:100%!important;height:340px;border-left:0;border-top:1px solid var(--trait)}
  .lv-studio--replie .lv-chat{height:0;border:0}
  .lv-vig{flex-basis:140px;height:96px}
  /* Un live ouvert : pas les autres vignettes, place au lecteur ; le titre
     « 🎥 En direct » (lien) ramène à la liste. */
  .lv-bandeau--live-ouvert{display:none}

  /* Plein écran façon Twitch (18/10/2026, posé par lives.js sur un live en
     cours) : vidéo 16:9 en haut, chat qui prend le reste, saisie en bas.
     top/height suivent la partie visible de l'écran (clavier compris). */
  .lv-studio--plein{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;z-index:9000;
    flex-direction:column;border:0;border-radius:0}
  .lv-studio--plein .lv-scene{flex:none;height:auto;aspect-ratio:4/3;max-height:50%}
  /* Le bandeau du diffuseur (en direct · toc-toc · arrêter) sort de l'image :
     barre à part tout en haut (déplacé par lives.js), l'image reste dégagée. */
  .lv-studio--plein > .lv-barre-diff{position:static;flex:none;justify-content:space-between;gap:8px;
    padding:6px 10px;border:0;border-bottom:1px solid var(--trait);border-radius:0;background:#000}
  .lv-studio--plein.lv-studio--porte .lv-scene{flex:1;aspect-ratio:auto;max-height:none}
  .lv-studio--plein .lv-chat{flex:1;height:auto;min-height:0;border-top:1px solid var(--trait)}
  .lv-studio--plein .lv-chat-tt,
  .lv-studio--plein [data-lv-replier]{display:none}
  .lv-studio--plein .lv-saisie{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* Panneaux 🚩 / ⛔ : la vidéo est trop basse pour les contenir, ils
     couvrent le haut de l'écran. */
  .lv-studio--plein .lv-panneau{position:fixed;left:10px;right:10px;top:10px;bottom:auto;max-height:70vh;z-index:9001}
  /* Le bandeau du diffuseur descend au-dessus du nom. */
  .lv-barre-diff{top:auto;bottom:62px}
  .lv-tocs{top:46px;left:10px;max-width:none}
  .lv-saisie input,.lv-saisie textarea{font-size:16px}   /* évite le zoom automatique d'iOS */
}

/* ---- 🖼️ Fond et 🎨 réglages de la caméra (24/10/2026) -------------------
   Bouton dans l'aperçu (coin de la vidéo) et dans les outils du diffuseur ;
   panneau rempli par assets/lives-fond.js : en-tête (titre + ✕), deux
   onglets, la grille des fonds ou les réglages de l'image. Dans le studio,
   le panneau reprend .lv-panneau (même place que 🚩 et ⛔) ; sous
   l'aperçu, c'est un simple bloc. */
.lv-fond-btn{position:absolute;top:8px;right:8px;z-index:2}
.lv-fond-btn[hidden],.lv-ico[data-lv-fond][hidden]{display:none}
.lv-fonds{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:420px}
.lv-panneau.lv-fonds{display:flex;max-width:none;margin:0}
.lv-fonds[hidden],.lv-panneau.lv-fonds[hidden]{display:none}
.lv-fonds-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lv-fonds-fermer{flex:none;width:30px;height:30px;padding:0;margin:0;border:0;border-radius:50%;
  background:var(--fond-2);color:var(--txt);font-size:.95rem;line-height:1;cursor:pointer}
.lv-fonds-fermer:hover{background:var(--trait)}
.lv-fonds-fermer:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.lv-fonds-note{margin:0}
.lv-fonds-note:empty{display:none}

/* Onglets « 🖼️ Fond » / « 🎨 Image » */
.lv-onglets{display:flex;gap:6px}
.lv-onglet{flex:1;padding:6px 8px;margin:0;border:1px solid var(--trait);border-radius:8px;
  background:var(--fond-2);color:var(--txt-2);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.lv-onglet[aria-selected="true"]{border-color:var(--accent);color:var(--txt);background:var(--accent-voile)}
.lv-onglet:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* La grille des fonds */
.lv-fonds-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.lv-fonds-grille[hidden],.lv-image[hidden]{display:none}
.lv-fond-tuile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 4px;margin:0;
  border:2px solid transparent;border-radius:10px;background:var(--fond-2);color:var(--txt);
  font:inherit;font-size:.72rem;line-height:1.2;cursor:pointer}
.lv-fond-tuile:hover{border-color:var(--trait-4)}
.lv-fond-tuile[aria-pressed="true"]{border-color:var(--accent)}
.lv-fond-tuile:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.lv-fond-vignette{display:block;width:64px;height:48px;border-radius:6px;background:var(--fond-3) center/cover no-repeat;
  font-size:1.4rem;line-height:48px;text-align:center}
.lv-fonds-changer{grid-column:1 / -1;justify-self:start;align-self:flex-start;padding:4px 10px;margin:0;
  border:1px solid var(--trait);border-radius:8px;background:none;color:var(--txt-2);font:inherit;font-size:.78rem;cursor:pointer}
.lv-fonds-changer[hidden]{display:none}

/* Les réglages de l'image : curseurs, puis effets en un clic */
.lv-image{display:flex;flex-direction:column;gap:10px}
.lv-curseur{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:.8rem}
.lv-curseur input[type=range]{width:100%;margin:0;accent-color:var(--accent)}
.lv-curseur-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt-2)}
.lv-effets{display:flex;flex-wrap:wrap;gap:6px}
.lv-effet{padding:5px 10px;margin:0;border:2px solid transparent;border-radius:999px;background:var(--fond-2);
  color:var(--txt);font:inherit;font-size:.78rem;cursor:pointer}
.lv-effet:hover{border-color:var(--trait-4)}
.lv-effet[aria-pressed="true"]{border-color:var(--accent)}
.lv-effet:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.lv-effet:disabled{opacity:.45;cursor:not-allowed}
/* « Appliquer à » : moi seulement (il faut un fond) ou toute l'image */
.lv-cible{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem}
.lv-cible .lv-curseur-nom{width:110px}
.lv-cible-note{color:var(--txt-2);font-size:.72rem}
.lv-cible-note[hidden]{display:none}
/* 🎭 Accessoires : une ligne par zone (yeux, tête, visage) */
.lv-acc-zone{display:flex;flex-direction:column;gap:5px;font-size:.8rem}
.lv-acc-info{margin:0;font-size:.74rem;color:var(--txt-2)}
.lv-acc[hidden]{display:none}
.lv-acc-etat{margin:0;font-size:.74rem;color:var(--txt-1)}
.lv-acc-etat:empty{display:none}

/* ---- PC : aperçu à gauche, réglages à droite --------------------------
   Sous l'aperçu, le panneau laissait toute la moitié droite vide. Sur PC,
   .lv-apercu devient une grille : le bouton « Tester » et le message sur
   toute la largeur, la vidéo (un peu plus grande) à gauche, le panneau à
   droite. Ordre du HTML inchangé (vues/lives.php). */
@media (min-width:901px){
  .lv-apercu{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);column-gap:18px;align-items:start}
  .lv-apercu > [data-lv-apercu],
  .lv-apercu > [data-lv-apercu-msg]{grid-column:1 / -1}
  .lv-apercu-zone{grid-column:1;max-width:none}
  .lv-apercu > .lv-fonds{grid-column:2;max-width:none;margin-top:8px}
  .lv-apercu > .lv-fonds .lv-fonds-grille{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .lv-apercu > .lv-fonds .lv-fond-vignette{width:76px;height:57px;line-height:57px}
}