:root {
  --fond: #FFF7EE;
  --panneau: #FFFFFF;
  --panneau-2: #FBF5FF;
  --survol: #F6F0FF;
  --rail: #F1E9FF;
  --ligne: #EDE4F7;
  --ligne-2: #D9CCF2;
  --texte: #2B2340;
  --texte-2: #615877;
  --texte-3: #7F7795;
  --texte-msg: #3A3150;
  --violet: #6E45D9;
  --violet-fonce: #5B35C2;
  --violet-clair: #EDE5FF;
  --violet-clair-2: #E1D5FF;
  --vert: #23893F;
  --vert-clair: #E3F7E8;
  --vert-texte: #1F7A39;
  --rouge: #D93A40;
  --rouge-clair: #FFE3E4;
  --or: #B07A00;
  --or-clair: #FFF3C4;
  --rayon: 18px;
  --ombre: 0 6px 24px rgba(80, 50, 140, .10);
  --voile: rgba(43, 35, 64, .35);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fond: #17141F;
  --panneau: #211D2B;
  --panneau-2: #2A2536;
  --survol: #2E2840;
  --rail: #120F18;
  --ligne: #332C42;
  --ligne-2: #4A4060;
  --texte: #F2EEFA;
  --texte-2: #C3BAD6;
  --texte-3: #9C93B0;
  --texte-msg: #E4DEF0;
  --violet: #9B7BFF;
  --violet-fonce: #B39BFF;
  --violet-clair: #352A55;
  --violet-clair-2: #40336A;
  --vert: #3FBF63;
  --vert-clair: #1D3526;
  --vert-texte: #8FE3A6;
  --rouge: #F0565C;
  --rouge-clair: #43222A;
  --or: #F2C14E;
  --or-clair: #3A3018;
  --ombre: 0 6px 24px rgba(0, 0, 0, .35);
  --voile: rgba(0, 0, 0, .55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--font-ui, 'Nunito', sans-serif); font-size: 0.9375rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, .brand { font-family: var(--font-titre, 'Fredoka', sans-serif); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* ---------- Boutons ---------- */
.btn {
  border: none; border-radius: var(--rc-btn, 14px); padding: var(--btn-pad-y, 10px) var(--btn-pad-x, 18px); font-weight: 800;
  font-size: var(--btn-fs, .9375rem);
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--btn-shadow, none);
  transition: transform var(--t-fast, .14s), background var(--t-fast, .14s), box-shadow var(--t-fast, .14s); text-decoration: none;
}
.btn:hover { transform: translateY(var(--btn-lift, 0)) scale(var(--btn-hover-scale, 1)); box-shadow: var(--btn-glow, none), var(--btn-shadow, none); }
.btn:active { transform: scale(.97); box-shadow: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--violet); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #17141F; }
.btn-primary:hover { background: var(--violet-fonce); }
.btn-soft { background: var(--violet-clair); color: var(--violet); }
.btn-soft:hover { background: var(--violet-clair-2); }
.btn-green { background: var(--vert); color: #fff; }
.btn-red { background: var(--rouge); color: #fff; }
.btn-ghost-red { background: transparent; color: var(--rouge); border: 2px solid var(--rouge); }
.btn-ghost-red:hover { background: var(--rouge-clair); }
.btn-gold { background: #FFD93D; color: #2B2340; }
.btn-gold:hover { background: #FFCE0A; }
.btn-big { width: 100%; min-height: 50px; font-size: 1rem; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none; background: transparent; flex-shrink: 0;
  color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--violet-clair); color: var(--violet); }
.icon-btn.danger { background: var(--rouge); color: #fff; }
.icon-btn.call { background: var(--vert-clair); color: var(--vert); }
.icon-btn.call:hover { background: var(--vert); color: #fff; }
#btn-mute .ic-mic-off { display: none; }
#btn-mute[aria-pressed="true"] { background: var(--rouge-clair); color: var(--rouge); }
#btn-mute[aria-pressed="true"] .ic-mic { display: none; }
#btn-mute[aria-pressed="true"] .ic-mic-off { display: block; }
/* Sourdine : couper le son du casque (on n'entend plus les autres) */
#btn-deafen .ic-deafen-off { display: none; }
#btn-deafen[aria-pressed="true"] { background: var(--rouge-clair); color: var(--rouge); }
#btn-deafen[aria-pressed="true"] .ic-deafen { display: none; }
#btn-deafen[aria-pressed="true"] .ic-deafen-off { display: block; }
.call-ctrl[data-deafen] .ic-deafen-off { display: none; }
.call-ctrl[data-deafen][aria-pressed="true"] { background: var(--rouge); color: #fff; }
.call-ctrl[data-deafen][aria-pressed="true"] .ic-deafen { display: none; }
.call-ctrl[data-deafen][aria-pressed="true"] .ic-deafen-off { display: block; }

/* ---------- Champs ---------- */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .875rem; color: var(--texte-2); }
.input, .auth-form input, textarea.input, select.input {
  min-height: 48px; padding: 0 16px; border-radius: var(--rc-input, 14px); border: 2px solid var(--ligne);
  background: var(--panneau-2); color: var(--texte); outline: none; font-weight: 600; width: 100%;
}
textarea.input { padding: 12px 16px; resize: vertical; min-height: 96px; line-height: 1.5; }
.input:focus, .auth-form input:focus { border-color: var(--violet); background: var(--panneau); }
.code-input { font-size: 1.4rem !important; letter-spacing: 6px; text-align: center; font-weight: 800 !important; }
.error { color: var(--rouge); font-weight: 700; margin: 0; min-height: 1em; font-size: .875rem; }
.hint { color: var(--texte-3); font-size: .8125rem; margin: 0; font-weight: 600; }
.ok-text { color: var(--vert); font-weight: 700; margin: 0; font-size: .875rem; min-height: 1em; }

/* ---------- Connexion ---------- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.auth-blobs span { position: absolute; border-radius: 50%; opacity: .55; }
.auth-blobs span:nth-child(1) { width: 380px; height: 380px; background: #FFC6D6; top: -120px; left: -100px; }
.auth-blobs span:nth-child(2) { width: 300px; height: 300px; background: #FFE68A; bottom: -80px; right: 8%; }
.auth-blobs span:nth-child(3) { width: 220px; height: 220px; background: #CDBBFF; top: 18%; right: -60px; }
:root[data-theme="dark"] .auth-blobs span { opacity: .18; }
.auth-card { position: relative; width: 100%; max-width: 420px; background: var(--panneau); border-radius: 28px; padding: 36px 32px; box-shadow: var(--ombre); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 34px; font-weight: 700; color: var(--violet); }
.brand-dot { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), var(--violet); }
.auth-sub { color: var(--texte-2); margin: 8px 0 24px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panneau-2); border-radius: 14px; padding: 4px; margin-bottom: 20px; }
.tab { border: none; background: transparent; border-radius: 11px; min-height: 40px; font-weight: 800; color: var(--texte-2); }
.tab.active { background: var(--panneau); color: var(--violet); box-shadow: 0 2px 8px rgba(80, 50, 140, .12); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-promo { margin: 22px 0 0; text-align: center; font-size: 14px; }
.auth-promo a { font-weight: 700; color: var(--violet); text-decoration: none; border: 1px solid var(--ligne); border-radius: 999px; padding: 9px 16px; display: inline-block; transition: background .15s, box-shadow .15s; }
.auth-promo a:hover { background: var(--panneau-2); box-shadow: 0 4px 14px rgba(80, 50, 140, .15); }

/* ---------- Mise en page ---------- */
.app { display: grid; grid-template-columns: 76px var(--side-w, 260px) minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; }
.rail { background: var(--rail); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; }
.rail-sep { width: 32px; height: 3px; border-radius: 3px; background: var(--ligne-2); flex-shrink: 0; }
.server-list { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.bubble {
  position: relative; width: 50px; height: 50px; border-radius: 50%; border: none; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-titre, 'Fredoka'), sans-serif; font-weight: 700; font-size: 18px;
  color: #2B2340; transition: border-radius .18s, transform .18s;
}
.bubble:hover { border-radius: 16px; transform: translateY(-1px); }
.bubble.active { border-radius: 16px; box-shadow: 0 0 0 3px var(--rail), 0 0 0 6px var(--violet); }
.bubble.home { background: var(--violet); color: #fff; }
.bubble.add { background: var(--panneau); color: var(--vert); border: 2px dashed var(--ligne-2); }
.bubble.plus { background: #FFD93D; color: #7A4F00; margin-top: auto; }
.bubble .badge-dot { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; font-family: var(--font-ui, 'Nunito'); font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--rail); }

.side { background: var(--panneau); display: flex; flex-direction: column; border-right: 1px solid var(--ligne); min-width: 0; }
.side-content { flex: 1; overflow-y: auto; padding: 16px 12px; }
.side-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 12px; }
.side-title h2 { margin: 0; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-section { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--texte-3); padding: 14px 8px 6px; display: flex; justify-content: space-between; align-items: center; }
.side-section button { border: none; background: none; color: var(--texte-3); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.side-section button:hover { background: var(--violet-clair); color: var(--violet); }
.item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px;
  border-radius: 12px; border: none; background: transparent; color: var(--texte-2); font-weight: 700; text-align: left;
}
.item:hover { background: var(--survol); color: var(--texte); }
.item.active { background: var(--violet-clair); color: var(--violet); }
.item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .label small { display: block; font-size: 12px; color: var(--texte-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.item .count { background: var(--rouge); color: #fff; border-radius: 10px; font-size: 12px; padding: 0 7px; font-weight: 800; }
.voice-users { padding: 2px 0 6px 34px; display: flex; flex-direction: column; gap: 4px; }
.voice-user { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--texte-2); }
.voice-user .avatar { width: 24px; height: 24px; font-size: 11px; }
.muted-ic { color: var(--rouge); display: inline-flex; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-titre, 'Fredoka'), sans-serif; font-weight: 700; font-size: 15px; color: #2B2340; position: relative;
  text-transform: uppercase; transition: box-shadow .1s;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.speaking { box-shadow: 0 0 0 3px var(--vert); }
.avatar .status { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--panneau); background: #9C93B0; }
.avatar .status.on { background: var(--vert); }
.plus-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: #FFD93D; color: #7A4F00; flex-shrink: 0; vertical-align: -3px; }
.name-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.clickable-name { border: none; background: none; padding: 0; font-weight: 800; cursor: pointer; }
.clickable-name:hover { text-decoration: underline; }

.voice-bar { margin: 0 10px 8px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--vert-clair); display: flex; flex-direction: column; gap: 8px; }
.voice-bar-btns { display: flex; gap: 6px; }
.voice-bar-btns .vb { background: var(--panneau); color: var(--texte-2); flex: 1; }
.icon-btn.vb[aria-pressed="true"], .call-ctrl[aria-pressed="true"] { background: var(--violet); color: #fff; }
.voice-bar-btns .danger { flex: 1; }
.voice-bar-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.voice-bar-info strong { display: block; color: var(--vert-texte); font-size: 14px; }
.voice-bar-info small { display: block; color: var(--vert-texte); opacity: .85; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vert); flex-shrink: 0; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 168, 79, .2); } }

.me-panel { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 8px 8px; background: var(--panneau-2); border-top: 1px solid var(--ligne); }
.me-info { display: flex; align-items: center; gap: 10px; min-width: 0; border: none; background: none; padding: 4px 6px; border-radius: 12px; text-align: left; flex: 1; }
.me-info:hover { background: var(--survol); }
.me-info > div { min-width: 0; }
.me-info strong { display: flex; align-items: center; gap: 4px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info small { display: block; color: var(--vert); font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-actions { display: flex; justify-content: center; }

/* ---------- Zone principale ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--fond); }
.main-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 64px; background: var(--panneau); border-bottom: 1px solid var(--ligne); }
.main-head h1 { margin: 0; font-size: 20px; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.main-head h1 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-head .hash { color: var(--texte-3); }
.main-head .head-status { font-family: var(--font-ui, 'Nunito'); font-size: 14px; font-weight: 600; color: var(--texte-3); }
.menu-btn { display: none; }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
.msg { display: flex; gap: 12px; padding: 6px 8px; border-radius: 14px; }
.msg:hover { background: var(--survol); }
.msg.cont { padding-top: 0; }
.msg.cont > .avatar-btn { visibility: hidden; height: 0; }
.avatar-btn { border: none; background: none; padding: 0; border-radius: 50%; height: fit-content; }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-meta time { font-size: 12px; color: var(--texte-3); }
.msg-text { white-space: pre-wrap; word-wrap: break-word; color: var(--texte-msg); }
.empty { margin: auto; text-align: center; color: var(--texte-2); max-width: 340px; padding: 24px; }
.empty .big-bubble { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--font-titre, 'Fredoka'); font-size: 34px; font-weight: 700; color: #2B2340; }
.empty h3 { margin: 0 0 6px; font-size: 22px; color: var(--texte); }

.typing { height: 22px; padding: 0 24px; font-size: 13px; color: var(--texte-3); font-weight: 700; }
.composer { padding: 0 20px 20px; }
.composer form { display: flex; gap: 10px; background: var(--panneau); border-radius: 20px; padding: 8px 8px 8px 18px; box-shadow: var(--ombre); }
.composer input { flex: 1; border: none; outline: none; background: transparent; min-height: 44px; font-weight: 600; min-width: 0; }

/* Amis */
.friends-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: none; border-radius: 999px; padding: 8px 14px; min-height: 40px; background: transparent; font-weight: 800; color: var(--texte-2); }
.chip:hover { background: var(--violet-clair); }
.chip.active { background: var(--violet-clair); color: var(--violet); }
.chip.green { background: var(--vert); color: #fff; }
.friends-body { flex: 1; overflow-y: auto; padding: 20px; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--panneau); margin-bottom: 10px; box-shadow: 0 2px 10px rgba(80, 50, 140, .05); }
.friend-row .who { flex: 1; min-width: 0; border: none; background: none; text-align: left; padding: 0; }
.friend-row .who strong { display: flex; align-items: center; gap: 6px; }
.friend-row .who small { color: var(--texte-3); font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .actions { display: flex; gap: 6px; }
.add-box { background: var(--panneau); border-radius: 20px; padding: 22px; box-shadow: var(--ombre); max-width: 560px; }
.add-box h3 { margin: 0 0 4px; font-size: 20px; }
.add-box p { margin: 0 0 14px; color: var(--texte-2); }
.add-box form { display: flex; gap: 10px; flex-wrap: wrap; }
.add-box .input { flex: 1; min-width: 200px; width: auto; }
.note { font-weight: 700; margin-top: 10px; min-height: 1.2em; }
.note.ok { color: var(--vert); } .note.bad { color: var(--rouge); }

/* Vue vocale */
.voice-stage { flex: 1; padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; align-content: start; overflow-y: auto; }
.voice-tile { background: var(--panneau); border-radius: 24px; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--ombre); }
.voice-tile .avatar { width: 84px; height: 84px; font-size: 32px; }
.voice-tile .avatar.speaking { box-shadow: 0 0 0 5px var(--vert); }
.voice-tile strong { font-size: 16px; }
.voice-actions { display: flex; gap: 12px; justify-content: center; padding: 0 20px 24px; flex-wrap: wrap; }
.voice-stage.has-video { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.voice-tile.video { padding: 0; position: relative; overflow: hidden; background: #0E0B14; aspect-ratio: 16 / 9; justify-content: center; cursor: zoom-in; border: none; }
.voice-tile.video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0E0B14; }
.voice-tile.video video.mirror { transform: scaleX(-1); }
.voice-tile.video .tile-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .6); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.voice-tile.video.speaking { box-shadow: 0 0 0 4px var(--vert); }
.voice-tile.video:fullscreen { border-radius: 0; cursor: zoom-out; background: #000; aspect-ratio: auto; width: 100vw; height: 100vh; }
.voice-tile.video:fullscreen video { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; }
.tile-kind { font-size: 11px; background: var(--violet); color: #fff; padding: 1px 7px; border-radius: 999px; }
.call-panel { background: var(--panneau-2); border-bottom: 1px solid var(--ligne); max-height: 62vh; display: flex; flex-direction: column; }
.call-panel .voice-stage { padding: 16px 20px; flex: 1; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(160px, 240px)); }
.call-panel .voice-stage.has-video { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.call-panel .voice-tile:not(.video) { padding: 18px 12px; }
.call-panel .voice-tile:not(.video) .avatar { width: 64px; height: 64px; font-size: 26px; }
.call-panel .voice-actions { padding: 0 20px 14px; }
.call-ctrl { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--panneau); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ombre); }
.call-ctrl:hover { background: var(--violet-clair); color: var(--violet); }
.call-ctrl.hang { background: var(--rouge); color: #fff; }
.call-ctrl.muted[aria-pressed="true"] { background: var(--rouge); color: #fff; }

/* Membres */
.members { width: 230px; background: var(--panneau); border-left: 1px solid var(--ligne); overflow-y: auto; padding: 16px 12px; }
.members .side-section { padding-top: 4px; }
.member { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; font-weight: 700; border: none; background: none; text-align: left; min-height: 44px; }
.member:hover { background: var(--survol); }
.member.off { opacity: .55; }
.member .who { flex: 1; min-width: 0; }
.member .who small { display: block; font-size: 12px; color: var(--texte-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .crown { color: var(--or); }

/* Fenêtre */
.modal-back { position: fixed; inset: 0; background: var(--voile); display: grid; place-items: center; padding: 16px; z-index: 70; }
.modal { background: var(--panneau); border-radius: 26px; padding: 28px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal h2 { margin: 0 0 6px; font-size: 24px; }
.modal p { margin: 0 0 16px; color: var(--texte-2); }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { border: 2px solid var(--ligne); background: var(--panneau-2); border-radius: 18px; padding: 18px 14px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.choice:hover { border-color: var(--violet); }
.choice strong { font-family: var(--font-titre, 'Fredoka'); font-size: 17px; }
.choice small { color: var(--texte-2); }
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-row label { flex: 1; min-width: 120px; flex-direction: row; align-items: center; gap: 8px; padding: 12px; border: 2px solid var(--ligne); border-radius: 14px; cursor: pointer; color: var(--texte); }
.radio-row label:has(input:checked) { border-color: var(--violet); background: var(--violet-clair); }
.invite-code { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-code code { flex: 1; background: var(--panneau-2); border: 2px dashed var(--ligne-2); border-radius: 14px; padding: 12px 14px; font-weight: 800; font-size: 18px; letter-spacing: 2px; color: var(--violet); }
.call-modal { text-align: center; }
.call-modal .avatar { width: 96px; height: 96px; font-size: 38px; margin: 0 auto 16px; animation: ring 1.2s infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 12px rgba(110, 69, 217, .2); } }
.call-modal .modal-actions { justify-content: center; }

/* Carte de profil */
.modal.profile-modal { padding: 0; overflow-y: auto; overflow-x: hidden; max-width: 600px; }
.profile-card .banner { height: 120px; background-size: cover; background-position: center; }
.profile-card .pc-body { padding: 0 22px 22px; }
.profile-card .pc-avatar { margin-top: -46px; margin-bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; }
.profile-card .pc-avatar .avatar { width: 92px; height: 92px; font-size: 36px; box-shadow: 0 0 0 6px var(--panneau); }
.profile-card .pc-avatar .avatar .status { width: 22px; height: 22px; border-width: 4px; right: 2px; bottom: 2px; }
.profile-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.profile-card .pc-status { color: var(--texte-2); font-weight: 600; margin: 2px 0 0; }
.profile-card .pc-box { background: var(--panneau-2); border-radius: 16px; padding: 14px 16px; margin-top: 14px; }
.profile-card .pc-box h3 { font-family: var(--font-ui, 'Nunito'); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-3); margin: 0 0 4px; }
.profile-card .pc-box p { margin: 0; color: var(--texte); white-space: pre-wrap; word-wrap: break-word; }
.profile-card .pc-box p + h3 { margin-top: 12px; }
.profile-card .modal-actions { margin-top: 16px; }
.pc-plus { display: inline-flex; align-items: center; gap: 4px; background: #FFD93D; color: #7A4F00; font-family: var(--font-ui, 'Nunito'); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; }

/* ---------- Paramètres ---------- */
.settings { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr); background: var(--fond); }
.settings-nav { background: var(--panneau-2); padding: 48px 14px 24px; display: flex; flex-direction: column; align-items: flex-end; overflow-y: auto; }
.settings-nav > div { width: 220px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-3); margin: 16px 10px 6px; }
.settings-nav h4:first-child { margin-top: 0; }
.settings-nav button { border: none; background: none; border-radius: 12px; min-height: 42px; padding: 0 12px; text-align: left; font-weight: 700; color: var(--texte-2); display: flex; align-items: center; gap: 8px; }
.settings-nav button:hover { background: var(--survol); color: var(--texte); }
.settings-nav button.active { background: var(--violet-clair); color: var(--violet); }
.settings-nav button.gold { color: var(--or); }
.settings-nav button.danger { color: var(--rouge); }
.settings-nav hr { border: none; border-top: 1px solid var(--ligne); margin: 10px 4px; }
.settings-body { position: relative; overflow-y: auto; }
.settings-inner { max-width: 720px; padding: 48px 40px 80px; }
.settings-inner > h2 { margin: 0 0 20px; font-size: 26px; }
.settings-close { position: absolute; top: 40px; right: 32px; border: none; background: none; color: var(--texte-3); display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; font-size: 12px; }
.settings-close svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; border: 2px solid var(--ligne-2); }
.settings-close:hover { color: var(--texte); }
.card { background: var(--panneau); border-radius: var(--rc-card, 20px); padding: 22px; box-shadow: var(--card-shadow, 0 2px 12px rgba(80, 50, 140, .06)); border: 1px solid var(--card-border, transparent); margin-bottom: 18px; }
.card h3 { margin: 0 0 4px; font-size: 18px; }
.card > p { margin: 0 0 14px; color: var(--texte-2); }
.card form { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.row ~ .row { border-top: 1px solid var(--ligne); margin-top: 14px; padding-top: 14px; }
.row .row-text { flex: 1; min-width: 200px; }
.row .row-text strong { display: block; }
.row .row-text span { color: var(--texte-2); font-size: .875rem; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.danger-card { border: 2px solid var(--rouge-clair); }

.account-hero { border-radius: 20px; overflow: hidden; background: var(--panneau); margin-bottom: 18px; box-shadow: 0 2px 12px rgba(80, 50, 140, .06); }
.account-hero .banner { height: 100px; background-size: cover; background-position: center; }
.account-hero .ah-body { display: flex; align-items: flex-end; gap: 16px; padding: 0 22px 18px; margin-top: -36px; flex-wrap: wrap; }
.account-hero .avatar { width: 84px; height: 84px; font-size: 32px; box-shadow: 0 0 0 6px var(--panneau); }
.account-hero h3 { margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; gap: 8px; }

.profile-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.profile-edit .preview { position: sticky; top: 20px; }
.preview .modal { box-shadow: var(--ombre); }
.uploader { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.uploader .avatar { width: 72px; height: 72px; font-size: 28px; }
.uploader .banner-prev { width: 160px; height: 56px; border-radius: 12px; background-size: cover; background-position: center; }
.uploader-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06); }
.swatch[aria-pressed="true"] { border-color: var(--texte); }
.color-free { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texte-2); }
.color-free input { width: 44px; height: 44px; border: none; background: none; padding: 0; cursor: pointer; }
.locked { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--or); background: var(--or-clair); padding: 3px 10px; border-radius: 999px; }
.counter { text-align: right; font-size: 12px; color: var(--texte-3); font-weight: 700; }

.toggle { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--ligne-2); transition: background .15s; }
.toggle span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + span { background: var(--vert); }
.toggle input:checked + span::after { transform: translateX(22px); }
.toggle input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.theme-opt { border: 3px solid var(--ligne); border-radius: 18px; padding: 0; overflow: hidden; background: none; text-align: left; }
.theme-opt[aria-pressed="true"] { border-color: var(--violet); }
.theme-opt .tp { height: 72px; display: flex; gap: 6px; padding: 10px; }
.theme-opt .tp i { display: block; border-radius: 8px; }
.theme-opt strong { display: block; padding: 10px 12px; }
input[type=range] { width: 100%; accent-color: var(--violet); }

.qr-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-box img { width: 180px; height: 180px; border-radius: 16px; background: #fff; padding: 8px; }
.secret { font-family: ui-monospace, monospace; font-weight: 700; background: var(--panneau-2); border-radius: 10px; padding: 8px 12px; letter-spacing: 1px; word-break: break-all; color: var(--texte); }
.steps-list { margin: 0; padding-left: 20px; color: var(--texte-2); display: flex; flex-direction: column; gap: 6px; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.backup-grid code { font-family: ui-monospace, monospace; font-weight: 800; background: var(--panneau-2); padding: 10px; border-radius: 10px; text-align: center; letter-spacing: 1px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.status-pill.on { background: var(--vert-clair); color: var(--vert-texte); }
.status-pill.off { background: var(--rouge-clair); color: var(--rouge); }

/* Bulle+ */
.plus-hero { background: #FFD93D; color: #2B2340; border-radius: 26px; padding: 32px; position: relative; overflow: hidden; margin-bottom: 18px; }
.plus-hero::before, .plus-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.plus-hero::before { width: 220px; height: 220px; right: -60px; top: -80px; }
.plus-hero::after { width: 120px; height: 120px; right: 120px; bottom: -60px; background: rgba(255, 143, 171, .5); }
.plus-hero > * { position: relative; }
.plus-hero h2 { margin: 0 0 6px; font-size: 34px; display: flex; align-items: center; gap: 10px; }
.plus-hero p { margin: 0 0 18px; font-weight: 600; max-width: 440px; color: #4A3A10; }
.plus-hero .price { font-family: var(--font-titre, 'Fredoka'); font-weight: 700; font-size: 22px; margin-bottom: 16px; }
.plus-hero .btn-primary { background: #2B2340; color: #fff; }
.plus-hero .btn-primary:hover { background: #3E3459; }
.plus-links { display: inline-flex; margin-top: 12px; font-weight: 700; font-size: 14px; color: #2B2340; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.plus-links:hover { opacity: 1; text-decoration: underline; }

/* Bulle+ : actions, statut d'accès et cadeaux */
.plus-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.plus-source { display: inline-flex; align-items: center; gap: 6px; background: #2B2340; color: #fff; font-weight: 800; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; }
.plus-exp { font-size: 13px; font-weight: 700; color: #4A3A10; background: rgba(43, 35, 64, .10); padding: 8px 12px; border-radius: 999px; }
.gift-search { margin: 4px 0 10px; }
.gift-results { display: grid; gap: 6px; margin-bottom: 10px; max-height: 230px; overflow: auto; }
.gift-user { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panneau-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; cursor: pointer; font-weight: 700; }
.gift-user:hover { border-color: var(--violet); }
.gift-user .avatar { width: 34px; height: 34px; flex-shrink: 0; }
.gift-list { display: grid; gap: 8px; }
.gift-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--panneau-2); }
.gift-row .hint { display: block; font-size: 12.5px; }
.gift-status { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.gift-status.completed { background: #DFF6E8; color: #1F7A4A; }
.gift-status.pending { background: #FFF2C2; color: #8A6500; }
.gift-status.failed, .gift-status.cancelled { background: #FFE0E2; color: #B23B4A; }
.gift-status.refunded { background: #EAE1FF; color: #5B3FB0; }
.recap { background: var(--panneau-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.recap .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.recap .row.total { border-top: 1px dashed var(--ligne); margin-top: 6px; padding-top: 8px; font-weight: 800; }
.recap .k { color: var(--texte-2); }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.perk { background: var(--panneau); border-radius: 18px; padding: 18px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 2px 12px rgba(80, 50, 140, .06); }
.perk .pi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #2B2340; }
.perk strong { display: block; }
.perk span { color: var(--texte-2); font-size: .875rem; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--ligne); }
.compare th { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-3); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 110px; }
.compare tr:last-child td { border-bottom: none; }
.yes { color: var(--vert); font-weight: 800; } .no { color: var(--texte-3); }

.toast-wrap .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--texte); color: var(--panneau); padding: 12px 20px; border-radius: 14px; font-weight: 700; z-index: 80; box-shadow: var(--ombre); max-width: calc(100% - 32px); }

/* ---------- Mobile ---------- */
@media (max-width: 1100px) { .members { display: none; } }
@media (max-width: 900px) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { display: none; }
  .settings.nav-open .settings-nav { display: flex; align-items: stretch; }
  .settings.nav-open .settings-body { display: none; }
  .settings-nav > div { width: 100%; }
  .settings-inner { padding: 76px 16px 60px; }
  .settings-close { top: 14px; right: 12px; }
  .settings-close span { display: none; }
  .settings-back { position: absolute; top: 18px; left: 12px; }
  .profile-edit { grid-template-columns: 1fr; }
  .profile-edit .preview { position: static; }
}
@media (min-width: 901px) { .settings-back { display: none !important; } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .rail, .side { position: fixed; top: 0; bottom: 0; z-index: 40; visibility: hidden; transition: transform .2s, visibility .2s; }
  .main { overflow: visible; }
  .rail { left: 0; width: 76px; transform: translateX(-100%); }
  .side { left: 76px; width: min(300px, calc(100vw - 76px)); box-shadow: var(--ombre); transform: translateX(calc(-100% - 76px)); }
  .app.menu-open .rail, .app.menu-open .side { transform: none; visibility: visible; }
  .menu-btn { display: inline-flex; }
  .messages, .friends-body { padding: 14px; }
  .composer { padding: 0 12px 12px; }
  .main-head { padding: 10px 12px; }
  .choice-grid { grid-template-columns: 1fr; }
  .plus-hero { padding: 24px; }
  .plus-hero h2 { font-size: 28px; }
}
.empty .big-bubble .avatar { width: 100%; height: 100%; font-size: 34px; }

/* ---------- Rôles, canaux privés, modération ---------- */
.server-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.bubble:has(.server-img) { overflow: hidden; }
.mini-server { width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; font-family: var(--font-titre, 'Fredoka'); font-size: 12px; color: #2B2340; overflow: hidden; flex-shrink: 0; }
.item-row { position: relative; display: flex; align-items: center; }
.item-row .item { flex: 1; min-width: 0; }
.item-gear { position: absolute; right: 6px; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--texte-3); display: none; place-items: center; }
.item-row:hover .item-gear, .item-row:focus-within .item-gear { display: grid; }
.item-gear:hover { background: var(--violet-clair-2); color: var(--violet); }
.item-row:hover .item .count { margin-right: 30px; }
.ch-lock { color: var(--texte-3); display: inline-flex; }
.live-tag { background: var(--rouge); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; letter-spacing: .5px; }
.msg { position: relative; }
.msg-edited { margin-left: 6px; color: var(--texte-3); font-size: .75rem; font-weight: 700; }
.msg-actions {
  position: absolute; top: 4px; right: 8px;
  display: flex; gap: 4px; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; pointer-events: auto; }
.msg-act {
  width: 28px; height: 28px;
  border-radius: 8px; border: 1px solid var(--ligne); background: var(--panneau);
  color: var(--texte-3); display: grid; place-items: center;
  box-shadow: var(--card-shadow);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.msg-act:hover { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, var(--ligne)); background: var(--violet-clair); }
.msg-del:hover { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 40%, var(--ligne)); background: var(--rouge-clair); }
/* Citation d'un message (réponse) */
.msg-quote {
  display: block; text-align: left; max-width: min(560px, 100%);
  margin: 2px 0 4px; padding: 4px 10px;
  border-left: 3px solid color-mix(in srgb, var(--violet) 55%, var(--ligne));
  background: color-mix(in srgb, var(--violet) 7%, transparent);
  border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.35;
  transition: background var(--t-fast) var(--ease);
}
.msg-quote:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.msg-quote.missing { border-left-color: var(--ligne); opacity: .75; font-style: italic; }
.msg-quote-body { display: flex; gap: 4px; min-width: 0; }
.msg-quote-name { font-weight: 800; color: var(--violet); white-space: nowrap; }
.msg-quote-text { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-flash { animation: msgFlash 1.2s ease; }
@keyframes msgFlash { 0%, 100% { background: transparent; } 25% { background: color-mix(in srgb, var(--violet) 22%, transparent); } }
@media (hover: none) { .msg-actions { opacity: .8; pointer-events: auto; } }
/* Édition d'un message directement dans la conversation */
.msg-edit { margin-top: 4px; }
.msg-edit-ta { width: 100%; min-height: 40px; max-height: 240px; resize: none; overflow-y: auto; padding: 8px 10px; line-height: 1.45; }
.msg-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.msg-edit-hint { color: var(--texte-3); font-size: 12px; font-weight: 700; margin-right: auto; }
.msg-edit-actions .btn { padding: 6px 12px; font-size: .875rem; min-height: 34px; }
.edit-modal .edit-ta { min-height: 80px; resize: vertical; }
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (hover: none) { .msg-act { display: grid; opacity: .6; } .item-gear { display: grid; } }
.readonly-note { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--panneau); border-radius: 20px; padding: 16px; color: var(--texte-3); font-weight: 700; box-shadow: var(--ombre); }
.role-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 13px; color: var(--texte); }
.role-chips.small .role-chip { font-size: 12px; padding: 1px 8px; }
.role-chip button { border: none; background: none; color: var(--texte-3); font-weight: 800; font-size: 15px; line-height: 1; padding: 0 0 0 2px; min-width: 20px; min-height: 20px; }
.role-chip button:hover { color: var(--rouge); }
.role-chip.big { font-size: 16px; padding: 6px 14px; }
.role-add { border: 1px dashed var(--ligne-2); background: transparent; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 13px; color: var(--violet); min-height: 30px; }
.mod-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mod-actions .btn { min-height: 38px; padding: 6px 14px; }
.role-checks { display: flex; flex-direction: column; gap: 4px; background: var(--panneau-2); border-radius: 14px; padding: 8px; max-height: 200px; overflow-y: auto; }
.role-check { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 8px 10px; border-radius: 10px; color: var(--texte) !important; cursor: pointer; min-height: 40px; }
.role-check:hover { background: var(--survol); }
.role-check input { width: 18px; height: 18px; accent-color: var(--violet); }
.roles-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.role-list { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; }
.role-list > .btn { margin-bottom: 8px; }
.role-item { display: flex; align-items: center; gap: 10px; border: none; background: none; border-radius: 12px; padding: 0 12px; min-height: 42px; text-align: left; font-weight: 700; color: var(--texte-2); }
.role-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-item small { color: var(--texte-3); font-weight: 700; }
.role-item:hover { background: var(--survol); }
.role-item.active { background: var(--violet-clair); color: var(--violet); }
.swatch.no-color { background: var(--panneau-2); color: var(--texte-3); font-weight: 800; display: grid; place-items: center; }
.swatch:disabled { opacity: .5; cursor: not-allowed; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--ligne); }
.list-row:first-of-type { border-top: none; }
.list-row .row-text { flex: 1; min-width: 0; }
.list-row .row-text strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-row .row-text > span { color: var(--texte-2); font-size: .875rem; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; background: var(--panneau-2); color: var(--texte-2); padding: 2px 8px; border-radius: 999px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 760px) { .roles-layout { grid-template-columns: 1fr; } .role-list { position: static; } }

/* ---------- Télécharger l'appli ---------- */
.get-app { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.get-app .btn { text-decoration: none; }
.app-card { display: flex; gap: 18px; align-items: flex-start; }
.app-card .app-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.app-card h3 { margin: 0 0 4px; }
.app-card p { margin: 0 0 14px; color: var(--texte-2); }
a.btn { text-decoration: none; }

/* ---------- Photos, vidéos et @mentions ---------- */
.composer { position: relative; }
/* Barre « Répondre à … » (au-dessus du champ de saisie) */
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 10px;
  background: var(--panneau); border-radius: 14px; box-shadow: var(--ombre);
  border-left: 3px solid var(--violet); }
.reply-bar[hidden] { display: none; }
.reply-bar-main { flex: 1; min-width: 0; }
.reply-bar-name { font-size: 12px; color: var(--violet); font-weight: 700; }
.reply-bar-text { font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  color: var(--texte); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.reply-bar-x:hover { background: var(--violet-clair); color: var(--violet); }
.composer form { align-items: flex-end; padding: 8px 8px 8px 8px; }
.composer-input { flex: 1; border: none; outline: none; background: transparent; min-height: 44px; max-height: 200px; padding: 11px 4px; font-weight: 600; min-width: 0; resize: none; line-height: 1.45; color: var(--texte); }
.attach-btn { width: 44px; height: 44px; color: var(--violet); }
.att-tray { display: flex; gap: 10px; overflow-x: auto; padding: 10px; margin-bottom: 8px; background: var(--panneau); border-radius: 20px; box-shadow: var(--ombre); }
.att-card { position: relative; flex: 0 0 220px; background: var(--panneau-2); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.att-card.err { outline: 2px solid var(--rouge); }
.att-thumb { position: relative; height: 110px; border-radius: 10px; overflow: hidden; background: #0E0B14; }
.att-thumb img, .att-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.att-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.att-info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-info small { font-size: 12px; color: var(--texte-3); font-weight: 700; }
.att-card.err .att-info small { color: var(--rouge); }
.att-bar { height: 6px; background: var(--ligne); border-radius: 3px; overflow: hidden; }
.att-bar span { display: block; height: 100%; background: var(--violet); transition: width .15s; }
.att-sizes { display: flex; gap: 3px; }
.att-sizes button { flex: 1; border: none; border-radius: 8px; background: var(--panneau); color: var(--texte-2); font-size: 11px; font-weight: 800; padding: 5px 0; min-height: 28px; }
.att-sizes button[aria-pressed="true"] { background: var(--violet); color: #fff; }
.att-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.att-x:hover { background: var(--rouge); }

.atts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; align-items: flex-start; }
.att { display: block; border: none; padding: 0; border-radius: 14px; overflow: hidden; background: var(--panneau-2); max-width: 100%; max-height: 70vh; }
.att img, .att video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0E0B14; }
button.att { cursor: zoom-in; }
.att-s { width: 200px; }
.att-m { width: 360px; }
.att-l { width: 560px; }
.att-full { width: 100%; }
.att img { background: transparent; }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 8, 16, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 10px; }
.lb-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; color: #E4DEF0; font-weight: 700; font-size: 14px; }
.lb-stage { position: relative; flex: 1 1 auto; width: 100%; max-width: 96vw; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-stage.zoomed { cursor: grab; }
.lb-stage.grabbing { cursor: grabbing; }
.lightbox .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; touch-action: none; transform-origin: center center; will-change: transform; border-radius: 12px; transition: transform .08s ease-out; }
.lb-stage.zoomed .lb-img { transition: none; }
.lb-tools { display: flex; align-items: center; gap: 8px; }
.lb-btn { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.18); }
.lb-pct { color: #E4DEF0; font-weight: 800; min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }

/* Volume individuel par utilisateur (clic droit / appui long) */
.vol-menu { position: fixed; z-index: 120; width: 244px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vol-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vol-head strong { font-size: 15px; }
.vol-row { display: flex; align-items: center; gap: 8px; color: var(--texte-2); }
.vol-range { flex: 1; min-width: 0; accent-color: var(--violet); }
.vol-val { min-width: 46px; text-align: right; font-weight: 800; color: var(--texte); font-variant-numeric: tabular-nums; }
.vol-quick { display: flex; gap: 6px; }
.vol-quick button { flex: 1; padding: 6px 8px; font-size: 12.5px; }
.vol-hint { margin: 0; font-size: 11.5px; color: var(--texte-3); font-weight: 600; }
.voice-user { cursor: context-menu; }

.drop-zone { position: absolute; inset: 0; z-index: 30; background: rgba(110, 69, 217, .18); display: grid; place-items: center; pointer-events: none; }
.drop-zone > div { background: var(--panneau); border: 3px dashed var(--violet); border-radius: 26px; padding: 34px 44px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--violet); font-size: 18px; }
.main { position: relative; }

.mention { display: inline; border: none; font: inherit; font-weight: 800; color: var(--violet); background: var(--violet-clair); border-radius: 6px; padding: 0 4px; cursor: pointer; }
.mention:hover { background: var(--violet); color: #fff; }
.msg.mentioned { background: var(--or-clair); box-shadow: inset 3px 0 0 #FFB224; }
.msg-text a { color: var(--violet); font-weight: 700; word-break: break-all; }

.mention-pop { position: absolute; left: 20px; right: 20px; bottom: calc(100% - 12px); background: var(--panneau); border-radius: 18px; box-shadow: 0 10px 40px rgba(43, 35, 64, .22); padding: 8px; max-height: 320px; overflow-y: auto; z-index: 20; }
.mention-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--texte-3); padding: 4px 10px 6px; }
.mention-opt { width: 100%; display: flex; align-items: center; gap: 10px; border: none; background: none; border-radius: 12px; padding: 6px 10px; min-height: 44px; text-align: left; color: var(--texte); }
.mention-opt .avatar { width: 28px; height: 28px; font-size: 12px; }
.mention-opt .label { flex: 1; min-width: 0; font-weight: 700; }
.mention-opt small { color: var(--texte-3); font-weight: 600; }
.mention-opt.active, .mention-opt:hover { background: var(--violet-clair); }
@media (max-width: 760px) { .att-m, .att-l { width: 100%; } .att-card { flex-basis: 180px; } .mention-pop { left: 12px; right: 12px; } }

/* ============================================================================
   Bulle+ — Teintes dérivées, page de personnalisation, kit d'interface
   ========================================================================== */

/* Teintes dérivées calculées à partir des couleurs choisies (suivent le thème) */
:root, :root[data-theme="dark"] {
  --violet-clair: color-mix(in srgb, var(--violet) 16%, var(--panneau));
  --violet-clair-2: color-mix(in srgb, var(--violet) 28%, var(--panneau));
  --vert-clair: color-mix(in srgb, var(--vert) 16%, var(--panneau));
  --rouge-clair: color-mix(in srgb, var(--rouge) 16%, var(--panneau));
  --or-clair: color-mix(in srgb, var(--or) 22%, var(--panneau));
}
:root {
  --violet-fonce: color-mix(in srgb, var(--violet) 82%, #0b0710);
  --vert-texte: color-mix(in srgb, var(--vert) 84%, #082312);
}
:root[data-theme="dark"] {
  --violet-fonce: color-mix(in srgb, var(--violet) 70%, #ffffff);
  --vert-texte: color-mix(in srgb, var(--vert) 78%, #ffffff);
}

/* Ombre portée : couleur dérivée du texte (nécessaire aux options d'ombres) */
html { --shadow-rgb: 43, 35, 64; }
html[data-theme="dark"] { --shadow-rgb: 20, 16, 30; }

/* Toast simple de secours (utilisé sans ui-kit) */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--texte); color: var(--panneau); padding: 12px 20px; border-radius: 14px; font-weight: 700; z-index: 80; box-shadow: var(--ombre); max-width: calc(100% - 32px); }

/* Mode compact */
html[data-compact] .rail { padding: 10px 0; gap: 8px; }
html[data-compact] .bubble { width: 44px; height: 44px; font-size: 15px; }
html[data-compact] .side { padding-top: 12px; }
html[data-compact] .side-content { padding: 12px 10px; }
html[data-compact] .composer { padding: 0 16px 14px; }

/* Position de la barre latérale (option Bulle+) */
html[data-sidepos="right"] .app { grid-template-columns: 76px minmax(0, 1fr) var(--side-w, 260px) auto; }
html[data-sidepos="right"] .app > .rail { order: 3; }
html[data-sidepos="right"] .app > .side { order: 2; grid-column: 3; }
html[data-sidepos="right"] .app > .main { order: 1; grid-column: 2; }
html[data-sidepos="right"] .app > .members { order: 4; grid-column: 4; }
@media (max-width: 760px) {
  html[data-sidepos="right"] .app { grid-template-columns: 1fr; }
  html[data-sidepos="right"] .app > .rail { order: 0; }
  html[data-sidepos="right"] .app > .side { order: 0; grid-column: auto; }
  html[data-sidepos="right"] .app > .main { order: 0; grid-column: auto; }
}

/* Verre dépoli doux (option Bulle+) */
.rail, .side, .main-head { -webkit-backdrop-filter: blur(var(--glass-blur, 0px)); backdrop-filter: blur(var(--glass-blur, 0px)); }

/* Animation du badge de notification (option Bulle+) */
html[data-badgeanim="on"] .badge-dot { animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Bouton « revenir aux derniers messages » ---------- */
.scroll-down {
  position: absolute; right: 20px; bottom: calc(100% + 12px); z-index: 12;
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ligne-2);
  background: var(--panneau); color: var(--violet); border-radius: 999px;
  padding: 8px 14px; font-weight: 800; font-size: 13px; font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 24px rgba(43, 35, 64, .16);
  animation: sd-appear var(--t-med, .26s) cubic-bezier(.22, .68, .36, 1);
}
.scroll-down:hover { background: var(--violet-clair); border-color: var(--violet); }
.scroll-down svg { display: inline-block; }
.scroll-down.has-new { border-color: transparent; background-color: var(--violet); background-image: var(--btn-grad, none); color: var(--btn-texte, #fff); }
.scroll-down.has-new svg { animation: sd-bob 1.3s ease-in-out infinite; }
@keyframes sd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes sd-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Bull+ Studio — véritable page dédiée (plein écran)
   ========================================================================== */
html[data-studio], html[data-studio] body { overflow: hidden; }

.bull-studio {
  position: fixed; inset: 0; z-index: 75; display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr);
  background: var(--fond); color: var(--texte);
}
.bull-studio .bs-nav {
  background: var(--panneau-2); padding: 40px 14px 24px; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  border-right: 1px solid var(--ligne);
}
.bull-studio .bs-nav > .bs-brand {
  display: flex; align-items: center; gap: 8px; width: 210px; margin: 0 0 18px;
  font-family: var(--font-titre, 'Fredoka', sans-serif); font-weight: 700; font-size: 18px; color: var(--texte);
}
.brand-dot { display: inline-block; border-radius: 9px; background: linear-gradient(135deg, var(--violet), var(--accent-2)); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .25); }
.bull-studio .bs-nav button {
  width: 210px; border: none; background: none; border-radius: 12px; min-height: 42px;
  padding: 0 12px; text-align: left; font-weight: 800; color: var(--texte-2);
  display: flex; align-items: center; gap: 10px; font-family: inherit;
}
.bull-studio .bs-nav button:hover { background: var(--survol); color: var(--texte); }
.bull-studio .bs-nav button.active { background: var(--violet-clair); color: var(--violet); }
.bull-studio .bs-nav .bs-spacer { flex: 1; }
.bull-studio .bs-nav .hint { width: 210px; }

.bull-studio .bs-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bull-studio .bs-head {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 24px;
  border-bottom: 1px solid var(--ligne); background: var(--panneau); flex-shrink: 0;
}
.bull-studio .bs-head h2 { margin: 0; flex: 1; font-size: 18px; }
.bull-studio .bs-head .settings-close { color: var(--texte-3); }
.bull-studio .bs-head .settings-close:hover { color: var(--texte); }

.bull-studio .bs-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.bull-studio .bs-content { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 32px 56px; }
.bull-studio #bs-preview-col { width: 320px; flex-shrink: 0; border-left: 1px solid var(--ligne); background: var(--panneau-2); }

.bull-studio .bs-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--ligne); background: var(--panneau); flex-shrink: 0;
}
.bull-studio .bs-toolbar-spacer { flex: 1; }

.bull-studio .bs-section { margin-bottom: 30px; }
.bull-studio .bs-section > h3 { margin: 0 0 6px; font-size: 15px; }
.bull-studio .bs-section > .hint { margin: 0 0 12px; }
.bull-studio .bs-grid { display: grid; gap: 10px; }
.bull-studio .bs-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.bull-studio .bs-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bull-studio .bs-preset {
  border: 2px solid var(--ligne); background: var(--panneau); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  cursor: pointer; color: var(--texte); text-align: left; font-family: inherit;
  transition: border-color var(--t-fast, .14s), box-shadow var(--t-fast, .14s);
}
.bull-studio .bs-preset:hover { border-color: var(--ligne-2); }
.bull-studio .bs-preset[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-clair); }
.bull-studio .bp-preview { display: flex; gap: 4px; }
.bull-studio .bp-preview i { width: 18px; height: 18px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0, 0, 0, .08); }
.bull-studio .bp-name { font-weight: 700; font-size: 13px; }
.bull-studio .bp-actions { display: flex; gap: 4px; justify-content: flex-end; align-self: stretch; opacity: 0; transition: opacity var(--t-fast, .14s); }
.bull-studio .bs-preset:hover .bp-actions { opacity: 1; }
.bull-studio .bp-actions button { width: 28px; height: 28px; border: none; background: var(--survol); border-radius: 8px; color: var(--texte-2); }
.bull-studio .bp-actions button:hover { background: var(--violet-clair); color: var(--violet); }

.bull-studio .bs-color { display: flex; align-items: center; gap: 10px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 10px; }
.bull-studio .bs-color input[type="color"] { width: 40px; height: 40px; border: none; border-radius: 10px; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.bull-studio .bs-color-txt { flex: 1; min-width: 0; }
.bull-studio .bs-color-txt strong { display: block; font-size: 13px; }
.bull-studio .bs-color-txt code { font-size: 11px; color: var(--texte-3); }
.bull-studio .bs-color-hex { min-height: 40px; width: 96px; padding: 0 10px; border-radius: 10px; font-size: 12px; }

.bull-studio .bs-slider { display: flex; flex-direction: column; gap: 6px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.bull-studio .bs-slider-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--texte-2); }
.bull-studio .bs-slider input[type="range"] { width: 100%; accent-color: var(--violet); }

.bull-studio .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--panneau-2); padding: 4px; border-radius: 12px; }
.bull-studio .seg button { border: none; background: none; border-radius: 9px; padding: 8px 14px; min-height: 36px; font-weight: 800; color: var(--texte-2); font-family: inherit; }
.bull-studio .seg button.active { background: var(--panneau); color: var(--violet); box-shadow: var(--ombre); }

/* Aperçu en direct */
.bull-studio .bs-preview { background: var(--panneau); border: 1px solid var(--ligne); border-radius: var(--rc-card, 18px); overflow: hidden; box-shadow: var(--card-shadow, none); }
.bull-studio .bs-bubble { background: var(--survol); border-radius: 16px 16px 16px 4px; padding: 8px 12px; max-width: 85%; font-size: 13px; color: var(--texte-msg); }
.bull-studio .bs-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bull-studio .bs-tag { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 0 12px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--violet) 16%, var(--panneau)); color: var(--violet); }

/* ---------- Kit d'interface : toasts empilés ---------- */
.toast-wrap {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 120; pointer-events: none; max-width: calc(100vw - 32px);
}
.toast-wrap .toast {
  position: static; transform: none; pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--texte); color: var(--panneau); padding: 10px 14px;
  border-radius: 14px; font-weight: 700; box-shadow: var(--ombre);
  max-width: min(480px, calc(100vw - 32px));
  animation: toast-in var(--t-med, .26s) cubic-bezier(.22, .68, .36, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast-wrap .toast .icon-btn { width: 30px; height: 30px; color: inherit; opacity: .75; }
.toast-wrap .toast .icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.toast-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 18%, transparent); flex-shrink: 0; font-weight: 800; font-size: 13px; }
.toast-wrap .toast.success { background: var(--vert); color: #fff; }
.toast-wrap .toast.error { background: var(--rouge); color: #fff; }
.toast-wrap .toast.warn { background: var(--or); color: #fff; }

/* ---------- Kit d'interface : badge de notification ---------- */
.icon-btn { position: relative; }
.icon-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--panneau); box-sizing: border-box; }

/* ---------- Kit d'interface : centre de notifications ---------- */
.notif-center {
  position: fixed; top: 64px; right: 20px; width: min(380px, calc(100vw - 32px));
  background: var(--panneau); border: 1px solid var(--ligne); border-radius: var(--rc-card, 20px);
  box-shadow: var(--card-shadow, 0 16px 40px rgba(0, 0, 0, .18)); z-index: 85; overflow: hidden;
  display: flex; flex-direction: column; max-height: min(70vh, 560px);
}
.notif-center header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ligne); }
.notif-center header h2 { margin: 0; flex: 1; font-size: 16px; }
.notif-center .nc-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.notif-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; }
.notif-item:hover { background: var(--survol); }
.notif-item.unread { background: var(--violet-clair); }
.notif-item .ni-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panneau-2); font-size: 15px; flex-shrink: 0; color: var(--violet); }
.notif-item .ni-body { flex: 1; min-width: 0; }
.notif-item .ni-body strong { display: block; font-size: 13px; }
.notif-item .ni-body span { color: var(--texte-2); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item time { font-size: 11px; color: var(--texte-3); white-space: nowrap; }

/* ---------- Kit d'interface : palette de commandes ---------- */
.cmdk-back {
  position: fixed; inset: 0; z-index: 110; background: var(--voile);
  display: flex; align-items: flex-start; justify-content: center; padding: max(12vh, 60px) 16px 24px;
}
.cmdk { width: min(560px, 100%); background: var(--panneau); border-radius: var(--rc-card, 20px); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ligne); }
.cmdk-head > span { color: var(--violet); }
.cmdk-head input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-weight: 600; min-width: 0; color: var(--texte); }
.cmdk-kbd { font-size: 11px; border: 1px solid var(--ligne-2); border-radius: 6px; padding: 2px 6px; color: var(--texte-3); font-weight: 700; }
.cmdk-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cmdk-group { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--texte-3); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; border-radius: 12px; padding: 8px 10px; min-height: 44px; text-align: left; color: var(--texte); font-family: inherit; }
.cmdk-item:hover, .cmdk-item.active { background: var(--violet-clair); }
.cmdk-item .ci-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panneau-2); flex-shrink: 0; color: var(--violet); }
.cmdk-item .ci-body { flex: 1; min-width: 0; }
.cmdk-item .ci-body strong { display: block; font-size: 13.5px; }
.cmdk-item .ci-body span { color: var(--texte-2); font-size: 12px; }
.cmdk-empty { padding: 28px; text-align: center; color: var(--texte-3); font-weight: 600; }

