/* Le live sur le site, comme sur le téléphone (étape 5 du chantier « site façon TikTok / Spotify », 2026-10-10).

   Chargée seulement sur la page d'un live (la navigation sans rechargement ajoute la feuille quand on y arrive).
   Une fois dans le live, l'écran est celui de l'application côté auditeur : un fond fait de la pochette floutée, la pochette
   en grand dans une aura qui bat au tempo, l'organisateur en haut, les cinq derniers commentaires qui montent en bas à gauche,
   la barre du bas, et des cœurs partout où l'on touche. Sur téléphone il prend tout l'écran ; sur un grand écran, il devient une
   colonne de téléphone, centrée. L'écran est toujours sombre, quel que soit le thème du site.

   Aucun style en ligne : les valeurs qui changent à chaque image (`--elan`, `--cote`, la position d'un cœur) sont des variables
   posées par le script avec l'API de style du navigateur, ce que la politique de sécurité permet. Les animations ne bougent que
   `transform` et `opacity`, et s'arrêtent pour qui demande moins de mouvement. */

.live-web.lw-pret{margin:8px 0 28px}
.lw-accueil{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.lw-erreur{margin:0;color:var(--rouge);font-weight:600;min-height:1.4em}

/* ── L'écran ───────────────────────────────────────────────────────────── */
html.lw-ouvert{overflow:hidden}
.lw-salle{--encre:#edeef0;--pale:#b4b6bf;--bord:rgba(255,255,255,.16);color-scheme:dark;
position:fixed;inset:0;z-index:66;display:flex;justify-content:center;align-items:stretch;background:#000;color:#fff}
.lw-salle[hidden]{display:none}
.lw-telephone{position:relative;width:100%;max-width:460px;height:100%;overflow:hidden;background:#000;isolation:isolate;
display:flex;flex-direction:column}
@media (min-width:640px) and (min-height:640px){
.lw-salle{background:rgba(5,5,8,.94);align-items:center;padding:16px}
.lw-telephone{height:min(100%,920px);border-radius:24px;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 80px rgba(0,0,0,.6)}
}

/* ── Le fond : la pochette floutée et avivée, une lueur qui bat, la marque ─ */
.lw-fond{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#2a0e4a,#0b0b14)}
.lw-fond-img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(40px) saturate(1.35)}
.lw-fond-img[hidden]{display:none}
.lw-fond-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 45%,rgba(0,0,0,.9))}
.lw-lueur{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,61,127,.3),rgba(255,61,127,0) 62%);
opacity:calc(.27 + var(--elan,0) * .73);will-change:opacity}
.lw-marque{position:absolute;top:16%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;letter-spacing:.06em;opacity:calc(.28 + var(--elan,0) * .2);pointer-events:none;will-change:opacity}
.lw-marque img{display:block;width:22px;height:22px}

.lw-pile{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top)}

