/* Police hébergée par Callthem (aucune requête vers Google : l'adresse IP des membres ne sort pas) — SIL OFL, voir fonts/OFL.txt */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/jakarta-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(fonts/jakarta-latin.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --ink: #16181D; --muted: #5B606B; --muted2: #4A4F58;
  --bg: #F7F7FA; --side: #EFEFF4; --line: #E2E1EA; --card: #FFFFFF; --soft: #F3F3F7;
  --rail: #15131F; --rail2: #221F30; --railtext: #E9E6F2; --railmuted: #A6A0BD;
  --accent: #6D28D9; --accent-ink: #6D28D9; --accent-dark: #4C1D95; --accent-soft: #F1EBFD; --accent-light: #B79CF5; --cat: #E2DDF5;
  --ok: #1F9D55; --away: #B45309; --dnd: #DC2626;
  --panel: #FAFAFC; --warn-bg: #FEF3C7; --warn-ink: #92400E; --danger-bg: #FEE2E2; --danger-ink: #B42318;
  --ok-bg: #DCFCE7; --ok-ink: #166534; --info-bg: #E0F2FE;
}
/* Mode sombre : mêmes noms de couleurs, autres valeurs */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEAF3; --muted: #A8A4B8; --muted2: #C4C0D2;
  --bg: #2A2834; --side: #302E3B; --line: #46434F; --card: #353341; --soft: #3E3B4A;
  --rail: #1F1D27; --rail2: #2E2B3A; --railtext: #E9E6F2; --railmuted: #A6A0BD;
  --accent: #7C3AED; --accent-ink: #B9A3FF; --accent-dark: #C4B5FD; --accent-soft: #3D3359; --accent-light: #8B6AE0; --cat: #3B3552;
  --ok: #34C76F; --away: #F0A030; --dnd: #F05252;
  --panel: #2E2C38; --warn-bg: #3A2C10; --warn-ink: #FCD58A; --danger-bg: #3B1A1D; --danger-ink: #FCA5A5;
  --ok-bg: #12301E; --ok-ink: #86EFAC; --info-bg: #10283A;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
a { color: var(--accent-ink); }