/* ---------- Responsive Bulle+ ---------- */
@media (max-width: 900px) {
  .bull-studio { display: flex; flex-direction: column; }
  .bull-studio .bs-nav {
    display: flex; flex-direction: row; align-items: center; overflow-x: auto; gap: 6px; padding: 10px;
    border-right: none; border-bottom: 1px solid var(--ligne); flex-shrink: 0;
  }
  .bull-studio .bs-nav > .bs-brand, .bull-studio .bs-nav .bs-spacer, .bull-studio .bs-nav .hint { display: none; }
  .bull-studio .bs-nav button { width: auto; min-height: 38px; padding: 0 14px; white-space: nowrap; flex-shrink: 0; }
  .bull-studio .bs-body { flex-direction: column; }
  .bull-studio #bs-preview-col { display: none; width: 100%; }
  .bull-studio .bs-content { padding: 20px 16px 44px; }
  .bull-studio .bs-head { padding: 0 12px; }
  .bull-studio .bs-toolbar { padding: 10px 12px; }
  .bull-studio .bs-toolbar .btn { flex: 1; }
  .notif-center { top: 58px; right: 12px; left: 12px; width: auto; }
  .cmdk-back { padding-top: 8vh; }
  .scroll-down { right: 12px; }
}
/* ---------- Annonces globales : bannières haut-centre ---------- */
.announce-wrap {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 95;
  display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 28px));
  pointer-events: none;
}
.announcement {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  background: color-mix(in srgb, var(--panneau) 96%, var(--violet));
  border: 1px solid var(--ligne); border-left-width: 4px;
  border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-rgb, 24 20 48) 22%, transparent);
  transform: translateY(-16px); opacity: 0; transition: transform .28s ease, opacity .28s ease;
}
.announcement.in { transform: translateY(0); opacity: 1; }
.announcement.leaving { transform: translateY(-14px); opacity: 0; }
.announcement.ann-info { border-left-color: var(--violet); }
.announcement.ann-update { border-left-color: var(--accent-2, #E0559B); }
.announcement.ann-maintenance { border-left-color: var(--accent-3, #2BB6C4); }
.announcement.ann-event { border-left-color: var(--vert); }
.announcement.ann-important { border-left-color: var(--rouge); }
.announcement.is-important { background: color-mix(in srgb, var(--rouge) 7%, var(--panneau)); }
.ann-ic { font-size: 20px; line-height: 1.45; flex-shrink: 0; }
.ann-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ann-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ann-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--accent-2, var(--violet)));
}
.ann-headtext { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ann-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--texte); overflow-wrap: anywhere; }
.ann-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--texte-3); }
.ann-meta .ann-author { font-weight: 700; color: var(--texte-2); }
.ann-badge {
  background: color-mix(in srgb, var(--rouge) 16%, transparent); color: var(--rouge);
  font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  letter-spacing: .2px; text-transform: uppercase;
}
.ann-dot { opacity: .6; }
.ann-text {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--texte-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 34vh; overflow-y: auto; overscroll-behavior: contain;
}
.ann-img {
  max-width: 100%; max-height: 40vh; border-radius: 12px; display: block;
  object-fit: contain; background: var(--panneau-2);
}
.ann-x {
  border: none; background: none; color: var(--texte-3); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px; border-radius: 8px; flex-shrink: 0;
}
.ann-x:hover { color: var(--texte); background: var(--panneau-2); }
@media (max-width: 600px) { .announce-wrap { top: 8px; width: calc(100vw - 18px); } }
/* ---------- Barre utilisateur (me-panel) : badges de rôle et états ---------- */
#me-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 170px; }
#me-name .role-chip {
  font-size: 10.5px; line-height: 1; padding: 3px 8px; border-radius: 999px;
  background: var(--panneau); border: 1px solid var(--ligne); color: var(--texte-2); font-weight: 800;
}
#me-name .role-chip.owner { background: #FFF6D9; border-color: #F5C518; color: #8a6500; }
#me-name .role-chip.admin { background: var(--violet-clair); border-color: var(--violet); color: var(--violet); }
html[data-theme="dark"] #me-name .role-chip.owner { background: #3a3112; border-color: #F5C518; color: #F5C518; }
html[data-theme="dark"] #me-name .role-chip.admin { background: #2e2450; border-color: var(--violet); color: #b9a6ff; }
.me-actions { gap: 2px; }
.me-info:focus-visible, .icon-btn:focus-visible, .btn:focus-visible, .chip:focus-visible, .item:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 10px;
}
.icon-btn:active:not([disabled]) { transform: scale(.94); }
/* ---------- Réglage qualité du partage d'écran ---------- */
.share-config .card { margin: 0; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.share-prof {
  display: flex; flex-direction: column; gap: 3px; text-align: left; align-items: flex-start;
  background: var(--panneau-2); border: 1px solid var(--ligne); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.share-prof:hover { border-color: var(--violet-clair); }
.share-prof.active { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-clair); }
.share-prof strong { font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.share-prof span { font-size: 12px; color: var(--texte-2); }
.share-lock { color: var(--texte-3); display: inline-flex; }
.share-lock svg { opacity: .6; }
.share-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.share-custom.hidden { display: none; }
.share-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texte-2); }
.share-field select { min-width: 0; }
/* ---------- Réglages sons ---------- */
.vol-row { padding: 10px 0; }
.vol-controls { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.vol-controls input[type="range"] { flex: 1; min-width: 90px; }
.vol-val { font-weight: 800; font-size: 13px; color: var(--texte-2); width: 38px; text-align: right; }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; margin-top: 6px; }
.sound-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 0; }
.sound-item .toggle { margin: 0; }
.sound-test { min-height: 28px; min-width: 34px; padding: 3px 8px; }
@media (max-width: 620px) {
  .vol-controls { min-width: 0; width: 100%; }
  .vol-row { flex-wrap: wrap; }
}

