/* ===== VARIABLES ===== */
    :root{
      --ico-search:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
      /* Palette claire : du blanc, des gris chauds. La profondeur vient des
         ombres portées, pas d'un fond plus foncé — c'est ce qui manquait au
         mode nuit, où tout était à plat. */
      /* Le fond était presque blanc : les cartes blanches s'y fondaient et
         l'écran paraissait délavé. Il descend d'un cran vers un lavande grisé,
         les cartes restent claires — c'est l'écart entre les deux qui fait la
         profondeur. */
      /* Deuxième descente : le fond passe à un lavande franc et les cartes
         perdent le blanc pur. Ce sont elles qui couvraient le plus de surface,
         donc c'est d'elles que venait l'impression de page blanche. */
      --bg:#E3DCEC;--sidebar:#F6F2FA;--panel:#FCFAFE;--surface:#E7E0F0;
      --border:#D2C8DF;--accent:#FF6B4A;--accent-text:#E0356B;--accent2:#7c3aed;--text:#171221;
      --muted:#615A6F;--faint:#8B849B;--vip-gold:#C2410C;--msg-bg:#F6F2FA;--green:#12A05F;--danger:#dc2626;
      --sh-1:0 1px 2px rgba(23,18,33,.06),0 3px 10px rgba(23,18,33,.07);
      --sh-2:0 5px 14px rgba(23,18,33,.10),0 16px 36px rgba(23,18,33,.10);
      /* Un seul jeu de durées et de courbes pour toute l'interface : sans ça,
         chaque composant avait sa propre vitesse et l'ensemble paraissait
         bricolé plutôt que fini. */
      --t-fast:120ms; --t:180ms; --t-slow:280ms;
      --ease:cubic-bezier(.2,.8,.3,1);
      --ring:0 0 0 3px rgba(255,77,141,.28);
    }
    /* Palette « sombre premium » : noir profond plutôt que bleu nuit, pour que
       les dégradés colorés des salons ressortent et que le texte porte. */
    /* Dégradé signature : rose → orange, comme les applis de rencontre. Il ne
       sert QUE aux actions et aux éléments actifs, jamais au fond d'un texte. */
    :root{
      --grad:linear-gradient(135deg,#FF4D8D 0%,#FF6B4A 52%,#FF8A3D 100%);
      --grad-soft:linear-gradient(135deg,rgba(255,77,141,.16),rgba(255,138,61,.12));
      --pink:#FF4D8D;
    }
    .dark{
      --bg:#08080C;--sidebar:#0F0F16;--panel:#0F0F16;--surface:#17171F;
      --border:#23232E;--accent:#FF7A2F;--accent-text:#FFA76B;--accent2:#a78bfa;--text:#F4F4F7;
      --muted:#8E8EA0;--faint:#5E5E70;--vip-gold:#FFB061;--msg-bg:#08080C;--green:#2DD48A;--danger:#f87171;
    }
    html,body{height:100%;margin:0;}
    body{color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);}
    *{box-sizing:border-box;}
    button,input,select,textarea{font:inherit;}
    /* Navigation au clavier : sans cet anneau, on ne sait jamais où on est. */
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
      outline:none;box-shadow:var(--ring);border-radius:10px;}
    /* Respect du réglage système : personne ne doit subir le mouvement. */
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
        transition-duration:.01ms !important;scroll-behavior:auto !important;}
    }
    ::-webkit-scrollbar{width:4px;height:4px;}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
    ::-webkit-scrollbar-track{background:transparent;}

    /* ===== FIELDS ===== */
    .field{width:100%;background:var(--surface);border:1.5px solid transparent;border-radius:12px;padding:11px 14px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;}
    .field:hover{background:color-mix(in srgb,var(--surface) 70%,var(--panel));}
    /* Sous 16 px, les navigateurs mobiles zooment au focus d'un champ — et le
       zoom reste ensuite (les fameuses scrollbars). 16 px partout sur mobile. */
    @media (max-width:768px){input,select,textarea{font-size:16px !important;}}
    .field:focus{background:var(--panel);border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,77,141,.13);}
    .field::placeholder{color:var(--muted);}
    select.field{cursor:pointer;}

    /* ===== BUTTONS ===== */
    .btn{border-radius:20px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;border:none;
      white-space:nowrap;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
      background var(--t-fast),border-color var(--t-fast),color var(--t-fast);}
    .btn:hover{transform:scale(1.04);}
    /* L'appui enfonce : un bouton qui ne bouge pas au clic donne l'impression
       que rien n'a été pris en compte. */
    .btn:active{transform:scale(.97);}
    .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
    .btn-primary{background:linear-gradient(135deg,var(--accent),#ea580c);color:#fff;box-shadow:0 2px 10px rgba(249,115,22,.22);}
    .btn-secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--border);}
    .btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border);}
    .btn-ghost:hover{color:var(--text);border-color:var(--accent2);background:rgba(124,58,237,.07);opacity:1;}
    .btn-sm{padding:5px 11px;font-size:12px;border-radius:8px;}
    .btn-danger{background:rgba(220,38,38,.1);color:var(--danger);border:1.5px solid rgba(220,38,38,.25);}

    /* Au doigt, un bouton de 30 px se rate. */
    @media(max-width:1023px){
      .btn{min-height:42px;}
      .btn-sm{min-height:38px;padding:8px 13px;}
      #newsBannerClose{min-width:38px;min-height:38px;}
    }

    /* ===== TABS ===== */
    .tab-bar{display:flex;gap:6px;padding:8px 12px;background:var(--sidebar);border-bottom:1.5px solid var(--border);overflow-x:auto;min-height:54px;flex-shrink:0;align-items:center;}
    .tab-bar::-webkit-scrollbar{height:2px;}
    .tab-item{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:38px;flex-shrink:0;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted);border:1.5px solid transparent;white-space:nowrap;max-width:210px;transition:background .13s,color .13s,border-color .13s;}
    .tab-item:hover{background:var(--surface);color:var(--text);}
    .tab-item.active{background:rgba(255,122,47,.11);color:var(--accent-text);border-color:rgba(255,122,47,.34);font-weight:800;}
    .tab-label{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
    .tab-close{font-size:12px;color:var(--muted);width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:4px;}
    .tab-close:hover{background:rgba(220,38,38,.15);color:var(--danger);}
    .tab-unread{width:6px;height:6px;border-radius:50%;background:#ef4444;flex-shrink:0;box-shadow:0 0 4px rgba(239,68,68,.5);}

    /* ===== MESSAGES ===== */
    @keyframes slideIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
    /* Colonne de lecture : depuis que la conversation occupe toute la largeur,
       une ligne de texte pouvait traverser 1600 px — l'œil ne suit plus. */
    .layout-messages > *{max-width:980px;margin-left:auto;margin-right:auto;}
    /* Chaque message est un bloc doux sur fond de panneau, dans une colonne de
       lecture de 820 px : du texte nu sur la trame de points n'accrochait pas
       l'œil. Une salve du même auteur forme un seul bloc (coins raccordés). */
    .layout-messages > .msg-line,.layout-messages > .day-sep{max-width:820px;}
    .msg-line{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-radius:16px;margin:4px auto;
      background:color-mix(in srgb,var(--panel) 82%,transparent);box-shadow:0 1px 2px rgba(23,18,33,.04);
      transition:background .1s;animation:slideIn .14s ease;}
    .msg-line:has(+ .msg-suite){border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding-bottom:3px;margin-bottom:0;}
    .msg-line.msg-suite{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0;}
    .msg-line.msg-suite:has(+ .msg-suite){border-radius:4px;}
    .msg-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;overflow:hidden;
      justify-content:center;font-size:15px;font-weight:800;color:#fff;user-select:none;
      background:linear-gradient(150deg,color-mix(in srgb,var(--c,#6366f1) 92%,#fff),color-mix(in srgb,var(--c,#6366f1) 70%,#101018));
      box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);}
    .msg-ava img{width:100%;height:100%;object-fit:cover;display:block;}
    .msg-main{flex:1;min-width:0;}
    .msg-head{display:flex;align-items:baseline;gap:9px;margin-bottom:3px;flex-wrap:wrap;}
    .msg-nick{font-size:14.5px;font-weight:800;background:none;border:none;padding:0;cursor:pointer;}
    .msg-time{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;}
    .msg-content{display:block;font-size:15px;line-height:1.55;word-break:break-word;
      white-space:pre-wrap;color:var(--text);}
    .msg-edited{font-size:12px;color:var(--muted);font-style:italic;}
    /* Suite d'une salve : l'avatar garde sa place (alignement), l'en-tête part. */
    .msg-line.msg-suite{padding-top:2px;padding-bottom:6px;}
    .msg-line.msg-suite .msg-ava{visibility:hidden;height:0;min-height:0;}
    .msg-line.msg-suite .msg-head{display:none;}
    .msg-actions{flex-shrink:0;display:flex;gap:4px;}
    .msg-line:hover{background:var(--panel);}
    .dark .msg-line:hover{background:var(--surface);}
    .msg-line:hover .msg-actions{opacity:1;}
    .msg-actions{opacity:0;transition:opacity .1s;}
    .mention{background:rgba(249,115,22,.08);border-left:2.5px solid var(--accent);padding-left:6px;}
    @keyframes mFlash{0%{background:rgba(249,115,22,.18);}100%{background:rgba(249,115,22,.06);}}
    .mention-pulse{animation:mFlash .7s ease 1;}
    .vip-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;background:linear-gradient(135deg,rgba(251,146,60,.18),rgba(234,88,12,.12));border:1px solid rgba(251,146,60,.45);color:var(--accent-text);border-radius:4px;padding:0 6px;margin-left:4px;vertical-align:middle;line-height:1.7;letter-spacing:.04em;}
    .dark .vip-badge{color:var(--accent);border-color:rgba(251,146,60,.4);}

    /* ===== CITATION (répondre à un message) ===== */
    .msg-quote{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);border-left:3px solid var(--accent);background:rgba(249,115,22,.07);border-radius:0 5px 5px 0;padding:3px 8px;margin:0 0 3px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
    .msg-quote:hover{background:rgba(249,115,22,.13);}
    .msg-quote-who{font-weight:700;color:var(--accent);}
    .msg-line.flash{animation:flashMsg 1.2s ease-out;}
    @keyframes flashMsg{0%,40%{background:rgba(249,115,22,.22)}100%{background:transparent}}
    #replyBar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(249,115,22,.08);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;margin-bottom:6px;font-size:12px;}

    /* ===== SIDEBAR SECTIONS ===== */
    .section-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);user-select:none;cursor:pointer;transition:color .1s;}
    .section-hdr:hover{color:var(--text);}
    .section-body.closed{display:none;}

    /* ===== ONGLETS DE LA BARRE DE GAUCHE ===== */
    .sidebar-tabs{display:flex;gap:3px;padding:7px 8px;flex-shrink:0;
      background:var(--sidebar);border-bottom:1.5px solid var(--border);}
    .sb-tab{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
      padding:0 6px;min-height:42px;border-radius:11px;font-size:12.5px;font-weight:700;cursor:pointer;
      background:transparent;border:1.5px solid transparent;color:var(--muted);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .13s,color .13s,border-color .13s;}
    .sb-badge{flex-shrink:0;}
    .sb-tab:hover{background:var(--surface);color:var(--text);}
    .sb-tab.active{background:rgba(255,122,47,.11);border-color:rgba(255,122,47,.34);color:var(--accent-text);}
    .sb-badge{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface);
      border:1px solid var(--border);border-radius:20px;padding:0 6px;}
    .sb-tab.active .sb-badge{color:var(--accent-text);}
    .sb-badge-alert{background:#ef4444;color:#fff;border-color:#ef4444;}
    .sb-tab.active .sb-badge-alert{color:#fff;}

    /* ===== LISTE DES MEMBRES ===== */
    .u-hint{font-size:12.5px;color:var(--muted);line-height:1.5;padding:0 12px 8px;}
    .u-sec{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;
      letter-spacing:.08em;padding:9px 10px 4px;}
    .u-sec-n{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;
      background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0 7px;}
    .u-sec-on{color:var(--green);}
    .u-sec-on .u-sec-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
      box-shadow:0 0 0 3px rgba(34,197,94,.18);}
    .u-sec-off{color:#94a3b8;margin-top:8px;border-top:1px solid var(--border);}
    .u-sec-btn{width:100%;background:transparent;border:none;border-top:1px solid var(--border);
      cursor:pointer;text-align:left;font-family:inherit;transition:color .12s;}
    .u-sec-btn:hover{color:var(--text);}
    .u-sec-chev{font-size:11px;width:10px;flex-shrink:0;}

    /* ===== PASTILLES EMOJI (création de salon) ===== */
    .emoji-pick{font-size:19px;line-height:1;width:38px;height:38px;border-radius:10px;cursor:pointer;
      background:var(--surface);border:1.5px solid var(--border);transition:all .12s;}
    .emoji-pick:hover{border-color:var(--accent);}
    .emoji-pick.picked{border-color:var(--accent);background:rgba(249,115,22,.12);}

    /* ===== ÉCRAN DE CHOIX DES SALONS ===== */
    /* Deux poids : les salons où il y a du monde prennent une grande carte,
       les autres tombent en tuiles compactes. Avec 19 salons, une grille où
       tout se vaut ne dit rien à celui qui arrive. */
    .lobby{max-width:1180px;margin:0 auto;padding:20px 28px 28px;}
    /* ── Accueil à hauteur fixe ──────────────────────────────────────
       La page ne défile plus : seule la liste des salons défile, dans sa
       propre zone. Bandeau, recherche et rangée de profils restent en place. */
    /* Sur ordinateur seulement : sur téléphone, figer la hauteur bridait tout
       (liste de salons minuscule, rien ne pouvait défiler) — là, la page défile
       normalement. */
    @media(min-width:1024px){
      .lobby-rooms{display:flex;flex-direction:column;height:100%;padding-bottom:16px;}
      .lobby-rooms > *{flex-shrink:0;}
      .lobby-rooms .slist{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;}
      .lobby-rooms .slist::-webkit-scrollbar{width:8px;}
      .lobby-rooms .slist::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;}
    }
    /* Écrans courts (vieux téléphones, navigateur avec barres) : on rogne
       encore pour que l'accueil tienne sans faire défiler la page. */
    @media(max-height:720px) and (min-width:1024px){
      .lobby-rooms{padding-top:10px;padding-bottom:10px;}
      .lobby-rooms .welc{padding:9px 13px;margin-bottom:9px;border-radius:12px;}
      .lobby-rooms .welc-h{font-size:15px;}
      .lobby-rooms .welc-s{font-size:12px;}
      .lobby-rooms .lobby-hero{margin-bottom:6px;}
      .lobby-rooms .lobby-h{font-size:15.5px;}
      .lobby-rooms .lobby-search{margin-bottom:9px;}
      .lobby-rooms .lobby-search .field{height:38px;}
      .lobby-rooms .slist{min-height:60px;}
      .lobby-rooms .lobby-sec-space{margin-top:9px;}
      .lobby-rooms .prow .pcard{flex:0 0 122px;width:122px;}
      .lobby-rooms .prow .pcard-nm{font-size:12.5px;}
    }
    .lobby-hero{margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
    .lobby-hn{font-size:12px;color:var(--faint);white-space:nowrap;}
    .lobby-hero .lobby-search{margin:0;flex:1 1 200px;max-width:380px;}
    .lobby-hero #lobbyCreateBtn{margin-left:auto;}
    /* Tuiles d'atouts : bord gauche au dégradé signature, halo dans le coin. */
    .atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;}
    /* Sur grand écran, les tuiles prennent la place vide à droite des profils
       en ligne au lieu de pousser la liste des salons dans un ascenseur. */
    @media(min-width:1024px){
      .lobby-bas{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start;margin-top:4px;}
      .lobby-bas .lobby-sec-space{margin-top:10px;}
      .lobby-bas .atouts{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
      .lobby-bas .atout{padding:7px 12px 7px 14px;border-radius:11px;align-items:center;}
      .lobby-bas .atout-ic{width:26px;height:26px;font-size:13px;border-radius:8px;}
      .lobby-bas .atout b{font-size:12px;margin:0 0 1px;}
      .lobby-bas .atout span:not(.atout-ic){font-size:11px;line-height:1.3;}
      .lobby-bas .atout::after{width:70px;height:70px;right:-26px;bottom:-26px;}
    }
    .atout{position:relative;overflow:hidden;display:flex;gap:11px;align-items:flex-start;padding:11px 13px 11px 15px;
      border-radius:14px;background:var(--panel);box-shadow:var(--sh-1);}
    .atout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);}
    .atout::after{content:"";position:absolute;right:-34px;bottom:-34px;width:96px;height:96px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,106,84,.16),transparent 68%);pointer-events:none;}
    .atout-ic{width:32px;height:32px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-size:16px;flex-shrink:0;}
    .atout b{display:block;font-size:12.5px;color:var(--text);margin-bottom:2px;}
    .atout span:not(.atout-ic){font-size:11.5px;color:var(--muted);line-height:1.35;display:block;}
    .mfil{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;}
    .mfil-tog{display:none;}
    .mfil-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
    .mfil-l{width:60px;flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
    .mfil .fpill{height:26px;padding:0 10px;font-size:12px;border-radius:14px;}
    .mfil-reset{align-self:flex-start;margin:3px 0 0 66px;background:none;border:none;padding:0;font:inherit;font-size:12px;
      color:var(--accent-text,var(--accent));cursor:pointer;text-decoration:underline;}
    /* 140 px minimum : en dessous, « Femme · 24 ans » et une ville entière ne
       tiennent plus sans être coupés, et c'est justement ce qu'on veut lire
       sans ouvrir la fiche. */
    .members-page .pgrid,.members-page .user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;}
    .members-page .pcard{border-radius:12px;}
    .members-page .pcard-b{padding:7px 8px 8px;}
    .members-page .pcard-nm{font-size:13px;}
    .members-page .pcard-gen{font-size:11.5px;}
    .members-page .pcard-loc{font-size:11.5px;}
    .members-page .pcard-loc.is-long{font-size:10px;}
    .members-page .pcard-meta{font-size:10.5px;}
    .members-page .pcard-go{width:28px;height:28px;right:6px;bottom:6px;}
    .members-page .pcard-go svg{width:13px;height:13px;}
    .members-page .pcard-vip{font-size:9px;top:6px;left:6px;padding:1px 5px;}
    .members-page .pcard-dot{top:7px;right:7px;width:8px;height:8px;}
    @media(max-width:899px){
      .mfil-tog{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:10px 13px;border-radius:13px;
        background:var(--panel);border:none;box-shadow:var(--sh-1);font:inherit;font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;}
      .mfil-tog svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex-shrink:0;}
      .mfil-tog.on{box-shadow:inset 0 0 0 1.5px var(--pink);}
      .mfil-tog-r{font-size:12px;font-weight:600;color:var(--accent-text);}
      .mfil-tog-chev{margin-left:auto;color:var(--faint);}
      .mfil{display:none;}
      .mfil.is-open{display:flex;}
      .lobby-sec{gap:8px;}
      .lobby-sec-t{font-size:11px;letter-spacing:.07em;white-space:nowrap;}
      .lobby-sec-a{font-size:12px;white-space:nowrap;}
      .mfil-r{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1px;}
      .mfil-r::-webkit-scrollbar{display:none;}
      .mfil .fpill{flex-shrink:0;}
      .mfil-l{width:52px;}
      .members-page .pgrid,.members-page .user-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    }
    .lobby-foot{margin-top:10px;display:flex;align-items:center;gap:12px;font-size:10.5px;font-weight:700;
      letter-spacing:.09em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
    .lobby-foot::before,.lobby-foot::after{content:"";flex:1;height:1px;
      background:linear-gradient(90deg,transparent,var(--border) 30%,var(--border) 70%,transparent);}
    @media(max-width:899px){.atouts{grid-template-columns:1fr;gap:8px;}}
    /* Écrans bas : les tuiles sauteraient sinon la liste dans un ascenseur. */
    @media(max-height:700px) and (min-width:1024px){.lobby-bas{grid-template-columns:1fr;}.atouts{display:none;}}
    /* Un titre de section, pas une accroche : l'utilisateur est déjà chez lui,
       il n'a pas besoin qu'on lui vende l'écran ni qu'on lui explique ce
       qu'est un salon. */
    .lobby-h{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.2;color:var(--text);}
    .lobby-p{display:none;}
    .badge-18{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;letter-spacing:.05em;
      background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.42);color:var(--danger);
      border-radius:5px;padding:1px 6px;margin-left:6px;line-height:1.5;vertical-align:middle;}
    body.lobby-mode .layout-input-area{display:none;}

    .home-tabs-wrap{display:flex;margin-bottom:26px;}
    .home-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;
      background:var(--surface);border:1.5px solid var(--border);}
    .home-tab{display:flex;align-items:center;gap:7px;padding:9px 20px;border-radius:10px;min-height:40px;
      font-size:14px;font-weight:700;cursor:pointer;background:transparent;border:none;color:var(--muted);
      white-space:nowrap;transition:background .15s,color .15s;}
    .home-tab:hover{color:var(--text);}
    .home-tab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.28);}

    .lobby-search{position:relative;max-width:520px;margin:0 0 16px;}
    .lobby-search .field{height:52px;padding-left:46px;font-size:15.5px;border-radius:14px;}
    .lobby-search::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;
      transform:translateY(-50%);pointer-events:none;opacity:.55;
      background:currentColor;color:var(--muted);
      -webkit-mask:var(--ico-search) center/contain no-repeat;mask:var(--ico-search) center/contain no-repeat;}

    .lobby-sec{display:flex;align-items:center;gap:11px;margin:0 0 10px;}
    .lobby-sec::after{content:"";flex:1;height:1px;min-width:24px;
      background:linear-gradient(to right,var(--border),transparent);}
    .lobby-sec-t{font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
    .lobby-sec-a{font-size:13px;color:var(--faint);}
    .lobby-sec-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
      box-shadow:0 0 0 4px rgba(45,212,138,.15);flex-shrink:0;}
    .lobby-sec-space{margin-top:20px;}
    .lobby-vide{text-align:center;color:var(--muted);font-size:14.5px;padding:24px 0;}

    /* ═══ FOND DE PAGE ══════════════════════════════════════════════════
       Le blanc nu faisait vide. Trois halos dégradés très doux, fixes, plus
       une trame de points : ça donne de la matière sans rien coûter (aucun
       canvas, aucune image, du CSS pur) et le contenu flotte dessus sur ses
       cartes blanches. */
    .layout-content{position:relative;}
    .layout-content::before{
      content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
      background:
        radial-gradient(56% 44% at 8% -6%,  rgba(255,77,141,.20), transparent 62%),
        radial-gradient(48% 40% at 96% 6%,  rgba(255,138,61,.18), transparent 60%),
        radial-gradient(60% 46% at 50% 108%,rgba(124,58,237,.16), transparent 62%);
    }
    /* Trame de points : 22 px, très pâle. Elle se voit à peine mais elle
       enlève l'impression de page blanche. */
    .layout-content::after{
      content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
      background-image:radial-gradient(rgba(23,18,33,.09) 1px, transparent 1px);
      background-size:22px 22px;
      -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
      mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
    }
    .dark .layout-content::before{
      background:
        radial-gradient(56% 44% at 8% -6%,  rgba(255,77,141,.16), transparent 62%),
        radial-gradient(48% 40% at 96% 6%,  rgba(255,138,61,.13), transparent 60%),
        radial-gradient(60% 46% at 50% 108%,rgba(124,58,237,.14), transparent 62%);
    }
    .dark .layout-content::after{
      background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    }
    /* Derrière une conversation, la trame fatigue : on la laisse aux pages de choix. */
    body:not(.lobby-mode) .layout-content::after{opacity:.3;}
    /* Le contenu passe au-dessus des deux couches. */
    .layout-drop-zone,.layout-input-area,#backBar,#roomHeader{position:relative;z-index:1;}

    /* ═══ MOUVEMENT ═════════════════════════════════════════════════════
       Ce qui donne l'impression d'une application moderne, ce n'est pas le
       framework : c'est que les choses arrivent au lieu d'apparaître d'un
       coup, et que tout ce qu'on touche réponde. */
    @keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
    @keyframes popIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}

    /* Entrée en cascade : chaque élément d'une liste part 45 ms après le
       précédent. Au-delà du 14e, on n'attend plus — sinon le bas de page
       resterait vide trop longtemps. */
    .lobby > *{animation:riseIn var(--t-slow) var(--ease) backwards;}
    .lobby > *:nth-child(1){animation-delay:0ms;}
    .lobby > *:nth-child(2){animation-delay:45ms;}
    .lobby > *:nth-child(3){animation-delay:90ms;}
    .lobby > *:nth-child(4){animation-delay:135ms;}
    .lobby > *:nth-child(n+5){animation-delay:170ms;}
    .pgrid .pcard{animation:popIn var(--t-slow) var(--ease) backwards;}
    .pgrid .pcard:nth-child(1){animation-delay:60ms;}
    .pgrid .pcard:nth-child(2){animation-delay:105ms;}
    .pgrid .pcard:nth-child(3){animation-delay:150ms;}
    .pgrid .pcard:nth-child(4){animation-delay:195ms;}
    .pgrid .pcard:nth-child(5){animation-delay:240ms;}
    .pgrid .pcard:nth-child(6){animation-delay:285ms;}
    .pgrid .pcard:nth-child(n+7){animation-delay:320ms;}
    .pmlist .pmrow{animation:riseIn var(--t-slow) var(--ease) backwards;}
    .pmlist .pmrow:nth-child(1){animation-delay:40ms;}
    .pmlist .pmrow:nth-child(2){animation-delay:80ms;}
    .pmlist .pmrow:nth-child(3){animation-delay:120ms;}
    .pmlist .pmrow:nth-child(n+4){animation-delay:150ms;}
    .slist .srow{animation:fadeIn var(--t) var(--ease) backwards;}
    .slist .srow:nth-child(n+2){animation-delay:30ms;}
    .slist .srow:nth-child(n+4){animation-delay:60ms;}

    /* Tout ce qui se clique répond au doigt comme à la souris. */
    .srow:active,.pmrow:active,.fpill:active,.mm:active,.nav-btn:active,.hdr-icon:active{transform:scale(.97);}
    .pcard:active{transform:scale(.985);}
    .fpill,.mm,.hdr-icon,.nav-btn,.srow,.pmrow,.pcard{will-change:transform;}

    /* Silhouettes de chargement : le temps que la première poussée du serveur
       arrive, on montrait un écran blanc. */
    @keyframes shimmer{from{background-position:-320px 0;}to{background-position:320px 0;}}
    .skel{border-radius:14px;background:var(--surface);
      background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
      background-size:320px 100%;background-repeat:no-repeat;
      animation:shimmer 1.25s linear infinite;}
    .dark .skel{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);}
    .skel-welc{height:96px;border-radius:20px;margin-bottom:22px;}
    .skel-line{height:19px;width:120px;margin-bottom:16px;border-radius:8px;}
    .skel-list{height:56px;margin-bottom:9px;border-radius:16px;}
    .skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:14px;}
    .skel-card{aspect-ratio:3/4;border-radius:18px;}
    @media(max-width:600px){.skel-grid{grid-template-columns:1fr 1fr;gap:11px;}}

    /* ── Bandeau d'accueil ───────────────────────────────────────────
       Il donne un point d'entrée à la page et occupe le haut, qui n'était
       qu'un titre posé sur du vide. */
    .welc{display:flex;align-items:center;gap:18px;padding:16px 22px;border-radius:18px;margin-bottom:16px;
      background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(255,77,141,.28);}
    .welc-t{flex:1;min-width:0;}
    .welc-h{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .welc-s{font-size:14px;color:rgba(255,255,255,.9);}
    .welc-s b{font-weight:800;color:#fff;}
    .welc-n{flex-shrink:0;text-align:right;font-size:26px;font-weight:800;line-height:1;letter-spacing:-.03em;}
    .welc-n span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:rgba(255,255,255,.8);margin-top:4px;}
    @media(max-width:600px){
      /* Sur téléphone, chaque pixel de hauteur compte : le bandeau tient sur
         une ligne et le compteur de membres passe à la trappe — il est déjà
         sur l'écran de connexion. */
      .welc{padding:11px 15px;border-radius:14px;margin-bottom:12px;gap:10px;}
      .welc-h{font-size:16px;margin-bottom:1px;}
      .welc-s{font-size:12.5px;}
      .welc-n{display:none;}
    }

    /* Rangée horizontale de profils : elle tient sur une hauteur de carte et
       se parcourt au pouce, comme les histoires d'une appli mobile. */
    .prow{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;
      scroll-snap-type:x proximity;scrollbar-width:thin;}
    .prow::-webkit-scrollbar{height:6px;}
    .prow::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;}
    /* 136 px : assez large pour « Femme · 24 ans » et une ville sur deux
       lignes ; en dessous, la fiche ne tenait qu'en la tronquant. */
    .prow .pcard{flex:0 0 140px;width:140px;scroll-snap-align:start;border-radius:14px;}
    .prow .pcard-nm{font-size:13.5px;}
    .prow .pcard-gen{font-size:11.5px;}
    .prow .pcard-loc{font-size:11.5px;}
    .prow .pcard-loc.is-long{font-size:10px;}
    .prow .pcard-meta{font-size:10.5px;}
    .prow .pcard-b{padding:7px 8px 8px;}
    .prow .pcard-go{width:30px;height:30px;right:7px;bottom:7px;}
    .prow .pcard-go svg{width:14px;height:14px;}
    @media(max-width:600px){.prow{gap:9px;}.prow .pcard{flex:0 0 124px;width:124px;}}

    /* ── Cartes de profil ────────────────────────────────────────────
       Registre « app de rencontre » pour la photo, mais fiche complète en
       dessous : pseudo, genre et âge en toutes lettres, ville entière, pays,
       distance, présence. Rien ne se cache derrière un clic ni derrière des
       points de suspension — le texte superposé à la photo ne le permettait
       pas, d'où le bandeau plein sous l'image. */
    .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:14px;margin-bottom:10px;}
    .pgrid > *{min-width:0;}
    .pcard{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:none;border-radius:18px;
      overflow:hidden;cursor:pointer;background:var(--panel);text-align:left;font-family:inherit;
      color:inherit;box-shadow:var(--sh-1);
      transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;}
    .pcard:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-2);}
    .pcard:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
    .pcard.is-off{opacity:.72;}
    /* Sans photo : un fond vivant (halo clair en haut à gauche, couleur de
       genre) et l'initiale dans un médaillon, plutôt qu'une lettre géante
       sur un aplat gris-bleu. La majorité des membres n'a pas de photo :
       c'est ce rendu-là qu'on voit le plus. */
    .pcard-ph{position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:1/1;flex-shrink:0;
      background:
        radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--c) 85%,#fff) 0%,transparent 46%),
        radial-gradient(circle at 82% 92%,color-mix(in srgb,var(--c) 60%,#7c3aed) 0%,transparent 50%),
        linear-gradient(155deg,color-mix(in srgb,var(--c) 62%,#101018),color-mix(in srgb,var(--c) 26%,#101018));}
    .pcard-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
    .pcard-ini{position:absolute;inset:0;margin:auto;width:46%;aspect-ratio:1/1;border-radius:50%;
      display:flex;align-items:center;justify-content:center;font-size:clamp(20px,28cqw,40px);font-weight:800;color:#fff;
      background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.18);
      backdrop-filter:blur(2px);}
    .pcard-ph{container-type:inline-size;}
    .pcard-dot{position:absolute;top:9px;right:9px;width:10px;height:10px;border-radius:50%;
      box-shadow:0 0 0 2.5px rgba(0,0,0,.45);z-index:2;}
    .pcard-vip{position:absolute;top:8px;left:8px;z-index:2;font-size:10px;font-weight:800;
      letter-spacing:.07em;color:#fff;background:var(--grad);border-radius:20px;padding:3px 9px;
      box-shadow:0 3px 10px rgba(255,77,141,.45);}
    /* Bandeau d'infos : chaque ligne passe à la ligne au besoin, jamais de
       troncature. La grille étire les cartes d'une même rangée à la hauteur
       de la plus grande, le fond du bandeau remplit la différence. */
    .pcard-b{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;flex:1;min-width:0;}
    .pcard-nm{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.2;
      overflow-wrap:anywhere;}
    .pcard-nm.is-vip{color:var(--vip-gold);}
    /* Un pseudo long (20 caractères max) rétrécit plutôt que de se couper au
       milieu d'un mot : « Christophe_du_5 / 9 » ne se lit pas. */
    .pcard .pcard-b .pcard-nm.is-long{font-size:11px;letter-spacing:-.03em;}
    .pcard-gen{font-size:12px;font-weight:700;line-height:1.25;}
    .pcard-loc{font-size:12px;font-weight:600;color:var(--text);line-height:1.25;
      overflow-wrap:anywhere;hyphens:auto;}
    .pcard-loc.is-long{font-size:10.5px;letter-spacing:-.01em;}
    .pcard-meta{font-size:11px;font-weight:600;color:var(--muted);line-height:1.25;margin-top:1px;}
    .pcard-meta b{font-weight:700;}
    /* Bouton rond flottant sur la photo : écrire à quelqu'un sans ouvrir sa
       fiche. Sur la photo et non sur le bandeau, pour ne jamais masquer une ville. */
    .pcard-go{position:absolute;right:8px;bottom:8px;z-index:3;width:34px;height:34px;border-radius:50%;
      border:none;cursor:pointer;background:var(--grad);color:#fff;display:flex;align-items:center;
      justify-content:center;box-shadow:0 5px 16px rgba(255,77,141,.5);opacity:0;transform:scale(.8);
      transition:opacity .18s,transform .18s;}
    .pcard:hover .pcard-go{opacity:1;transform:none;}
    @media(hover:none){.pcard-go{opacity:1;transform:none;}}
    .pcard-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
      stroke-linecap:round;stroke-linejoin:round;}
    @media(max-width:600px){
      .pgrid{grid-template-columns:1fr 1fr;gap:11px;}
      .pcard{border-radius:16px;}
    }
    /* Barre latérale (340 px) : la même carte, couchée. Photo à gauche, fiche
       à droite, bouton au bout — tout se lit, rien ne dépasse. */
    /* Un <button> garde une largeur « au contenu » même en display:flex : la
       largeur est donc donnée explicitement, sinon le bouton d'écriture, calé
       à droite, se collait au bout du texte. */
    #usersList .pcard{flex-direction:row;align-items:center;gap:10px;border-radius:12px;padding:7px 8px;
      margin:3px 6px;width:calc(100% - 12px);box-shadow:none;background:transparent;}
    #usersList .pcard:hover{transform:none;background:var(--surface);box-shadow:none;}
    /* La photo perd son positionnement relatif : point, badge et bouton se
       placent par rapport à la carte entière, le bouton peut donc aller au
       bord droit au lieu de couvrir la photo. */
    #usersList .pcard-ph{position:static;width:54px;aspect-ratio:1/1;border-radius:12px;}
    #usersList .pcard-ph img,#usersList .pcard-ini{position:absolute;left:8px;top:7px;width:54px;height:54px;border-radius:12px;inset:auto;margin:0;}
    #usersList .pcard-ini{display:flex;font-size:22px;background:none;box-shadow:none;backdrop-filter:none;aspect-ratio:auto;}
    #usersList .pcard-dot{top:5px;right:auto;left:54px;width:11px;height:11px;box-shadow:0 0 0 2px var(--sidebar);}
    #usersList .pcard-vip{top:52px;left:35px;transform:translateX(-50%);font-size:8px;padding:1px 6px;}
    #usersList .pcard-b{padding:0 30px 0 0;gap:1px;}
    #usersList .pcard-nm{font-size:13.5px;}
    #usersList .pcard-gen{font-size:11.5px;}
    #usersList .pcard-loc{font-size:11.5px;}
    #usersList .pcard-loc.is-long{font-size:10.5px;}
    #usersList .pcard-meta{font-size:10.5px;}
    #usersList .pcard-go{top:50%;bottom:auto;right:8px;transform:translateY(-50%) scale(.8);width:30px;height:30px;}
    #usersList .pcard:hover .pcard-go{transform:translateY(-50%);}
    @media(hover:none){#usersList .pcard-go{transform:translateY(-50%);}}
    #usersList .pcard-go svg{width:14px;height:14px;}

    /* ── Liste des salons ────────────────────────────────────────────
       Une ligne par salon, 46 px : les dix-neuf tiennent à l'écran sans
       défiler. Sur large écran la liste passe en colonnes plutôt que de
       s'étirer sur 1 400 px. */
    .slist{display:grid;grid-template-columns:1fr;gap:0;border-radius:16px;padding:6px;
      background:var(--panel);box-shadow:var(--sh-1);}
    /* Filets entre les lignes : sans eux la liste était un bloc indistinct. */
    .slist .srow{position:relative;}
    .slist .srow::after{content:"";position:absolute;left:51px;right:10px;bottom:0;height:1px;
      background:var(--border);opacity:.7;}
    .slist .srow:hover::after{opacity:0;}
    @media(min-width:900px){
      .slist .srow:nth-last-child(-n+2)::after{display:none;}
    }
    @media(min-width:1400px){
      .slist .srow:nth-last-child(-n+3)::after{display:none;}
    }
    @media(max-width:899px){
      .slist .srow:last-child::after{display:none;}
    }
    @media(min-width:480px){.slist{grid-template-columns:1fr 1fr;}}
    @media(min-width:1400px){.slist{grid-template-columns:1fr 1fr 1fr;}}
    .slist > *{min-width:0;}
    .srow-sep{grid-column:1/-1;padding:10px 10px 3px;font-size:10.5px;font-weight:800;
      letter-spacing:.07em;text-transform:uppercase;color:var(--danger);}
    @media(min-width:1100px){.slist{grid-template-columns:1fr 1fr 1fr;}}
    .srow{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:5px 10px;
      border-radius:10px;cursor:pointer;background:transparent;border:none;text-align:left;
      font-family:inherit;color:inherit;transition:background .12s;}
    .srow:hover{background:var(--surface);}
    .srow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
    /* Fond neutre : les dégradés saturés faisaient guirlande. La couleur du
       salon ne subsiste qu'en trait fin, discrète. */
    .srow-em{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;font-size:15px;line-height:1;object-fit:cover;
      background:var(--surface);border:1px solid hsla(var(--h,25),40%,55%,.35);}
    .srow-nm{font-size:14.5px;font-weight:700;color:var(--text);white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;min-width:0;}
    .srow-meta{margin-left:auto;flex-shrink:0;font-size:12.5px;color:var(--faint);white-space:nowrap;}
    .srow.is-live .srow-meta{color:var(--green);font-weight:700;}
    .srow-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;
      box-shadow:0 0 0 3px rgba(239,68,68,.22);}
    .srow-n{flex-shrink:0;min-width:24px;text-align:center;font-size:12px;font-weight:800;
      color:var(--green);background:rgba(45,212,138,.13);border-radius:20px;padding:2px 7px;}
    /* Lignes fines sur grand écran, et tout le reste de l'accueil resserré :
       dix-neuf salons doivent tenir sans défiler, c'est la liste entière
       qu'on veut lire d'un coup d'œil. Placé après les règles de base pour
       les recouvrir. */
    @media(min-width:1024px){
      .srow{height:24px;min-height:0;padding:0 8px;gap:7px;border-radius:6px;line-height:1.2;}
      .srow-nm .badge-18{line-height:1.2;}
      .srow-em{width:16px;height:16px;font-size:10px;border-radius:4px;}
      .srow-nm{font-size:12px;font-weight:600;}
      .srow-nm .badge-18{font-size:9px;padding:0 4px;margin-left:5px;}
      .srow-meta{font-size:11px;}
      .srow-n{min-width:20px;font-size:10.5px;padding:0 4px;}
      .srow-dot{width:6px;height:6px;}
      .slist .srow::after{left:31px;right:8px;}
      .srow-sep{padding:8px 9px 2px;font-size:10px;}
      .lobby-rooms .slist{min-height:0;padding:4px;}
      .lobby-rooms .welc{padding:10px 16px;margin-bottom:10px;border-radius:14px;}
      .lobby-rooms .welc-h{font-size:16px;}
      .lobby-rooms .welc-s{font-size:12.5px;}
      .lobby-rooms .lobby-hero{margin-bottom:6px;}
      .lobby-rooms .lobby-search{margin-bottom:8px;}
      .lobby-rooms .lobby-search .field{height:36px;font-size:14px;}
      .lobby-rooms .lobby-sec{margin-bottom:6px;}
      .lobby-rooms .prow .pcard{flex:0 0 122px;width:122px;}
      .lobby-rooms .prow .pcard-nm{font-size:12px;}
    }

    .lobby-alt{display:flex;align-items:center;gap:15px;margin-top:44px;padding:19px 21px;border-radius:17px;
      background:var(--panel);border:1.5px dashed var(--border);}

    /* Conservé : la liste des membres en pleine largeur (onglet « Membres ») */
    .user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:2px 10px;margin-bottom:8px;}
    .user-grid .u-row{border-radius:10px;}
    .ug-city{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;text-transform:uppercase;
      letter-spacing:.08em;color:var(--muted);margin:14px 2px 5px;}
    .casc-r,.casc-c{display:flex;align-items:center;gap:7px;width:100%;background:transparent;
      border:none;cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
    .casc-r{padding:9px 10px;font-size:12px;font-weight:800;text-transform:uppercase;
      letter-spacing:.06em;color:var(--muted);border-top:1px solid var(--border);}
    .casc-r:hover,.casc-c:hover{color:var(--text);background:var(--surface);}
    .casc-c{padding:7px 10px 7px 22px;font-size:12.5px;font-weight:700;color:var(--muted);}
    .casc-chev{font-size:11.5px;width:10px;flex-shrink:0;opacity:.8;}
    .casc-n{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);text-transform:none;
      letter-spacing:0;background:var(--surface);padding:1px 7px;border-radius:6px;}
    .casc-r:hover .casc-n,.casc-c:hover .casc-n{background:var(--panel);}
    .casc-me{font-size:11.5px;background:rgba(217,119,6,.16);color:var(--accent-text);padding:1px 6px;
      border-radius:5px;text-transform:none;letter-spacing:0;font-weight:700;}
    .casc-users{padding-left:10px;}
    .casc-empty{padding:10px 12px;font-size:12.5px;color:var(--muted);text-align:center;}
    .casc-autres{padding:7px 10px 3px 22px;font-size:12px;font-weight:700;text-transform:uppercase;
      letter-spacing:.05em;color:var(--muted);opacity:.75;}
    .casc-titre{padding:14px 10px 5px;font-size:12px;font-weight:800;text-transform:uppercase;
      letter-spacing:.07em;color:var(--muted);border-top:1px solid var(--border);margin-top:6px;}
    .ug-me{font-size:11.5px;background:rgba(217,119,6,.16);color:var(--accent-text);padding:1px 6px;
      border-radius:5px;text-transform:none;font-weight:700;border:1px solid rgba(253,230,138,.5);}
    .lobby-sec-btn{width:100%;background:transparent;border:none;cursor:pointer;font-family:inherit;
      text-align:left;padding:0;margin:20px 2px 10px;}
    .lobby-sec-btn:hover .lobby-sec-t{color:var(--accent-text);}
    .room-count{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;
      white-space:nowrap;color:var(--muted);background:var(--surface);border:1px solid var(--border);
      border-radius:20px;padding:3px 10px;}
    .room-count.is-live{color:var(--green);border-color:rgba(45,212,138,.42);background:rgba(45,212,138,.12);}

    @media(max-width:600px){
      /* La barre du haut débordait de ~17 px à 390 px (mesuré) : marges serrées
         et boutons réduits à leur icône, sinon défilement latéral sur téléphone. */
      .layout-body > header{padding:0 8px !important;gap:6px !important;}
      #membresPill{display:none !important;}
      .hdr-label{display:none;}
      #headerVipBtn{padding:0 10px !important;margin-right:2px !important;}
      #settingsBtn{padding:0 10px !important;}
      .lobby{padding:12px 14px 14px;}
      .lobby-hero{margin-bottom:8px;}
      .lobby-h{font-size:17px;}
      .lobby-p{font-size:14.5px;}
      .lobby-search{margin-bottom:12px;}
      .lobby-search .field{height:42px;font-size:14px;}
      .lobby-sec{margin-bottom:8px;}
      .lobby-sec-space{margin-top:14px;}
      .srow{height:30px;min-height:0;padding:0 9px;gap:8px;line-height:1.2;}
      .srow-nm .badge-18{line-height:1.2;}
      .srow-em{width:20px;height:20px;font-size:11px;border-radius:6px;}
      .srow-nm{font-size:12.5px;}
      .srow-nm .badge-18{font-size:9px;padding:0 4px;}
      .srow-meta{font-size:11.5px;}
      .slist .srow::after{left:40px;}
      .prow{padding-bottom:4px;}
      .lobby-sec{margin-bottom:12px;}
      .lobby-sec-space{margin-top:30px;}
      /* Une carte par ligne : à deux colonnes le nom se tronquait et la zone
         tactile devenait trop courte. */
      .lobby-live,.lobby-quiet{grid-template-columns:1fr;}
      .lcard{padding:17px;border-radius:18px;}
      .lcard-ico{width:50px;height:50px;font-size:25px;}
      .lcard-name{font-size:18px;}
      .home-tabs{width:100%;}
      .home-tab{flex:1;justify-content:center;padding:10px 12px;}
      .lobby-alt{flex-wrap:wrap;margin-top:30px;}
      .lobby-alt .btn{width:100%;}
    }

    /* ===== LISTE DES SALONS (colonne de gauche) ===== */
    .room-btn{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:0 8px;border-radius:11px;
      cursor:pointer;color:var(--muted);background:transparent;border:none;width:calc(100% - 16px);
      text-align:left;transition:background .12s,color .12s;min-height:46px;}
    .room-btn.room-loading{opacity:.5;pointer-events:none;}
    .room-btn:hover{background:var(--surface);color:var(--text);}
    .room-btn.active{background:rgba(255,122,47,.12);color:var(--accent-text);}
    .rb-ico{font-size:17px;line-height:1;flex-shrink:0;width:24px;text-align:center;}
    .rb-body{flex:1;min-width:0;}
    .rb-name{display:block;font-size:14px;font-weight:600;color:inherit;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .room-btn.active .rb-name{font-weight:800;}
    .rb-meta{display:block;font-size:12px;color:var(--faint);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .rb-meta.is-live{color:var(--green);font-weight:700;}
    .rb-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;
      box-shadow:0 0 0 3px rgba(239,68,68,.22);}
    /* Repli des salons adultes : ils ne se mêlent pas au reste de la liste. */
    .rb-adult{display:flex;align-items:center;gap:9px;width:calc(100% - 16px);margin:8px 8px 4px;
      padding:9px 12px;border-radius:11px;cursor:pointer;background:transparent;
      border:1px dashed var(--border);color:var(--muted);font-family:inherit;font-size:13px;
      font-weight:700;text-align:left;transition:color .12s,border-color .12s;}
    .rb-adult:hover{color:var(--danger);border-color:rgba(220,38,38,.4);}
    .rb-adult-chev{font-size:11px;width:11px;flex-shrink:0;}
    .rb-adult-n{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--surface);
      border-radius:20px;padding:1px 8px;}

    /* ===== USER ROWS ===== */
    .u-row,.user-row-btn{display:flex;align-items:center;gap:10px;padding:7px 12px;width:100%;background:none;border:none;cursor:pointer;text-align:left;transition:background .1s;}
    .u-row:hover,.user-row-btn:hover{background:var(--surface);}
    /* Corbeille des conversations : discrète au repos, franche au survol. */
    .conv-del{opacity:0;transition:opacity .12s,color .12s;}
    .user-row:hover .conv-del,.conv-del:focus-visible{opacity:1;}
    .conv-del:hover{color:#ef4444 !important;}
    @media (hover:none){.conv-del{opacity:.55;}}
    .u-ava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;border:1.5px solid;}
    .u-info{flex:1;min-width:0;}
    .u-name{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;}
    .u-sub{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .u-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--sidebar);}

    /* ===== FILTER PILLS ===== */
    .filter-btn{font-size:12px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--muted);transition:all .15s;font-weight:500;}
    .filter-btn:hover{border-color:var(--accent);color:var(--accent);}
    .filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}

    /* ===== MODALS ===== */
    .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);overflow-y:auto;}
    .modal-box{width:100%;max-width:440px;background:var(--panel);border:none;border-radius:22px;overflow:hidden;box-shadow:0 24px 70px rgba(23,18,33,.24);}
    @media(max-width:600px){.modal-bg{align-items:flex-start;padding:10px;}.modal-box{border-radius:14px;max-width:100%;}
      /* 16px = seuil sous lequel le navigateur mobile zoome automatiquement au
         focus d'un champ (et la page reste zoomée : modales « coupées », etc.) */
      .field,#chatInput,input,select,textarea{font-size:16px;}}
    .hidden{display:none !important;}

    /* Bloc de contenu indexable de l'accueil : dans le DOM tant que le visiteur
       n'est pas entré dans le chat, retiré dès qu'il y entre. La modale d'accueil
       passe par-dessus, d'où le blocage du défilement de fond. */
    #seoIntro .seo-stats{font-weight:700;color:var(--accent-text,var(--accent));}
    #seoIntro .seo-stats:empty{display:none;}
    #seoIntro{max-width:860px;margin:0 auto;padding:32px 20px 64px;color:var(--text);line-height:1.7;}
    #seoIntro h1{font-size:1.8rem;color:#f59e0b;margin-bottom:12px;}
    #seoIntro h2{font-size:1.25rem;margin:28px 0 10px;}
    #seoIntro p{margin-bottom:12px;}
    #seoIntro .lead{font-size:1.05rem;}
    #seoIntro ul,#seoIntro ol{margin:0 0 16px 22px;}
    #seoIntro li{margin-bottom:6px;}
    #seoIntro a{color:var(--accent-text);}
    #loginScreen.hidden ~ #seoIntro{display:none;}
    body:has(#loginScreen:not(.hidden)){overflow:hidden;}
    .modal-hdr{padding:16px 20px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
    /* ── Fenêtre profil ──────────────────────────────────────────────
       Une carte de soi en haut, puis des sections nommées et des
       interrupteurs : c'était un long formulaire de cases à cocher. */
    /* max-height en % de la modale-fond (fixed, inset:0), pas en vh : sur
       téléphone 100vh = écran barre d'adresse cachée, donc le pied avec le
       bouton « Enregistrer » sortait de l'écran (2026-09-04). */
    .modal-box.pf{max-width:480px;display:flex;flex-direction:column;max-height:100%;}
    .modal-box.pf > .modal-hdr,.pf-foot{flex-shrink:0;}
    .pf-body{display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding:16px 18px 18px;}
    /* overflow:hidden sur la carte de soi ramène son min-height à 0 : sans ça,
       la colonne défilante l'écrasait à une bande de 30 px. */
    .pf-body > *{flex-shrink:0;}
    .pf-hero{position:relative;display:flex;align-items:center;gap:16px;padding:18px 18px 18px 16px;border-radius:20px;overflow:hidden;
      color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c,#6366f1) 80%,#fff),color-mix(in srgb,var(--c,#6366f1) 55%,#101018));}
    .pf-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 10% 100%,rgba(0,0,0,.18),transparent 50%);}
    .pf-ava{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;flex-shrink:0;border:none;padding:0;cursor:pointer;
      background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 8px 24px rgba(0,0,0,.22);
      display:grid;place-items:center;font-size:36px;font-weight:800;color:#fff;font-family:inherit;overflow:visible;transition:transform .2s var(--ease);}
    .pf-ava:hover{transform:scale(1.04);}
    .pf-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
    .pf-ava-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--panel);color:var(--text);
      display:grid;place-items:center;font-size:14px;box-shadow:0 3px 10px rgba(0,0,0,.25);}
    .pf-ava-cam svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
    .pf-id{position:relative;z-index:1;min-width:0;flex:1;}
    .pf-nm{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .pf-nm .vip-badge{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff;}
    .pf-meta{font-size:13px;font-weight:600;opacity:.92;margin-top:3px;line-height:1.35;}
    .pf-bio{font-size:12.5px;opacity:.85;margin-top:6px;line-height:1.4;font-style:italic;}
    .pf-pills{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
    .pf-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.2);backdrop-filter:blur(3px);}
    .pf-hint{font-size:11.5px;color:var(--muted);text-align:center;margin:-6px 0 -4px;line-height:1.4;}
    .pf-lien{background:none;border:none;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer;}
    .pf-sec{display:flex;flex-direction:column;gap:9px;padding:14px 14px 15px;border-radius:16px;background:var(--surface);}
    .dark .pf-sec{background:rgba(255,255,255,.04);}
    .pf-sec-t{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:1px;}
    .pf-sec .field{background:var(--panel);}
    .pf-lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:2px 0 -3px 2px;}
    .pf-lbl em{font-style:normal;font-weight:600;color:var(--accent-text);}
    .pf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .pf-color{display:flex;align-items:center;gap:9px;cursor:pointer;position:relative;padding:8px 12px;}
    .pf-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
    .pf-color-sw{width:26px;height:26px;border-radius:50%;background:var(--c,#6366f1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 1px 4px rgba(0,0,0,.2);flex-shrink:0;}
    .pf-color-t{font-size:14px;color:var(--text);}
    .pf-inline{display:flex;gap:8px;align-items:center;}
    .pf-inline .field{flex:1;min-width:0;}
    .pf-inline .btn{flex-shrink:0;}
    .pf-inline input[type=file]{padding:8px 10px;font-size:12.5px;}
    .pf-msg{font-size:12px;color:var(--muted);min-height:0;}
    .pf-msg:empty{display:none;}
    .pf-p{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0;}
    .pf-sec-acc{background:linear-gradient(135deg,rgba(255,77,141,.08),rgba(255,138,61,.08));box-shadow:inset 0 0 0 1.5px rgba(255,107,74,.25);}
    .pf-gratuit,.pf-vip-tag{font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:10px;background:var(--grad);color:#fff;}
    /* Interrupteurs : la case à cocher garde son id, elle est juste redessinée. */
    .sw{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:13px;background:var(--panel);cursor:pointer;}
    .sw-t{display:flex;flex-direction:column;gap:1px;min-width:0;}
    .sw-t b{font-size:13.5px;font-weight:700;color:var(--text);}
    .sw-t span{font-size:11.5px;color:var(--muted);line-height:1.35;}
    .sw input{position:absolute;opacity:0;width:0;height:0;}
    .sw-k{position:relative;flex-shrink:0;width:44px;height:26px;border-radius:13px;background:var(--border);transition:background .2s;}
    .sw-k::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease);}
    .sw input:checked + .sw-k{background:var(--grad);}
    .sw input:checked + .sw-k::after{transform:translateX(18px);}
    .sw input:focus-visible + .sw-k{outline:3px solid var(--pink);outline-offset:2px;}
    .pf-det{border-radius:14px;background:var(--surface);overflow:hidden;}
    .dark .pf-det{background:rgba(255,255,255,.04);}
    .pf-det summary,.pf-det-btn{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:700;font-size:13.5px;color:var(--text);cursor:pointer;list-style:none;
      width:100%;border:none;background:none;font-family:inherit;text-align:left;}
    .pf-det summary::-webkit-details-marker{display:none;}
    .pf-det-n{color:var(--muted);font-weight:600;font-size:12px;}
    .pf-det-alerte{background:#ef4444;color:#fff;border-radius:9px;padding:1px 7px;font-size:11.5px;font-weight:800;}
    .pf-det-chev{margin-left:auto;color:var(--faint);font-size:14px;transition:transform .2s;}
    .pf-det[open] summary .pf-det-chev{transform:rotate(180deg);}
    .pf-foot{padding:12px 18px 14px;border-top:1.5px solid var(--border);background:var(--panel);}
    @media(max-width:600px){.pf-hero{padding:14px;gap:12px;}.pf-ava{width:72px;height:72px;font-size:30px;}.pf-nm{font-size:18px;}}
    .modal-body{padding:20px;}

    /* ===== MISC ===== */
    #emojiPicker{position:fixed;z-index:300;background:var(--panel);border:1.5px solid var(--border);border-radius:14px;padding:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);width:280px;}
    #emojiPicker .ep-tabs{display:flex;gap:4px;margin-bottom:8px;border-bottom:1.5px solid var(--border);padding-bottom:6px;}
    #emojiPicker .ep-tab{background:none;border:none;cursor:pointer;font-size:18px;padding:3px 6px;border-radius:6px;opacity:.5;transition:all .1s;}
    #emojiPicker .ep-tab.active,#emojiPicker .ep-tab:hover{opacity:1;background:var(--surface);}
    #emojiPicker .ep-grid{display:flex;flex-wrap:wrap;gap:2px;max-height:180px;overflow-y:auto;}
    #emojiPicker .ep-emoji{background:none;border:none;cursor:pointer;font-size:22px;padding:4px;border-radius:6px;transition:background .1s;line-height:1;}
    #emojiPicker .ep-emoji:hover{background:var(--surface);}
    #dropHint{display:none;position:absolute;inset:8px;z-index:20;border:2px dashed var(--accent2);border-radius:14px;background:rgba(124,58,237,.06);align-items:center;justify-content:center;color:var(--accent2);font-weight:700;}
    #dropHint.active{display:flex;}
    .msg-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
    .reaction-btn{font-size:12px;padding:2px 7px;border-radius:20px;border:1.5px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;transition:all .12s;}
    .reaction-btn:hover,.reaction-btn.mine{border-color:var(--accent2);background:rgba(124,58,237,.08);color:var(--accent2);}
    .user-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;}
    .menu-item{display:block;width:100%;text-align:left;padding:9px 14px;border:none;background:none;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;border-radius:8px;transition:background .12s;}
    .menu-item:hover{background:var(--surface);}
    .menu-danger{color:var(--danger);}
    .menu-danger:hover{background:rgba(220,38,38,.1);}

    /* ===== FORMULAIRE DE CONNEXION ===== */
    /* Des libellés au-dessus des champs plutôt que des placeholders : ceux-ci
       disparaissaient à la saisie, et « Code postal (5 chiffres) » se coupait
       en plein mot dans un champ de cette largeur. */
    .lf{display:flex;flex-direction:column;gap:4px;}
    .lf label{font-size:12.5px;font-weight:700;color:var(--muted);}
    .lf .field{height:46px;font-size:16px;border-radius:13px;}
    .lf-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .lf-id{display:flex;flex-direction:column;gap:10px;}
    .lf-hint{font-size:12px;color:var(--faint);line-height:1.45;margin-top:-2px;}
    .lf-cgu{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:9px 11px;border-radius:13px;
      background:var(--surface);border:1.5px solid var(--border);font-size:12.5px;color:var(--muted);line-height:1.4;}
    #loginScreen .modal-body > :not([hidden]) ~ :not([hidden]){margin-top:10px;}
    /* Sur ordinateur, la fenêtre d'accueil doit tenir sans défilement, y
       compris sur un portable 1366×768 avec la barre du navigateur (~650 px
       utiles) : elle faisait 711 px. Pseudo, âge et genre passent sur une
       seule ligne. */
    @media(min-width:601px){
      #loginScreen .modal-box{max-width:440px;}
      #loginScreen .modal-hdr{padding:12px 20px;}
      #loginScreen .modal-body{padding:16px 20px;}
      .lf-id{display:grid;grid-template-columns:1.35fr .9fr 1fr;gap:10px;}
      .lf-id .lf-two{display:contents;}
      .lf .field{font-size:15px;}
    }
    .lf-cgu input{width:22px;height:22px;flex-shrink:0;margin:0;accent-color:var(--accent);cursor:pointer;}

    /* ===== BANDEAU D'ANNONCE ===== */
    /* Il était en bleu codé en dur : hors charte, et une barre blanche criarde
       sur le thème sombre. */
    #newsBanner{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);}
    /* Sur téléphone il mangeait 54 px sur les 580 disponibles, pour une
       annonce promotionnelle. Il reste sur ordinateur. */
    @media(max-width:1023px){#newsBanner{display:none !important;}}
    #newsBannerMsg{font-size:13px;line-height:1.4;color:var(--muted);font-weight:600;}
    #newsBanner.is-clickable #newsBannerMsg{cursor:pointer;}
    #newsBanner.is-clickable #newsBannerMsg:hover{text-decoration:underline;}
    #newsBannerClose{flex-shrink:0;background:none;border:none;color:var(--accent-text);font-size:15px;
      line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px;opacity:.7;transition:opacity .12s,background .12s;}
    #newsBannerClose:hover{opacity:1;background:rgba(255,122,47,.14);}

    /* ═══ VISIONNEUSE ═══════════════════════════════════════════════════ */
    /* Médias dans le fil : en grand, largeur du message, hauteur bornée à
       l'écran pour qu'une photo verticale ne soit pas un mur. */
    .msg-media{margin-top:6px;max-width:640px;}
    .msg-media img,.msg-media video{display:block;width:auto;max-width:100%;max-height:70vh;border-radius:12px;
      border:1.5px solid var(--border);cursor:zoom-in;object-fit:contain;background:var(--surface);}
    .msg-media video{width:100%;background:#000;}
    .msg-media .media-expiree{display:none;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;
      background:var(--surface);border:1.5px solid var(--border);color:var(--muted);font-size:12.5px;font-weight:600;}
    .msg-media.is-expiree img{display:none;}
    .msg-media.is-expiree .media-expiree{display:inline-flex;}
    @media(max-width:600px){.msg-media img,.msg-media video{max-height:60vh;}}
    #lightbox{position:fixed;inset:0;z-index:980;display:flex;flex-direction:column;background:rgba(6,5,10,.94);
      -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn var(--t) var(--ease);}
    #lightbox.hidden{display:none;}
    .lb-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-shrink:0;color:#fff;
      padding-top:max(10px,env(safe-area-inset-top));}
    .lb-info{font-size:13px;color:rgba(255,255,255,.7);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .lb-actions{margin-left:auto;display:flex;gap:8px;}
    .lb-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:11px;border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;
      transition:background var(--t-fast),transform var(--t) var(--ease);}
    .lb-btn:hover{background:rgba(255,255,255,.16);} .lb-btn:active{transform:scale(.96);}
    .lb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
    .lb-close{width:38px;padding:0;justify-content:center;}
    .lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:8px;
      touch-action:pinch-zoom;}
    #lightboxImg,#lightboxVideo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;
      background:#000;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-in;user-select:none;}
    #lightboxVideo{width:min(100%,1280px);aspect-ratio:16/9;cursor:default;}
    /* Zoom : l'image passe à sa taille réelle et la scène défile. */
    #lightbox.is-zoom .lb-stage{align-items:flex-start;justify-content:flex-start;}
    #lightbox.is-zoom #lightboxImg{max-width:none;max-height:none;cursor:zoom-out;border-radius:0;}
    @media(max-width:600px){.lb-btn span{display:none;}.lb-btn{padding:0 11px;}.lb-bar{padding:8px 10px;}}

    /* ═══ APPELS VIDÉO ══════════════════════════════════════════════════
       La fenêtre d'appel est toujours sombre, quel que soit le thème : de la
       vidéo se regarde sur du noir. Les jetons du site ne servent qu'aux
       accents. */
    :root{--cw-bg:#0C0B12;--cw-panel:#16151F;--cw-line:rgba(255,255,255,.09);--cw-ink:#F4F4F7;--cw-muted:#9A97AA;}

    /* ── Appel entrant ──────────────────────────────────────────────── */
    #incomingCallModal{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:960;
      width:min(440px,calc(100vw - 24px));display:flex;align-items:center;gap:14px;padding:14px 16px;
      border-radius:20px;background:var(--cw-panel);color:var(--cw-ink);border:1px solid var(--cw-line);
      box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
      animation:icIn .32s var(--ease) backwards;}
    @keyframes icIn{from{opacity:0;transform:translate(-50%,-14px);}to{opacity:1;transform:translate(-50%,0);}}
    .ic-ava{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
      font-weight:800;font-size:20px;color:#fff;background:var(--grad);overflow:hidden;
      animation:icPulse 1.6s ease-in-out infinite;}
    .ic-ava img{width:100%;height:100%;object-fit:cover;}
    @keyframes icPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,141,.55);}60%{box-shadow:0 0 0 12px rgba(255,77,141,0);}}
    .ic-body{flex:1;min-width:0;}
    .ic-title{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cw-muted);}
    .ic-name{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .ic-sub{font-size:12.5px;color:var(--cw-muted);margin-top:2px;}
    .ic-actions{display:flex;gap:8px;flex-shrink:0;}
    .ic-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;
      justify-content:center;color:#fff;transition:transform var(--t) var(--ease),filter var(--t);}
    .ic-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
    .ic-btn:hover{transform:scale(1.08);} .ic-btn:active{transform:scale(.95);}
    .ic-reject{background:#E5484D;} .ic-audio{background:#2C2B36;border:1px solid var(--cw-line);} .ic-accept{background:#12A05F;}
    @media(max-width:520px){
      #incomingCallModal{flex-wrap:wrap;padding:14px;}
      .ic-actions{width:100%;justify-content:flex-end;}
    }

    /* ── Fenêtre d'appel ────────────────────────────────────────────── */
    #callModal{position:fixed;right:20px;bottom:20px;z-index:950;width:380px;min-width:260px;min-height:220px;
      display:flex;flex-direction:column;background:var(--cw-bg);color:var(--cw-ink);border-radius:20px;
      overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
      user-select:none;touch-action:none;}
    #callModal.is-full{left:0 !important;top:0 !important;right:0 !important;bottom:0 !important;
      width:100vw !important;height:100dvh !important;border-radius:0;}
    #callModal.is-dragging{transition:none;opacity:.96;}
    .cw-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;flex-shrink:0;
      background:var(--cw-panel);border-bottom:1px solid var(--cw-line);cursor:grab;}
    #callModal.is-dragging .cw-head{cursor:grabbing;}
    .cw-headtxt{flex:1;min-width:0;}
    .cw-title{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .cw-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cw-muted);}
    .cw-timer{font-variant-numeric:tabular-nums;color:var(--cw-ink);font-weight:700;}
    .cw-net{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0;margin-right:4px;}
    .cw-net i{width:4px;border-radius:1px;background:rgba(255,255,255,.18);}
    .cw-net i:nth-child(1){height:5px;} .cw-net i:nth-child(2){height:9px;} .cw-net i:nth-child(3){height:14px;}
    .cw-net[data-q="1"] i:nth-child(-n+1),.cw-net[data-q="2"] i:nth-child(-n+2),.cw-net[data-q="3"] i{background:#2DD48A;}
    .cw-net[data-q="1"] i:nth-child(1){background:#F5A524;}
    .cw-hbtn{width:32px;height:32px;border-radius:9px;border:none;cursor:pointer;flex-shrink:0;
      background:rgba(255,255,255,.06);color:var(--cw-muted);display:flex;align-items:center;justify-content:center;
      transition:background var(--t-fast),color var(--t-fast);}
    .cw-hbtn:hover{background:rgba(255,255,255,.12);color:var(--cw-ink);}
    .cw-hbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

    .cw-video{position:relative;flex:1;min-height:0;background:#000;overflow:hidden;}
    #remoteVideo{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
    #callModal:not(.is-full) .cw-video{aspect-ratio:4/3;}
    #callModal.is-full #remoteVideo{object-fit:contain;}
    .cw-remoteoff{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:10px;color:var(--cw-muted);font-size:13px;font-weight:600;background:radial-gradient(60% 60% at 50% 40%,#1E1C2A,#0C0B12);}
    .cw-remoteoff-ava{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:30px;font-weight:800;color:#fff;background:var(--grad);overflow:hidden;}
    .cw-remoteoff-ava img{width:100%;height:100%;object-fit:cover;}
    .cw-local{position:absolute;right:10px;bottom:10px;width:28%;min-width:84px;max-width:180px;aspect-ratio:3/4;
      border-radius:12px;overflow:hidden;background:#111;border:2px solid rgba(255,255,255,.22);
      box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:grab;touch-action:none;transition:left .2s var(--ease),top .2s var(--ease),right .2s var(--ease),bottom .2s var(--ease);}
    .cw-local.is-dragging{transition:none;cursor:grabbing;}
    #localVideo{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);}
    #localVideo.no-mirror{transform:none;}
    .cw-localoff{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1A1926;color:var(--cw-muted);}
    .cw-localoff svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .cw-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      background:rgba(12,11,18,.72);backdrop-filter:blur(4px);z-index:3;}
    .cw-overlay-txt{padding:12px 18px;border-radius:14px;background:var(--cw-panel);border:1px solid var(--cw-line);
      font-size:14px;font-weight:700;text-align:center;max-width:80%;line-height:1.5;}

    .cw-controls{display:flex;justify-content:center;align-items:center;gap:10px;padding:12px;flex-shrink:0;
      background:var(--cw-panel);border-top:1px solid var(--cw-line);}
    .cw-btn{position:relative;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
      background:rgba(255,255,255,.08);color:var(--cw-ink);display:flex;align-items:center;justify-content:center;
      transition:background var(--t-fast),transform var(--t) var(--ease);}
    .cw-btn:hover{background:rgba(255,255,255,.15);} .cw-btn:active{transform:scale(.94);}
    .cw-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
    .cw-btn svg.off{display:none;}
    .cw-btn.is-off{background:#E5484D;color:#fff;}
    .cw-btn.is-off svg.on{display:none;} .cw-btn.is-off svg.off{display:block;}
    .cw-btn.is-active{background:rgba(255,77,141,.22);color:#FF8DB6;}
    .cw-hangup{background:#E5484D;color:#fff;width:54px;height:54px;}
    .cw-hangup:hover{background:#F0555A;}
    .cw-hangup svg{width:24px;height:24px;fill:currentColor;stroke:none;}
    #flipCamBtn{display:none;} #callModal.has-flip #flipCamBtn{display:flex;}

    .cw-devices{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px 14px 14px;flex-shrink:0;
      background:var(--cw-panel);border-top:1px solid var(--cw-line);}
    .cw-devices label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:800;
      letter-spacing:.06em;text-transform:uppercase;color:var(--cw-muted);min-width:0;}
    .cw-devices select{height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--cw-line);
      background:#211F2C;color:var(--cw-ink);font-size:13px;font-weight:600;font-family:inherit;min-width:0;text-transform:none;letter-spacing:0;}
    .cw-devices .cw-dev-q{grid-column:1/-1;}
    #devOutWrap.hidden{display:none;}
    .cw-resize{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;z-index:5;
      background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.35) 56%,rgba(255,255,255,.35) 64%,transparent 65%,transparent 78%,rgba(255,255,255,.35) 79%,rgba(255,255,255,.35) 86%,transparent 87%);}
    #callModal.is-full .cw-resize{display:none;}
    #callModal.is-full .cw-controls{padding:14px 12px calc(14px + env(safe-area-inset-bottom));}
    @media(max-width:700px){#callModal.is-full .cw-local{width:30%;max-width:140px;}}

    /* ── Réduit : la pastille ─────────────────────────────────────────── */
    #callPill{position:fixed;right:16px;bottom:calc(76px + var(--ad-h,0px));z-index:951;display:flex;align-items:center;gap:8px;
      height:42px;padding:0 16px 0 12px;border-radius:21px;border:none;cursor:pointer;
      background:#12A05F;color:#fff;font-family:inherit;font-size:13.5px;font-weight:800;
      box-shadow:0 10px 26px rgba(18,160,95,.4);transition:transform var(--t) var(--ease);}
    #callPill:hover{transform:scale(1.04);}
    .cp-dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:icPulse 1.6s ease-in-out infinite;}
    @media(min-width:1024px){#callPill{bottom:calc(20px + var(--ad-h,0px));}}

    /* ── Messages d'appel ─────────────────────────────────────────────── */
    #callToast{position:fixed;left:50%;bottom:calc(90px + var(--ad-h,0px));transform:translateX(-50%);z-index:970;
      max-width:min(440px,calc(100vw - 24px));padding:11px 16px;border-radius:14px;
      background:var(--cw-panel);color:var(--cw-ink);border:1px solid var(--cw-line);
      font-size:13.5px;font-weight:600;text-align:center;line-height:1.45;
      box-shadow:0 16px 44px rgba(0,0,0,.5);animation:riseIn .28s var(--ease) backwards;}
    #callToast.is-err{border-color:rgba(229,72,77,.5);}

    /* ═══ BANNIÈRE PUB EN ANCRE ═════════════════════════════════════════ */
    #adBanner{position:fixed;left:0;right:0;bottom:0;z-index:48;
      display:flex;align-items:center;justify-content:center;gap:10px;
      padding:6px 12px;min-height:64px;
      background:var(--panel);border-top:1px solid var(--border);
      box-shadow:0 -4px 20px rgba(23,18,33,.09);}
    #adSlot{flex:0 1 728px;min-width:0;max-width:728px;height:50px;overflow:hidden;}
    #adBanner #adVipBtn{flex-shrink:0;height:34px;padding:0 13px;border-radius:20px;cursor:pointer;
      background:transparent;color:var(--accent-text);border:1.5px solid rgba(255,77,141,.42);
      font-family:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;
      transition:transform var(--t) var(--ease);}
    #adBanner #adVipBtn:hover{transform:scale(1.04);}
    /* Le contenu se décale de la hauteur RÉELLE de la bannière : les régies
       servent des formats variés (320×50, 728×90, parfois 300×250) et un
       padding en dur finit toujours par recouvrir la zone de saisie.
       --ad-h est mise à jour en JS par un observateur de taille.
       Attention : .layout-body EST le <body>, pas un descendant. */
    body.layout-body.has-ad{padding-bottom:var(--ad-h,64px);}
    @media(max-width:1023px){
      /* Sur téléphone elle se pose au-dessus de la barre de navigation. */
      #adBanner{bottom:56px;min-height:60px;padding:5px 10px;}
      #adSlot{height:50px;}
      #adBanner #adVipBtn{height:32px;padding:0 11px;font-size:12px;}
      body.layout-body.has-ad{padding-bottom:calc(var(--ad-h,60px) + 56px);}
    }
    @media(max-width:520px){
      /* Il reste affiché : c'est le seul moyen de retirer la pub, donc le
         chemin vers l'abonnement. On le raccourcit au lieu de le cacher. */
      #adBanner #adVipBtn{padding:0 9px;font-size:11.5px;}
    }

    /* ===== AD BANNER ===== */
    /* La pub reste (c'est un revenu) mais elle ne teinte plus une bande orange
       en travers de l'écran : fond neutre, séparateur discret. */
    #adBanner{background:var(--surface);}
    .dark #adBanner{background:var(--surface);border-bottom-color:var(--border);}
    @media(max-width:640px){#adBanner{min-height:90px;max-height:100px;padding:2px 8px;}#adSlot{height:90px;}}

    /* ===== MAIN LAYOUT ===== */
    .layout-body{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg);overflow:hidden;}
    .layout-main{display:flex;flex:1;min-height:0;}
    .layout-content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--msg-bg);}
    .layout-drop-zone{flex:1;min-height:0;position:relative;overflow:hidden;}
    .layout-messages{position:absolute;inset:0;overflow-y:auto;padding:12px 16px;font-size:15px;line-height:1.65;}
    /* :has — l'accueil des salons gère son propre défilement interne. */
    @media(min-width:1024px){.layout-messages:has(.lobby-rooms){overflow:hidden;padding-bottom:0;}}
    /* La colonne de lecture des messages ne doit pas brider les pages. */
    .layout-messages > .lobby{max-width:1180px;}
    .layout-input-area{background:var(--panel);border-top:1.5px solid var(--border);flex-shrink:0;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));}
    .sidebar-scroll{flex:1;min-height:0;overflow-y:auto;}
    .chat-form{display:flex;align-items:center;gap:8px;max-width:980px;margin:0 auto;}
    .sidebar-footer{border-top:1px solid var(--border);padding:8px 12px;font-size:12px;color:var(--muted);line-height:2.2;text-align:center;background:var(--panel);}
    .sidebar-footer a{color:var(--muted);text-decoration:none;}
    .sidebar-footer a:hover{color:var(--accent);}

    /* ═══ MENU PRINCIPAL ════════════════════════════════════════════════
       Trois sections écrites en toutes lettres, visibles en permanence. Le
       centre affiche celle qui est choisie — rien ne glisse, rien ne se
       superpose, rien ne se cache derrière une icône. */
    .hdr-label-court{display:none;}
    @media(max-width:1023px){.hdr-label{display:none;}.hdr-label-court{display:inline;}}
    /* « Passer VIP » en contour : plein et orange en permanence, il faisait
       concurrence au bouton Envoyer. Il se remplit au survol. */
    .hdr-vip{flex-shrink:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:20px;
      background:transparent;border:1.5px solid var(--pink);color:var(--accent-text);font-size:13px;font-weight:800;
      font-family:inherit;cursor:pointer;transition:background .15s,color .15s,transform .15s;}
    .hdr-vip:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-1px);}
    .hdr-me{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;padding:0;cursor:pointer;overflow:hidden;
      display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;font-family:inherit;
      background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--c,#6366f1) 85%,#fff) 0%,transparent 55%),
        linear-gradient(155deg,color-mix(in srgb,var(--c,#6366f1) 70%,#101018),color-mix(in srgb,var(--c,#6366f1) 30%,#101018));
      box-shadow:0 0 0 2px var(--sidebar),0 0 0 3.5px var(--border);transition:transform .15s,box-shadow .15s;}
    .hdr-me:hover{transform:scale(1.06);box-shadow:0 0 0 2px var(--sidebar),0 0 0 3.5px var(--pink);}
    .hdr-me img{width:100%;height:100%;object-fit:cover;display:block;}
    .hdr-me:empty{display:none;}
    .brand{font-weight:800;font-size:16px;white-space:nowrap;letter-spacing:-.3px;flex-shrink:0;
      background:none;border:none;padding:0;font-family:inherit;color:var(--text);cursor:pointer;}
    /* ── Page d'accueil ─────────────────────────────────────────────
       Une salutation, quelques visages, trois grands choix. Beaucoup d'air :
       c'est la seule page du site qui n'a pas à être dense. */
    .accueil{max-width:640px;padding-top:clamp(18px,6vh,64px);}
    .acc-hero{margin-bottom:26px;}
    .acc-salut{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--text);}
    .acc-ligne{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:12px;}
    .acc-bulle{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      overflow:hidden;font-size:13px;font-weight:800;color:#fff;margin-right:-7px;box-shadow:0 0 0 2.5px var(--bg);
      background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--c) 85%,#fff) 0%,transparent 55%),
        linear-gradient(155deg,color-mix(in srgb,var(--c) 65%,#101018),color-mix(in srgb,var(--c) 26%,#101018));}
    .acc-bulle img{width:100%;height:100%;object-fit:cover;}
    .acc-bulle-n{background:var(--surface);color:var(--muted);font-size:11.5px;}
    .acc-bulles{display:inline-flex;align-items:center;padding-right:10px;}
    .acc-sub{font-size:14px;color:var(--muted);font-weight:600;}
    .acc-q{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 10px 2px;}
    .acc-choix{display:flex;flex-direction:column;gap:10px;}
    .acc-c{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border:none;border-radius:18px;
      background:var(--panel);box-shadow:var(--sh-1);cursor:pointer;text-align:left;font-family:inherit;color:inherit;
      transition:transform .2s var(--ease),box-shadow .2s;}
    .acc-c:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
    .acc-c:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
    .acc-ic{width:48px;height:48px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;background:var(--grad);color:#fff;
      box-shadow:0 6px 16px rgba(255,77,141,.28);}
    .acc-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
    .acc-c:nth-child(2) .acc-ic{background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 6px 16px rgba(124,58,237,.28);}
    .acc-c:nth-child(3) .acc-ic{background:linear-gradient(135deg,#0ea5e9,#22d3ee);box-shadow:0 6px 16px rgba(14,165,233,.28);}
    .acc-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
    .acc-t b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
    .acc-t span{font-size:13px;color:var(--muted);line-height:1.35;}
    .acc-t span b{font-size:inherit;color:var(--text);font-weight:700;}
    .acc-b{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface);padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
    .acc-b-alerte{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--grad);color:#fff;font-size:12.5px;font-weight:800;}
    .acc-chev{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--faint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
    .accueil .lobby-foot{margin-top:34px;white-space:normal;text-align:center;line-height:1.5;}
    /* Sur l'accueil, le bandeau d'annonce attend : il aura sa place dans les salons. */
    body.accueil-mode #newsBanner{display:none;}
    @media(max-width:600px){
      .acc-c{padding:13px 14px;gap:12px;border-radius:15px;}
      .acc-ic{width:42px;height:42px;border-radius:12px;}
      .acc-t b{font-size:15px;}
      .acc-t span{font-size:12.5px;}
      .acc-b{display:none;}
      .acc-c .acc-b-alerte{display:inline-grid;}
    }
    .brand-a{background:var(--grad);-webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;}
    .mainmenu{display:flex;align-items:center;gap:4px;margin-left:14px;min-width:0;overflow-x:auto;
      scrollbar-width:none;}
    .mainmenu::-webkit-scrollbar{display:none;}
    .mm svg,.nav-ico{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;
      stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .nav-ico{width:21px;height:21px;stroke-width:1.7;}
    .mm{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:11px;flex-shrink:0;
      background:transparent;border:1.5px solid transparent;color:var(--muted);cursor:pointer;
      font-family:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;
      transition:background .14s,color .14s,border-color .14s;}
    .mm:hover{background:var(--surface);color:var(--text);}
    .mm.active{background:var(--grad);border-color:transparent;color:#fff;font-weight:800;
      box-shadow:0 4px 14px rgba(255,77,141,.34);}
    .mm-n{font-size:11.5px;font-weight:800;background:var(--surface);border:1px solid var(--border);
      border-radius:20px;padding:1px 7px;color:var(--muted);}
    .mm.active .mm-n{background:rgba(255,255,255,.22);border-color:transparent;color:#fff;}
    .mm-alert{background:#ef4444 !important;border-color:#ef4444 !important;color:#fff !important;}
    .mm-n:empty{display:none;}

    /* Retour depuis une conversation : un bouton franc, pas une flèche perdue. */
    .backbar{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:11px 16px;
      background:var(--sidebar);border-bottom:1px solid var(--border);}
    .backbar-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:11px;
      background:var(--surface);border:1.5px solid var(--border);color:var(--text);cursor:pointer;
      font-family:inherit;font-size:13.5px;font-weight:700;flex-shrink:0;}
    .backbar-btn:hover{border-color:rgba(255,122,47,.45);color:var(--accent-text);}
    .backbar-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;font-size:16px;
      background:var(--surface);border:1px solid hsla(var(--h,25),40%,55%,.35);}
    .backbar-t{min-width:0;display:flex;flex-direction:column;gap:1px;}
    .backbar-nm{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;}
    .backbar-sub{display:block;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .backbar-sub.is-live{color:var(--green);font-weight:700;}
    .backbar-actions{margin-left:auto;display:flex;gap:8px;flex-shrink:0;}
    .backbar-call{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:20px;
      border:1.5px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;
      font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap;
      transition:transform var(--t) var(--ease),background var(--t-fast),border-color var(--t-fast);}
    .backbar-call:hover{transform:scale(1.04);border-color:var(--pink);}
    .backbar-call:active{transform:scale(.97);}
    .backbar-call.is-video{background:var(--grad);color:#fff;border-color:transparent;
      box-shadow:0 5px 14px rgba(255,77,141,.3);}
    .backbar-call svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
    @media(max-width:520px){.backbar-call span{display:none;}.backbar-call{padding:0 11px;}}

    /* Page « Messages » : une conversation par ligne, avec l'aperçu du dernier
       message, l'heure et les non-lus. Avant, la page n'affichait qu'un pseudo
       et n'était même pas cliquable. */
    /* Barre de filtres : recherche à gauche, pastilles à droite. */
    .fbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
    .fbar-search{flex:1;min-width:200px;max-width:340px;}
    .fbar-search .field{height:42px;border-radius:12px;font-size:14px;}
    .fbar-pills{display:flex;gap:7px;flex-wrap:wrap;}
    .fpill{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:20px;
      background:var(--panel);border:1.5px solid var(--border);color:var(--muted);cursor:pointer;
      font-family:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;
      transition:border-color .14s,color .14s,background .14s;}
    .fpill:hover{color:var(--text);border-color:var(--pink);}
    .fpill.on{background:var(--grad);border-color:transparent;color:#fff;
      box-shadow:0 4px 12px rgba(255,77,141,.3);}
    .fpill-n{font-size:11.5px;font-weight:800;background:var(--surface);border-radius:20px;padding:1px 7px;
      color:var(--muted);}
    .fpill.on .fpill-n{background:rgba(255,255,255,.25);color:#fff;}
    @media(max-width:600px){
      .fbar{gap:9px;}
      .fbar-search{max-width:none;flex:1 1 100%;}
      .fpill{height:36px;padding:0 13px;font-size:13px;}
    }
    .pmlist{display:flex;flex-direction:column;gap:9px;}
    .pmrow{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
      cursor:pointer;background:var(--panel);border:none;box-shadow:var(--sh-1);text-align:left;width:100%;
      font-family:inherit;color:inherit;transition:transform .16s,box-shadow .16s;}
    .pmrow:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
    .pmrow.is-new{box-shadow:var(--sh-1),inset 3px 0 0 var(--pink);}
    .pmrow-av{position:relative;width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;
      align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;overflow:hidden;}
    .pmrow-av img{width:100%;height:100%;object-fit:cover;}
    .pmrow-on{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;
      background:var(--green);border:2.5px solid var(--panel);}
    .pmrow-b{flex:1;min-width:0;}
    .pmrow-top{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;}
    .pmrow-n{font-size:15.5px;font-weight:700;color:var(--text);white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;}
    .pmrow-w{margin-left:auto;flex-shrink:0;font-size:12px;color:var(--faint);white-space:nowrap;}
    .pmrow-p{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;}
    .pmrow.is-new .pmrow-p{color:var(--text);font-weight:600;}
    .pmrow-u{flex-shrink:0;min-width:22px;text-align:center;font-size:11.5px;font-weight:800;
      background:var(--grad);color:#fff;border-radius:20px;padding:3px 8px;
      box-shadow:0 3px 10px rgba(255,77,141,.4);}
    .pmrow-del{flex-shrink:0;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
      justify-content:center;color:var(--faint);opacity:0;transition:opacity .14s,color .14s,background .14s;}
    .pmrow:hover .pmrow-del{opacity:1;}
    .pmrow-del:hover{color:var(--danger);background:rgba(220,38,38,.1);}
    .pmrow-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
      stroke-linecap:round;stroke-linejoin:round;}
    @media(hover:none){.pmrow-del{opacity:.5;}}
    .pmvide{padding:30px 24px;text-align:center;background:var(--panel);border-radius:18px;
      box-shadow:var(--sh-1);margin-bottom:4px;}
    .pmvide-t{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.01em;}
    .pmvide-s{font-size:14px;color:var(--muted);line-height:1.6;max-width:460px;margin:0 auto;}

    /* Sous 1024 px c'est la barre du bas qui fait office de menu : deux menus
       qui disent la même chose, c'était précisément le reproche. */
    @media(max-width:1023px){
      .mainmenu{display:none;}
      .pmpage{padding:20px 14px 32px;}
    }
    .nav-pastille{position:absolute;top:5px;right:calc(50% - 22px);font-size:10.5px;font-weight:800;
      color:#fff;background:#ef4444;border-radius:20px;padding:0 5px;min-width:16px;line-height:16px;
      text-align:center;}
    .nav-btn{position:relative;}

    /* ═══ ANCIENNE BARRE UNIQUE ═════════════════════════════════════════
       Le nom du salon sert de menu. Il n'y a plus d'en-tête de salon séparé,
       plus de bande de salons permanente, plus d'onglets de conversation :
       avant le premier message il y avait six bandeaux empilés. */
    #roomPicker{display:flex;align-items:center;gap:11px;min-width:0;flex-shrink:1;
      background:transparent;border:none;cursor:pointer;padding:5px 12px 5px 6px;border-radius:13px;
      color:inherit;font-family:inherit;transition:background .14s;}
    #roomPicker:hover{background:var(--surface);}
    #rpIco{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;font-size:19px;line-height:1;
      background:linear-gradient(150deg,hsl(var(--h,25),68%,56%),hsl(var(--h2,25),66%,42%));}
    #rpIco.is-home{background:var(--surface);border:1px solid var(--border);}
    .rp-txt{text-align:left;min-width:0;}
    .rp-nm{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800;letter-spacing:-.02em;
      color:var(--text);white-space:nowrap;overflow:hidden;}
    .rp-nm > span:first-child{overflow:hidden;text-overflow:ellipsis;}
    .rp-chev{font-size:11px;color:var(--muted);flex-shrink:0;}
    .rp-sub{display:block;font-size:12px;color:var(--faint);white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;}
    .rp-sub.is-live{color:var(--green);font-weight:700;}
    .hdr-icon{flex-shrink:0;position:relative;width:38px;height:38px;border-radius:11px;
      background:var(--surface);border:1.5px solid var(--border);cursor:pointer;font-size:17px;
      display:flex;align-items:center;justify-content:center;transition:border-color .14s;}
    .hdr-icon:hover{border-color:rgba(255,122,47,.45);}
    .hdr-n{position:absolute;top:-5px;right:-5px;font-size:11px;font-weight:800;color:#180C04;
      background:var(--green);border-radius:20px;padding:0 5px;min-width:17px;line-height:17px;text-align:center;}
    .hdr-n:empty{display:none;}
    .hdr-n-alert{color:#fff;background:#ef4444;}

    /* L'en-tête de salon séparé n'a plus lieu d'être : son contenu est dans
       la barre. La barre d'onglets ne sort que s'il y a des messages privés. */
    #roomHeader{display:none !important;}

    /* ═══ SÉLECTEUR DE SALONS (descend depuis la barre) ══════════════════ */
    .room-rail{display:none;}
    #roomSheet{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--panel);
      border-bottom:1px solid var(--border);box-shadow:0 26px 60px rgba(0,0,0,.62);
      padding:18px 18px 20px;max-height:min(74vh,660px);overflow-y:auto;}
    #roomSheet.hidden{display:none;}
    .rs-in{max-width:1000px;margin:0 auto;}
    .rs-find{position:relative;margin-bottom:18px;}
    .rs-find .field{height:48px;padding-left:44px;font-size:15px;border-radius:13px;}
    .rs-find::before{content:"🔍";position:absolute;left:15px;top:50%;transform:translateY(-50%);
      opacity:.5;pointer-events:none;}
    .rs-lab{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);margin:0 0 11px;}
    .rs-lab i{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
    .rs-lab.q{margin-top:20px;}
    .rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:9px;}
    .rs-grid > *{min-width:0;}
    .rs-it{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:13px;cursor:pointer;
      background:var(--surface);border:1px solid var(--border);text-align:left;width:100%;
      font-family:inherit;color:inherit;transition:border-color .14s;}
    .rs-it:hover{border-color:hsla(var(--h,25),65%,55%,.65);}
    .rs-it.on{border-color:hsla(var(--h,25),70%,58%,.85);background:hsla(var(--h,25),58%,45%,.15);}
    .rs-em{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;font-size:19px;
      background:linear-gradient(150deg,hsl(var(--h,25),66%,55%),hsl(var(--h2,25),64%,40%));}
    .rs-b{min-width:0;display:flex;flex-direction:column;gap:2px;}
    .rs-n{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .rs-m{display:block;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .rs-m.live{color:var(--green);font-weight:700;}
    .rs-adult{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:13px 15px;
      border-radius:13px;background:transparent;border:1px dashed rgba(220,38,38,.32);cursor:pointer;
      text-align:left;font-family:inherit;color:inherit;}
    .rs-adult b{display:block;font-size:14px;font-weight:700;}
    .rs-adult small{font-size:12.5px;color:var(--faint);}
    .rs-adult em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--muted);
      background:var(--surface);border-radius:20px;padding:3px 10px;flex-shrink:0;}
    @media(max-width:640px){
      #roomSheet{padding:14px 12px 16px;}
      .rs-grid{grid-template-columns:1fr;}
      .rp-nm{font-size:15px;}
      #rpIco{width:34px;height:34px;font-size:17px;}
      .hdr-icon{width:36px;height:36px;font-size:16px;}
    }

    /* ═══ ANCIENNE BARRE DE SALONS (remplacée par le sélecteur) ═══════════
       Il n'y a plus de colonne latérale permanente. Les salons vivent dans une
       bande en haut, la conversation prend toute la largeur, et les listes
       (membres, messages privés) s'ouvrent en panneau quand on les demande. */
    .room-rail{display:flex;align-items:center;gap:8px;padding:10px 16px;flex-shrink:0;
      background:var(--sidebar);border-bottom:1px solid var(--border);
      overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .room-rail::-webkit-scrollbar{display:none;}
    .rr{display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;border-radius:13px;flex-shrink:0;
      background:var(--surface);border:1px solid var(--border);cursor:pointer;font-family:inherit;
      color:var(--muted);transition:border-color .14s,background .14s,color .14s;}
    .rr:hover{color:var(--text);border-color:rgba(255,255,255,.18);}
    .rr.active{color:var(--text);
      background:linear-gradient(135deg,hsla(var(--h,25),70%,52%,.22),hsla(var(--h,25),70%,45%,.10));
      border-color:hsla(var(--h,25),70%,58%,.65);}
    .rr-em{font-size:19px;line-height:1;flex-shrink:0;}
    .rr-nm{font-size:14px;font-weight:700;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;}
    .rr.active .rr-nm{font-weight:800;}
    .rr-live{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
      box-shadow:0 0 0 3px rgba(45,212,138,.18);}
    .rr-n{font-size:11.5px;font-weight:800;color:var(--faint);}
    .rr.active .rr-n{color:var(--text);}
    .rr-unread{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;}
    .rr-more{background:transparent;border:1px dashed var(--border);color:var(--muted);}
    .rr-more:hover{color:var(--accent-text);border-color:rgba(255,122,47,.45);}

    /* Boutons d'ouverture des panneaux, dans l'en-tête */
    .hdr-panel-btn{flex-shrink:0;display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;
      border-radius:10px;background:var(--surface);border:1.5px solid var(--border);color:var(--muted);
      font-size:13px;font-weight:600;cursor:pointer;transition:color .14s,border-color .14s;}
    .hdr-panel-btn:hover{color:var(--text);border-color:rgba(255,122,47,.4);}
    .hdr-n{font-size:11.5px;font-weight:800;color:var(--green);background:rgba(45,212,138,.13);
      border-radius:20px;padding:1px 7px;}
    .hdr-n-alert{color:#fff;background:#ef4444;}

    /* ═══ PANNEAUX (ex-colonnes) ════════════════════════════════════════
       Ils glissent depuis le bord et se referment : rien ne reste planté sur
       le côté à prendre de la place quand on discute. */
    #leftSidebar,#rightSidebar{position:fixed;top:0;bottom:0;z-index:70;width:min(340px,88vw);
      display:flex;flex-direction:column;background:var(--sidebar);
      box-shadow:0 0 60px rgba(0,0,0,.55);transition:transform .22s cubic-bezier(.4,0,.2,1);}
    #leftSidebar{left:0;border-right:1px solid var(--border);transform:translateX(-101%);}
    #rightSidebar{right:0;border-left:1px solid var(--border);transform:translateX(101%);}
    body.pane-pm #leftSidebar{transform:none;}
    body.pane-users #rightSidebar{transform:none;}
    #closeRightBtn{display:flex;}
    #mobileOverlay{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.55);
      -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
    body:not(.pane-pm):not(.pane-users) #mobileOverlay{display:none !important;}

    /* ===== TROIS COLONNES, TROIS RÔLES =====================================
       Gauche : où aller (salons, MP). Centre : la conversation. Droite : qui
       est là. Chaque zone a un seul rôle — avant, gauche et centre proposaient
       tous les deux le choix « Salons / Membres ». */
    .nav-sec{padding-bottom:6px;}
    .nav-sec + .nav-sec{border-top:1px solid var(--border);margin-top:6px;padding-top:4px;}
    .nav-sec-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;
      padding:14px 14px 8px;font-size:11.5px;font-weight:800;text-transform:uppercase;
      letter-spacing:.12em;color:var(--muted);}
    .nav-add{width:26px;height:26px;flex-shrink:0;border-radius:8px;font-size:15px;line-height:1;
      cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted);
      display:flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s;}
    .nav-add:hover{color:var(--accent-text);border-color:rgba(255,122,47,.4);}
    .nav-search{font-size:13px;padding:9px 12px;height:auto;}

    #rightSidebar{width:272px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
      background:var(--sidebar);border-left:1px solid var(--border);}
    .rs-hdr{border-bottom:1px solid var(--border);padding:15px 14px;}


    /* Le positionnement des deux panneaux est défini plus haut (section
       « PANNEAUX ») : ils glissent depuis le bord et ne prennent plus de place
       en permanence. Les anciennes règles qui plantaient la colonne de gauche
       dans le flux au-delà de 1024 px ont été retirées. */

    /* ===== MOBILE BOTTOM NAV ===== */
    .mobile-nav{display:none;}
    @media(max-width:1023px){
      .layout-body{padding-bottom:56px;}
      .mobile-nav{
        display:flex;position:fixed;bottom:0;left:0;right:0;
        height:56px;background:var(--sidebar);
        border-top:1.5px solid var(--border);z-index:50;
        padding-bottom:env(safe-area-inset-bottom);
        box-shadow:0 -2px 16px rgba(0,0,0,.08);
      }
      .nav-btn{
        flex:1;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:2px;border:none;background:none;
        cursor:pointer;color:var(--muted);transition:color .15s;padding:0;
      }
      .nav-btn.active{color:var(--pink);}
      .nav-ico{font-size:22px;line-height:1;}
      .nav-lbl{font-size:12px;font-weight:600;letter-spacing:.02em;}
      /* Sur téléphone, les colonnes ne tiennent pas côte à côte : le bouton
         « Membres » de la barre du bas ouvre celle de droite en plein écran,
         le bouton « Salons » ouvre l'écran de choix (voir showLobby). */
      /* Sur téléphone les panneaux prennent toute la largeur. */
      #leftSidebar,#rightSidebar{width:100%;}
      /* Hide overlay/hamburger on mobile (nav handles it) */
      #openDrawerBtn{display:none !important;}
      #mobileOverlay{display:none !important;}
    }
    @media(min-width:1024px){.mobile-nav{display:none !important;}}

    /* ===== DARK MODE OVERRIDES (residuels) ===== */
    .dark [style*="background:#fef3c7"]{background:rgba(251,146,60,.12) !important;}
    .dark [style*="background:#fee2e2"]{background:rgba(239,68,68,.12) !important;}
    .dark [style*="background:#f8fafc"]{background:var(--surface) !important;}
    .dark [style*="background:#fafbfc"]{background:var(--panel) !important;}
    .dark [style*="background:#f0fdf4"]{background:rgba(52,211,153,.08) !important;}
    .dark [style*="color:#166534"]{color:#34d399 !important;}
    .dark [style*="color:#dc2626"]{color:#f87171 !important;}
    .dark [style*="color:#d97706"]{color:var(--accent) !important;}
    .dark [style*="color:#92400e"]{color:var(--accent) !important;}
    .dark [style*="background:#fffbeb"]{background:rgba(251,146,60,.07) !important;border-color:rgba(251,146,60,.15) !important;}
    .dark [style*="background:#fef2f2"]{background:rgba(239,68,68,.1) !important;}
    .dark [style*="color:#b91c1c"]{color:#f87171 !important;}

    /* AD — reserve l'espace de l'image tant qu'elle charge (evite le saut du flux) */
    img[data-lightbox]:not([data-charge]){aspect-ratio:4/3;width:320px;background:var(--border);}