/* Connexion */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--rail); padding: 16px; }
.login-card { background: var(--card); padding: 32px; border-radius: 18px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.logo { font-weight: 800; font-size: 30px; color: var(--accent-ink); }
.login-sub { margin: 0 0 12px; color: var(--muted); }
.login-card input { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.btn { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; min-height: 40px; background: var(--soft); color: var(--ink); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.danger { background: var(--danger-bg); color: var(--danger-ink); }
.btn.small { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }

/* Mise en page */
.app { display: flex; height: 100vh; overflow: hidden; }
.rail { flex: 0 0 184px; background: var(--rail); padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sidebar { flex: 0 0 264px; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--card); }
.members { flex: 0 0 240px; background: var(--panel); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; }

/* Rail */
.rail-btn { height: 44px; border-radius: 10px; background: var(--accent); color: #fff; border: 0; font-weight: 700; display: flex; align-items: center; gap: 10px; padding: 0 12px; text-align: left; }
.rail-btn.ghost { background: transparent; border: 1.5px dashed #4B4366; color: var(--accent-light); justify-content: center; }
.rail-btn.current { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.folder-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--railtext); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: left; }
.folder-head .count { margin-left: auto; color: var(--railmuted); letter-spacing: 0; font-size: 11px; }
.folder-body { display: flex; flex-direction: column; gap: 8px; padding-left: 8px; border-left: 2px solid #2E2A3D; margin-left: 6px; }
.folder-closed { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: var(--rail2); color: var(--railtext); text-align: left; }
.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.banner { position: relative; height: 60px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; padding: 8px 10px; color: #fff; font-weight: 800; font-size: 14px; border: 0; text-align: left; width: 100%; }
.banner svg { position: absolute; left: 0; top: 0; }
.banner span { position: relative; }
.banner.current { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.banner .badge { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--card); color: var(--rail); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.rail-label { color: var(--railmuted); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 6px 2px 0; }
.mini-link { background: none; border: 0; color: var(--railmuted); font-size: 12px; text-align: left; padding: 4px 2px; }

/* Barre latérale */
.side-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.side-title { font-weight: 800; font-size: 17px; }
.side-sub { font-size: 12px; color: var(--accent-ink); font-weight: 600; margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.cat { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; margin: 12px 0 4px; border: 0; border-radius: 10px; background: var(--cat); color: var(--ink); font-weight: 800; text-align: left; }
.cat:first-child { margin-top: 0; }
.cat .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--accent); }
.cat .count { margin-left: auto; font-size: 11px; color: var(--accent-dark); background: var(--card); padding: 2px 8px; border-radius: 10px; }
.cat-row { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; }
.cat-row:first-child { margin-top: 0; }
.cat-row .cat { margin: 0; flex: 1 1 auto; min-width: 0; }
.cat-add { flex: 0 0 32px; height: 40px; border: 0; border-radius: 10px; background: var(--cat); color: var(--accent-dark); font-weight: 800; font-size: 18px; }
.chan { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--muted2); background: transparent; border: 0; width: 100%; text-align: left; }
.chan:hover { background: var(--line); }
.chan.active { background: var(--card); color: var(--ink); font-weight: 700; }
.chan .hash { color: var(--muted); }
.chan .n { margin-left: auto; font-size: 11px; color: var(--muted); }
.voice-users { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px 34px; font-size: 13px; color: var(--muted2); }
.voice-users .speaking { color: var(--ok); font-weight: 700; }
.me-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--line); }
.me-card .info { display: flex; flex-direction: column; min-width: 0; }
.me-card .name { font-weight: 700; }
.me-card .note { font-size: 12px; color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted2); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: rgba(0,0,0,.06); }

/* Avatar */
.av { position: relative; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; --c: #A6A0BD;
  /* couleur de profil adoucie : fond pastel + initiales dans la même teinte, plus foncée */
  background: color-mix(in srgb, var(--c) 32%, #fff); color: color-mix(in srgb, var(--c) 60%, #15131F); }
.av .dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 6px; border: 2px solid var(--card); }
.dot.online { background: var(--ok); } .dot.away { background: var(--away); } .dot.dnd { background: var(--dnd); } .dot.offline { background: #9CA3AF; }

/* Zone principale */
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.head-title { font-weight: 800; font-size: 16px; }
.tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 10px; }
.tab { padding: 6px 12px; border-radius: 7px; border: 0; background: transparent; color: var(--muted2); font-weight: 600; font-size: 13px; }
.tab.active { background: var(--card); color: var(--ink); font-weight: 700; }
.privacy { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.feed { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.empty { color: var(--muted); text-align: center; margin: auto; max-width: 420px; line-height: 1.5; }
.msg { display: flex; gap: 12px; position: relative; }
.msg:hover .msg-actions { opacity: 1; }
.msg-body { min-width: 0; flex: 1 1 auto; }
.msg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-meta .who { font-weight: 700; }
.msg-meta .when { font-size: 12px; color: var(--muted); }
.msg-text { margin: 3px 0 0; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg-actions { position: absolute; right: 0; top: -14px; opacity: 0; transition: opacity .1s; display: flex; gap: 2px; padding: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(20,18,30,.08); }
.msg:focus-within .msg-actions { opacity: 1; }
.msg-actions .ib { border: 0; background: transparent; width: 30px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--muted2); border-radius: 7px; }
.msg-actions .ib:hover { background: var(--soft); color: var(--ink); }
@media (hover: none) { .msg-actions { opacity: 0; pointer-events: none; } .msg.sel .msg-actions { opacity: 1; pointer-events: auto; } .msg.sel { background: var(--soft); border-radius: 10px; } }
.file-card { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; max-width: 440px; background: var(--panel); }
.file-card .ico { flex: 0 0 40px; height: 40px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.file-card .fname { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fmeta { font-size: 12px; color: var(--muted); }
.file-card img { max-width: 100%; border-radius: 8px; display: block; }
.img-wrap { margin-top: 8px; max-width: 360px; }
.img-wrap img { max-width: 100%; max-height: 260px; border-radius: 12px; display: block; }
.typing { height: 18px; padding: 0 22px; font-size: 12px; color: var(--muted); }
.composer { padding: 0 20px 18px; }
.composer label { display: block; font-size: 12px; font-weight: 600; color: var(--muted2); margin-bottom: 6px; }
.composer-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 8px; background: var(--panel); }
.composer-box input[type=text] { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 10px 4px; outline: none; }

/* Fichiers */
.files { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.gauge { height: 8px; border-radius: 4px; background: var(--side); overflow: hidden; }
.gauge > div { height: 8px; background: var(--accent); }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.file-row .grow { flex: 1 1 auto; min-width: 0; }
.exp { font-size: 12px; font-weight: 700; color: var(--warn-ink); }

/* Appel */
.call { flex: 1 1 auto; display: flex; flex-direction: column; background: #15131F; color: #fff; min-height: 0; }
.grid { flex: 1 1 auto; display: grid; gap: 10px; padding: 14px; min-height: 0; }
.tile { position: relative; background: #2A2638; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.screen video { object-fit: contain; }
.tile .label { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.55); padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.tile.speaking { outline: 3px solid #4ADE80; outline-offset: -3px; }
.tile .big-av { width: 84px; height: 84px; border-radius: 22px; font-size: 32px; }
.call-bar { display: flex; justify-content: center; gap: 10px; padding: 14px; flex-wrap: wrap; }
.call-bar { gap: 14px; }
.call-bar button { width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 0; background: #2E2A3D; color: #fff; display: flex; align-items: center; justify-content: center; }
.call-bar button:hover { background: #3D3852; }
.call-bar button.on { background: #6D28D9; }
.call-bar button.leave { width: 64px; border-radius: 26px; }
.call-bar button.off { background: var(--danger-bg); color: var(--danger-ink); }
.call-bar button.leave { background: #DC2626; }
.call-bar button.leave:hover { background: var(--danger-ink); }
.tile .label { display: flex; align-items: center; gap: 6px; }
.tile .label .muted { display: flex; color: #FCA5A5; }
.tile .label .muted svg { width: 15px; height: 15px; }
.call-info { text-align: center; font-size: 12px; color: #A6A0BD; padding-bottom: 8px; }

/* Membres */
.members h3 { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; margin: 0 0 12px; }
.member { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; width: 100%; background: none; border: 0; text-align: left; }
.member:hover { background: var(--soft); }
.member .name { font-weight: 700; font-size: 14px; }
.member .note { font-size: 12px; color: var(--muted2); }
.role-tag { font-size: 10px; font-weight: 800; color: var(--accent-dark); background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }

/* Modale et notifications */
.modal { position: fixed; inset: 0; background: rgba(21,19,31,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal-card { background: var(--card); border-radius: 16px; padding: 22px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-card h2 { margin: 0; font-size: 20px; }
.modal-card label { font-weight: 600; font-size: 13px; }
.modal-card input[type=text], .modal-card select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.modal-card .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500 !important; }
.note-box { font-size: 13px; color: var(--muted2); background: var(--soft); padding: 10px 12px; border-radius: 10px; line-height: 1.45; }
.report { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.report .st { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); align-self: flex-start; }
.block { font-size: 12px; background: var(--soft); border-radius: 8px; padding: 8px; max-height: 160px; overflow-y: auto; }
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(20,18,30,.2); background: var(--rail); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 20; max-width: 90vw; }

/* petit écran : barre du haut + tiroirs */
.mob-bar, .scrim { display: none; }
.mob-btn { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; position: relative; }
.mob-btn svg { width: 22px; height: 22px; }
.mob-btn.dot::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #E11D48; }
.mob-title { flex: 1 1 auto; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .app { flex-direction: column; height: 100vh; height: 100dvh; }
  .mob-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 52px; padding: 0 6px; border-bottom: 1px solid var(--line); background: var(--card); }
  .main { flex: 1 1 auto; min-height: 0; }
  .head .head-title { display: none; }
  .members { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 86vw); z-index: 24; transform: translateX(calc(100% + 40px)); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(20,18,30,.15); }
  .app.show-members .members { transform: none; }
  .rail, .sidebar { position: fixed; top: 0; bottom: 0; z-index: 24; transform: translateX(-110vw); transition: transform .2s ease; }
  .rail { left: 0; width: 150px; flex: none; }
  .sidebar { left: 150px; width: min(300px, calc(100vw - 190px)); flex: none; box-shadow: 8px 0 24px rgba(20,18,30,.15); }
  .app.show-nav .rail, .app.show-nav .sidebar { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 23; background: rgba(15,13,22,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .app.hide-rail #rail, .app.hide-side #sidebar { display: flex; }
  .app.hide-members #members { display: block; }
}
@media (max-width: 640px) {
  .rail { width: 136px; padding: 10px 8px; }
  .rail .bn-name { font-size: 12px; }
  .rail .rail-btn { font-size: 13px; padding-left: 10px; padding-right: 8px; gap: 8px; }
  .sidebar { left: 136px; width: calc(100vw - 172px); }
  .head { padding: 10px 12px; gap: 8px; }
  .privacy { font-size: 0; padding: 6px 8px; gap: 0; }
  .feed { padding: 14px 12px; }
  .composer > label { display: none; }
  .composer { padding: 0 10px 10px; }
  .msg { gap: 10px; }
  .msg .av { width: 34px !important; height: 34px !important; }
  .modal-card { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); }
}

/* --- Ajouts v2 --- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rail-btn.alt { background: var(--rail2); color: var(--railtext); }
.side-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 8px 2px; }
.staff-tag { display: inline-flex; color: var(--muted); margin-left: 2px; }
.viewas-head { background: var(--warn-bg); }
.cloud-chip { border: 0; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 800; align-self: flex-start; }
.cloud-chip.lvl1 { background: var(--warn-bg); color: var(--warn-ink); }
.cloud-chip.lvl2, .cloud-chip.lvl3 { background: var(--danger-bg); color: var(--danger-ink); }
.kind-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); padding: 4px 10px; border-radius: 8px; }
.modal-card textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.modal-card input[type=search], .modal-card input[type=url] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }

/* Annonces et sondages */
.msg.announce .msg-body { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; }
.poll { margin-top: 8px; max-width: 480px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.poll-q { font-weight: 800; display: flex; gap: 8px; align-items: center; }
.poll-q span { color: var(--accent-ink); display: flex; }
.poll-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); text-align: left; }
.poll-opt.mine { border-color: var(--accent); }
.poll-opt:disabled { cursor: default; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); }
.poll-t, .poll-n { position: relative; }
.poll-t { font-weight: 700; }
.poll-n { font-size: 12px; color: var(--muted2); white-space: nowrap; }
.poll-foot { font-size: 12px; color: var(--muted); }
.poll-inputs { display: flex; flex-direction: column; gap: 6px; }

/* Fichiers et stockage */
.file-card.p2p .ico { background: var(--info-bg); color: #0369A1; }
.exp { display: inline-flex; gap: 4px; align-items: center; }
.exp.p2p { color: #0369A1; }
.files-h { margin: 10px 0 0; font-size: 15px; }
.storage { display: flex; flex-direction: column; gap: 8px; }
.storage-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.gauge.big { position: relative; height: 14px; border-radius: 7px; overflow: visible; }
.gauge.big > div { height: 14px; border-radius: 7px; }
.gauge.big i { position: absolute; top: -3px; width: 2px; height: 20px; background: #9CA3AF; }
.gauge.lvl1 > div { background: #D97706; }
.gauge.lvl2 > div, .gauge.lvl3 > div { background: #DC2626; }
.gauge-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 11px; color: var(--muted); }
.alert-box { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.alert-box.lvl1 { background: var(--warn-bg); color: var(--warn-ink); }
.alert-box.lvl2, .alert-box.lvl3 { background: var(--danger-bg); color: var(--danger-ink); }

/* Musique et vidéo */
.music { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.music-row { display: flex; gap: 16px; flex-wrap: wrap; }
.player-host { position: relative; flex: 0 0 360px; max-width: 100%; aspect-ratio: 16 / 9; background: var(--rail); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--accent-light); }
.player-host video, .player-host iframe { width: 100%; height: 100%; border: 0; background: #000; }
.player-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 13px; }
.player-empty svg { width: 40px; height: 40px; }
.player-error { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 6px 8px; border-radius: 8px; }
.music-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.now { display: flex; flex-direction: column; gap: 2px; }
.now-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.now-title { font-weight: 800; overflow-wrap: anywhere; }
.now-by { font-size: 12px; color: var(--muted); }
.queue { font-size: 13px; }
.queue ol { margin: 4px 0 0; padding-left: 20px; max-height: 90px; overflow-y: auto; }
.music-add { display: flex; gap: 8px; }
.music-add input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }

/* Découvrir et aperçu */
.discover { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.discover > input, .discover-tools input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dcard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.dbanner { position: relative; height: 70px; display: flex; align-items: flex-end; padding: 10px 12px; color: #fff; font-weight: 800; font-size: 16px; overflow: hidden; }
.dbanner svg { position: absolute; right: 0; top: 0; }
.dbanner span { position: relative; }
.dbody { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ddesc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted2); flex: 1 1 auto; }
.dtags, .hidden-list { display: flex; gap: 6px; flex-wrap: wrap; }
.dtag { border: 0; border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent-dark); }
.dstats { font-size: 12px; color: var(--muted); }
.visit-bar, .viewas-bar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--info-bg); color: #075985; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.viewas-bar { background: var(--warn-bg); color: var(--warn-ink); }
.viewas-bar.test { background: #FDE68A; }
.viewas-bar .grow { display: block; }
.join-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 13px; }

/* Voir comme */
.va-body { flex: 1 1 auto; display: flex; min-height: 0; }
.va-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.va-right { flex: 0 0 300px; border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; background: var(--panel); }
.va-right h3 { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; margin: 0 0 6px; }
.va-perm { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; }
.va-perm.test { background: var(--warn-bg); }
.va-perm input { margin-top: 3px; }
.plabel { font-weight: 700; font-size: 13px; }
.psrc { font-size: 12px; color: var(--muted); }
.verdict { margin: 0 20px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.vline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vicon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.vline.ok .vicon { background: var(--ok-bg); color: var(--ok-ink); }
.vline.no .vicon { background: var(--danger-bg); color: var(--danger-ink); }
.vwhy { font-size: 12px; color: var(--muted); margin-left: auto; }
.va-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; }
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-table th, .perm-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.perm-table th:first-child, .perm-table td:first-child { text-align: left; }
.pick-list { display: flex; flex-direction: column; gap: 4px; }

/* Réglages et maquettes */
.modal-card.wide { max-width: 920px; }
.set-wrap { display: flex; gap: 18px; min-height: 0; }
.set-nav { flex: 0 0 170px; display: flex; flex-direction: column; gap: 4px; }
.set-tab { text-align: left; border: 0; border-radius: 10px; padding: 10px 12px; background: transparent; font-weight: 600; color: var(--muted2); }
.set-tab.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; }
.set-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mock-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mock-tag { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan { text-align: left; border: 2px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.plan.chosen { border-color: var(--accent); background: var(--accent-soft); }
.plan-title { font-weight: 800; font-size: 16px; }
.plan-price { font-weight: 800; font-size: 24px; color: var(--accent-dark); }
.plan-sub { font-size: 12px; color: var(--muted); }
.plan ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-weight: 500 !important; }
.opt.on { border-color: var(--accent); background: var(--accent-soft); }
.opt-price { font-weight: 800; color: var(--accent-dark); white-space: nowrap; font-size: 13px; }
.total { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--rail); color: #fff; }
.total strong { font-size: 20px; margin-right: auto; }
.kid { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--soft); }
.parent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pcard { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.big-num { font-size: 28px; font-weight: 800; color: var(--accent-dark); }
.week { display: flex; gap: 8px; align-items: flex-end; height: 110px; padding-top: 10px; }
.wcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.wbar { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: var(--accent-light); }
.wbar.over { background: #F59E0B; }
.pline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.mini-sel { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.rules { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--muted2); }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.slot { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--ok-bg); color: #14532D; font-size: 13px; }
.slot.pause { background: var(--accent-soft); color: var(--accent-dark); }
.slot-t { font-weight: 800; }

@media (max-width: 900px) {
  .va-body { flex-direction: column; }
  .va-right { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line); }
  .player-host { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .set-wrap { flex-direction: column; }
  .set-nav { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; }
}
.modal-card > * { flex-shrink: 0; }
.modal-card .mini-sel { width: auto; padding: 6px 8px; }
.cloud-chip { white-space: nowrap; }
.file-card.gone { background: var(--soft); border-style: dashed; }
.poll-mode { display: flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; }
.poll-mode.anon { background: var(--soft); color: var(--muted2); }
.poll-mode.pub { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #F59E0B; }
.poll.public { border-color: #F59E0B; }
.poll-opt { flex-wrap: wrap; }
.poll-voters { position: relative; flex-basis: 100%; font-size: 12px; color: var(--accent-dark); font-weight: 600; }
.file-card.eph { background: var(--warn-bg); border-color: #FDBA74; }
.file-card.eph .ico { background: var(--warn-bg); color: #C2410C; }
.eph-status { font-weight: 700; color: var(--warn-ink) !important; }
.eph-img { max-width: 100%; max-height: 60vh; border-radius: 12px; display: block; margin: 0 auto; user-select: none; -webkit-user-drag: none; }
.modal-card input[type=file] { width: 100%; }
/* Sondage : fond contrasté */
.poll { background: var(--accent-dark); border: 0; color: #fff; }
.poll.public { border: 2px solid #F59E0B; }
.poll-q span { color: #C4B5FD; }
.poll-opt { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.poll-opt:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.poll-opt.mine { border: 2px solid var(--card); }
.poll-bar { background: rgba(196,181,253,.45); }
.poll-n { color: var(--accent-soft); }
.poll-voters { color: #FDE68A; }
.poll-foot { color: #C4B5FD; }
.poll-mode.anon { background: rgba(255,255,255,.14); color: var(--accent-soft); }
.poll-mode.pub { background: var(--warn-bg); color: var(--warn-ink); }
/* Zone d'écriture : le champ garde toujours de la place */
.composer-box { flex-wrap: wrap; }
.composer-box input[type=text] { flex: 1 1 160px; min-width: 160px; }
@media (max-width: 1200px) { .composer-box .btn:not(.primary) { padding: 6px 10px; } }
/* Visionneuse éphémère : filigrane + flou hors focus */
.eph-wrap { position: relative; overflow: hidden; border-radius: 12px; align-self: center; max-width: 100%; }
.eph-wrap .eph-img { transition: filter .08s; }
.eph-wrap.blurred .eph-img { filter: blur(28px) brightness(.9); }
.eph-wrap.blurred::after { content: 'Reviens sur Callthem pour voir l’image'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.eph-wm { position: absolute; inset: -40%; display: flex; flex-wrap: wrap; gap: 60px 80px; align-content: center; justify-content: center; transform: rotate(-24deg); pointer-events: none; }
.eph-wm span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.28); text-shadow: 0 0 2px rgba(0,0,0,.25); white-space: nowrap; }
/* Visionneuse éphémère : bords réduits */
.modal-card.eph-modal { padding: 8px; gap: 8px; width: auto; max-width: min(92vw, 900px); }
.modal-card.eph-modal .eph-wrap { border-radius: 10px; }
.modal-card.eph-modal .eph-img { max-height: 78vh; border-radius: 10px; }
.modal-card.eph-modal .note-box { margin: 0; padding: 6px 10px; }
.modal-card.eph-modal .row { margin: 0; }
.modal-card.eph-modal .row .btn { min-height: 34px; padding: 6px 14px; }
.eph-bar { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px 10px; font-size: 13px; color: var(--muted2); }
.eph-bar span { flex: 1 1 auto; }
.eph-close { flex: 0 0 32px; height: 32px; border: 0; border-radius: 8px; background: var(--soft); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.eph-close:hover { background: var(--line); }
/* Visionneuse éphémère : image collée aux bords (haut, gauche, droite) */
.modal-card.eph-modal { padding: 0; gap: 0; overflow: hidden; border-radius: 14px; }
.modal-card.eph-modal .eph-wrap, .modal-card.eph-modal .eph-img { border-radius: 0; }
.modal-card.eph-modal .eph-img { width: 100%; }
.modal-card.eph-modal .eph-bar { padding: 6px 6px 6px 12px; }
.logo .ver { font-size: 13px; font-weight: 700; color: var(--muted); vertical-align: middle; }
.set-logout { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--danger-ink) !important; }
.set-logout svg { width: 16px; height: 16px; }
.set-ver { margin-top: 0; padding: 10px 12px 0; font-size: 12px; color: var(--muted); }
/* Aperçu en grand (double-clic) */
.img-wrap, .file-card, .file-row { cursor: zoom-in; }
.file-card .btn, .file-row .btn { cursor: pointer; }
.preview { position: fixed; inset: 0; z-index: 15; background: rgba(15,13,22,.82); display: flex; flex-direction: column; animation: pvIn .12s ease-out; }
@keyframes pvIn { from { opacity: 0; } to { opacity: 1; } }
.pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; }
.pv-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-size { font-size: 12px; color: #C4C0D4; white-space: nowrap; }
.pv-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pv-close:hover { background: rgba(255,255,255,.22); }
.pv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 16px; overflow: hidden; }
.pv-stage.scroll { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.pv-img { max-width: none; max-height: none; image-rendering: auto; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: zoom-in; background: var(--card); }
.pv-img.zoom { max-width: none; max-height: none; cursor: zoom-out; margin: auto; }
.pv-doc { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 10px; background: var(--card); }
.pv-media { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.pv-text { width: min(900px, 100%); max-height: 100%; overflow: auto; margin: 0; padding: 18px; border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pv-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; border-radius: 14px; background: var(--card); text-align: center; }
.pv-none .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }

/* Boutons icône (texte dans l'infobulle) */
.btn.ib { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 32px; min-width: 32px; }
.btn.primary.ib { width: 44px; min-width: 44px; }
.btn.ib.dark { background: #2E2A3D; color: #fff; }

.pv-btn { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pv-btn:hover { background: rgba(255,255,255,.22); }

/* Mini-appel dans la barre latérale */
.call-mini { margin: 0 10px 10px; padding: 10px; border-radius: 14px; background: #15131F; color: #fff; box-shadow: 0 6px 18px rgba(21,19,31,.25); display: flex; flex-direction: column; gap: 10px; }
.cm-info { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; padding: 2px 4px; text-align: left; border-radius: 8px; min-width: 0; }
.cm-info:hover { background: rgba(255,255,255,.06); }
.cm-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: cmPulse 1.8s infinite; }
@keyframes cmPulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
@media (prefers-reduced-motion: reduce) { .cm-dot { animation: none; } }
.cm-text { display: flex; flex-direction: column; min-width: 0; }
.cm-label { font-size: 11px; font-weight: 700; color: #4ADE80; text-transform: uppercase; letter-spacing: .04em; }
.cm-name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cm-btn { height: 36px; border: 0; border-radius: 10px; background: #2E2A3D; color: #fff; display: flex; align-items: center; justify-content: center; }
.cm-btn:hover { background: #3D3852; }
.cm-btn.on { background: #6D28D9; }
.cm-btn.off { background: var(--danger-bg); color: var(--danger-ink); }
.cm-btn.leave { background: #DC2626; }
.cm-btn.leave:hover { background: var(--danger-ink); }
.cm-btn svg { width: 18px; height: 18px; }

/* Icônes par type de fichier */
.file-row .ico { flex: 0 0 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ico.ft-image { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.ico.ft-video { background: #FCE7F3 !important; color: #BE185D !important; }
.ico.ft-audio { background: var(--warn-bg) !important; color: #C2410C !important; }
.ico.ft-pdf { background: var(--danger-bg) !important; color: var(--danger-ink) !important; }
.ico.ft-sheet { background: #D1FAE5 !important; color: #047857 !important; }
.ico.ft-zip { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.ico.ft-code { background: #E2E8F0 !important; color: #334155 !important; }
.ico.ft-text { background: var(--info-bg) !important; color: #1D4ED8 !important; }
.ico.ft-other { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.ico.ft-eph { background: var(--warn-bg); color: #C2410C; }
.row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.row-actions .btn.ib { width: 36px; min-width: 36px; height: 36px; }
.file-row .exp { white-space: nowrap; }

/* Aperçu : nom du fichier en pastille, pas de bande */
.pv-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(60vw, 520px); padding: 0; background: none; }
.pv-pill .ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pv-pill .ico svg { width: 16px; height: 16px; }
.pv-pill .pv-name { font-size: 14px; }
.pv-spacer { flex: 1 1 auto; }
.img-wrap { cursor: zoom-in; }

/* Salon musique / vidéo : agrandir et plein écran */
.player-wrap { position: relative; flex: 0 0 360px; max-width: 100%; }
.player-wrap .player-host { flex: none; width: 100%; }
.pl-ctl { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 2; }
.player-wrap:hover .pl-ctl, .player-wrap:focus-within .pl-ctl { opacity: 1; }
@media (hover: none) { .pl-ctl { opacity: 1; } }
.pl-btn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(15,13,22,.72); color: #fff; display: flex; align-items: center; justify-content: center; }
.pl-btn:hover { background: rgba(15,13,22,.92); }
.music.big .music-row { flex-direction: column; }
.music.big .player-wrap { flex: none; width: min(100%, calc(62vh * 16 / 9)); align-self: center; }
.music.big .music-side { flex: none; }
.player-wrap:fullscreen { display: flex; align-items: center; justify-content: center; background: #000; }
.player-wrap:fullscreen .player-host { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.queue-head { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; }
.queue-head span { display: flex; color: var(--accent-ink); }
.cat-hint { margin-left: auto; font-size: 11px; font-weight: 600; color: #7C7594; white-space: nowrap; }
.cat-hint.unread { color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 10px; font-weight: 800; }
.cat-hint.live { color: #047857; font-weight: 800; }

/* Tickets : liste des fils, puis le fil ouvert en pleine largeur (comme un forum) */
.tickets { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tickets.has-open .tk-list { display: none; }
.tickets:not(.has-open) .tk-pane { display: none; }
.tk-list { flex: 1 1 auto; padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tk-list-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.tk-new { display: flex; gap: 6px; align-items: center; justify-content: center; }
.tk-note { margin: 0; font-size: 12px; color: var(--muted); flex: 1 1 200px; }
.tk-item { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #22C55E; border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.tk-item:hover { border-color: #C4B5FD; border-left-color: #22C55E; background: var(--soft); }
.tk-item.closed { border-left-color: #D1D5DB; opacity: .75; }
.tk-top { display: flex; align-items: center; gap: 8px; }
.tk-when { margin-left: auto; font-size: 11px; color: var(--muted); }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tk-subj { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-meta { font-size: 12px; color: var(--muted); }
.tk-last { font-size: 13px; color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-state { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.tk-state.open { background: var(--ok-bg); color: var(--ok-ink); }
.tk-state.closed { background: var(--line); color: var(--muted2); }
.tk-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tk-empty { align-items: center; text-align: center; gap: 8px; padding: 28px 16px 8px; color: var(--muted); }
.tk-empty strong { color: var(--ink); font-size: 16px; }
.tk-big { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.tk-big svg { width: 28px; height: 28px; }
.tk-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tk-head .grow { flex: 1 1 220px; min-width: 0; }
.tk-title { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.tk-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.tk-sys { align-self: center; font-size: 12px; color: var(--muted); background: var(--soft); padding: 4px 10px; border-radius: 10px; }

/* Appel : mode focus (un grand + bandeau) */
.tile { cursor: pointer; }
.tile:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.tile .label .scr { display: flex; color: #C4B5FD; }
.tile .label .scr svg { width: 15px; height: 15px; }
.stage-focus { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.stage-main { flex: 1 1 auto; min-height: 0; display: flex; }
.stage-main .tile { flex: 1 1 auto; }
.stage-strip { flex: 0 0 120px; display: flex; gap: 10px; justify-content: center; overflow-x: auto; }
.tile.small { flex: 0 0 200px; height: 120px; }
.tile.small .big-av { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
.tile.small .label { left: 6px; bottom: 6px; font-size: 11px; padding: 2px 7px; }
.tk-picker { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.tk-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.tk-pick:hover { background: var(--soft); }
.tk-who { display: inline-flex; vertical-align: -3px; margin-right: 3px; }
.tk-who svg { width: 14px; height: 14px; }
.tk-edit { margin-left: 6px; border: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

/* Appel : colonnes repliables */
.app.hide-rail #rail, .app.hide-side #sidebar, .app.hide-members #members { display: none; }
.pnl-group { display: flex; gap: 6px; }
.btn.ib.pnl { opacity: .7; }
.btn.ib.pnl.on { opacity: 1; background: #4C3A8A; }

/* Rangs personnalisés */
.rank-tag { --rc: #6D28D9; display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 6px; margin-left: 4px;
  color: color-mix(in srgb, var(--rc) 75%, #15131F); background: color-mix(in srgb, var(--rc) 16%, #fff); border: 1px solid color-mix(in srgb, var(--rc) 35%, #fff); white-space: nowrap; }
.prof-ranks { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px -4px; }
.rank-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-chip { --rc: #6D28D9; border: 1px solid color-mix(in srgb, var(--rc) 40%, #fff); background: #fff; color: color-mix(in srgb, var(--rc) 75%, #15131F); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; cursor: pointer; }
.rank-chip.on { background: var(--rc); color: #fff; border-color: var(--rc); }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.rank-row .grow { flex: 1 1 auto; min-width: 0; }
.rank-row .rank-tag { margin-left: 0; font-size: 12px; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: #15131F; box-shadow: 0 0 0 2px var(--card) inset; }
.rank-lock svg { width: 13px; height: 13px; }

/* Boutique (maquette) */
.shop { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.shop-balance { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }
.shop-balance svg { color: #D97706; }
.shop-intro { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); }
.shop-intro p { margin: 0; flex: 1 1 320px; color: #3B2A6B; font-size: 14px; }
.shop-tabs { align-self: flex-start; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.shop-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.shop-card:hover { box-shadow: 0 8px 24px rgba(21,19,31,.1); transform: translateY(-2px); }
.shop-art { height: 120px; background-size: cover; background-position: center; position: relative; }
.shop-card.is-banner .shop-art { height: 90px; }
.shop-mini { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 8px; background: rgba(255,255,255,.82); width: 70px; }
.shop-mini span { height: 6px; border-radius: 3px; background: rgba(21,19,31,.25); }
.shop-mini span:first-child { width: 70%; background: rgba(21,19,31,.45); }
.shop-emojis { height: 120px; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; font-size: 26px; background: #FAF7FF; padding: 8px; }
.shop-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.shop-top { display: flex; align-items: center; gap: 8px; }
.shop-top strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--ok-ink); background: var(--ok-bg); padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.shop-meta { font-size: 12px; color: var(--muted); }
.shop-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.shop-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--warn-ink); margin-right: auto; }
.shop-price svg { color: #D97706; }
.shop-earn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shop-earn li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.shop-earn li span { color: var(--muted); font-size: 12px; }
.shop-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.shop-note { margin: 2px 0 6px; padding: 4px 12px; font-size: 13px; color: var(--muted); }

/* Espace créateur */
.creator { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.cr-types { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-type { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 700; color: var(--muted2); }
.cr-type.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cr-rules { border: 1px solid #FDE68A; background: var(--warn-bg); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--warn-ink); }
.cr-rules ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.cr-slot { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); flex-wrap: wrap; }
.cr-frame { position: relative; flex: 0 0 auto; width: min(260px, 100%); border: 2px dashed #C4B5FD; border-radius: 10px; background: repeating-conic-gradient(#F3F3F7 0 25%, #fff 0 50%) 0 0 / 16px 16px; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); font-weight: 800; font-size: 12px; overflow: hidden; }
.cr-frame img { width: 100%; height: 100%; object-fit: cover; }
.cr-safe { position: absolute; left: 12.5%; right: 12.5%; top: 20%; bottom: 20%; border: 1.5px dashed rgba(109,40,217,.7); border-radius: 4px; pointer-events: none; }
.cr-avatar { position: absolute; left: 4%; bottom: -8%; width: 19%; aspect-ratio: 1; border-radius: 10px; background: rgba(109,40,217,.25); border: 2px solid var(--card); pointer-events: none; }
.cr-info { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cr-spec { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-spec span { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); }
.cr-tip { margin: 0; font-size: 13px; color: var(--muted2); }
.cr-results { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.cr-results .ok { color: var(--ok-ink); } .cr-results .bad { color: var(--danger-ink); }
.cr-colors { display: flex; gap: 14px; flex-wrap: wrap; }
.cr-color { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cr-color input { width: 36px; height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--card); }
.cr-send { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 12px 0 4px; }

/* Lecteur repliable */
.music-top { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; min-width: 0; }
.music-top-ico { display: flex; color: var(--accent-ink); }
.music-top-ico svg, .music-top-tip svg { width: 16px; height: 16px; }
.music-top-title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-top-tip { display: flex; color: var(--muted); cursor: help; }
.music-fold { width: 30px; height: 30px; padding: 0; border-radius: 8px; }
.music-fold svg { transition: transform .15s; transform: rotate(180deg); }
.music-fold.closed svg { transform: none; }
.music.min { padding-top: 8px; padding-bottom: 8px; }
.music.min .music-top { margin: 0; }
.music.min .music-row { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.music { position: relative; }

/* Boutique : recherche et filtres */
.shop-tools { display: flex; flex-direction: column; gap: 10px; }
.shop-tools-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shop-search { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.shop-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shop-search span { display: flex; color: var(--muted); }
.shop-search span svg { width: 18px; height: 18px; }
.shop-search-in { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; }
.shop-select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); }
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.shop-chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.shop-chip:hover { border-color: var(--accent); }
.shop-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-own { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.shop-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.shop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.shop-empty strong { color: var(--ink); }

/* Dossiers de serveurs : 2 par ligne + glisser-déposer */
.folder-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 0 10px 10px 0; }
.banner.tile { height: 64px; padding: 6px 7px; font-size: 12px; line-height: 1.15; }
.banner.tile .bn-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.banner.tile .badge { top: 4px; right: 4px; min-width: 18px; height: 18px; font-size: 10px; }
.loose-zone { display: flex; flex-direction: column; gap: 10px; border-radius: 12px; }
.drop-hint { display: none; padding: 14px 8px; border: 1.5px dashed #4B4366; border-radius: 10px; color: var(--railmuted); font-size: 12px; text-align: center; }
.rail.drag-on .drop-hint { display: block; }
.banner.dragging { opacity: .4; }
.rail.drag-on .folder-head, .rail.drag-on .folder-closed, .rail.drag-on .folder-body { box-shadow: inset 0 0 0 1.5px #4B4366; border-radius: 10px; }
.drop-over { box-shadow: inset 0 0 0 2px var(--accent-light) !important; background-color: rgba(183,156,245,.12); }
.banner.drop-over { box-shadow: 0 0 0 2px var(--accent-light) !important; }
.pv-pill .pv-name, .pv-pill .pv-size { text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Sondage : clair et sobre */
.poll { background: var(--card); border: 1px solid #DDD0FB; border-radius: 14px; padding: 14px; gap: 8px; color: var(--ink); box-shadow: none; }
.poll.public { border: 1px solid #F5C451; }
.poll-mode.pub { background: var(--warn-bg); color: var(--warn-ink); border: 0; }
.poll-mode.anon { background: #F1ECFD; color: #5B3A8C; }
.poll-q { font-size: 15px; }
.poll-q span { color: var(--accent-ink); }
.poll-opt { background: #FAF8FF; border: 1px solid #E9E2FB; color: var(--ink); border-radius: 10px; }
.poll-opt:hover:not(:disabled) { background: #F4EFFE; border-color: #CDB8F6; }
.poll-bar { background: #EAE1FC; }
.poll-opt.lead .poll-bar { background: #DCCDFA; }
.poll-opt.mine { border: 1.5px solid var(--accent); box-shadow: none; }
.poll-t { display: inline-flex; align-items: center; gap: 6px; }
.poll-check { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; align-items: center; justify-content: center; }
.poll-check svg { width: 11px; height: 11px; }
.poll-n { color: var(--muted2); }
.poll-n strong { color: var(--ink); }
.poll-voters { color: #6D4BB0; font-weight: 600; opacity: 1; }
.poll-foot { color: var(--muted); }

/* Rôles au choix et centres d'intérêt */
.self-access { display: flex; flex-direction: column; gap: 8px; }
.self-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-chip { display: inline-flex; align-items: center; gap: 5px; }
.chip-ico { display: inline-flex; }
.chip-ico svg { width: 12px; height: 12px; }
.prof-interests { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.prof-int-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.interest-list { display: flex; flex-wrap: wrap; gap: 6px; }
.interest-tag { --rc: #6D28D9; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 12%, #fff); color: color-mix(in srgb, var(--rc) 80%, #15131F); border: 1px solid color-mix(in srgb, var(--rc) 25%, #fff); }

/* Connexion avec mot de passe */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); margin-bottom: 4px; }
.auth-tab { border: 0; background: none; border-radius: 9px; padding: 9px 8px; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted2); cursor: pointer; }
.auth-tab.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(21,19,31,.1); }
.pass-wrap { position: relative; display: flex; }
.pass-wrap input { flex: 1 1 auto; min-width: 0; padding-right: 44px; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pass-eye:hover { background: var(--soft); color: var(--ink); }
.login-err { margin: 0; min-height: 0; color: var(--danger-ink); font-size: 13px; font-weight: 600; }
.login-err:empty { display: none; }
#betaField, #recoverField { display: flex; flex-direction: column; gap: 10px; }
#betaField.hidden, #recoverField.hidden { display: none; }

/* Pseudos de serveur */
.prof-handle { font-size: 12px; color: var(--muted); margin-top: -2px; }
.nick-row { display: flex; gap: 8px; }
.nick-row input { flex: 1 1 auto; min-width: 0; }

/* codes de secours */
.rc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; padding: 12px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.rc-grid code { font: 600 15px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-align: center; user-select: all; }
.link-btn { background: none; border: 0; padding: 0; margin: 8px auto 0; display: block; color: var(--accent-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.rc-ico { display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.rc-ico svg { width: 18px; height: 18px; }
#loginRecover { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }

/* messages : supprimé, modifié, réponse, réactions, mentions */
.msg.deleted .msg-gone { margin: 3px 0 0; color: var(--muted); font-style: italic; font-size: 14px; }
.msg.blocked-msg { padding-left: 52px; }
.msg.blocked-msg .link-btn { color: var(--muted); font-weight: 500; }
.msg .edited { color: var(--muted); font-size: 12px; }
.msg.mentioned { background: var(--warn-bg); box-shadow: inset 3px 0 0 #E5A100; border-radius: 10px; margin: 0 -10px; padding: 6px 10px; }
.msg.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.at { color: var(--accent-dark); background: var(--accent-soft); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.at.me { color: #7A4E00; background: #FFE8A3; }
.reply-quote { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin-bottom: 2px; color: var(--muted); font-size: 13px; max-width: 100%; cursor: pointer; text-align: left; }
.reply-quote strong { color: var(--muted2); font-weight: 700; flex: none; }
.rq-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.react { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 2px 9px; font-size: 14px; }
.react .rn { font-size: 12px; font-weight: 700; color: var(--muted2); }
.react.mine { border-color: var(--accent-light); background: var(--accent-soft); }
.react.mine .rn { color: var(--accent-dark); }
.react-pop { position: absolute; right: 0; top: 18px; z-index: 6; display: flex; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(20,18,30,.14); }
.react-pop button { border: 0; background: transparent; font-size: 20px; width: 36px; height: 36px; border-radius: 8px; }
.react-pop button:hover, .react-pop button:focus-visible { background: var(--soft); }
.edit-wrap { margin-top: 4px; }
.edit-box { width: 100%; resize: vertical; padding: 8px 10px; border: 1px solid var(--accent-light); border-radius: 10px; line-height: 1.5; }
.edit-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.del-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--soft); border-radius: 6px; color: var(--muted2); white-space: pre-wrap; }
.composer { position: relative; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 6px; background: var(--soft); border-radius: 10px; font-size: 13px; color: var(--muted2); }
.reply-bar.hidden { display: none; }
.reply-bar .rq-text { flex: 1 1 auto; color: var(--muted); }
.reply-bar .rb-x { margin-left: auto; }
.at-suggest { position: absolute; left: 20px; bottom: calc(100% - 8px); z-index: 7; min-width: 220px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(20,18,30,.14); display: flex; flex-direction: column; }
.at-suggest.hidden { display: none; }
.at-suggest button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; text-align: left; font-weight: 600; }
.at-suggest button.sel, .at-suggest button:hover { background: var(--accent-soft); }
.at-suggest .at-h { color: var(--muted); font-weight: 500; font-size: 12px; }
.banner .badge.mention { background: #FFD25E; color: #4A3000; font-weight: 800; }
.chan .n.mention { color: #7A4E00; background: #FFE8A3; border-radius: 8px; padding: 1px 6px; font-weight: 800; }
/* menu du serveur */
.side-head { position: relative; }
.srv-menu { position: fixed; z-index: 30; min-width: 210px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,18,30,.16); display: flex; flex-direction: column; }
.srv-menu button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; text-align: left; font-weight: 600; color: var(--ink); }
.srv-menu button:hover, .srv-menu button:focus-visible { background: var(--soft); }
.srv-menu button.danger { color: var(--danger-ink); }
.ban-list { display: flex; flex-direction: column; gap: 6px; }
.ban-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--soft); border-radius: 10px; }
.ban-row .when { color: var(--muted); font-size: 12px; margin-right: auto; }
/* focus clavier visible partout */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* avis et étoiles */
.discover-tools { display: flex; gap: 8px; }
.discover-tools input { flex: 1 1 auto; min-width: 0; }
.discover-tools select { flex: none; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 600; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars .st { width: var(--sz); height: var(--sz); background: linear-gradient(90deg, #F5A524 var(--f), #DAD8E3 var(--f));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3L2.9 9.5l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.drating { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted2); cursor: pointer; align-self: flex-start; }
.drating strong { color: var(--ink); }
.drating:hover span:last-child { text-decoration: underline; }
.rv-head { display: flex; gap: 20px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rv-score { text-align: center; flex: none; min-width: 110px; }
.rv-avg { font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.rv-count { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rv-dist { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.rv-line { display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted2); }
.rv-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.rv-bar span { display: block; height: 100%; background: #F5A524; border-radius: 4px; }
.rv-k { text-align: right; }
.rv-title { font-size: 17px; margin: 4px 0 0; }
.rv-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.rv-form-t { font-weight: 700; }
.rv-pick { display: flex; align-items: center; gap: 2px; }
.rv-star { border: 0; background: none; padding: 2px; color: #C9C6D4; cursor: pointer; }
.rv-star svg { width: 28px; height: 28px; }
.rv-star.on { color: #F5A524; }
.rv-star.on svg { fill: currentColor; }
.rv-pick-l { margin-left: 8px; font-weight: 600; color: var(--muted2); font-size: 14px; }
.rv-form textarea, .rv-reply-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; line-height: 1.5; background: var(--card); }
.rv-list { display: flex; flex-direction: column; gap: 10px; }
.rv-item { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.rv-item.mine { border-color: var(--accent-light); background: var(--accent-soft); }
.rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-who { font-weight: 700; font-size: 13px; }
.rv-meta .when { font-size: 12px; color: var(--muted); }
.rv-text { margin: 6px 0 0; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.rv-reply { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--accent-light); background: var(--soft); border-radius: 6px; font-size: 14px; }
.rv-reply strong { font-size: 12px; color: var(--accent-dark); }
.rv-reply p { margin: 2px 0 0; white-space: pre-wrap; }
.rv-reply-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rv-actions { display: flex; gap: 14px; margin-top: 6px; }
.rv-actions .link-btn { margin: 0; font-size: 12px; }
.link-btn.danger { color: var(--danger-ink); }
.link-btn.muted { color: var(--muted); font-weight: 500; }
.rv-flagged { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .rv-head { flex-direction: column; align-items: stretch; } .discover-tools { flex-direction: column; } .discover-tools select { height: 40px; } }

/* invitations et réputation */
.rep-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.rep-top { display: flex; justify-content: space-between; align-items: flex-end; }
.rep-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.rep-name { font-size: 18px; font-weight: 800; }
.rep-score { font-weight: 700; color: var(--muted2); }
.rep-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.rep-bar span { display: block; height: 100%; border-radius: 4px; background: var(--rep, #1F9D55); }
.rep-high { --rep: #1F9D55; } .rep-ok { --rep: #2563EB; } .rep-low { --rep: #D97706; } .rep-pause { --rep: #DC2626; }
.rep-max { margin: 0; font-weight: 600; }
.rep-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.rep-parts li { display: flex; justify-content: space-between; }
.rep-parts li.up strong { color: #1F9D55; } .rep-parts li.down strong { color: #DC2626; }
.inv-list { display: flex; flex-direction: column; gap: 6px; }
.inv-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--soft); flex-wrap: wrap; }
.inv-row code { font: 600 14px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.inv-state { margin-right: auto; font-size: 13px; color: var(--muted2); }
.inv-row.inv-expired, .inv-row.inv-revoked { opacity: .6; }
.warn-box { background: var(--warn-bg); border: 1px solid #F3D27A; color: #4A3500; }
.team-h { font-size: 15px; margin: 12px 0 4px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.team-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.team-info span { font-size: 13px; color: var(--muted2); }

/* page serveur de l'équipe Callthem */
.ts-list { display: flex; flex-direction: column; gap: 6px; }
.ts-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; flex-wrap: wrap; }
.ts-row:hover { background: var(--soft); }
.ts-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.ts-name { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.ts-name span { font-size: 12px; color: var(--muted); }
.ts-cell { display: flex; flex-direction: column; align-items: center; min-width: 64px; font-size: 13px; }
.ts-cell small { font-size: 11px; color: var(--muted); }
.rep-pill { display: inline-block; min-width: 34px; text-align: center; padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--soft); color: var(--muted2); }
.rep-pill.rep-high { background: var(--ok-bg); color: var(--ok-ink); } .rep-pill.rep-ok { background: var(--info-bg); color: #1E40AF; }
.rep-pill.rep-low { background: var(--warn-bg); color: var(--warn-ink); } .rep-pill.rep-pause { background: var(--danger-bg); color: var(--danger-ink); }
.ts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kpi small { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kpi-v { font-size: 22px; font-weight: 800; }
.kpi-v .rep-pill { font-size: 18px; padding: 2px 10px; }
.kpi span { font-size: 12px; color: var(--muted2); }
.ts-hidden { display: flex; flex-direction: column; gap: 4px; }
.ts-hrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--soft); border-radius: 8px; font-size: 13px; flex-wrap: wrap; }
.ts-hrow span:last-child { color: var(--muted2); }
.ts-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--soft); white-space: nowrap; }
.ts-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ts-table tr:last-child td { border-bottom: 0; }
.ts-table td.warn { color: var(--danger-ink); font-weight: 700; }
.ts-table tr.susp { opacity: .55; }
.ts-role { display: block; font-size: 11px; color: var(--muted); }

/* investigations */
.inv-cases { display: flex; flex-direction: column; gap: 8px; }
.inv-case { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.inv-case.inv-pending { border-color: #F3D27A; background: var(--warn-bg); }
.inv-case.inv-approved { border-color: #FCA5A5; background: #FEF2F2; }
.inv-case.inv-rejected, .inv-case.inv-expired { opacity: .75; }
.inv-top { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inv-badge { margin-left: auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--muted2); }
.inv-pending .inv-badge { background: var(--warn-bg); color: var(--warn-ink); } .inv-approved .inv-badge { background: var(--danger-bg); color: var(--danger-ink); }
.inv-reason { margin: 0; font-style: italic; }
.inv-log { display: flex; flex-direction: column; font-size: 12px; color: var(--muted2); gap: 1px; }
.inv-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--danger-bg); color: var(--danger-ink); font-weight: 700; font-size: 13px; }
.inv-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.inv-msg { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.inv-closed .inv-badge { background: var(--ok-bg); color: var(--ok-ink); }
.inv-result { font-weight: 700; color: var(--text); }
.inv-log .warn { color: #B45309; font-weight: 700; }
.inv-choices { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.inv-journal td { vertical-align: top; }
.inv-journal .inv-detail { max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.inv-ev { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soft); white-space: nowrap; }
.ev-request .inv-ev { background: var(--warn-bg); color: var(--warn-ink); } .ev-approve .inv-ev, .ev-read .inv-ev { background: var(--danger-bg); color: var(--danger-ink); }
.ev-reject .inv-ev { background: var(--soft); color: var(--muted2); } .ev-result .inv-ev { background: var(--ok-bg); color: var(--ok-ink); }
#invExport { display: inline-flex; align-items: center; gap: 6px; }
.frozen-box p span, .frozen-box p svg { vertical-align: middle; }
.frozen-main { max-width: 460px; margin: 80px auto; text-align: center; color: var(--muted2); }
.frozen-main svg { width: 40px; height: 40px; color: var(--danger-ink); }
.frozen-main h2 { color: var(--text); margin: 8px 0; }
#freezeBtn, #exportBtn { display: inline-flex; align-items: center; gap: 6px; }
.ev-freeze .inv-ev, .ev-export .inv-ev { background: var(--danger-bg); color: var(--danger-ink); } .ev-unfreeze .inv-ev { background: var(--ok-bg); color: var(--ok-ink); }
.pass-rules { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 2px; padding: 0; font-size: 12px; color: var(--muted2); }
.pass-rules li.ok { color: var(--ok-ink); font-weight: 700; }
/* amis */
.friends-btn { font-weight: 700; }
.fr-code { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft); margin-bottom: 4px; }
.fr-code > div { display: flex; flex-direction: column; margin-right: auto; }
.fr-code small { font-size: 11px; color: var(--muted2); font-weight: 700; }
.fr-code code { font-size: 20px; font-weight: 800; letter-spacing: 2px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line, #EEE); }
.fr-row strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-btns { display: flex; gap: 6px; align-items: center; }
#friendCode { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 1px; }
.fr-servers { display: flex; flex-direction: column; gap: 6px; }
.fr-server { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, var(--line)); background: var(--bg, var(--card)); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.fr-server:hover:not(:disabled) { border-color: #6D28D9; }
.fr-server:disabled { opacity: .55; cursor: default; }
.fr-server .side-note { margin-left: auto; }
.srv-invite { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 4px 0; border-radius: 12px; border: 1px solid var(--line, var(--line)); max-width: 420px; background: var(--soft); }
.si-banner { flex: 0 0 auto; width: 92px; height: 44px; border-radius: 8px; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: flex-end; padding: 4px 6px; overflow: hidden; }
.si-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.si-info small { font-size: 11px; color: var(--muted2); }

/* Mode sombre : champs, ombres et quelques détails */
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--soft); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .members { background: var(--panel); }
:root[data-theme="dark"] .modal-card { box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 1px solid var(--line); }
:root[data-theme="dark"] .btn.danger { background: var(--danger-bg); color: var(--danger-ink); }
:root[data-theme="dark"] img { opacity: .96; }
/* Réglages > Apparence */
.theme-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.theme-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; min-width: 132px; }
.theme-opt.active { border-color: var(--accent); }
.theme-sw { display: flex; width: 108px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.theme-sw span { flex: 1; }
.theme-light .theme-sw span:nth-child(1) { background: #15131F; } .theme-light .theme-sw span:nth-child(2) { background: #EFEFF4; } .theme-light .theme-sw span:nth-child(3) { background: #fff; }
.theme-dark .theme-sw span:nth-child(1) { background: #1F1D27; } .theme-dark .theme-sw span:nth-child(2) { background: #302E3B; } .theme-dark .theme-sw span:nth-child(3) { background: #353341; }
.theme-auto .theme-sw span:nth-child(1) { background: #15131F; } .theme-auto .theme-sw span:nth-child(2) { background: linear-gradient(90deg, #EFEFF4 50%, #302E3B 50%); } .theme-auto .theme-sw span:nth-child(3) { background: linear-gradient(90deg, #fff 50%, #353341 50%); }
#langPick { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); min-width: 200px; }
.login-lang { align-self: center; margin-top: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 13px; }

/* v0.3.9 : lien externe dans le lecteur, suppression du compte, confidentialité */
.player-ext { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 160px; padding: 16px; text-align: center; color: var(--ink); }
.player-ext p { margin: 0; }
.player-ext .pe-ico svg { width: 28px; height: 28px; color: var(--warn-ink); }
.del-list { margin: 0 0 6px; padding-left: 18px; }
.del-list li { margin: 3px 0; }
.login-privacy { display: block; margin-top: 8px; font-size: 12px; color: var(--muted, #6B7280); text-align: center; }

/* Réglages : la colonne de gauche reste fixe (Se déconnecter et version toujours visibles), seul le contenu défile */
.modal-card:has(> .set-wrap) { overflow: hidden; }
.modal-card > .set-wrap { flex: 1 1 auto; min-height: 0; }
.set-nav { overflow-y: auto; }
.set-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
@media (max-width: 640px) {
  .modal-card:has(> .set-wrap) { overflow-y: auto; }
  .modal-card > .set-wrap { flex: 0 0 auto; }
  .set-body { overflow: visible; }
}

/* Mode sombre : couleurs écrites en dur pour le thème clair (sondages, icônes de fichiers, encadrés…) */
:root[data-theme="dark"] .poll { border-color: var(--line); }
:root[data-theme="dark"] .poll-mode.anon { background: var(--accent-soft); color: var(--accent-dark); }
:root[data-theme="dark"] .poll-opt { background: var(--soft); border-color: var(--line); }
:root[data-theme="dark"] .poll-opt:hover:not(:disabled) { background: #484458; border-color: #7A68B0; }
:root[data-theme="dark"] .poll-bar { background: #4A3F70; }
:root[data-theme="dark"] .poll-opt.lead .poll-bar { background: #5A4A8E; }
:root[data-theme="dark"] .poll-n { color: var(--muted2); }
:root[data-theme="dark"] .rank-chip { background: var(--soft); color: color-mix(in srgb, var(--rc) 45%, #fff); border-color: color-mix(in srgb, var(--rc) 55%, var(--line)); }
:root[data-theme="dark"] .shop-emojis { background: var(--soft); }
:root[data-theme="dark"] .shop-intro p { color: var(--muted2); }
:root[data-theme="dark"] .viewas-bar.test { color: #3A2A00; }
:root[data-theme="dark"] .inv-case.inv-approved { background: var(--danger-bg); border-color: #7F2A30; }
:root[data-theme="dark"] .slot { color: var(--ok-ink); }
:root[data-theme="dark"] .warn-box { border-color: #6B5216; color: var(--warn-ink); }
:root[data-theme="dark"] .rep-pill.rep-ok { color: #93C5FD; }
:root[data-theme="dark"] .rep-parts li.up strong { color: #4ADE80; } :root[data-theme="dark"] .rep-parts li.down strong { color: #F87171; }
:root[data-theme="dark"] .ico.ft-video { background: #4A1D35 !important; color: #F9A8D4 !important; }
:root[data-theme="dark"] .ico.ft-audio { color: #FDBA74 !important; }
:root[data-theme="dark"] .ico.ft-sheet { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
:root[data-theme="dark"] .ico.ft-code { background: #3A3F4B !important; color: #CBD5E1 !important; }
:root[data-theme="dark"] .ico.ft-text { color: #93C5FD !important; }
:root[data-theme="dark"] .poll-voters { color: var(--accent-ink); }

/* Vocal : popup « X a rejoint le vocal » en haut au milieu */
.voice-pops { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.voice-pop { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(21, 19, 31, .88); color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: vp-in .2s ease-out; transition: opacity .4s, transform .4s; }
.voice-pop .vp-name { font-weight: 800; }
.voice-pop .vp-what { opacity: .85; }
.voice-pop::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34C76F; order: 3; }
.voice-pop.left::before { background: #9CA3AF; }
.voice-pop.out { opacity: 0; transform: translateY(-6px); }
@keyframes vp-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .voice-pop { animation: none; transition: none; } }

/* Écran de chargement : logo + cercle qui tourne (démarrage, reconnexion) */
.boot { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--rail); color: #fff; transition: opacity .3s; }
.boot.over { background: rgba(21, 19, 31, .82); backdrop-filter: blur(3px); }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, #8B5CF6, #6D28D9); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(109, 40, 217, .35); animation: boot-pulse 1.8s ease-in-out infinite; }
.boot-logo svg { width: 50px; height: 50px; }
.boot-name { font-size: 24px; font-weight: 800; letter-spacing: .01em; }
.boot-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #B9A3FF; animation: boot-turn .8s linear infinite; }
.boot-msg { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); min-height: 1em; }
@keyframes boot-turn { to { transform: rotate(360deg); } }
@keyframes boot-pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .boot-logo { animation: none; } .boot-spin { animation-duration: 2.4s; } }

/* ---- emojis et stickers personnalisés ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.emoji-inline { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }
.msg-text.big-emoji .emoji-inline { width: 44px; height: 44px; vertical-align: middle; }
img.sticker { display: block; max-width: 160px; max-height: 160px; object-fit: contain; margin-top: 4px; border-radius: 8px; }
.emoji-pop { position: absolute; right: 20px; bottom: 72px; z-index: 20; width: 340px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(20,18,30,.18); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ep-tabs { display: flex; gap: 4px; }
.ep-tabs button { flex: 1; border: 0; background: var(--soft); color: var(--ink); padding: 7px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.ep-tabs button.on { background: var(--accent-soft); color: var(--accent-ink); }
.ep-body { max-height: 260px; overflow-y: auto; }
.ep-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 6px 2px 4px; }
.ep-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ep-grid.stickers { grid-template-columns: repeat(4, 1fr); }
.ep-grid button { border: 0; background: transparent; border-radius: 8px; padding: 4px; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; }
.ep-grid button:hover, .ep-grid button:focus-visible { background: var(--soft); }
.ep-grid img { width: 100%; height: 100%; object-fit: contain; }
.ep-emoji img { max-width: 30px; max-height: 30px; }
.ep-manage { margin: 0; align-self: flex-start; }
.emoji-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.emoji-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; }
.emoji-row:hover { background: var(--soft); }
.emoji-row img { width: 28px; height: 28px; object-fit: contain; }
.emoji-row img.big { width: 44px; height: 44px; }
.emoji-row .en { font-weight: 600; flex: 1; }
.emoji-row .ek { font-size: 12px; color: var(--muted); }
/* ---- journal du serveur ---- */
.log-list { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.log-row { display: flex; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.log-row:last-child { border-bottom: 0; }
.log-row .when { flex: 0 0 auto; color: var(--muted); font-size: 12px; min-width: 110px; }
.log-row .ld { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted2); font-size: 12px; }
/* ---- comparer les permissions ---- */
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cmp th, table.cmp td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font-size: 13px; color: var(--muted); }
table.cmp tbody th { font-weight: 500; width: 40%; }
table.cmp tr.diff { background: var(--accent-soft); }
.cmp-yes { color: #16A34A; } .cmp-no { color: #DC2626; }
.cmp-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--soft); font-size: 12px; }
.cmp-chip.only { background: var(--accent); color: #fff; }
#cmpOut { max-height: 48vh; overflow-y: auto; }
.cmp-pick { display: flex; flex-wrap: nowrap; align-items: center; }
.cmp-pick select, #logFilter { flex: 1 1 0; width: auto; min-width: 0; max-width: 320px; margin: 0; }
/* ---- « Joue à… » ---- */
.note.activity { display: flex; align-items: center; gap: 4px; color: #16A34A; }
.note.activity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .note.activity, :root[data-theme="dark"] .cmp-yes { color: #4ADE80; }
:root[data-theme="dark"] .cmp-no { color: #F87171; }
/* ---- pièces jointes des signalements ---- */
.rep-att { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 2px 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--accent-ink); font-size: 12px; cursor: pointer; }
.rep-att.gone { color: var(--muted); cursor: default; }
.rep-att svg { width: 12px; height: 12px; }
/* ---- appels : code de sécurité ---- */
.callsec-list { display: flex; flex-direction: column; gap: 8px; }
.callsec-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.callsec-row .cs-name { flex: 1; font-weight: 600; }
.cs-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .08em; background: var(--soft); padding: 4px 10px; border-radius: 8px; }
/* ---- Réglages > Débogage ---- */
.dbg-list { display: flex; flex-direction: column; flex-shrink: 0; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }
.dbg-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.dbg-row:last-child { border-bottom: 0; }
.dbg-ts { color: var(--muted); flex: 0 0 auto; }
.dbg-lvl { flex: 0 0 auto; font-weight: 700; text-transform: uppercase; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--soft); }
.lvl-error .dbg-lvl, .lvl-crash .dbg-lvl, .lvl-client .dbg-lvl { background: #FEE2E2; color: #991B1B; }
.lvl-warn .dbg-lvl { background: #FEF3C7; color: #92400E; }
.dbg-who { font-weight: 600; flex: 0 0 auto; }
.dbg-txt { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; flex: 1; min-width: 0; }
.dbg-tiles { flex-shrink: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.dbg-tile { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dbg-v { font-weight: 700; font-size: 15px; }
.dbg-k { color: var(--muted); font-size: 12px; }