/* =========================================================
   RÉSEAU SOCIAL : publications, stories, notifications
   ========================================================= */
.role-badge { display: inline-flex; align-items: center; background: var(--violet-clair); color: var(--violet); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .3px; font-family: var(--font-ui, 'Nunito'); flex-shrink: 0; }
.role-badge.owner { background: #FFF6D9; color: #9A6B00; }
.role-badge.admin { background: #E4F1FF; color: #1B6FB8; }

.main > .social { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px clamp(10px, 3vw, 26px) 40px; }
.main > .social > * { max-width: 680px; margin-inline: auto; }

/* Onglets du réseau social */
.social-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 16px; padding: 6px; overflow-x: auto; }
.social-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--texte-2); font: inherit; font-weight: 800; font-size: .9rem; padding: 9px 14px; border-radius: 11px; cursor: pointer; white-space: nowrap; }
.social-tab svg { opacity: .85; }
.social-tab:hover { background: var(--survol); color: var(--texte); }
.social-tab.active { background: var(--violet); color: #fff; }
.social-tab.active svg { opacity: 1; }
.social-tab.icon-only { margin-left: auto; padding: 9px 11px; }

/* Bandeau composer */
.composer-prompt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 18px; padding: 12px 16px; margin-bottom: 16px; cursor: pointer; color: var(--texte-2); font: inherit; font-weight: 700; box-shadow: var(--ombre); transition: transform .12s ease; }
.composer-prompt:hover { transform: translateY(-1px); }
.composer-prompt .avatar { width: 40px; height: 40px; font-size: 16px; }
.composer-prompt .cp-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-prompt .cp-icons { display: inline-flex; gap: 8px; color: var(--violet); }

