/* ── WOOLIVE · direction artistique « pop chaleureuse » (29/09/2026) ─────────────────────────────────────
   Fond crème, encre presque noire, contours de 2 px et ombres « autocollant » (décalées, sans flou).
   Violet = la marque, citron = l'action principale, rose = le direct et les touches d'émotion.
   Polices servies par le site (Outfit pour les titres, Inter pour le texte) : même rendu partout. */
@font-face { font-family: 'Outfit'; src: url('fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* DA sombre (29/09/2026) : fond violet nuit, contours et ombres noirs, accents citron / rose / violet */
  --creme: #1a1430; --creme2: #2a2248; --papier: #221b3d;
  --encre: #f6f2ff; --encre2: #bdb4dc; --pale: #8a80b0;
  --bord: #07050d; --sombre: #0b0814;
  --violet: #8b5cf6; --violet-plein: #7c4dea; --violet-clair: #2e2358; --citron: #d4ff3f; --rose: #ff4fa3; --rose-clair: #3d1a37; --ciel: #172f4d;
  --trait: 2px solid var(--bord);
  --ombre: 4px 4px 0 var(--bord); --ombre-g: 7px 7px 0 var(--bord);
  --rayon: 20px;
  --titre: 'Outfit', 'Segoe UI', system-ui, sans-serif; --corps: 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* compatibilité avec compte.js (jauge du mot de passe) */
  --wl-rose: var(--rose); --wl-citron: var(--citron);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* ⚠ l'attribut hidden doit TOUJOURS gagner : un display:flex de classe l'annulait (les deux formulaires
   et les trois barres du chat s'affichaient en même temps). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--creme); color: var(--encre); font-family: var(--corps); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--citron); color: var(--sombre); }

/* ── barre du haut ── */
.wl-barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(20,15,38,.9); border-bottom: var(--trait); }
.wl-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wl-marque img { width: 38px; height: 38px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.wl-marque:hover img { transform: rotate(-10deg) scale(1.06); }
.wl-marque b { font-family: var(--titre); font-weight: 800; font-size: 26px; letter-spacing: -1px; }
.wl-marque b i { font-style: normal; color: var(--citron); }
.wl-barre nav { display: flex; gap: 4px; }
.wl-barre nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--encre2); transition: background .15s, color .15s; }
.wl-barre nav a:hover, .wl-barre nav a.actif { background: var(--creme2); color: var(--encre); }
.wl-espace { flex: 1; }
.wl-lien-nav { text-decoration: none; font-weight: 600; font-size: 15px; }
.wl-lien-nav:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .wl-barre { gap: 10px; padding: 12px 16px; }
  .wl-barre nav, .wl-lien-nav { display: none; }
  .wl-marque b { font-size: 22px; } .wl-marque img { width: 32px; height: 32px; }
}

/* ── boutons ── */
.wl-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
  padding: 11px 20px; border: var(--trait); border-radius: 999px; background: var(--papier); color: var(--encre);
  font-family: var(--titre); font-weight: 700; font-size: 16px; box-shadow: var(--ombre);
  transition: transform .12s ease, box-shadow .12s ease, background .15s; }