/* ── L'en-tête : l'organisateur, puis le titre, les présents, les cœurs ─── */
.lw-entete{display:flex;flex-direction:column;gap:2px;flex:none}
.lw-rangee{display:flex;align-items:center;gap:2px;min-height:56px;padding:0 4px}
.lw-icone{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.lw-icone:hover:not(:disabled){background:rgba(255,255,255,.12)}
.lw-icone:disabled{opacity:.4;cursor:default}
.lw-icone[hidden],.lw-son-barre[hidden],.lw-photo [hidden]{display:none}
.lw-icone svg{display:block;width:24px;height:24px;fill:currentColor}
.lw-organisateur{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.lw-photo{position:relative;flex:none;width:46px;height:46px;padding:3px;border-radius:50%;
background:conic-gradient(#ff3d7f,#7c4dff,#18ffff,#ffd54f,#ff3d7f);
box-shadow:0 0 calc(4px + 10px * var(--elan,0)) rgba(255,255,255,calc(.25 + .45 * var(--elan,0)))}
.lw-photo img,.lw-photo span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#2a2c34;
font-weight:800;font-size:18px;color:#fff}
.lw-hote-texte{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.lw-hote-nom{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-hote-abonnes{font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap}
.lw-suivre-hote{flex:none;margin-left:4px;border:0;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;background:var(--accent);color:#1c1d22;cursor:pointer}
.lw-suivre-hote.lw-suivi{background:rgba(255,255,255,.18);color:#fff}
.lw-suivre-hote[hidden]{display:none}
.lw-ligne-titre{display:flex;align-items:center;gap:8px;padding:0 16px}
.lw-live{flex:none;padding:2px 6px;border-radius:4px;background:#e5484d;color:#fff;font-size:11px;font-weight:800}
.lw-titre-live{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-pastille{display:inline-flex;align-items:center;gap:4px;flex:none;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.35);
font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.lw-pastille svg{display:block;width:14px;height:14px;fill:currentColor}
/* L'œil se touche : il ouvre le classement (2026-10-10). Une cible de 48 points, sans changer son allure. */
button.lw-presents{border:0;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer;position:relative}
button.lw-presents::after{content:"";position:absolute;inset:-12px -4px}
button.lw-presents:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lw-total svg{fill:#ff2d55}
.lw-bandeau{margin:6px 16px 0;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:13px}
.lw-bandeau[hidden]{display:none}
.lw-temps{margin:4px 16px 0;font-size:12px;color:rgba(255,255,255,.65)}
.lw-temps[hidden]{display:none}

/* ── Le son : couper, volume, et « Activer le son » si le navigateur l'a refusé ─ */
.lw-son-barre{position:relative;display:flex;align-items:center;flex:none}
.lw-volume{display:none;position:absolute;top:100%;right:0;z-index:4;width:132px;height:36px;padding:0 10px;border-radius:12px;
background:rgba(0,0,0,.75);accent-color:var(--accent);cursor:pointer}
@media (hover:hover) and (pointer:fine){.lw-son-barre:hover .lw-volume,.lw-son-barre:focus-within .lw-volume{display:block}}
.lw-son-activer{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;border:0;border-radius:999px;padding:10px 18px;
font-weight:700;background:var(--accent);color:#1c1d22;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.lw-son-activer[hidden]{display:none}

/* ── Le milieu : la scène qui se tapote, le fil qui monte, le vote en pastille ─ */
.lw-milieu{position:relative;flex:1;min-height:0}
.lw-zone{position:absolute;inset:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent}
.lw-zone:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.lw-en-cours{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 0 40px;text-align:center;pointer-events:none}
.lw-en-cours[hidden]{display:none}
.lw-aura{position:relative;flex:none;width:var(--cote,240px);height:var(--cote,240px)}
.lw-aura[hidden]{display:none}
.lw-aura canvas{position:absolute;left:-45%;top:-45%;width:190%;height:190%;pointer-events:none}
.lw-pochette{position:relative;display:block;width:100%;height:100%;border-radius:16px;object-fit:cover;background:#25262c;
box-shadow:0 12px 30px rgba(0,0,0,.6);transform:scale(calc(1 + .03 * var(--elan,0)));will-change:transform}
/* Sans aucune image : une case colorée et l'initiale du titre, à la place de la pochette (elle bat comme elle). */
.lw-pochette-vide{position:absolute;inset:0;display:grid;place-items:center;border-radius:16px;color:#fff;font-weight:800;
font-size:calc(var(--cote,240px) * .42);background:linear-gradient(135deg,#7c4dff,#ff3d7f);box-shadow:0 12px 30px rgba(0,0,0,.6);
transform:scale(calc(1 + .03 * var(--elan,0)));will-change:transform;user-select:none}
.lw-pochette-vide[hidden]{display:none}
.lw-titre{margin:16px 24px 0;max-width:calc(100% - 48px);font-size:20px;font-weight:800;line-height:1.2;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lw-artiste{max-width:calc(100% - 48px);color:rgba(255,255,255,.72);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-attente{color:rgba(255,255,255,.72);font-size:17px}
.lw-fete .lw-pochette{animation:lw-fete 1s ease 2}
@keyframes lw-fete{50%{transform:scale(1.06)}}

.lw-bulles{position:absolute;left:12px;right:88px;bottom:8px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;cursor:pointer}
.lw-bulles[hidden]{display:none}
/* Pas de fond noir derrière les commentaires : le texte se lit sur l'image grâce à une ombre portée. Les bulles colorées
   (dédicace, antenne, vote, mention) gardent leur couleur, qui a un sens. */
.lw-bulle{display:flex;align-items:flex-start;gap:6px;max-width:100%;padding:3px 4px;border-radius:16px;background:none;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55);
font-size:13px;line-height:1.25;overflow-wrap:anywhere;animation:lw-entree .38s cubic-bezier(.2,.8,.3,1) backwards;transition:opacity .5s ease}
.lw-bulle svg{flex:none;width:16px;height:16px;margin-top:1px;fill:currentColor}
/* En fondu : la plus récente est pleine, les autres s'estompent à mesure qu'elles montent (le changement de rang est adouci). */
.lw-bulle:nth-last-child(2){opacity:.88}
.lw-bulle:nth-last-child(3){opacity:.7}
.lw-bulle:nth-last-child(4){opacity:.5}
.lw-bulle:nth-last-child(n+5){opacity:.28}
.lw-bulle.lw-sortante{opacity:0;transform:translateY(-.6em);transition:opacity .35s ease-in,transform .35s ease-in}
@keyframes lw-entree{from{opacity:0;transform:translateY(18px)}}
@keyframes lw-entree-ligne{from{opacity:0;transform:translateY(8px)}}
.lw-auteur{font-weight:700;color:#7fd4ff}
.lw-g-dedicace,.lw-g-antenne,.lw-g-vote,.lw-g-mention{padding:6px 10px;text-shadow:none}
.lw-g-dedicace{background:rgba(74,42,122,.8)}.lw-g-dedicace .lw-auteur{color:#ffd54f}
.lw-g-antenne{background:rgba(198,40,40,.9)}.lw-g-antenne .lw-auteur{color:#fff}
.lw-g-vote{background:rgba(13,71,161,.8)}.lw-g-vote .lw-auteur{color:#fff}
.lw-g-annonce{font-weight:700}.lw-g-annonce .lw-auteur{color:#fff}
.lw-g-arrivee .lw-auteur{color:rgba(255,255,255,.78)}
.lw-g-coeurs .lw-auteur{color:#ff6b9a}
.lw-g-coeurs svg{fill:#ff2d55}
.lw-etat-son{margin:6px 0 0;color:rgba(255,255,255,.78);font-size:14px}
.lw-etat-son::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid rgba(255,255,255,.35);
border-top-color:#fff;border-radius:50%;animation:lw-tourne 0.9s linear infinite}
.lw-etat-son[hidden]{display:none}
@keyframes lw-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lw-etat-son::before{animation:none}}
.lw-rang{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.lw-rang-numero{flex:none;width:28px;text-align:center;font-weight:800;color:var(--pale)}
.lw-podium-1 .lw-rang-numero{color:#ffc107}.lw-podium-2 .lw-rang-numero{color:#b0bec5}.lw-podium-3 .lw-rang-numero{color:#cd7f32}
.lw-rang-nom{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lw-rang-compte{flex:none;color:var(--pale);font-variant-numeric:tabular-nums;white-space:pre}
.lw-g-mention{background:rgba(178,106,0,.9)}.lw-g-mention .lw-auteur{color:#fff}
.lw-mention{color:#ffd54f;font-weight:700}
.lw-reponse-a{color:rgba(255,255,255,.62);font-style:italic}
.lw-joint{color:#ffd54f;font-weight:700}

.lw-pastille-vote{position:absolute;right:12px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;
border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(13,71,161,.8);color:#fff;font-weight:700;cursor:pointer}
.lw-pastille-vote svg{display:block;width:18px;height:18px;fill:currentColor}
.lw-pastille-vote[hidden]{display:none}

/* Les commentaires en grand : la scène s'efface, le fond reste ; toucher un commentaire, c'est lui répondre. */
.lw-comms{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 12px 8px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.lw-comms[hidden]{display:none}
.lw-fil{max-height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;overscroll-behavior:contain}
.lw-vide{align-self:center;margin:auto;padding:24px;text-align:center;color:rgba(255,255,255,.7)}
.lw-ligne{max-width:340px;padding:4px 6px;border-radius:16px;background:none;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55);font-size:14px;line-height:1.3;overflow-wrap:anywhere;
animation:lw-entree-ligne .3s ease-out backwards}
.lw-message{cursor:pointer}
.lw-message:hover{background:rgba(255,255,255,.1)}
.lw-nom{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#7fd4ff;cursor:pointer}
.lw-mien .lw-nom{color:#fff}
.lw-en-reponse,.lw-titre-joint{display:block;font-size:12px;color:rgba(255,255,255,.62)}
.lw-systeme{background:none;color:rgba(255,255,255,.8);font-size:13px;cursor:default}

/* Les cœurs : montent en ondulant, grossissent, s'évaporent. Ceux des autres partent du bas à droite. */
.lw-ciel{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.lw-coeur{position:absolute;left:0;top:0;width:var(--t,28px);height:var(--t,28px);margin:calc(var(--t,28px) / -2) 0 0 calc(var(--t,28px) / -2);
color:var(--c,#ff2d55);animation:lw-monte var(--d,2.4s) cubic-bezier(.2,.6,.4,1) both;will-change:transform,opacity}
.lw-coeur svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
@keyframes lw-monte{
0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}
10%{opacity:1;transform:translate(var(--x),var(--y)) scale(1.1)}
35%{transform:translate(calc(var(--x) + var(--o1)),calc(var(--y) - var(--m) * .35)) scale(1)}
70%{opacity:.85;transform:translate(calc(var(--x) - var(--o1)),calc(var(--y) - var(--m) * .7)) scale(1.15)}
100%{opacity:0;transform:translate(calc(var(--x) + var(--o2)),calc(var(--y) - var(--m))) scale(1.3)}}

.lw-flash{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none}
.lw-flash.lw-eclair{animation:lw-eclair .2s ease-out}
@keyframes lw-eclair{from{opacity:.55}to{opacity:0}}

/* ── La barre du bas : commenter (♪ y joint un morceau), ce qui vient ───── */
.lw-barre{flex:none;display:flex;flex-direction:column;gap:6px;padding:6px 8px calc(8px + env(safe-area-inset-bottom)) 16px}
.lw-puces{display:flex;flex-wrap:wrap;gap:6px}
.lw-puces:empty{display:none}
.lw-reponse,.lw-propose{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 3px 3px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-size:13px}
.lw-reponse span,.lw-propose span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-reponse[hidden],.lw-propose[hidden]{display:none}
.lw-annuler{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.lw-annuler svg{display:block;width:16px;height:16px;fill:currentColor}
.lw-saisie{display:flex;align-items:center;gap:2px}
.lw-champ{position:relative;flex:1;min-width:0}
.lw-telephone .lw-champ input{width:100%;min-height:48px;padding:0 48px 0 16px;border:0;border-radius:24px;background:rgba(255,255,255,.2);color:#fff;font-size:16px}
.lw-telephone .lw-champ input::placeholder{color:rgba(255,255,255,.6)}
.lw-telephone .lw-champ input:focus{outline:2px solid var(--accent);box-shadow:none}
.lw-telephone .lw-champ input:disabled{opacity:.6}
.lw-champ .lw-icone{position:absolute;right:0;top:2px;color:rgba(255,255,255,.75)}
.lw-cta{width:100%;min-height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-weight:700;cursor:pointer}
.lw-silence{margin:6px 0;color:rgba(255,255,255,.7);font-size:14px}
/* Au-dessus du champ : ce que le live a en plus de la radio (♪ proposer un morceau, ce qui vient). */
.lw-outils{display:flex;flex-wrap:wrap;gap:6px}
.lw-outil{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;cursor:pointer}
.lw-outil svg{display:block;width:18px;height:18px;fill:currentColor}
.lw-outil[hidden]{display:none}
/* Le micro, le cadeau et le cœur suivent le champ ; sans champ (pas d'abonnement), ils restent à droite. */
.lw-saisie.lw-sans-champ{justify-content:flex-end}
.lw-coeur-bouton{color:#ff2d55}

/* ── Les feuilles : le vote, ce qui vient, la recherche d'un morceau ────── */
.lw-feuille{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end}
.lw-feuille-fond{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.lw-feuille-boite{position:relative;display:flex;flex-direction:column;max-height:85%;min-height:40%;padding:8px 16px calc(16px + env(safe-area-inset-bottom));
border-radius:20px 20px 0 0;background:#1c1d22;color:var(--encre);animation:lw-feuille .25s ease-out}
@keyframes lw-feuille{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.lw-poignee{flex:none;width:36px;height:4px;margin:4px auto 10px;border-radius:2px;background:rgba(255,255,255,.3)}
.lw-feuille-titre{flex:none;margin:0 0 8px;font-size:17px;font-weight:700}
/* Les cadeaux, comme TikTok (2026-10-20) : une feuille basse, juste à la taille de ses deux rangées, et le live bien visible au-dessus. */
.lw-feuille--cadeaux .lw-feuille-fond{background:rgba(0,0,0,.12)}
.lw-feuille--cadeaux .lw-feuille-boite{min-height:0}
.lw-feuille-tete{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 8px}
.lw-feuille-tete .lw-feuille-titre{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-feuille-tete .rw-quantites{flex:none;gap:6px;margin:0}
.lw-feuille-tete .rw-quantite{padding:6px 10px}
.lw-feuille-contenu{display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain}
.lw-pied-feuille{flex:none;margin:0 0 10px}
/* La fiche d'une personne (`fil.js`, 2026-10-28) : par-dessus le live ou la radio, qui continuent dessous. */
.lw-feuille-personne .lw-feuille-fond{background:rgba(0,0,0,.3)}
.lw-feuille-personne .lw-feuille-boite{min-height:0}
.lw-personne{display:flex;flex-direction:column;gap:12px;padding:4px 0 4px}
.lw-personne-tete{display:flex;align-items:center;gap:14px;min-width:0}
.lw-personne-photo{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;overflow:hidden;
background:rgba(255,255,255,.14);font-size:28px;font-weight:700;color:#fff}
.lw-personne-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lw-personne-noms{display:flex;flex-direction:column;gap:2px;min-width:0}
.lw-personne-nom{font-size:19px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-personne-artiste{font-size:13px;color:var(--accent)}
.lw-personne-bio{margin:0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.86);overflow-wrap:anywhere}
.lw-personne-compteurs{margin:0;font-size:14px;color:rgba(255,255,255,.72)}
.lw-personne-attente{margin:0;font-size:14px;color:rgba(255,255,255,.72)}
.lw-personne-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lw-personne-actions>*{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.3);
border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}
.lw-personne-actions>.lw-personne-suivre{border-color:var(--accent);background:var(--accent);color:#1c1d22}
.lw-personne-actions>.lw-personne-suivre.lw-personne-suivi{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.lw-personne-actions>:hover{background:rgba(255,255,255,.1)}
.lw-personne-actions>.lw-personne-suivre:not(.lw-personne-suivi):hover{background:var(--accent)}
.lw-personne-actions>:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lw-dans-la-file .lw-auteur,.lw-nom,.lw-vers-la-fiche{cursor:pointer}
.rw-feuille-personne .lw-personne{padding-top:8px}
.lw-bouton{min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:#fff;font-weight:700;cursor:pointer}
.lw-bouton:hover{background:rgba(255,255,255,.1)}
.lw-morceau-ligne{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:6px 0;border:0;background:none;color:inherit;text-align:left}
button.lw-morceau-ligne{cursor:pointer}
button.lw-morceau-ligne:hover{background:rgba(255,255,255,.06)}
.lw-morceau-ligne.lw-passe{opacity:.5}
.lw-miniature{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover;background:#2a2c34}
.lw-morceau-textes{flex:1;min-width:0;display:flex;flex-direction:column}
.lw-morceau-textes strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-morceau-textes small{color:var(--pale);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-etiquette{flex:none;font-size:12px;font-weight:700;color:var(--pale)}
.lw-etiquette.lw-maintenant{color:#e5484d}
.lw-etiquette.lw-ensuite{color:var(--accent)}
.lw-recherche{width:100%;min-height:48px;margin-bottom:8px;padding:0 16px;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(255,255,255,.08);color:#fff;font-size:16px}
.lw-etat-recherche{padding:18px 0;text-align:center;color:var(--pale)}

.lw-option{position:relative;display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;min-height:52px;padding:10px 12px;
border:1px solid rgba(255,255,255,.2);border-radius:10px;background:transparent;color:inherit;cursor:pointer;overflow:hidden;text-align:left}
.lw-option:disabled{cursor:default;opacity:.7}
.lw-option .lw-barre-vote{position:absolute;top:0;bottom:0;left:0;width:var(--part,0%);background:rgba(245,165,36,.22);transition:width .4s ease}
.lw-option .lw-libelle,.lw-option .lw-compte{position:relative}
.lw-option .lw-compte{color:var(--pale);font-variant-numeric:tabular-nums}
.lw-option.lw-choisie{border-color:var(--accent)}
.lw-merci{color:var(--pale);font-size:13px}

/* Moins d'animation pour qui le demande ; moins d'effets sur un matériel faible (détecté par theme.js). */
@media (prefers-reduced-motion:reduce){
.lw-coeur{display:none}
.lw-bulle,.lw-ligne,.lw-feuille-boite,.lw-fete .lw-pochette{animation:none}
.lw-bulle,.lw-bulle.lw-sortante{transition:none}
.lw-flash{display:none}
}
:root[data-materiel=leger] .lw-fond-img{filter:none;opacity:.5}
:root[data-materiel=leger] .lw-coeur svg{filter:none}
/* Les cœurs sont le spectacle : la règle du matériel faible, qui réduit les animations, ne les éteint pas. */
:root[data-materiel=leger] .lw-coeur{animation-duration:var(--d,2.4s)!important}

/* Le fil du direct (`fil.js`, 2026-10-17) : la file des commentaires qui se parcourt sans entrer dans l'écriture, la ligne éphémère en
   fondu pour ce qui n'est pas un commentaire, la mention qui reste. */
.lw-bulles{cursor:default;pointer-events:none}
/* Six commentaires d'une ligne, pas un de plus (l'utilisateur, 2026-10-20 : « le septième disparaît ») : une bulle fait 13 px × 1,25
   et 3 px de marge en haut et en bas, plus 6 px d'écart entre deux. La file est juste assez haute pour six, moins un trait de
   l'écart du dessus : le septième est dehors, entièrement. Le fondu adoucit seulement le bord. */
.lw-bulles .lw-file{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:calc(var(--lw-lignes,6)*28.25px - 3px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;align-items:flex-start;gap:6px;scrollbar-width:none;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6px);mask-image:linear-gradient(to bottom,transparent 0,#000 6px)}
.lw-bulles .lw-file::-webkit-scrollbar{display:none}
/* Dans la file, tout se lit : pas de fondu selon le rang (il servait aux bulles qui montaient). L'appui long ouvre les actions d'un
   commentaire : ni sélection du texte, ni menu du téléphone. */
.lw-bulles .lw-file .lw-bulle{flex:none;opacity:1;cursor:pointer;animation:none;transition:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lw-bulles .lw-file .lw-bulle.lw-neuve{animation:lw-entree-ligne .3s ease-out backwards}
.lw-bulles .lw-file .lw-bulle .lw-mention-vocal,.lw-bulles .lw-file .lw-bulle button{cursor:pointer}
.lw-bulles .lw-ephemere{pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.lw-bulles .lw-ephemere:empty{display:none}
.lw-bulles .lw-ephemere .lw-bulle{opacity:1;transform:none;animation:lw-fondu-entrant .3s ease-out backwards;transition:opacity .35s ease-in}
.lw-bulles .lw-ephemere .lw-bulle.lw-sortante{opacity:0;transform:none}
@keyframes lw-fondu-entrant{from{opacity:0}}
.lw-nouveaux{pointer-events:auto;align-self:flex-start;min-height:36px;padding:0 14px;border:0;border-radius:18px;background:rgba(255,255,255,.92);color:#14161c;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.lw-nouveaux[hidden]{display:none}
/* Un commentaire qui vous vise (« @vous » ou une réponse à l'un des vôtres), dans la file comme dans les commentaires en grand. */
.lw-pour-moi{background:rgba(138,82,0,.78);box-shadow:inset 0 0 0 1px rgba(255,213,79,.85);text-shadow:none}
.lw-bulle.lw-pour-moi{padding:6px 10px}
.lw-ligne.lw-pour-moi{border-radius:12px;padding-left:8px;padding-right:8px}
.lw-pulse{animation:lw-pulse 1.4s ease-out 1}
@keyframes lw-pulse{0%{box-shadow:0 0 0 0 rgba(255,213,79,.9)}100%{box-shadow:0 0 0 14px rgba(255,213,79,0)}}
.lw-mention-pastille{position:absolute;top:8px;left:12px;right:12px;z-index:4;display:flex;align-items:center;gap:2px;border-radius:26px;background:#8a5200;box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,213,79,.8);color:#fff;animation:lw-fondu-entrant .3s ease-out}
.lw-mention-pastille[hidden]{display:none}
.lw-mention-aller{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 12px;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.lw-arobase{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#8a5200;font-weight:800}
.lw-mention-texte{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.2}
.lw-mention-repondre{flex:none;padding:6px 12px;border-radius:16px;background:rgba(255,255,255,.22);font-size:13px}
.lw-mention-ignorer{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:#fff;cursor:pointer}
.lw-mention-ignorer svg{display:block;width:20px;height:20px;fill:currentColor}
@media (prefers-reduced-motion:reduce){.lw-pulse,.lw-mention-pastille,.lw-bulles .lw-ephemere .lw-bulle,.lw-bulles .lw-file .lw-bulle.lw-neuve{animation:none}.lw-bulles .lw-ephemere .lw-bulle{transition:none}}