/* Publications */
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post { background: var(--panneau); border: 1px solid var(--ligne); border-radius: 20px; padding: 16px 16px 8px; box-shadow: var(--ombre); }
.post-head { display: flex; align-items: flex-start; gap: 11px; }
.post-head .avatar-btn { padding: 0; }
.post-head .avatar { width: 44px; height: 44px; font-size: 17px; }
.post-meta { flex: 1; min-width: 0; }
.post-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-name strong { font-size: 1rem; }
.post-sub { display: flex; align-items: center; gap: 6px; color: var(--texte-3); font-size: .8rem; font-weight: 700; }
.post-vis { display: inline-flex; color: var(--texte-3); }
.repost-label { display: flex; align-items: center; gap: 6px; color: var(--texte-3); font-size: .82rem; font-weight: 800; margin: 10px 0 2px; }
.post-body { margin: 10px 0; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; color: var(--texte-msg); }
.inline-tag, .inline-mention { border: 0; background: transparent; color: var(--violet); font: inherit; font-weight: 800; padding: 0; cursor: pointer; }
.inline-tag:hover, .inline-mention:hover { text-decoration: underline; }
.post-media { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; margin-top: 6px; }
.post-media.n1 { grid-template-columns: 1fr; }
.post-media.n2 { grid-template-columns: 1fr 1fr; }
.post-media.n3, .post-media.n4 { grid-template-columns: 1fr 1fr; }
.post-media img, .post-media video { width: 100%; max-height: 460px; object-fit: cover; border-radius: 10px; display: block; cursor: pointer; background: var(--panneau-2); }
.post-media.n1 img, .post-media.n1 video { max-height: 560px; object-fit: contain; }
.quote { border: 1px solid var(--ligne-2); border-radius: 14px; padding: 10px 12px; margin-top: 6px; background: var(--panneau-2); }
.quote.clickable { cursor: pointer; }
.quote.clickable:hover { border-color: var(--violet-clair); }
.quote-head { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 4px; }
.quote-head .avatar { width: 26px; height: 26px; font-size: 12px; }
.quote-head time { color: var(--texte-3); font-size: .75rem; font-weight: 700; }
.quote-text { color: var(--texte-msg); white-space: pre-wrap; overflow-wrap: anywhere; }