.wl-bouton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bord); }
.wl-bouton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bord); }
.wl-bouton.principal { background: var(--citron); color: var(--sombre); }
.wl-bouton.violet { background: var(--violet-plein); color: #fff; }
.wl-bouton.encre { background: var(--sombre); color: var(--citron); box-shadow: 4px 4px 0 var(--violet); }
.wl-bouton.encre:hover { box-shadow: 6px 6px 0 var(--violet); }
.wl-bouton.grand { padding: 15px 28px; font-size: 18px; }
.wl-bouton.petit { padding: 8px 16px; font-size: 15px; box-shadow: 3px 3px 0 var(--bord); }
.wl-bouton:disabled { opacity: .5; cursor: default; transform: none; box-shadow: var(--ombre); }

/* ── mise en page ── */
.wl-page { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 60px; }
.wl-carte { background: var(--papier); border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.wl-titre { font-family: var(--titre); font-weight: 800; letter-spacing: -.5px; margin: 0 0 14px; }
.wl-note { color: var(--encre2); font-size: 14px; }

/* ── pastilles ── */
.wl-pastille { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: var(--trait); border-radius: 999px;
  background: var(--rose); color: #fff; font-family: var(--titre); font-weight: 800; font-size: 13px; letter-spacing: .6px; }
.wl-pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: wl-pouls 1.3s infinite; }
.wl-pastille.off { background: var(--creme2); color: var(--encre2); }
.wl-pastille.off::before { background: var(--pale); animation: none; }
@keyframes wl-pouls { 50% { opacity: .25; } }

/* ── page chaîne : lecteur + chat ──
   Paysage : lecteur 16:9 + chat de la même hauteur. Portrait : lecteur vertical centré, chat collé à droite.
   Mode théâtre (T) : plus de barre du site, la vidéo prend tout, le chat reste à droite. */
.wl-scene { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: stretch; }
.wl-colonne { min-width: 0; display: flex; flex-direction: column; }
.wl-scene.portrait { grid-template-columns: auto 380px; justify-content: center; }
@media (max-width: 1020px) { .wl-scene, .wl-scene.portrait { grid-template-columns: minmax(0, 1fr); } }

.wl-lecteur { position: relative; aspect-ratio: 16 / 9; background: #000; border: var(--trait); border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-g); }
.wl-lecteur video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.wl-lecteur.portrait { aspect-ratio: 9 / 16; height: clamp(460px, calc(100vh - 250px), 1000px); width: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 1020px) { .wl-lecteur.portrait { height: auto; width: min(100%, 460px); } }
.wl-hors-ligne { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 20% 20%, rgba(212,255,63,.9) 0 70px, transparent 71px), radial-gradient(circle at 85% 80%, rgba(255,79,163,.9) 0 110px, transparent 111px), var(--violet); color: #fff; }
.wl-hors-ligne > div { max-width: 440px; padding: 22px 26px; background: var(--papier); color: var(--encre); border: var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.wl-hors-ligne b { display: block; font-family: var(--titre); font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.wl-hors-ligne span { color: var(--encre2); font-size: 15px; }

/* barre de commandes : son, qualité, théâtre — jamais de barre de temps (c'est du direct) */
.wl-commandes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 34px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.78)); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.wl-lecteur.actif .wl-commandes, .wl-lecteur:focus-within .wl-commandes { opacity: 1; transform: none; }
.wl-lecteur.actif { cursor: default; }
.wl-lecteur:not(.actif) { cursor: none; }
.wl-commandes .wl-pastille { font-size: 11px; padding: 3px 9px; }
.wl-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .15s, transform .1s; }
.wl-ic:hover { background: rgba(255,255,255,.24); }
.wl-ic:active { transform: scale(.94); }
.wl-ic svg { width: 21px; height: 21px; }
.wl-ic.texte { width: auto; padding: 0 12px; font-family: var(--titre); font-weight: 700; font-size: 14px; }
#volume { -webkit-appearance: none; appearance: none; width: 110px; height: 6px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--citron) var(--v, 80%), rgba(255,255,255,.28) var(--v, 80%)); }
#volume::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--bord); }
#volume::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--bord); }
.wl-menu-q { position: relative; }
.wl-qualites { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; min-width: 120px; padding: 6px; border: var(--trait); border-radius: 14px; background: var(--papier); box-shadow: var(--ombre); }
.wl-qualites button { border: 0; background: none; color: var(--encre); text-align: left; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; }
.wl-qualites button:hover { background: var(--creme2); }
.wl-qualites button.actif { background: var(--citron); color: var(--sombre); }
/* son coupé au démarrage (imposé par les navigateurs) : petite pastille discrète, pas un gros bouton qui clignote */
.wl-son-auto { position: absolute; left: 14px; top: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(11,8,20,.62); color: #fff; font-family: var(--corps); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s; }
.wl-son-auto:hover { background: rgba(11,8,20,.85); border-color: rgba(255,255,255,.35); }
.wl-son-auto span { max-width: 90px; overflow: hidden; white-space: nowrap; transition: max-width .3s, opacity .3s; }
.wl-lecteur:not(:hover) .wl-son-auto span { max-width: 0; opacity: 0; margin-left: -7px; }

.wl-statut { margin: 14px 0 0; padding: 10px 16px; border: var(--trait); border-radius: 14px; background: var(--ciel); font-size: 14px; font-weight: 500; }
.wl-statut.erreur { background: var(--rose-clair); }
.wl-infos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; background: var(--papier); border: var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.wl-qui { flex: 1; min-width: 160px; }
.wl-avatar { flex: none; width: 54px; height: 54px; border: var(--trait); border-radius: 16px; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 24px; background: var(--citron); color: var(--sombre); }
.wl-infos h1 { font-family: var(--titre); font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 0; line-height: 1.1; }
.wl-infos p { margin: 2px 0 0; color: var(--encre2); }
.wl-scene.portrait .wl-infos { max-width: 100%; }

/* chat : exactement la hauteur de la colonne vidéo (contain:size = son contenu ne l'agrandit pas) */
.wl-chat { display: flex; flex-direction: column; overflow: hidden; padding: 0; contain: size; min-height: 440px; }
@media (max-width: 1020px) { .wl-chat { contain: none; height: 62vh; } }

/* mode théâtre */
body.theatre > .wl-barre, body.theatre > .wl-pied { display: none; }
body.theatre .wl-page { max-width: none; padding: 0; }
body.theatre .wl-scene, body.theatre .wl-scene.portrait { grid-template-columns: minmax(0, 1fr) 340px; gap: 0; height: 100vh; justify-content: stretch; }
body.theatre .wl-colonne { height: 100vh; }
body.theatre .wl-lecteur, body.theatre .wl-lecteur.portrait { flex: 1; aspect-ratio: auto; height: 100%; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
body.theatre .wl-infos, body.theatre .wl-statut { display: none; }
body.theatre .wl-chat { border-radius: 0; border-width: 0 0 0 2px; box-shadow: none; height: 100vh; }
@media (max-width: 1020px) { body.theatre .wl-scene { grid-template-columns: minmax(0, 1fr); } body.theatre .wl-chat { display: none; } }
.wl-chat-tete { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: var(--trait); background: var(--violet-plein); color: #fff; font-family: var(--titre); font-weight: 800; font-size: 17px; }
.wl-chat-tete span { margin-left: auto; font-family: var(--corps); font-weight: 600; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.wl-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wl-message { line-height: 1.45; font-size: 15px; word-wrap: break-word; }
.wl-message b { color: #b69cff; margin-right: 6px; }
.wl-message.systeme { align-self: center; max-width: 92%; padding: 6px 12px; border-radius: 12px; background: var(--creme2); color: var(--encre2); font-size: 13px; text-align: center; }
.wl-chat-pied { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-top: var(--trait); background: var(--creme); }
.wl-identite { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--encre2); }
.wl-identite b { color: var(--encre); }
.wl-identite button { margin-left: auto; border: 0; background: none; color: #b69cff; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.wl-champ { width: 100%; padding: 11px 14px; border: var(--trait); border-radius: 14px; background: var(--papier); outline: none; font-size: 15px; transition: box-shadow .12s; }
.wl-champ:focus { box-shadow: 3px 3px 0 var(--violet); }
.wl-ligne { display: flex; gap: 8px; }
.wl-ligne .wl-champ { flex: 1; min-width: 0; }
.wl-ligne .wl-bouton { box-shadow: 3px 3px 0 var(--bord); padding: 9px 16px; font-size: 15px; }

/* ── vignettes de lives ── */
.wl-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.wl-vignette { text-decoration: none; background: var(--papier); border: var(--trait); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: transform .15s, box-shadow .15s; }
.wl-vignette:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: var(--ombre-g); }
.wl-vignette .wl-image { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; border-bottom: var(--trait);
  background: linear-gradient(135deg, var(--violet), #a855f7); font-family: var(--titre); font-weight: 800; font-size: 46px; color: rgba(255,255,255,.35); }
.wl-vignette:nth-child(3n+2) .wl-image { background: linear-gradient(135deg, var(--rose), #ff8a5c); }
.wl-vignette:nth-child(3n+3) .wl-image { background: linear-gradient(135deg, #22c55e, var(--citron)); }
.wl-vignette .wl-pastille { position: absolute; top: 12px; left: 12px; }
.wl-vignette .wl-compteur { position: absolute; bottom: 10px; left: 12px; padding: 3px 9px; border: var(--trait); border-radius: 999px; background: var(--papier); color: var(--encre); font-family: var(--corps); font-size: 12px; font-weight: 700; }
.wl-vignette .wl-texte { padding: 12px 16px 16px; }
.wl-vignette .wl-texte b { display: block; font-family: var(--titre); font-size: 18px; }
.wl-vignette .wl-texte span { color: var(--encre2); font-size: 14px; }

/* ── pied de page ── */
.wl-pied { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 26px clamp(16px, 4vw, 48px); border-top: var(--trait); background: var(--sombre); color: var(--encre); }
.wl-pied .wl-marque b i { color: var(--citron); }
.wl-pied nav { display: flex; gap: 18px; flex: 1; }
.wl-pied nav a { text-decoration: none; opacity: .8; font-weight: 500; }
.wl-pied nav a:hover { opacity: 1; text-decoration: underline; }
.wl-pied > span { opacity: .6; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* portrait : la carte d'infos ne dicte pas la largeur de la colonne (elle suit le lecteur vertical) */
.wl-scene.portrait .wl-infos { width: 0; min-width: 100%; }

/* ── compte dans la barre du haut ── */
#compte-nav { position: relative; display: flex; align-items: center; gap: 14px; }
.wl-av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: var(--trait); border-radius: 50%; overflow: hidden; background: var(--citron); color: var(--sombre); font-family: var(--titre); font-weight: 800; font-size: 15px; }
.wl-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-moi { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: var(--trait); border-radius: 999px; background: var(--papier); color: var(--encre); cursor: pointer; box-shadow: 3px 3px 0 var(--bord); font-family: var(--titre); font-size: 15px; transition: transform .12s, box-shadow .12s; }
.wl-moi:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bord); }
.wl-moi i { font-style: normal; font-size: 12px; opacity: .7; }
.wl-menu-moi { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 240px; display: flex; flex-direction: column; padding: 8px; border: var(--trait); border-radius: 16px; background: var(--papier); box-shadow: var(--ombre-g); }
.wl-menu-moi a, .wl-menu-moi button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--encre); text-decoration: none; font-weight: 600; font-size: 15px; cursor: pointer; }
.wl-menu-moi a:hover, .wl-menu-moi button:hover { background: var(--creme2); }
.wl-menu-moi button { color: #ff8ab8; margin-top: 4px; border-top: 1px solid var(--creme2); border-radius: 0 0 10px 10px; }
@media (max-width: 760px) { .wl-moi b { display: none; } #compte-nav .wl-lien-nav { display: none; } }

/* page chaîne : photo et nom mènent au profil */
a.wl-avatar { text-decoration: none; overflow: hidden; }
.wl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-infos h1 a { color: inherit; text-decoration: none; }
.wl-infos h1 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#b-suivre-chaine:not(.principal) { background: var(--creme2); }

/* ── icônes Lucide ── */
.ico { flex: none; vertical-align: -0.18em; }
.wl-bouton .ico, .wl-ic .ico { vertical-align: middle; }
.wl-menu-moi a, .wl-menu-moi button { display: flex; align-items: center; gap: 10px; }
.wl-menu-moi .ico { opacity: .75; }
.wl-moi .ico-chevron-down { opacity: .6; }
.wl-son-auto .ico { margin-right: 2px; }
#b-suivre-chaine { gap: 6px; }

/* ═══ Chat temps réel + likes (30/09/2026) ═══ */
.wl-chat-tete i { flex: none; }
#chat-statut { display: inline-flex; align-items: center; gap: 6px; }
#chat-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; }
#chat-statut.ok::before { background: var(--citron); box-shadow: 0 0 8px var(--citron); }
#chat-statut.attente::before { background: #ffb13f; animation: wl-pouls 1.2s infinite; }
.wl-messages { gap: 4px; overscroll-behavior: contain; }
.wl-message:not(.systeme) { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; margin: 0 -8px; border-radius: 12px; animation: wl-msg-entre .25s ease-out; }
.wl-message:not(.systeme):hover { background: rgba(255,255,255,.04); }
@keyframes wl-msg-entre { from { opacity: 0; transform: translateY(8px); } }
.wl-m-av { flex: none; width: 28px; height: 28px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--violet); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; margin-top: 1px; }
.wl-m-av img { width: 100%; height: 100%; object-fit: cover; }
.wl-m-corps { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.wl-m-nom { color: #b69cff; font-weight: 800; text-decoration: none; margin-right: 2px; }
.wl-m-nom:hover { text-decoration: underline; }
.wl-message.moi .wl-m-nom { color: var(--citron); }
.wl-message.streamer .wl-m-nom { color: var(--rose); }
.wl-message.streamer { background: rgba(255,79,163,.08); }
.wl-m-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; vertical-align: 2px; }
.wl-m-suppr { position: absolute; right: 4px; top: 4px; opacity: 0; border: 0; border-radius: 8px; padding: 4px; background: var(--creme2); color: var(--encre); cursor: pointer; display: grid; place-items: center; }
.wl-message:hover .wl-m-suppr { opacity: 1; }
.wl-m-suppr:hover { background: var(--rose); color: #fff; }
.wl-invite { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: var(--trait); border-radius: 14px; background: var(--papier); }
.wl-invite span { flex: 1; font-size: 13px; color: var(--encre2); line-height: 1.35; }
.wl-invite b { display: block; color: var(--encre); font-size: 15px; font-family: var(--titre); margin-bottom: 2px; }
.wl-invite.secoue { animation: wl-secoue .45s; }
@keyframes wl-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#b-envoyer { padding-left: 14px; padding-right: 14px; }

/* likes : bouton dans le lecteur, cœurs qui montent, compteur sous le lecteur */
.wl-coeurs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.wl-coeur { position: absolute; margin: -16px 0 0 -16px; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); animation: wl-coeur 1.7s cubic-bezier(.2,.7,.4,1) forwards; }
.wl-coeur svg { fill: currentColor; stroke: currentColor; }
@keyframes wl-coeur {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  12% { transform: translate(0, -10px) scale(1.25) rotate(var(--r)); opacity: 1; }
  25% { transform: translate(calc(var(--dx) * .3), -40px) scale(1) rotate(var(--r)); }
  100% { transform: translate(var(--dx), -260px) scale(.7) rotate(calc(var(--r) * -1)); opacity: 0; }
}
.wl-like { flex: none; width: 46px; display: grid; place-items: center; border: var(--trait); border-radius: 14px; background: var(--rose-clair); color: var(--rose); cursor: pointer; transition: transform .12s, background .2s; }
.wl-like svg { fill: currentColor; }
.wl-like:hover { background: var(--rose); color: #fff; }
.wl-like:active { transform: scale(.9); }
.wl-like.pop { animation: wl-like-pop .3s; }
@keyframes wl-like-pop { 40% { transform: scale(1.2); } }

/* nom de la chaîne + spectateurs + likes sur la même ligne */
.wl-titre-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-titre-ligne h1 { margin-right: 4px; }
.wl-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--creme2); color: var(--encre); font-size: 13px; font-weight: 800; }
.wl-stat.rose { background: var(--rose); color: #fff; }
.wl-stat.rose svg { fill: #fff; }
.wl-stat b { font-variant-numeric: tabular-nums; }

/* ═══════════ VRAIE PAGE DE LIVE (30/09/2026) ═══════════
   PC : la page tient dans l'écran (pas de défilement) — lecteur qui s'adapte à la place (unités cq), chat pleine
   hauteur, halo coloré tiré de la vidéo derrière. Mobile : lecteur, carte du streamer, chat, dans l'ordre. */
body.page-live > .wl-pied { display: none; }
body.page-live .wl-page { max-width: none; padding: 14px clamp(12px, 1.6vw, 22px) 18px; }
.wl-ecran { position: relative; display: grid; place-items: center; isolation: isolate; }
.wl-lecteur { width: 100%; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55), var(--ombre); }
.wl-lecteur.portrait { height: auto; width: min(100%, 460px); }
@media (min-width: 1021px) {
  body.page-live .wl-scene, body.page-live .wl-scene.portrait { height: calc(100dvh - var(--barre-h, 72px) - 32px); min-height: 520px;
    grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; justify-content: stretch; }
  body.page-live .wl-colonne { min-height: 0; }
  body.page-live .wl-ecran { flex: 1; min-height: 0; container-type: size; }
  body.page-live .wl-lecteur { width: min(100cqw, 100cqh * 16 / 9); }
  body.page-live .wl-lecteur.portrait { width: min(100cqw, 100cqh * 9 / 16); height: auto; }
  body.page-live .wl-chat { height: 100%; min-height: 0; contain: none; }
  body.page-live .wl-scene.portrait .wl-infos { width: auto; min-width: 0; }
}
/* halo : 32×18 pixels de la vidéo, étirés et floutés derrière le lecteur (comme le mode « ambiance ») */
.wl-halo { position: absolute; inset: 6% 4%; width: 92%; height: 88%; z-index: -1; filter: blur(70px) saturate(1.8); opacity: 0; transform: scale(1.04); transition: opacity 1.5s; pointer-events: none; }
.wl-halo.actif { opacity: .62; }

/* HUD sur la vidéo */
.wl-hud { position: absolute; left: 14px; top: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: none; }
.wl-hud-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #ff2d6f; color: #fff; font-family: var(--titre); font-weight: 800; font-size: 12px; letter-spacing: 1.2px; box-shadow: 0 0 20px rgba(255,45,111,.6); }
.wl-hud-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: wl-pouls 1.3s infinite; }
.wl-hud-stat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: rgba(11,8,20,.62); border: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.wl-hud-stat.rose svg { fill: var(--rose); stroke: var(--rose); }
.wl-hud-stat.bump, .wl-stat.bump { animation: wl-bump .35s; }
@keyframes wl-bump { 40% { transform: scale(1.18); } }
.wl-son-auto { left: auto; right: 14px; }
.wl-lecteur .wl-statut { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 4; margin: 0; max-width: 88%; padding: 8px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(11,8,20,.78); color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-lecteur .wl-statut.erreur { background: rgba(120,20,60,.88); }

/* hors ligne : photo du streamer floutée en fond, carte au centre */
.wl-hors-ligne { background: #0b0814; overflow: hidden; }
.wl-hors-ligne > .wl-hl-fond { position: absolute; inset: -15%; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(40% 50% at 25% 30%, rgba(139,92,246,.55), transparent 70%), radial-gradient(40% 50% at 80% 75%, rgba(255,79,163,.45), transparent 70%), #0b0814;
  background-size: cover; background-position: center; filter: blur(40px) saturate(1.3); opacity: .8; animation: wl-derive 16s ease-in-out infinite alternate; }
@keyframes wl-derive { to { transform: scale(1.12) translate(3%, -2%); } }
.wl-hors-ligne > .wl-hl-carte { position: relative; display: grid; justify-items: center; gap: 6px; max-width: 420px; padding: 26px 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(11,8,20,.6); box-shadow: 0 20px 60px rgba(0,0,0,.5); color: #fff; }
.wl-hl-av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; background: var(--violet); font-family: var(--titre); font-weight: 800; font-size: 36px; border: 3px solid rgba(255,255,255,.2); filter: grayscale(.4); }
.wl-hl-av img { width: 100%; height: 100%; object-fit: cover; }
.wl-hl-carte b { font-size: 22px; }
.wl-hl-carte span:last-child { color: rgba(255,255,255,.72); font-size: 14px; }

/* carte du streamer sous le lecteur */
.wl-infos { margin-top: 14px; padding: 12px 16px; flex-wrap: nowrap; }
@media (max-width: 700px) { .wl-infos { flex-wrap: wrap; } }
.wl-avatar { position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: visible; isolation: isolate; text-decoration: none; }
.wl-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wl-scene.en-direct .wl-avatar { border-color: transparent; }
.wl-scene.en-direct .wl-avatar::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 50%; background: conic-gradient(var(--rose), var(--violet), var(--citron), var(--rose)); animation: wl-tourne 2.6s linear infinite; }
.wl-scene.en-direct .wl-avatar::before { content: "LIVE"; position: absolute; left: 50%; bottom: -9px; z-index: 2; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; border: 2px solid var(--papier); background: #ff2d6f; color: #fff; font-family: var(--titre); font-size: 10px; font-weight: 800; letter-spacing: .8px; }
@keyframes wl-tourne { to { transform: rotate(360deg); } }
.wl-infos h1 { font-size: 22px; }
.wl-titre-ligne .wl-pastille { font-size: 11px; padding: 2px 9px; }
.wl-scene.en-direct .wl-titre-ligne .wl-pastille { display: none; }
.wl-actions { display: flex; gap: 10px; flex: none; }

/* cœurs sur toute la page */
.wl-coeurs-page { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wl-coeur-v { position: absolute; left: 0; top: 0; will-change: transform, opacity; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.wl-coeur-v svg { display: block; fill: currentColor; stroke: rgba(255,255,255,.85); stroke-width: 1.5; }
.wl-combo { position: fixed; z-index: 61; pointer-events: none; font-family: var(--titre); font-weight: 900; font-size: 28px; color: var(--rose); opacity: 0;
  text-shadow: 0 2px 0 var(--bord), 0 0 18px rgba(255,79,163,.8); transform: translate(-50%, 0); white-space: nowrap; }
.wl-combo.vu { animation: wl-combo .55s ease-out forwards; }
@keyframes wl-combo { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 30% { opacity: 1; transform: translate(-50%, -6px) scale(1.25); } 100% { opacity: 1; transform: translate(-50%, -14px) scale(1); } }
.wl-toast { position: fixed; left: 50%; bottom: 26px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 20px; border: var(--trait); border-radius: 999px;
  background: var(--citron); color: var(--sombre); font-weight: 700; box-shadow: var(--ombre); transition: transform .25s, opacity .25s; }
.wl-toast.vu { transform: translate(-50%, 0); opacity: 1; }

/* théâtre avec la nouvelle page */
body.theatre.page-live .wl-page { padding: 0; }
body.theatre.page-live .wl-scene, body.theatre.page-live .wl-scene.portrait { height: 100dvh; gap: 0; }
body.theatre .wl-ecran .wl-lecteur, body.theatre .wl-ecran .wl-lecteur.portrait { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
body.theatre .wl-halo { display: none; }
@media (max-width: 1020px) { body.theatre .wl-ecran { height: 100dvh; } }

/* l'œil = présents ; un clic montre qui regarde */
.cliquable { cursor: pointer; border: 0; font: inherit; }
.wl-hud-stat.cliquable { pointer-events: auto; border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .15s; }
.wl-hud-stat.cliquable:hover { background: rgba(11,8,20,.88); }
button.wl-stat { transition: background .15s, transform .1s; }
button.wl-stat:hover { background: var(--violet); color: #fff; }
.wl-qui-panneau { position: fixed; z-index: 65; width: min(320px, calc(100vw - 32px)); max-height: min(440px, 70vh); display: flex; flex-direction: column;
  border: var(--trait); border-radius: 18px; background: var(--papier); box-shadow: var(--ombre-g), 0 20px 60px rgba(0,0,0,.5); animation: wl-qui-entre .18s ease-out; }
@keyframes wl-qui-entre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.wl-qui-tete { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: var(--trait); font-family: var(--titre); font-size: 16px; }
.wl-qui-fermer { margin-left: auto; border: 0; background: none; color: var(--encre2); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: 8px; }
.wl-qui-fermer:hover { background: var(--creme2); color: var(--encre); }
.wl-qui-liste { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.wl-qui-liste a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--encre); text-decoration: none; font-weight: 600; }
.wl-qui-liste a:hover { background: var(--creme2); }
.wl-qui-liste .wl-m-av { width: 30px; height: 30px; border-radius: 50%; }
.wl-qui-liste .wl-m-tag { margin-left: auto; }
.wl-qui-vide { padding: 18px 10px; text-align: center; color: var(--encre2); font-size: 14px; }
.wl-qui-pied { padding: 10px 14px; border-top: var(--trait); color: var(--encre2); font-size: 13px; }
.wl-qui-pied:empty { display: none; }

/* ═══ Accueil : vraies vignettes de lives ═══ */
.wl-vignette.live .wl-image { overflow: hidden; background: #0b0814; color: rgba(255,255,255,.28); }
.wl-img-flou { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(22px) brightness(.55); }
.wl-image .wl-img, .wl-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s; }
.wl-vignette.a-image .wl-img { opacity: 1; }
.wl-vignette.lecture video { opacity: 1; }
.wl-img-vide { position: relative; }
.wl-vignette.a-image .wl-img-vide { display: none; }
.wl-vignette.live .wl-pastille { z-index: 2; }
.wl-v-duree { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 8px; border-radius: 8px; background: rgba(11,8,20,.72); color: #fff; font-family: var(--corps); font-size: 12px; font-weight: 700; }
.wl-v-duree:empty { display: none; }
.wl-v-stats { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; }
.wl-v-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: rgba(11,8,20,.72); color: #fff; font-family: var(--corps); font-size: 13px; font-weight: 700; }
.wl-v-stat.rose svg { fill: var(--rose); stroke: var(--rose); }
.wl-vignette.live .wl-texte { display: flex; gap: 12px; align-items: center; }
.wl-vignette.live .wl-texte > div { min-width: 0; }
.wl-vignette.live .wl-texte span:not(.wl-v-av) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-v-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--violet); color: #fff; font-family: var(--titre); font-weight: 800; font-size: 17px;
  box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--rose); }
.wl-v-av img { width: 100%; height: 100%; object-fit: cover; }
.wl-vignette.live:hover .wl-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--citron); border-radius: inherit; z-index: 3; pointer-events: none; }
@media (min-width: 760px) {
  .wl-grille:has(.une) { align-items: start; }
  .wl-grille .wl-vignette.une { grid-column: span 2; }
  .wl-vignette.une .wl-texte b { font-size: 22px; }
}

/* ═══ Modération ═══ */
.wl-chat-mod { margin-left: 6px; border: 0; background: rgba(255,255,255,.18); color: #fff; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.wl-chat-mod:hover { background: rgba(255,255,255,.32); }
.wl-m-tag.modo { background: var(--citron); color: var(--sombre); }
.wl-message.modo .wl-m-nom { color: var(--citron); }
.wl-m-tag.admin { background: var(--violet); color: #fff; }
.wl-message.admin .wl-m-nom { color: #c4b1ff; }
.wl-m-nom.menu { cursor: pointer; }
.wl-menu-mod { position: fixed; z-index: 66; min-width: 210px; padding: 6px; border: var(--trait); border-radius: 14px; background: var(--papier); box-shadow: var(--ombre-g), 0 18px 50px rgba(0,0,0,.5); animation: wl-qui-entre .15s ease-out; }
.wl-menu-mod .tete { padding: 6px 10px 8px; font-family: var(--titre); font-weight: 800; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; }
.wl-menu-mod a, .wl-menu-mod button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--encre); font: 600 14px var(--corps); text-align: left; text-decoration: none; cursor: pointer; }
.wl-menu-mod a:hover, .wl-menu-mod button:hover { background: var(--creme2); }
.wl-menu-mod button.danger { color: #ff7ab8; }
.wl-menu-mod button.danger:hover { background: var(--rose); color: #fff; }
.wl-menu-mod hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 4px 0; }
.wl-mod-panneau { right: 24px; top: 90px; width: min(360px, calc(100vw - 32px)); max-height: min(560px, 80vh); }
.wl-mod-corps { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wl-mod-corps h4 { margin: 8px 0 0; font-family: var(--titre); font-size: 14px; color: var(--encre2); text-transform: uppercase; letter-spacing: .5px; }
.wl-mod-corps .wl-qui-liste { padding: 0; max-height: 180px; }
.wl-mod-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--creme); font-weight: 600; }
.wl-mod-ligne small { color: var(--encre2); font-weight: 500; }
.wl-mod-ligne button { margin-left: auto; border: 0; border-radius: 8px; padding: 4px 10px; background: var(--creme2); color: var(--encre); cursor: pointer; font: 700 12px var(--corps); }
.wl-mod-ligne button:hover { background: var(--rose); color: #fff; }
.wl-qui-liste .wl-qui-ligne { display: flex; align-items: center; }
.wl-qui-liste .wl-qui-ligne a { flex: 1; }
.wl-qui-liste .wl-qui-ligne button { border: 0; background: none; color: var(--encre2); cursor: pointer; padding: 6px; border-radius: 8px; }
.wl-qui-liste .wl-qui-ligne button:hover { background: var(--creme2); color: var(--encre); }
@media (max-width: 700px) {
  .wl-lecteur .wl-statut { bottom: 12px; font-size: 12px; }
  .wl-hud { left: 10px; top: 10px; gap: 4px; }
  .wl-hud-stat, .wl-hud-live { padding: 3px 7px; font-size: 12px; }
}

/* ═══ Lecteur étroit (portrait façon TikTok, téléphone) : rien ne déborde du cadre ═══
   Les règles suivent la largeur RÉELLE du lecteur (requêtes de conteneur), pas celle de l'écran. */
.wl-lecteur { container: lecteur / inline-size; }
.wl-hud { right: 58px; }                                        /* jamais sous le bouton du son */
.wl-hud-stat, .wl-hud-live { white-space: nowrap; }
@container lecteur (max-width: 520px) {
  .wl-hud { left: 10px; top: 10px; right: 52px; gap: 4px; }
  .wl-hud-live { padding: 3px 7px; font-size: 11px; letter-spacing: .8px; }
  .wl-hud-live::before { width: 6px; height: 6px; }
  .wl-hud-stat { padding: 3px 7px; gap: 4px; font-size: 12px; border-radius: 7px; }
  .wl-hud-stat svg { width: 12px; height: 12px; }
  .wl-son-auto { top: auto; bottom: 64px; left: 50%; right: auto; transform: translateX(-50%); padding: 9px 16px 9px 13px; font-size: 14px; }
  .wl-lecteur .wl-son-auto span { max-width: none; opacity: 1; margin-left: 0; }
  .wl-commandes { gap: 4px; padding: 26px 8px 8px; }
  .wl-commandes .wl-pastille { display: none; }
  .wl-ic { width: 34px; height: 34px; border-radius: 10px; }
  .wl-ic svg { width: 18px; height: 18px; }
  .wl-ic.texte { padding: 0 9px; font-size: 13px; }
  #volume { width: 64px; }
  .wl-lecteur .wl-statut { left: 10px; right: 10px; bottom: 54px; transform: none; max-width: none; white-space: normal; text-align: center; border-radius: 14px; font-size: 12px; line-height: 1.35; }
  .wl-hors-ligne { padding: 14px; }
  .wl-hors-ligne > .wl-hl-carte { padding: 18px 16px; gap: 4px; border-radius: 18px; }
  .wl-hl-av { width: 62px; height: 62px; font-size: 26px; margin-bottom: 4px; }
  .wl-hl-carte b { font-size: 17px; }
  .wl-hl-carte span:last-child { font-size: 13px; }
}
@container lecteur (max-width: 380px) {
  #hud-duree-bloc { display: none; }
  #volume { display: none; }
  .wl-qualites { right: -4px; }
}
.wl-message:not(.suppr-ok) .wl-m-suppr { display: none; }
.wl-ligne.bloque .wl-champ { opacity: .7; cursor: not-allowed; }
.wl-ligne.bloque .wl-champ::placeholder { color: #ff7ab8; }
.wl-ligne.bloque .wl-bouton { opacity: .5; cursor: not-allowed; }

/* ═══ Emojis ═══ */
.wl-emoji-b { flex: none; width: 44px; display: grid; place-items: center; border: var(--trait); border-radius: 14px; background: var(--papier); cursor: pointer; font-size: 20px; transition: transform .12s, background .2s; }
.wl-emoji-b span { filter: grayscale(.35); transition: filter .2s, transform .2s; }
.wl-emoji-b:hover { background: var(--creme2); }
.wl-emoji-b:hover span { filter: none; transform: scale(1.15) rotate(-8deg); }
.wl-emojis { position: fixed; z-index: 66; width: min(330px, calc(100vw - 20px)); border: var(--trait); border-radius: 18px; background: var(--papier); box-shadow: var(--ombre-g), 0 20px 60px rgba(0,0,0,.5); overflow: hidden; animation: wl-qui-entre .15s ease-out; }
.wl-emojis-onglets { display: flex; gap: 2px; padding: 6px; border-bottom: var(--trait); background: var(--creme); }
.wl-emojis-onglets button { flex: 1; height: 34px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 18px; display: grid; place-items: center; color: var(--encre2); filter: grayscale(.6); }
.wl-emojis-onglets button:hover { background: var(--creme2); filter: none; }
.wl-emojis-onglets button.actif { background: var(--violet-plein); filter: none; color: #fff; }
.wl-emojis-grille { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; height: 232px; overflow-y: auto; align-content: start; overscroll-behavior: contain; }
.wl-emojis-grille button { aspect-ratio: 1; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; transition: transform .1s, background .1s; }
.wl-emojis-grille button:hover { background: var(--creme2); transform: scale(1.2); }
.wl-emojis-vide { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--encre2); font-size: 14px; }

/* catégorie du live (jeu / thème) */
.wl-cat, .wl-v-cat { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: var(--violet-clair); color: #c9b8ff; font-style: normal; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.wl-v-cat { margin: 4px 0 0; }

/* ── continuité de l'image (30/09/2026) : coupure courte / passage paysage <-> portrait ──
   La dernière image reste à l'écran, se floute doucement, puis fond dans la nouvelle. */
.wl-gel { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; pointer-events: none;
  transition: opacity .55s ease, filter .8s ease, transform .8s ease; }
.wl-gel.actif { opacity: 1; transition: filter .8s ease, transform .8s ease; }
.wl-lecteur.reprise .wl-gel { filter: blur(10px) brightness(.6) saturate(1.25); transform: scale(1.04); }
.wl-attente { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 11px; border-radius: 999px; background: rgba(11,8,20,.72); border: 1px solid rgba(255,255,255,.14); color: #fff;
  font-weight: 600; font-size: 14px; white-space: nowrap; pointer-events: none; animation: wl-attente-in .35s ease both; }
.wl-rond { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--rose); animation: wl-tourne .8s linear infinite; }
@keyframes wl-attente-in { from { opacity: 0; transform: translate(-50%, -35%); } }
.wl-hors-ligne:not([hidden]) { animation: wl-fondu .5s ease both; }
@keyframes wl-fondu { from { opacity: 0; } }
.wl-lecteur video { transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .wl-gel, .wl-gel.actif { transition: none; } .wl-lecteur.reprise .wl-gel { transform: none; } }

/* ══ téléphone : barre de navigation du bas (30/09/2026), façon YouTube / TikTok ══ */
.wl-nav-bas { display: none; }
@media (max-width: 760px) {
  :root { --nav-bas: calc(60px + env(safe-area-inset-bottom)); }
  body.a-nav-bas { padding-bottom: var(--nav-bas); }
  .wl-nav-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: var(--nav-bas); padding-bottom: env(safe-area-inset-bottom); background: rgba(11,8,20,.96); border-top: 1px solid rgba(255,255,255,.08); }
  .wl-nav-bas a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: var(--pale); text-decoration: none; font-size: 10.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .wl-nav-bas a.actif { color: var(--encre); }
  .wl-nav-bas a.actif svg { stroke-width: 2.6; }
  .wl-nav-bas .wl-av { width: 24px; height: 24px; font-size: 11px; border-width: 1.5px; }
  .wl-nav-bas a.actif .wl-av { box-shadow: 0 0 0 2px var(--encre); }
  .wl-nav-bas a.creer { align-self: center; }
  .wl-nav-bas a.creer svg { width: 44px; height: 30px; padding: 3px 10px; border-radius: 10px; background: linear-gradient(90deg, var(--rose), var(--violet)); color: #fff; box-shadow: 0 4px 14px rgba(255,79,163,.4); }
  .wl-nav-bas a.creer span { display: none; }
  /* la barre du haut, en téléphone : logo + compte, rien d'autre (la navigation est en bas) */
  .wl-barre { position: sticky; padding: 10px 14px; }
  .wl-toast, .cp-toast, .pf-toast, .wa-toast { bottom: calc(var(--nav-bas) + 14px) !important; }
}
@media (max-width: 760px) {
  .wl-nav-bas { grid-template-columns: repeat(5, 1fr); }
  /* le logo mène au fil « Pour toi » (l'accueil du téléphone) */
}

/* ══ bouton ＋ : feuille « Créer » (30/09/2026) — live caméra, Short, vidéo, photo ══ */
.wl-creer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(5,3,12,.62); }
.wl-creer-carte { width: 100%; max-width: 520px; display: grid; gap: 8px; padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: var(--creme); animation: wl-creer-monte .26s cubic-bezier(.2,1,.3,1); }
.wl-creer-tete { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.wl-creer-tete b { font: 800 20px var(--titre); }
.wl-creer-x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--papier); color: var(--encre); cursor: pointer; }
.wl-creer-choix { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--papier); color: var(--encre); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background .15s; }
.wl-creer-choix:active, .wl-creer-choix:hover { background: var(--creme2); }
.wl-creer-choix b { display: block; font-weight: 800; font-size: 16px; }
.wl-creer-choix small { display: block; color: var(--encre2); font-size: 13px; margin-top: 2px; }
.wl-creer-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--violet-clair); color: #c4b0ff; }
.wl-creer-choix.live .wl-creer-ico { background: #ff2d55; color: #fff; box-shadow: 0 6px 18px rgba(255,45,85,.35); }
@keyframes wl-creer-monte { from { transform: translateY(100%); } }

/* ══ temps réel personnel (30/09/2026) : icônes de la barre, pastilles, cloche, bulles ══ */
#compte-nav { position: relative; display: flex; align-items: center; gap: 8px; }
.wl-ico-nav { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--encre2); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.wl-ico-nav:hover { background: var(--creme2); color: var(--encre); }
.wl-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rose); color: #fff; border: 2px solid var(--creme);
  font: 800 10.5px/14px var(--titre); font-style: normal; text-align: center; pointer-events: none; }
.wl-cloche-zone { position: relative; display: inline-flex; }
.wl-cloche { position: absolute; right: -60px; top: calc(100% + 10px); z-index: 30; width: 400px; max-height: min(620px, calc(100vh - 90px)); display: flex; flex-direction: column;
  border: var(--trait); border-radius: 18px; background: var(--papier); box-shadow: var(--ombre-g); overflow: hidden; }
.wl-cloche header { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; }
.wl-cloche header b { flex: 1; font: 800 18px var(--titre); }
.wl-cloche header .lire { border: 0; background: none; color: var(--citron); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.wl-cloche header .lire:hover { background: var(--creme2); }
.wl-cloche header a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--encre2); }
.wl-cloche header a:hover { background: var(--creme2); color: var(--encre); }
.wl-cloche-liste { overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 6px; }
.wl-cloche-vide { margin: 0; padding: 34px 20px; text-align: center; color: var(--pale); font-size: 14px; line-height: 1.6; }
.wl-cloche-tout { display: block; padding: 12px; text-align: center; border-top: 1px solid var(--creme2); text-decoration: none; font-weight: 700; font-size: 14px; }
.wl-cloche-tout:hover { background: var(--creme2); }
.wl-cloche-push, .ms-push { display: flex; align-items: center; gap: 12px; margin: 0 12px 10px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(139,92,246,.28), rgba(255,79,163,.18)); font-size: 13px; line-height: 1.4; color: var(--encre2); }
.wl-cloche-push > svg, .ms-push > svg { flex: none; color: var(--citron); }
.wl-cloche-push span, .ms-push span { flex: 1; }
.wl-cloche-push b, .ms-push b { display: block; color: var(--encre); font-size: 14px; }
.wl-cloche-push .principal, .ms-push .principal { flex: none; }
.wl-cloche-push .non, .ms-push .non { flex: none; border: 0; background: none; color: var(--pale); cursor: pointer; padding: 4px; display: grid; }
/* une notification (cloche + boîte) */
.wl-notif { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--encre); text-decoration: none; font-size: 14px; line-height: 1.4; }
.wl-notif:hover { background: var(--creme2); }
.wl-notif.non-lu { background: rgba(139,92,246,.14); }
.wl-notif.non-lu::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.wl-notif-av { position: relative; flex: none; display: inline-flex; }
.wl-notif-av .wl-av { width: 44px; height: 44px; font-size: 18px; border-width: 1.5px; }
.wl-notif-type { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--papier); background: var(--violet); color: #fff; }
.wl-notif-type.t-like { background: var(--rose); } .wl-notif-type.t-live { background: #ff3b5c; } .wl-notif-type.t-abonne { background: #1fb6ff; color: #fff; }
.wl-notif-type.t-mention, .wl-notif-type.t-reponse { background: #13b981; }
.wl-notif-txt { flex: 1; min-width: 0; color: var(--encre2); overflow-wrap: anywhere; }
.wl-notif-txt b { color: var(--encre); }
.wl-notif-txt small { display: block; margin-top: 2px; color: var(--pale); font-size: 12px; }
/* bulles : un message / une notification arrive pendant la navigation */
.wl-bulles { position: fixed; top: 76px; right: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 24px)); pointer-events: none; }
.wl-bulle { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: rgba(34,27,61,.98); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 14px 40px rgba(0,0,0,.5); color: var(--encre); text-decoration: none; transform: translateX(30px); opacity: 0; transition: transform .28s cubic-bezier(.2,1.2,.4,1), opacity .2s; }
.wl-bulle.vu { transform: none; opacity: 1; }
.wl-bulle .wl-notif-type { border-color: rgba(34,27,61,1); }
.wl-bulle-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.wl-bulle-txt b { display: block; font-size: 14px; }
.wl-bulle-txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--encre2); }
@media (max-width: 760px) {
  .wl-ico-nav, .wl-cloche-zone { display: none; }
  .wl-bulles { top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; }
  .wl-bulle { transform: translateY(-24px); }
  .wl-nav-bas a { position: relative; }
  .wl-nav-bas .wl-badge { top: 1px; right: calc(50% - 22px); border-color: rgba(11,8,20,1); }
}

/* ══════════ TÉLÉPHONE « COMME UNE APPLICATION » (30/09/2026) ══════════
   Demande du user : « ça ne doit pas paraître que c'est un site de base ». Sur téléphone on retire tout ce qui
   fait « page web » : contours épais et ombres décalées, fond à pois, pied de page, survols, surlignage au toucher,
   menus déroulants (-> feuilles qui montent du bas), et le live devient un écran plein avec sa flèche retour. */
.wl-retour-live { display: none; }
@media (hover: none) {
  .wl-bouton:hover, .wl-moi:hover, .wl-vignette:hover { transform: none; }
  .wl-bouton:active { transform: scale(.96); }
}
@media (max-width: 760px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
  body::before, .wl-pied { display: none; }
  .wl-barre, .wl-nav-bas, .wl-bouton, .wl-ico-nav, .wl-moi, .ms-onglets, .pf-onglets { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, select { font-size: 16px; }                      /* iOS zoome sur un champ < 16 px */

  /* barre du haut : fine, pleine, sans contour — une barre d'application */
  .wl-barre { min-height: 54px; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 8px; background: var(--creme); border-bottom: 1px solid rgba(255,255,255,.06); }
  .wl-marque b { font-size: 21px; } .wl-marque img { width: 30px; height: 30px; }
  .wl-moi { padding: 0; border: 0; box-shadow: none; background: none; }
  .wl-moi .wl-av { width: 32px; height: 32px; font-size: 14px; border-width: 1.5px; }
  .wl-moi .ico-chevron-down, .wl-moi > svg { display: none; }
  #compte-nav .wl-bouton.principal { display: none; }
  #compte-nav .wl-lien-nav { display: inline-flex; padding: 7px 16px; border-radius: 999px; background: var(--citron); color: var(--sombre); font-weight: 700; font-size: 14px; text-decoration: none; }
  /* menu du compte = feuille qui monte du bas, fond assombri */
  .wl-menu-moi { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 80; min-width: 0; padding: 18px 10px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 0 0 100vmax rgba(5,3,12,.62); animation: wl-feuille .26s cubic-bezier(.2,1,.3,1); }
  .wl-menu-moi::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: rgba(255,255,255,.2); }
  .wl-menu-moi a, .wl-menu-moi button { padding: 14px 14px; font-size: 16px; }
  @keyframes wl-feuille { from { transform: translateY(100%); } }

  /* surfaces plates : c'est l'ombre douce qui détache, pas le trait noir */
  .wl-bouton, .wl-bouton.petit, .wl-bouton.grand { border-width: 0; box-shadow: none; }
  .wl-bouton { background: var(--creme2); }
  .wl-bouton.principal { background: var(--citron); } .wl-bouton.violet { background: var(--violet-plein); } .wl-bouton.encre { background: var(--sombre); }
  .wl-carte, .wl-vignette, .wl-infos { border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  .wl-vignette .wl-image { border-bottom: 0; }
  .wl-toast, .cp-toast, .pf-toast { border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }

  /* panneaux et fenêtres = feuilles du bas */
  .wl-qui-panneau, .wl-mod-panneau, .wl-emojis, .wl-menu-mod { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-height: 72dvh;
    border: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 0 0 100vmax rgba(5,3,12,.55); animation: wl-feuille .26s cubic-bezier(.2,1,.3,1); }
  .wl-emojis-grille { height: 260px; }
  .pf-voile { place-items: end stretch; padding: 0; }
  .pf-modale { width: 100%; max-height: 92dvh; border: 0; border-radius: 22px 22px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: none; animation: wl-feuille .26s cubic-bezier(.2,1,.3,1); }

  /* ── LE LIVE : écran plein. Paysage = vidéo en haut + chat dessous (YouTube) ; vertical = TikTok ── */
  body.page-live { padding-bottom: 0 !important; background: #000; }
  body.page-live > .wl-barre, body.page-live .wl-nav-bas { display: none; }
  body.page-live .wl-page { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: none; padding: 0; }
  body.page-live #vue-chaine { flex: 1; min-height: 0; display: flex; }
  body.page-live .wl-scene, body.page-live .wl-scene.portrait { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; height: auto; }
  body.page-live .wl-colonne { flex: none; }
  body.page-live .wl-ecran { display: block; padding-top: env(safe-area-inset-top); background: #000; }
  body.page-live .wl-lecteur, body.page-live .wl-lecteur.portrait { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  body.page-live .wl-halo { display: none; }
  body.page-live .wl-infos { margin: 0; padding: 8px 12px 8px 2px; gap: 8px; flex-wrap: nowrap; border-radius: 0; box-shadow: none; background: var(--creme); border-bottom: 1px solid rgba(255,255,255,.06); }
  .wl-retour-live { display: inline-grid; place-items: center; flex: none; width: 34px; height: 40px; padding: 0; border: 0; background: none; color: var(--encre); cursor: pointer; }
  body.page-live .wl-avatar { width: 38px; height: 38px; font-size: 16px; border: 0; }
  body.page-live .wl-scene.en-direct .wl-avatar::after { inset: -3px; }
  body.page-live .wl-scene.en-direct .wl-avatar::before { font-size: 8px; bottom: -7px; padding: 0 4px; border-width: 1.5px; }
  body.page-live .wl-qui { min-width: 0; }
  body.page-live .wl-titre-ligne { flex-wrap: nowrap; gap: 6px; }
  body.page-live .wl-infos h1 { min-width: 0; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.page-live .wl-infos h1 a { text-decoration: none; }
  body.page-live .wl-infos p { margin: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.page-live #stat-vues, body.page-live #nb-likes { display: none; }                /* déjà sur la vidéo */
  body.page-live .wl-actions { gap: 6px; }
  body.page-live #b-partager { width: 38px; height: 38px; padding: 0; font-size: 0; gap: 0; }
  body.page-live #b-suivre-chaine { padding: 8px 14px; font-size: 14px; }
  body.page-live .wl-chat { flex: 1; min-height: 0; height: auto; contain: none; border: 0; border-radius: 0; box-shadow: none; background: var(--creme); }
  body.page-live .wl-chat-tete { padding: 6px 14px; border-bottom: 1px solid rgba(255,255,255,.06); background: none; color: var(--encre2); font-size: 13px; }
  body.page-live .wl-chat-tete svg { width: 15px; height: 15px; }
  body.page-live .wl-messages { padding: 10px 14px; gap: 6px; }
  body.page-live .wl-message { font-size: 14.5px; }
  body.page-live .wl-chat-pied { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.06); background: var(--creme); }
  body.page-live .wl-ligne { gap: 6px; align-items: center; }
  body.page-live .wl-champ { border: 0; border-radius: 999px; background: var(--creme2); padding: 10px 16px; }
  body.page-live .wl-champ:focus { box-shadow: 0 0 0 2px var(--violet); }
  body.page-live .wl-emoji-b { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--creme2); }
  body.page-live .wl-ligne .wl-bouton { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
  body.page-live .wl-like { border: 0; }
  body.page-live .wl-invite { border: 0; border-radius: 16px; }

  /* vertical : la vidéo remplit tout, le streamer en haut, le chat par-dessus en bas (TikTok Live) */
  body.page-live .wl-scene.portrait { position: relative; }
  body.page-live .wl-scene.portrait .wl-colonne { position: absolute; inset: 0; }
  body.page-live .wl-scene.portrait .wl-ecran { position: absolute; inset: 0; padding: 0; }
  body.page-live .wl-scene.portrait .wl-lecteur { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  body.page-live .wl-scene.portrait .wl-lecteur video, body.page-live .wl-scene.portrait .wl-gel { object-fit: cover; }
  body.page-live .wl-scene.portrait .wl-infos { position: absolute; left: 0; right: 0; top: 0; z-index: 6; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 26px;
    border: 0; background: linear-gradient(rgba(0,0,0,.6), transparent); }
  body.page-live .wl-scene.portrait .wl-infos, body.page-live .wl-scene.portrait .wl-infos a, body.page-live .wl-scene.portrait .wl-retour-live { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  body.page-live .wl-scene.portrait .wl-infos p { color: rgba(255,255,255,.8); }
  body.page-live .wl-scene.portrait #b-partager { background: rgba(255,255,255,.16); color: #fff; }
  body.page-live .wl-scene.portrait .wl-hud { top: calc(68px + env(safe-area-inset-top)); left: 12px; }
  body.page-live .wl-scene.portrait .wl-son-auto { top: 42%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); padding: 11px 18px 11px 15px; font-size: 15px; }
  body.page-live .wl-scene.portrait .wl-commandes { top: calc(108px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 8px; flex-direction: column; padding: 0; background: none; }
  body.page-live .wl-scene.portrait .wl-commandes #volume, body.page-live .wl-scene.portrait .wl-commandes .wl-espace, body.page-live .wl-scene.portrait #b-theatre { display: none; }
  body.page-live .wl-scene.portrait .wl-qualites { right: calc(100% + 8px); bottom: auto; top: 0; }
  body.page-live .wl-scene.portrait .wl-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 44%; background: none; }
  body.page-live .wl-scene.portrait .wl-chat-tete { display: none; }
  body.page-live .wl-scene.portrait .wl-messages { padding: 0 72px 6px 12px; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
  body.page-live .wl-scene.portrait .wl-messages > :first-child { margin-top: auto; }
  body.page-live .wl-scene.portrait .wl-message { align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 14px; background: rgba(0,0,0,.32); color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
  body.page-live .wl-scene.portrait .wl-message.systeme { align-self: flex-start; background: rgba(139,92,246,.45); color: #fff; }
  body.page-live .wl-scene.portrait .wl-chat-pied { border: 0; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
  body.page-live .wl-scene.portrait .wl-champ, body.page-live .wl-scene.portrait .wl-emoji-b { background: rgba(255,255,255,.16); color: #fff; }
  body.page-live .wl-scene.portrait .wl-champ::placeholder { color: rgba(255,255,255,.7); }
  body.page-live .wl-scene.portrait .wl-invite { background: rgba(0,0,0,.45); color: #fff; }
}
@media (max-width: 760px) {
  body.page-live #vue-chaine { flex-direction: column; }
  body.page-live .wl-scene { width: 100%; min-width: 0; }
  body.page-live .wl-titre-ligne .wl-pastille { display: none; }             /* « hors ligne » est déjà écrit sur l'écran */
}
/* téléphone : les jetons de la DA « autocollant » deviennent ceux d'une application (plats, ombres douces) —
   tout ce qui s'appuie sur --trait / --ombre suit, sans réécrire chaque page */
@media (max-width: 760px) {
  :root { --trait: 1px solid rgba(255,255,255,.07); --ombre: 0 8px 24px rgba(0,0,0,.28); --ombre-g: 0 14px 38px rgba(0,0,0,.38); }
}

/* ── modals maison (30/09/2026) : remplacent alert() / confirm() ── */
.wl-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(5,3,12,.66); animation: wl-modal-voile .16s ease; }
.wl-modal.sort { opacity: 0; transition: opacity .15s; }
.wl-modal-carte { width: 100%; max-width: 400px; display: grid; gap: 12px; padding: 22px 20px 18px; border-radius: 22px; background: var(--papier); color: var(--encre);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); animation: wl-modal-entre .22s cubic-bezier(.2,1,.3,1); }
.wl-modal-titre { font: 800 19px/1.25 var(--titre); }
.wl-modal-carte p { margin: 0; color: var(--encre2); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.wl-modal-boutons { display: flex; gap: 10px; margin-top: 6px; }
.wl-modal-b { flex: 1; padding: 13px 16px; border: 0; border-radius: 999px; background: var(--creme2); color: var(--encre); font: 700 15px var(--titre); cursor: pointer; }
.wl-modal-b:hover { filter: brightness(1.15); }
.wl-modal-b.principal { background: var(--violet-plein); color: #fff; }
.wl-modal-b.danger { background: #e0264b; }                 /* 4,6:1 avec le texte blanc */
.wl-modal-b:focus-visible { outline: 3px solid var(--citron); outline-offset: 2px; }
@keyframes wl-modal-voile { from { opacity: 0; } }
@keyframes wl-modal-entre { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (max-width: 560px) { .wl-modal { place-items: end center; padding: 0; } .wl-modal-carte { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .wl-modal, .wl-modal-carte { animation: none; } }

/* ── mode invité (30/09/2026) : vignettes des invités par-dessus le live (spectateurs, streamer, invités) ── */
.sc-tuiles { position: absolute; z-index: 3; right: 10px; top: 56px; display: grid; grid-template-columns: 1fr; gap: 8px; width: clamp(84px, 22%, 170px); pointer-events: none; }
.sc-tuiles.gauche { right: auto; left: 12px; top: calc(70px + env(safe-area-inset-top)); width: clamp(90px, 27vw, 170px); }
.sc-tuiles.deux { grid-template-columns: 1fr 1fr; width: clamp(150px, 40%, 300px); }
.sc-tuiles.gauche.deux { width: clamp(170px, 50vw, 320px); }
.sc-tuiles:empty { display: none; }
.sc-tuile { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0b0814; pointer-events: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.14); }
.sc-tuile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0814; }
.sc-tuile video.miroir { transform: scaleX(-1); }
.sc-tuile span { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55);
  color: #fff; font: 700 11.5px/1.5 var(--corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tuile .sc-attente { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 12px; text-align: center; padding: 8px; }
.sc-tuile button { position: absolute; right: 5px; top: 5px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
/* bouton « Monter en live » du chat + état de la demande */
.wl-monter { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--creme2); color: var(--encre); cursor: pointer; }
.wl-monter.attente { background: var(--violet); color: #fff; animation: wl-monter-pouls 1.6s ease-in-out infinite; }
@keyframes wl-monter-pouls { 50% { box-shadow: 0 0 0 6px rgba(139,92,246,.25); } }
@media (prefers-reduced-motion: reduce) { .wl-monter.attente { animation: none; } }

/* écran partagé (mode invité) : les cases sont posées par WL.disposerScene ; le calque des invités couvre toute la scène */
.sc-tuiles.partage, .sc-tuiles.gauche.partage, .sc-tuiles.deux.partage { position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; display: block; }
video.sc-case, canvas.sc-case { object-fit: cover !important; }
.sc-tuile.sc-case { aspect-ratio: auto; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7); }

/* signaler (30/09/2026) */
.wl-signal { max-width: 460px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.wl-signal-liste { display: grid; gap: 6px; }
.wl-signal-liste label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--creme2); cursor: pointer; font-weight: 600; font-size: 14.5px; }
.wl-signal-liste label:has(input:checked) { box-shadow: inset 0 0 0 2px #ff2d55; }
.wl-signal-liste input { accent-color: #ff2d55; width: 18px; height: 18px; }
.wl-signal textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--creme); color: var(--encre); font: inherit; resize: vertical; }
.wl-signal-err { min-height: 18px; margin: 0; color: #ff7ab8; font-weight: 700; font-size: 14px; }
.wl-m-signal { border: 0; background: none; color: var(--pale); cursor: pointer; padding: 2px; opacity: 0; transition: opacity .12s; }
.wl-message:hover .wl-m-signal, .wl-m-signal:focus-visible { opacity: 1; }
@media (hover: none) { .wl-m-signal { opacity: .6; } }

/* invitation d'agence : 3 boutons */
.wl-invit-b { flex-wrap: wrap; }
.wl-invit-b .wl-modal-b { flex: 1 1 110px; }

/* ══ audit du 30/09/2026 ══════════════════════════════════════════════════════════════════════════════ */
.wl-toast.erreur { background: var(--rose); color: #fff; }
/* liens légaux : pied de page, menu du compte, encarts */
.wl-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.wl-legal a { color: var(--encre2); text-decoration: none; }
.wl-legal a:hover, .wl-legal a:focus-visible { color: var(--encre); text-decoration: underline; }
.wl-pied .wl-legal { flex: 1 1 100%; order: 3; }
.wl-menu-moi .wl-menu-legal { display: flex; gap: 2px 10px; padding: 8px 12px 2px; margin-top: 4px; border-top: 1px solid var(--creme2); }
.wl-menu-moi .wl-menu-legal a { display: inline; width: auto; padding: 4px 0; font-size: 12.5px; font-weight: 500; color: var(--pale); background: none; }
.wl-menu-moi .wl-menu-legal a:hover { background: none; color: var(--encre); }
/* focus clavier visible partout */
.wl-bouton:focus-visible, .wl-moi:focus-visible, .wl-menu-moi a:focus-visible, .wl-menu-moi button:focus-visible, .wl-ico-nav:focus-visible { outline: 3px solid var(--citron); outline-offset: 2px; }
/* carte « hors ligne » : texte + boutons (réessayer, autres lives) */
.wl-hl-carte #hl-texte { color: rgba(255,255,255,.72); font-size: 14px; }
.wl-hl-carte .wl-bouton { margin-top: 10px; }
@media (max-width: 760px) { .wl-hl-carte #hl-texte { font-size: 13px; } }
/* signaler un invité sur scène (lecteur) */
.sc-tuile .sc-signaler { left: auto; right: 5px; top: 5px; opacity: .75; }
.sc-tuile .sc-signaler:hover, .sc-tuile .sc-signaler:focus-visible { opacity: 1; background: #b3123a; }
.sc-tuile .sc-signaler::after { content: ""; position: absolute; inset: -6px; }          /* zone de toucher de 40 px */
/* fenêtre Signaler / date de naissance : champs du visiteur */
.wl-signal-champ { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.wl-signal-champ input { width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--creme); color: var(--encre); font: inherit; font-size: 16px; }
.wl-signal-champ input:focus-visible, .wl-signal textarea:focus-visible { outline: 2px solid var(--violet); }
.wl-signal-certif { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.wl-signal-certif input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #e0264b; }
.wl-signal-liste input:focus-visible { outline: 2px solid var(--citron); outline-offset: 2px; }
/* iPhone : le clavier recouvre le bas de l'écran -> le live (écran plein) remonte d'autant (--clavier : barre.js) */
@media (max-width: 760px) {
  body.page-live .wl-page { bottom: var(--clavier, 0px); transition: bottom .12s ease-out; }
}
/* zones de toucher (au moins 40 px) */
.ac-voir { position: relative; }
.ac-voir::after { content: ""; position: absolute; inset: -9px -8px; }

/* invitation d'agence : fiche de l'agence + rappel du contrat (audit 30/09/2026) */
.wl-invit-fiche { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 14px; }
.wl-invit-fiche dt { opacity: .7; }
.wl-invit-fiche dd { margin: 0; overflow-wrap: anywhere; }
.wl-invit-pres { font-size: 14px; opacity: .9; max-height: 8.5em; overflow-y: auto; white-space: pre-wrap; }
.wl-invit-contrat { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 201, 79, .12); box-shadow: inset 0 0 0 1px rgba(255, 201, 79, .35); }