.post-actions { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--ligne); margin-top: 10px; padding-top: 6px; }
.post-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texte-2); font: inherit; font-weight: 800; font-size: .85rem; padding: 8px 12px; border-radius: 11px; cursor: pointer; }
.post-act:hover { background: var(--survol); }
.post-act.like.on { color: #E23A5A; }
.post-act.like.on svg { fill: currentColor; }
.post-act.save { margin-left: auto; }
.post-act.save.on { color: var(--violet); }
.post-act.save.on svg { fill: currentColor; }
.post-act:disabled { opacity: .5; cursor: default; }

/* Commentaires */
.post-comments { border-top: 1px solid var(--ligne); margin-top: 6px; padding-top: 10px; }
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; gap: 9px; }
.comment .avatar { width: 32px; height: 32px; font-size: 13px; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.comment-head time { color: var(--texte-3); font-size: .75rem; font-weight: 700; }
.comment-text { color: var(--texte-msg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.comment-foot { display: flex; gap: 12px; margin-top: 2px; }
.clike { border: 0; background: transparent; color: var(--texte-3); font: inherit; font-weight: 800; font-size: .78rem; padding: 2px 0; cursor: pointer; }
.clike.on { color: #E23A5A; }
.clike.del { color: var(--rouge); }
.comment-composer { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.comment-composer .avatar { width: 32px; height: 32px; font-size: 13px; }
.comment-input { flex: 1; resize: none; }

/* Modale composer */
.composer-modal { max-width: 560px; }
.composer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.composer-head .avatar { width: 42px; height: 42px; font-size: 16px; }
.composer-head small { display: block; color: var(--texte-3); font-weight: 700; }
.composer-text { width: 100%; resize: vertical; min-height: 90px; font-size: 1rem; }
.att-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.att { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne); }
.att img, .att video { width: 100%; height: 100%; object-fit: cover; }
.att-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.composer-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.composer-tools .tool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ligne); background: var(--panneau-2); color: var(--texte-2); font: inherit; font-weight: 800; font-size: .85rem; padding: 8px 12px; border-radius: 11px; cursor: pointer; }
.composer-tools .tool:hover { color: var(--violet); border-color: var(--violet-clair); }
.composer-tools .spacer { flex: 1; }
.vis-select { width: auto; min-width: 150px; }

/* Stories */
.stories { margin-bottom: 16px; }
.stories-list { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.story-item { flex: 0 0 auto; width: 78px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: inherit; }
.story-item small { font-size: .72rem; font-weight: 800; color: var(--texte-2); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--ligne); padding: 3px; }
.story-ring.unseen { background: linear-gradient(135deg, var(--violet), #ff5fa2, #ffb020); }
.story-ring.add { background: var(--ligne-2); }
.story-av { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--panneau); }
.story-av .avatar { width: 100%; height: 100%; font-size: 22px; }
.story-item.add .story-ring { position: relative; }
.story-item.add .story-ring::after { content: '+'; position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-weight: 900; display: grid; place-items: center; border: 2px solid var(--fond); }
.story-loading { align-self: center; }

/* Lecteur de story plein écran */
.story-viewer { position: fixed; inset: 0; z-index: 70; background: #0c0a12; display: grid; grid-template-rows: auto auto 1fr; color: #fff; }
.story-prog { display: flex; gap: 4px; padding: 10px 12px 0; }
.story-prog .bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; position: relative; }
.story-prog .bar.done { background: #fff; }
.story-prog .bar.active::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: storyfill 5s linear; }
@keyframes storyfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.story-head .avatar { width: 38px; height: 38px; font-size: 15px; }
.story-user { display: flex; align-items: center; gap: 7px; }
.story-user time { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; }
.story-head .spacer { flex: 1; }
.story-head .icon-btn { color: #fff; }
.story-head .icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.story-media { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; }
.story-media img, .story-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-text { width: 100%; height: 100%; min-height: 50vh; display: grid; place-items: center; text-align: center; font-family: var(--font-titre, 'Fredoka'); font-size: clamp(22px, 5vw, 40px); font-weight: 700; padding: 32px; }
.story-caption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; padding: 28px 20px 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-weight: 700; }
.story-nav { position: absolute; top: 0; bottom: 0; width: 32%; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.story-nav.left { left: 0; }
.story-nav.right { right: 0; }

/* Notifications / menus / listes */
.notif-list, .menu-list, .viewer-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.notif-row, .viewer-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 13px; padding: 10px; cursor: pointer; font: inherit; }
.notif-row:hover, .viewer-row:hover { background: var(--survol); }
.notif-row.unread { background: var(--violet-clair); }
.notif-row .avatar, .viewer-row .avatar { width: 40px; height: 40px; font-size: 15px; }
.notif-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-clair); color: var(--violet); flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-body span { font-weight: 700; }
.notif-body time, .viewer-row time { color: var(--texte-3); font-size: .78rem; font-weight: 700; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 13px; padding: 12px; cursor: pointer; font: inherit; font-weight: 700; color: var(--texte); }
.menu-item:hover { background: var(--survol); }
.menu-item.danger { color: var(--rouge); }
.viewer-row span { flex: 1; font-weight: 700; }

/* Profil : publications récentes */
.pc-posts { margin-top: 18px; border-top: 1px solid var(--ligne); padding-top: 12px; }
.pc-posts h3 { margin: 0 0 10px; font-size: 1rem; }
.post-list.compact .post { padding: 12px 12px 6px; }
.post-modal { max-width: 640px; }
.lightbox { max-width: 96vw; background: transparent; box-shadow: none; padding: 0; }

/* Boutons du rail */
.bubble.social { background: var(--panneau); color: var(--violet); border: 2px solid var(--ligne-2); }
.bubble.social.active { background: var(--violet); color: #fff; border-color: transparent; }
.bubble.notifs { background: var(--panneau); color: var(--texte-2); border: 2px solid var(--ligne-2); }
.bubble.admin { background: #10343F; color: #7FD7E8; border: 2px solid transparent; }

@media (max-width: 620px) {
  .main > .social { padding: 12px 10px 32px; }
  .social-tab span { display: none; }
  .post-actions { justify-content: space-between; }
  .post-act { padding: 8px; }
  .post-act.save { margin-left: 0; }
  .post { border-radius: 16px; padding: 12px 12px 6px; }
  .stories-list { gap: 9px; }
}
@media (min-width: 720px) {
  .story-media img, .story-media video { max-height: 78vh; border-radius: 14px; }
}

/* ============================================================================
   REFONTE VISUELLE — Connexion / Inscription + bouton Réseau social
   (section ajoutée en fin de feuille : elle surcharge les styles historiques)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) Bouton « Réseau social » du rail — véritable fonctionnalité principale
   --------------------------------------------------------------------------- */
.bubble.social {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 58px; height: 64px;
  border: none !important;
  border-radius: 19px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #fff;
  background-color: var(--violet);
  background-image: linear-gradient(150deg, var(--violet), color-mix(in srgb, var(--violet) 42%, var(--accent-2, #E0559B)));
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--violet) 78%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform var(--t-med, .26s) var(--ease, cubic-bezier(.22,.68,.36,1)),
              box-shadow var(--t-med, .26s) var(--ease, cubic-bezier(.22,.68,.36,1)),
              border-radius var(--t-med, .26s) var(--ease, cubic-bezier(.22,.68,.36,1));
}
.bubble.social .bubble-halo {
  position: absolute; inset: -45% -10% -30% -15%; z-index: 0; opacity: 0;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .55), transparent 58%);
  transition: opacity var(--t-med, .26s) var(--ease, ease); pointer-events: none;
}
.bubble.social .bubble-ic { display: inline-flex; position: relative; z-index: 1; transition: transform var(--t-med, .26s) var(--ease, ease); }
.bubble.social .bubble-text {
  position: relative; z-index: 1;
  font-family: var(--font-ui, 'Nunito', sans-serif);
  font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; opacity: .95; line-height: 1;
}
.bubble.social:hover {
  transform: translateY(-3px) scale(1.05);
  border-radius: 22px;
  box-shadow: 0 17px 32px -10px color-mix(in srgb, var(--violet) 88%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.bubble.social:hover .bubble-halo { opacity: .9; }
.bubble.social:hover .bubble-ic { transform: rotate(-6deg) scale(1.08); }
.bubble.social:active { transform: translateY(-1px) scale(.97); }
.bubble.social.active {
  box-shadow: 0 0 0 3px var(--rail), 0 0 0 6px var(--violet), 0 15px 28px -10px color-mix(in srgb, var(--violet) 88%, transparent);
}
.bubble.social.active .bubble-halo { opacity: .5; }
html[data-compact] .bubble.social { width: 50px; height: 54px; }
html[data-compact] .bubble.social .bubble-text { display: none; }

/* Grand bouton d'appel au Réseau social dans la vue Amis */
.social-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 20px 22px;
  border-radius: calc(var(--rc-card, 20px) + 2px);
  color: #fff;
  background-image: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 45%, var(--accent-2, #E0559B)));
  box-shadow: 0 20px 44px -22px color-mix(in srgb, var(--violet) 85%, transparent);
}
.social-hero-glow { position: absolute; left: -10%; top: -60%; width: 60%; height: 160%; pointer-events: none;
  background: radial-gradient(circle at 40% 50%, rgba(255, 255, 255, .35), transparent 65%); }
.social-hero-txt { position: relative; flex: 1 1 200px; min-width: 180px; }
.social-hero-kicker {
  display: inline-block; margin-bottom: 9px; padding: 3px 11px;
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .22); border-radius: 999px;
}
.social-hero h2 { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
.social-hero p { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .92); }
.social-hero-btn {
  position: relative; z-index: 1;
  background: #fff; color: var(--violet); border: none; font-weight: 900; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.social-hero-btn:hover { background: #fff; transform: translateY(-2px) scale(1.03); }
.social-hero-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border: none; border-radius: 9px;
  background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center;
  transition: background var(--t-fast, .14s) var(--ease, ease);
}
.social-hero-x:hover { background: rgba(255, 255, 255, .34); }
@media (max-width: 620px) {
  .social-hero { flex-direction: column; align-items: stretch; padding: 18px 18px 20px; }
  .social-hero-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   2) Écran de connexion / inscription
   --------------------------------------------------------------------------- */
.auth {
  min-height: 100%;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 44px);
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 660px at 12% -12%, color-mix(in srgb, var(--accent-2, #E0559B) 15%, transparent), transparent 68%),
    radial-gradient(980px 620px at 104% 112%, color-mix(in srgb, var(--accent-3, #2BB6C4) 15%, transparent), transparent 68%),
    var(--fond);
}
.auth-blobs span { position: absolute; border-radius: 50%; opacity: .5; filter: blur(46px); }
.auth-blobs span:nth-child(1) { width: 380px; height: 380px; background: color-mix(in srgb, var(--accent-2, #FFC6D6) 60%, transparent); top: -130px; left: -110px; }
.auth-blobs span:nth-child(2) { width: 300px; height: 300px; background: color-mix(in srgb, var(--or, #FFE68A) 55%, transparent); bottom: -90px; right: 6%; }
.auth-blobs span:nth-child(3) { width: 240px; height: 240px; background: color-mix(in srgb, var(--violet) 45%, transparent); top: 16%; right: -70px; }
:root[data-theme="dark"] .auth-blobs span { opacity: .16; }

.auth-card {
  position: relative; width: 100%; max-width: 432px;
  padding: clamp(26px, 5vw, 40px);
  background: var(--panneau);
  border: 1px solid var(--card-border, var(--ligne));
  border-radius: calc(var(--rc-card, 20px) + 6px);
  box-shadow: 0 26px 64px -26px rgba(var(--shadow-rgb, 80, 62, 130), .5), var(--card-shadow, 0 6px 24px rgba(80, 50, 140, .1));
  animation: auth-in .5s var(--ease, cubic-bezier(.22, .68, .36, 1)) both;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-card.shake { animation: auth-shake .45s var(--ease, ease) both; }
@keyframes auth-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

.auth-head { text-align: center; margin-bottom: 22px; }
.auth-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-titre, 'Fredoka'), sans-serif; font-weight: 700;
  font-size: clamp(28px, 6vw, 34px); letter-spacing: -.02em; color: var(--violet);
}
.auth-logo .brand-dot { width: 34px; height: 34px; border-radius: 11px; }
.auth-title { margin: 14px 0 6px; font-size: clamp(19px, 4.4vw, 23px); line-height: 1.25; color: var(--texte); }
.auth-head .auth-sub { margin: 0; color: var(--texte-2); font-size: .95rem; }

.auth .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin: 0 0 20px;
  background: var(--panneau-2); border-radius: var(--rc-btn, 14px); }
.auth .tab { border: none; background: transparent; min-height: 42px; font-weight: 800; font-size: .92rem;
  color: var(--texte-2); border-radius: calc(var(--rc-btn, 14px) - 4px);
  transition: background var(--t-fast, .14s) var(--ease, ease), color var(--t-fast, .14s) var(--ease, ease); }
.auth .tab:hover { color: var(--texte); }
.auth .tab.active { background: var(--panneau); color: var(--violet); box-shadow: 0 4px 14px -6px rgba(var(--shadow-rgb, 80, 62, 130), .4); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 800; font-size: .82rem; letter-spacing: .01em; color: var(--texte-2); }
.field-box {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  border: 2px solid var(--ligne); border-radius: var(--rc-input, 14px);
  background: var(--panneau-2);
  transition: border-color var(--t-fast, .14s) var(--ease, ease), background var(--t-fast, .14s) var(--ease, ease), box-shadow var(--t-fast, .14s) var(--ease, ease);
}
.field-box:focus-within {
  border-color: var(--violet); background: var(--panneau);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 16%, transparent);
}
.field-ic { display: inline-flex; flex-shrink: 0; color: var(--texte-3); transition: color var(--t-fast, .14s) var(--ease, ease); }
.field-box:focus-within .field-ic { color: var(--violet); }
.field-box input,
.auth-form .field-box input,
.auth-form .field-box input:focus {
  flex: 1; min-width: 0; width: auto;
  border: none; background: transparent; outline: none;
  min-height: 48px; padding: 0; box-shadow: none;
  font-weight: 700; color: var(--texte);
}
.field-box input::placeholder { color: var(--texte-3); font-weight: 600; }
.field-eye {
  flex-shrink: 0; width: 38px; height: 38px; margin-right: -6px;
  border: none; border-radius: 10px; background: transparent; color: var(--texte-3);
  display: grid; place-items: center;
  transition: background var(--t-fast, .14s) var(--ease, ease), color var(--t-fast, .14s) var(--ease, ease);
}
.field-eye:hover { background: var(--violet-clair); color: var(--violet); }
.field-eye .eye-off { display: none; }
.field-eye.showing .eye-on { display: none; }
.field-eye.showing .eye-off { display: block; }

.field-msg { margin: 0; min-height: 1.05em; padding-left: 2px; font-size: .78rem; font-weight: 700; color: var(--rouge); }
.field-msg.ok { color: var(--vert); }

.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.pw-seg { flex: 1; height: 6px; border-radius: 999px; background: var(--ligne); transition: background var(--t-fast, .14s) var(--ease, ease); }
.pw-meter[data-score="1"] .pw-seg:nth-child(1) { background: var(--rouge); }
.pw-meter[data-score="2"] .pw-seg:nth-child(-n+2) { background: #E9A23B; }
.pw-meter[data-score="3"] .pw-seg:nth-child(-n+3) { background: #7BB662; }
.pw-meter[data-score="4"] .pw-seg { background: var(--vert); }
.pw-label { min-width: 64px; text-align: right; font-size: .74rem; font-weight: 800; color: var(--texte-3); }

.auth-row { display: flex; justify-content: flex-end; margin: -4px 2px 0; }
.link-btn {
  border: none; background: none; padding: 2px; border-radius: 8px; cursor: pointer;
  color: var(--violet); font-weight: 800; font-size: .85rem;
}
.link-btn:hover { text-decoration: underline; }

#auth-error { min-height: 0; }
#auth-error:not(:empty) {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--rouge-clair); color: var(--rouge); font-size: .85rem; font-weight: 700;
}
#auth-error:not(:empty)::before {
  content: '!'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rouge); color: #fff; font-weight: 900;
  display: grid; place-items: center;
}

.auth-submit { position: relative; width: 100%; min-height: 50px; font-size: 1rem; }
.btn-spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; animation: auth-spin .7s linear infinite;
}
.auth-submit.loading .btn-spin { display: inline-block; }
.auth-submit.loading { opacity: .92; }
.auth-submit:disabled { cursor: progress; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin: 18px 0 0; font-size: .88rem; color: var(--texte-2); }

.auth-promo { margin: 22px 0 0; text-align: center; font-size: .875rem; }
.auth-promo a { font-weight: 700; color: var(--violet); text-decoration: none;
  border: 1px solid var(--ligne); border-radius: 999px; padding: 9px 16px; display: inline-block;
  transition: background var(--t-fast, .14s) var(--ease, ease), box-shadow var(--t-fast, .14s) var(--ease, ease); }
.auth-promo a:hover { background: var(--panneau-2); box-shadow: 0 6px 16px -8px rgba(var(--shadow-rgb, 80, 62, 130), .5); }

.get-app { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------------------
   3) Accessibilité : respect des préférences de mouvement
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card.shake,
  .bubble.social, .bubble.social .bubble-ic, .bubble.social .bubble-halo,
  .social-hero-btn { animation: none !important; transition: none !important; }
  .btn-spin { animation-duration: 1.4s; }
}
html[data-motion="off"] .auth-card,
html[data-motion="off"] .auth-card.shake { animation: none; }
html[data-motion="off"] .bubble.social,
html[data-motion="off"] .bubble.social .bubble-ic,
html[data-motion="off"] .bubble.social .bubble-halo { transition: none; }
html[data-motion="off"] .bubble.social:hover { transform: none; }

/* ---------------------------------------------------------------------------
   4) Pages « Mot de passe oublié » et « Réinitialisation »
      (réutilisent l'écran .auth : carte, champs, boutons et animations)
   --------------------------------------------------------------------------- */
/* Un lien stylé comme un bouton-lien ne doit pas être souligné en permanence */
a.link-btn { display: inline-block; text-decoration: none; }
a.link-btn:hover { text-decoration: underline; }

/* Pastille d'erreur générique (même rendu que #auth-error) pour les pages autonomes */
.form-error { margin: 0; min-height: 0; }
.form-error:not(:empty) {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--rouge-clair); color: var(--rouge); font-size: .85rem; font-weight: 700;
}
.form-error:not(:empty)::before {
  content: '!'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rouge); color: #fff; font-weight: 900;
  display: grid; place-items: center;
}

/* Écran de confirmation (demande envoyée / mot de passe changé) */
.auth-done { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.auth-done .done-ic {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--violet-clair); color: var(--violet);
  animation: auth-in .45s var(--ease, cubic-bezier(.22, .68, .36, 1)) both;
}
.auth-done p { margin: 0; color: var(--texte-2); font-size: .93rem; }
.auth-done .btn { width: 100%; }

/* Encart d'information discret (durée de validité, conseils) */
.auth-info {
  margin: 0; padding: 11px 13px; border-radius: 12px;
  font-size: .82rem; font-weight: 700;
  background: var(--panneau-2); color: var(--texte-2); border: 1px solid var(--ligne);
}

@media (prefers-reduced-motion: reduce) {
  .auth-done .done-ic { animation: none !important; }
}

/* ============================================================================
   AJOUTS — Sélecteur d'emojis, messages vocaux, refonte du créateur de stories
   ========================================================================== */

/* ---------- Sélecteur d'emojis ---------- */
.emoji-toggle, .emoji-btn { font-size: 1.15rem; line-height: 1; }
.emoji-panel {
  position: fixed; z-index: 120; width: 340px; max-width: calc(100vw - 16px);
  background: var(--panneau); border: 1px solid var(--ligne); border-radius: 16px;
  box-shadow: var(--ombre); padding: 10px; display: flex; flex-direction: column; gap: 8px;
  animation: emoji-in .14s ease;
}
@keyframes emoji-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.emoji-panel[hidden] { display: none; }
.emoji-head { display: flex; gap: 8px; align-items: center; }
.emoji-search { flex: 1; min-width: 0; border: 1px solid var(--ligne); background: var(--panneau-2); color: var(--texte); border-radius: 12px; padding: 8px 11px; font: inherit; font-weight: 600; outline: none; }
.emoji-search:focus { border-color: var(--violet); }
.emoji-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab { flex: 0 0 auto; border: 0; background: transparent; border-radius: 10px; padding: 5px 8px; font-size: 1.05rem; cursor: pointer; line-height: 1; }
.emoji-tab:hover { background: var(--survol); }
.emoji-tab.active { background: var(--violet-clair); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 264px; overflow-y: auto; }
.emoji-cell { border: 0; background: transparent; border-radius: 9px; padding: 5px 0; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.emoji-cell:hover { background: var(--survol); transform: scale(1.12); }
.emoji-empty { grid-column: 1 / -1; color: var(--texte-3); text-align: center; font-weight: 700; padding: 18px; }
@media (max-width: 640px) {
  .emoji-panel.emoji-sheet {
    left: 0 !important; right: 0; bottom: 0 !important; top: auto !important;
    width: 100%; max-width: 100%; border-radius: 18px 18px 0 0;
    animation: emoji-sheet-in .2s ease;
  }
  .emoji-grid { max-height: 40vh; }
}
@keyframes emoji-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Message vocal : enregistrement ---------- */
.rec-bar { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 10px 14px; border-radius: 16px; background: var(--panneau-2); border: 1px solid var(--ligne); }
.rec-bar[hidden] { display: none; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rouge); flex-shrink: 0; animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--rouge); }
.rec-hint { color: var(--texte-2); font-weight: 700; font-size: .85rem; }
.rec-spacer { flex: 1; }
.mic-btn.recording { color: var(--rouge); background: var(--rouge-clair); }

/* ---------- Message vocal : lecteur intégré ---------- */
.att-audio-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 110px; border-radius: 10px; background: var(--panneau-2); color: var(--violet); }
.att-audio-ic small { font-size: .68rem; font-weight: 800; color: var(--texte-2); }
.voice-player { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 22px; background: var(--panneau-2); border: 1px solid var(--ligne); max-width: 320px; }
.atts.mine .voice-player { background: var(--violet-clair); border-color: transparent; }
.vp-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--violet); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vp-btn:hover { background: var(--violet-fonce); }
.vp-bar { position: relative; flex: 1; height: 6px; min-width: 80px; border-radius: 6px; background: var(--ligne-2); cursor: pointer; overflow: hidden; }
.vp-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--violet); border-radius: 6px; }
.vp-time { font-size: .72rem; font-weight: 800; color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-dl { color: var(--texte-3); display: grid; place-items: center; }
.vp-dl:hover { color: var(--violet); }

/* ---------- Créateur de story ---------- */
.story-preview { margin: 6px 0; }
.story-drop {
  width: 100%; min-height: 220px; border: 2px dashed var(--ligne-2); border-radius: 18px;
  background: var(--panneau-2); color: var(--texte-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; cursor: pointer; font: inherit; font-weight: 800;
  padding: 28px 18px; text-align: center; transition: border-color .15s, background .15s, transform .15s;
}
.story-drop:hover, .story-drop.over { border-color: var(--violet); background: var(--violet-clair); color: var(--violet); }
.story-drop.over { transform: scale(1.01); }
.story-drop strong { font-size: 1rem; }
.story-drop-hint { font-weight: 600; font-size: .82rem; color: var(--texte-3); }
.story-preview-media { position: relative; border-radius: 16px; overflow: hidden; background: #000; display: grid; place-items: center; }
.story-preview-media img, .story-preview-media video { width: 100%; max-height: 46vh; object-fit: contain; display: block; }
.story-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.story-tools .btn { box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.story-upbar { height: 7px; border-radius: 7px; background: var(--ligne-2); overflow: hidden; margin: 4px 0; }
.story-upbar[hidden] { display: none; }
.story-upfill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), #ff5fa2); transition: width .15s linear; }
.story-err { margin: 0; color: var(--rouge); font-weight: 800; font-size: .85rem; }
.story-err[hidden] { display: none; }
.story-caption-input { resize: vertical; min-height: 46px; }

/* ---------- Lecteur de story : pause / gestes ---------- */
.story-prog .bar.active.paused::after { animation-play-state: paused; }
.story-media { cursor: pointer; }
.story-paused-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .55); color: #fff; font-weight: 800; font-size: .8rem;
  padding: 5px 12px; border-radius: 999px; z-index: 3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.story-paused-badge[hidden] { display: none; }

/* ---------- Fenêtre d'upsell Bulle+ ---------- */
.plus-gate { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.plus-gate .plus-gate-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--violet), #ff5fa2); color: #fff; font-size: 2rem; }
.plus-gate p { margin: 0; color: var(--texte-2); max-width: 42ch; }
.plus-gate .modal-actions { width: 100%; }

@media (max-width: 620px) { .voice-player { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .emoji-panel, .emoji-panel.emoji-sheet, .rec-dot { animation: none !important; }
}

/* =========================================================
   Support (tickets)
   ========================================================= */
.form-grid { display: flex; flex-direction: column; gap: 14px; }
.form-grid > label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--texte-2); }

.tk { display: flex; flex-direction: column; gap: 12px; }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 34px 18px; color: var(--texte-2); border: 1px dashed var(--ligne-2); border-radius: var(--rayon); }
.tk-empty svg { color: var(--violet); }
.tk-empty p { margin: 0; max-width: 40ch; }

.tk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--panneau); color: var(--texte); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.tk-item:hover { background: var(--survol); border-color: var(--ligne-2); }
.tk-item:active { transform: scale(.995); }
.tk-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-item-main strong { font-weight: 700; }
.tk-item-sub { color: var(--texte-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

.tk-badge { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ligne-2); color: var(--texte-2); background: var(--panneau-2); }
.tk-badge.ok { color: var(--vert-texte); background: var(--vert-clair); border-color: color-mix(in srgb, var(--vert) 35%, transparent); }
.tk-badge.warn { color: var(--or); background: var(--or-clair); border-color: color-mix(in srgb, var(--or) 35%, transparent); }
.tk-badge.muted { color: var(--texte-3); }

.tk-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-detail-title { flex: 1; min-width: 0; }
.tk-detail-title strong { font-size: 17px; }

.tk-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.tk-msg { max-width: 84%; align-self: flex-start; padding: 10px 14px; background: var(--panneau-2); border: 1px solid var(--ligne); border-radius: 14px; border-bottom-left-radius: 5px; }
.tk-msg.staff { align-self: flex-end; background: var(--violet-clair); border-color: var(--violet-clair-2); border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.tk-msg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.tk-msg-top strong { font-size: 13px; }
.tk-time { color: var(--texte-3); font-size: 12px; }
.tk-staff { font-size: 11px; font-weight: 700; color: var(--violet); background: var(--violet-clair); padding: 1px 8px; border-radius: 999px; }
.tk-msg-body { white-space: pre-wrap; word-break: break-word; color: var(--texte-msg); }

.tk-reopen { margin-top: 4px; }
.tk-reply { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tk-reply .form-actions { display: flex; justify-content: flex-end; }

/* ---------- Fenêtre Support (dédiée, hors paramètres) ---------- */
.support-panel { position: fixed; inset: 0; z-index: 60; background: var(--voile); display: grid; place-items: center; padding: 16px; }
.support-box { width: 100%; max-width: 760px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--fond); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.support-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--ligne); background: var(--panneau); }
.support-head h2 { margin: 0; font-size: 22px; }
.support-inner { padding: 18px 20px 26px; overflow-y: auto; }

/* ---------- Fenêtre Administration (dédiée, dans l'app) ---------- */
.admin-panel { position: fixed; inset: 0; z-index: 60; background: var(--voile); display: grid; place-items: center; padding: 16px; }
.admin-box { width: 100%; max-width: 1200px; height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--fond); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); }
.admin-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ligne); background: var(--panneau); }
.admin-head h2 { margin: 0; font-size: 20px; white-space: nowrap; }
.admin-tabs { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.admin-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--texte-2); font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.admin-tab svg { opacity: .85; flex-shrink: 0; }
.admin-tab:hover { background: var(--survol); color: var(--texte); }
.admin-tab.active { background: var(--violet); color: #fff; }
.admin-tab.active svg { opacity: 1; }
.admin-tab .nav-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.admin-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--fond); }